ウィジェット表示のアニメーションを追加しました。

src/App.vue

@@ -1,29 +1,55 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import BaseWidget from "./components/BaseWidget.vue";
 import WidgetWeather from "./components/WidgetWeather.vue";
 import WidgetNews from "./components/WidgetNews.vue";
 import WidgetAtCoder from "./components/WidgetAtCoder.vue";
+import WidgetCalendar from './components/WidgetCalendar.vue';
+import WidgetClock from './components/WidgetClock.vue';
 import WindowSettings from "./components/WindowSettings.vue";
 import ButtonSettings from "./components/ButtonSettings.vue";
+import WidgetPicto from './components/WidgetPicto.vue';
 
 const isSettingsOpen = ref(false);
+
+const widgets = [
+  WidgetWeather,
+  WidgetNews,
+  WidgetAtCoder,
+  WidgetCalendar,
+  WidgetClock
+];
+
+const widgetIndex = ref(0);
+
+function nextWidget() {
+  widgetIndex.value = (widgetIndex.value + 1) % widgets.length;
+}
+
+function prevWidget() {
+  widgetIndex.value = (widgetIndex.value - 1 + widgets.length) % widgets.length;
+}
+
+nextWidget();
+setInterval(nextWidget, 10000);
+
 </script>
 
 <template>
   <main>
     <ButtonSettings :class="$style.buttonsettings" v-model="isSettingsOpen" />
-    <dev :class="$style.container">
-      <BaseWidget :class="$style.weather">
-        <WidgetWeather />
-      </BaseWidget>
-      <BaseWidget :class="$style.news">
-        <WidgetNews />
-      </BaseWidget>
-      <BaseWidget :class="$style.atcoder">
-        <WidgetAtCoder />
+    <div :class="$style.container">
+      <div :class="$style.widgetContainer">
+        <transition name="slide-fade">
+          <BaseWidget :class="$style.moveWidget" :key="widgetIndex">
+            <component :is="widgets[widgetIndex]" />
+          </BaseWidget>
+        </transition>
+      </div>
+      <BaseWidget :class="$style.picto">
+        <WidgetPicto />
       </BaseWidget>
-    </dev>
+    </div>
     <BaseWidget :class="$style.settings" v-if="isSettingsOpen">
       <WindowSettings />
     </BaseWidget>
@@ -44,37 +70,77 @@ const isSettingsOpen = ref(false);
   box-sizing: border-box;
   font-family: "Koruri";
   font-size: 4vmin;
+  color: #70ad47;
 }
 
 h1 {
   font-size: 6vmin;
 }
+
+.slide-fade-enter-active {
+  transition: opacity 1.5s ease, transform 3.0s ease;
+}
+
+.slide-fade-leave-active {
+  transition: opacity 1.5s ease, transform 3.0s ease;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-50vh);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(50vh);
+}
+
+.slide-fade-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
 </style>
 
 <style module>
 .container {
-  display: grid;
+  display: flex;
   width: 100vw;
   height: 100vh;
   padding: 10vmin;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
   gap: 8vmin;
+  align-items: center;
+  justify-items: center;
 }
 
-.weather {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
+.widgetContainer {
+  position: absolute;
+  top: 17.5vh;
+  width: 55vw;
+  height: 65vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.news {
-  grid-column: 2 / 3;
-  grid-row: 1 / 3;
+.moveWidget {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
-.atcoder {
-  grid-column: 1 /2;
-  grid-row: 2 / 3;
+.picto {
+  position: absolute;
+  right: 5vw;
+  width: 30vw;
+  height: 65vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 main {
@@ -83,8 +149,6 @@ main {
 
 .settings {
   position: absolute;
-  border-style: solid;
-  border-color: rgb(78, 78, 78);
   top: 0vmin;
   right: 0vmin;
   transform: scale(0.8);

src/components/BaseWidget.vue

@@ -23,7 +23,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #f0f0f0;
+  /*background-color: #f0f0f0;*/
   border-radius: 30px;
   min-width: 0;
   min-height: 0;

src/components/ButtonSettings.vue

@@ -33,5 +33,6 @@ function toggleSettings() {
   width: 50px;
   height: auto;
   object-fit: cover;
+  background-color: transparent;
 }
 </style>

src/components/WidgetCalendar.vue

@@ -110,15 +110,19 @@ listen("daily_reload", async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   height: 100%;
   width: 100%;
   margin: auto;
 }
 
 .header {
   text-align: center;
-  margin-bottom: 10px;
-  font-size: small;
+  margin-bottom: 5%;
+}
+
+.header h2 {
+  font-size: 6vmin;
 }
 
 table {
@@ -132,12 +136,12 @@ th {
 }
 
 td {
-  font-size: medium;
+  font-size: 3vmin;
   width: 14.28%;
   text-align: center;
   vertical-align: middle;
   box-sizing: border-box;
-  padding: 1.5%;
+  padding: 2.25%;
   border: 1px solid #ddd;
 }
 

src/components/WidgetPicto.vue

@@ -79,16 +79,19 @@ const pictoImages = Object.values(pictoImagesImport).map(module => (module as {
   position: relative;
   display: flex;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
   height: 100%;
 }
 
 img {
   max-width: 200px;
+  max-height: 200px;
   height: auto;
   object-fit: contain;
   transition: all 20s ease;
   background-color: rgba(240, 240, 240, 0.8);
   /* #f0f0f0 = rgb (240, 240, 240)*/
 }
+
 </style>

src/components/WidgetWeather.vue

@@ -91,5 +91,6 @@ listen("daily_reload", async () => {
   height: auto;
   max-height: 100%;
   object-fit: contain;
+  background-color: transparent;
 }
 </style>

src/components/WindowSettings.vue

@@ -49,5 +49,9 @@ const showQR = ref(false);
   justify-content: center;
   align-items: center;
   gap: 10px;
+  border-style: solid;
+  border-radius: 2.5%;
+  border-color: rgb(78, 78, 78);
+  background-color: #f0f0f0;
 }
 </style>