From d00c8c35606b02e27e141668ad671d489f473434 Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Sun, 12 Jan 2025 15:09:48 +0900
Subject: [PATCH 01/12] wip: add animation, need to fix locations

---
 src/App.vue                    | 112 ++++++++++++++++++++++++++-------
 src/components/BaseWidget.vue  |   2 +-
 src/components/WidgetPicto.vue |   2 +
 3 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 54e8cf3..7606708 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,56 @@
 <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;
+}
+
+onMounted(() => {
+  setInterval(nextWidget, 5000);
+});
+
 </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>
@@ -49,32 +76,71 @@ const isSettingsOpen = ref(false);
 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 {
diff --git a/src/components/BaseWidget.vue b/src/components/BaseWidget.vue
index f7c8e03..8328263 100644
--- a/src/components/BaseWidget.vue
+++ b/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;
diff --git a/src/components/WidgetPicto.vue b/src/components/WidgetPicto.vue
index 9927241..25aec01 100644
--- a/src/components/WidgetPicto.vue
+++ b/src/components/WidgetPicto.vue
@@ -85,10 +85,12 @@ const pictoImages = Object.values(pictoImagesImport).map(module => (module as {
 
 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>

From 4d91544a8d113bce0cf69595acf5ce7693dbc824 Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 22:32:46 +0900
Subject: [PATCH 02/12] feat: add main animation

---
 src/components/WidgetPicto.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/WidgetPicto.vue b/src/components/WidgetPicto.vue
index 25aec01..678927a 100644
--- a/src/components/WidgetPicto.vue
+++ b/src/components/WidgetPicto.vue
@@ -79,6 +79,7 @@ const pictoImages = Object.values(pictoImagesImport).map(module => (module as {
   position: relative;
   display: flex;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
   height: 100%;
 }

From 8147e052cde8813b12127a167461f067d06feb9d Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 23:09:07 +0900
Subject: [PATCH 03/12] chore: change font colour

---
 src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.vue b/src/App.vue
index 7606708..81b0385 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,6 +71,7 @@ onMounted(() => {
   box-sizing: border-box;
   font-family: "Koruri";
   font-size: 4vmin;
+  color: #70ad47;
 }
 
 h1 {

From 875e51fcdda4808b661b72ee7c15c1a6bfbe685a Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 23:17:31 +0900
Subject: [PATCH 04/12] fixed: calendar position

---
 src/components/WidgetCalendar.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/WidgetCalendar.vue b/src/components/WidgetCalendar.vue
index 3938890..cf94287 100644
--- a/src/components/WidgetCalendar.vue
+++ b/src/components/WidgetCalendar.vue
@@ -110,6 +110,7 @@ listen("daily_reload", async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   height: 100%;
   width: 100%;
   margin: auto;
@@ -117,8 +118,11 @@ listen("daily_reload", async () => {
 
 .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;
 }
 

From ddc3ca83dd0aa32bcfea271028ce55b08e8308b8 Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 23:21:36 +0900
Subject: [PATCH 05/12] fixed: weather img background

---
 src/components/WidgetWeather.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/WidgetWeather.vue b/src/components/WidgetWeather.vue
index 6d06666..f07749b 100644
--- a/src/components/WidgetWeather.vue
+++ b/src/components/WidgetWeather.vue
@@ -91,5 +91,6 @@ listen("daily_reload", async () => {
   height: auto;
   max-height: 100%;
   object-fit: contain;
+  background-color: transparent;
 }
 </style>

From b34fce36c946fa75589849bfc578792f0d10ef4b Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 23:24:07 +0900
Subject: [PATCH 06/12] fixed: changed settings background color

---
 src/components/WindowSettings.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/WindowSettings.vue b/src/components/WindowSettings.vue
index 8dce797..78aa194 100644
--- a/src/components/WindowSettings.vue
+++ b/src/components/WindowSettings.vue
@@ -49,5 +49,6 @@ const showQR = ref(false);
   justify-content: center;
   align-items: center;
   gap: 10px;
+  background-color: #f0f0f0;
 }
 </style>

From aede7530b9bfc9d41bec31c3b01dd3bbfbef6c78 Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 23:49:41 +0900
Subject: [PATCH 07/12] fixed: settings button background + more

---
 src/App.vue                       | 5 ++---
 src/components/ButtonSettings.vue | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 81b0385..94d9caa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,9 +30,8 @@ function prevWidget() {
   widgetIndex.value = (widgetIndex.value - 1 + widgets.length) % widgets.length;
 }
 
-onMounted(() => {
-  setInterval(nextWidget, 5000);
-});
+nextWidget();
+setInterval(nextWidget, 10000);
 
 </script>
 
diff --git a/src/components/ButtonSettings.vue b/src/components/ButtonSettings.vue
index 5238f19..142f136 100644
--- a/src/components/ButtonSettings.vue
+++ b/src/components/ButtonSettings.vue
@@ -33,5 +33,6 @@ function toggleSettings() {
   width: 50px;
   height: auto;
   object-fit: cover;
+  background-color: transparent;
 }
 </style>

From e7604595ea507f43bf3b9555296181fbd4a1eff7 Mon Sep 17 00:00:00 2001
From: mame <133637346+mametakut@users.noreply.github.com>
Date: Mon, 13 Jan 2025 23:53:23 +0900
Subject: [PATCH 08/12] chore: nitpick

Co-authored-by: 1Step621 <86859447+1Step621@users.noreply.github.com>
---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 94d9caa..4a5a5a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -127,7 +127,7 @@ h1 {
   justify-content: center;
 }
 
-.movewidget {
+.moveWidget {
   position: absolute;
   width: 100%;
   height: 100%;

From 1658fade5f6455cefb0e70e348ea2f32066c1721 Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Mon, 13 Jan 2025 23:58:50 +0900
Subject: [PATCH 09/12] chore: chorei

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 4a5a5a0..75bfed5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,7 @@ setInterval(nextWidget, 10000);
     <div :class="$style.container">
       <div :class="$style.widgetContainer">
         <transition name="slide-fade">
-          <BaseWidget :class="$style.movewidget" :key="widgetIndex">
+          <BaseWidget :class="$style.moveWidget" :key="widgetIndex">
             <component :is="widgets[widgetIndex]" />
           </BaseWidget>
         </transition>

From edc8996034500a0dd5199a228b09973ab720740b Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Tue, 14 Jan 2025 00:07:38 +0900
Subject: [PATCH 10/12] chore: settings border

---
 src/App.vue                       | 2 --
 src/components/WindowSettings.vue | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 75bfed5..7ba0d9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -149,8 +149,6 @@ main {
 
 .settings {
   position: absolute;
-  border-style: solid;
-  border-color: rgb(78, 78, 78);
   top: 0vmin;
   right: 0vmin;
   transform: scale(0.8);
diff --git a/src/components/WindowSettings.vue b/src/components/WindowSettings.vue
index 78aa194..022e48a 100644
--- a/src/components/WindowSettings.vue
+++ b/src/components/WindowSettings.vue
@@ -49,6 +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>

From 9a4ba503b6d9079a5c05a7254abdd1e8fe885c7b Mon Sep 17 00:00:00 2001
From: mametakut <takuto.mameda@gmail.com>
Date: Tue, 14 Jan 2025 00:16:03 +0900
Subject: [PATCH 11/12] chore: border colour + radius

---
 src/components/WindowSettings.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/WindowSettings.vue b/src/components/WindowSettings.vue
index 022e48a..a81f681 100644
--- a/src/components/WindowSettings.vue
+++ b/src/components/WindowSettings.vue
@@ -50,8 +50,7 @@ const showQR = ref(false);
   align-items: center;
   gap: 10px;
   border-style: solid;
-  border-radius: 2.5%;
-  border-color: rgb(78, 78, 78);
+  border-radius: 30px;
   background-color: #f0f0f0;
 }
 </style>

From 9b9c53e4102503c32dbf336663ec5230f4f8eab7 Mon Sep 17 00:00:00 2001
From: mame <133637346+mametakut@users.noreply.github.com>
Date: Tue, 14 Jan 2025 00:21:58 +0900
Subject: [PATCH 12/12] chore: remove unnecessary comments

Co-authored-by: 1Step621 <86859447+1Step621@users.noreply.github.com>
---
 src/components/BaseWidget.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/BaseWidget.vue b/src/components/BaseWidget.vue
index 8328263..e51f21c 100644
--- a/src/components/BaseWidget.vue
+++ b/src/components/BaseWidget.vue
@@ -23,7 +23,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  /*background-color: #f0f0f0;*/
   border-radius: 30px;
   min-width: 0;
   min-height: 0;