feat: colorize the ui based on the app color

app/components/Common/Bars.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    yOffset?: number;
+    opacity?: number;
+    title?: string | undefined;
+  }>(),
+  {
+    yOffset: 0,
+    opacity: 1,
+    title: undefined,
+  },
+);
+
+const app = useAppStore();
+const { assets } = useAssets();
+
+const BAR_WIDTH = 256;
+const BAR_HEIGHT = 24;
+const TITLE_Y = 5;
+
+useRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
+
+  // top bar
+  ctx.drawImage(
+    assets.common.barsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    -props.yOffset,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
+
+  if (props.title) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "10px NDS10";
+    fillTextCentered(ctx, props.title, 0, TITLE_Y - props.yOffset, 256);
+  }
+
+  ctx.scale(1, -1);
+
+  // bottom bar
+  ctx.drawImage(
+    assets.common.barsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    -192 - props.yOffset,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Common/ButtonSelector.vue

@@ -9,9 +9,11 @@ const props = withDefaults(
   },
 );
 
+const app = useAppStore();
 const { assets } = useAssets();
 
 const ANIMATION_SPEED = 0.25;
+const CORNER_SIZE = 11;
 
 let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
@@ -43,21 +45,67 @@ useRender((ctx) => {
 
   ctx.globalAlpha = props.opacity;
 
-  ctx.drawImage(assets.common.selectorCorner, x, y);
+  const spriteY = (app.color.row * 4 + app.color.col) * CORNER_SIZE;
 
+  // Top-left corner
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    x,
+    y,
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
+
+  // Top-right corner
   ctx.save();
   ctx.scale(-1, 1);
-  ctx.drawImage(assets.common.selectorCorner, -(x + w), y);
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    -(x + w),
+    y,
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
   ctx.restore();
 
+  // Bottom-left corner
   ctx.save();
   ctx.scale(1, -1);
-  ctx.drawImage(assets.common.selectorCorner, x, -(y + h));
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    x,
+    -(y + h),
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
   ctx.restore();
 
+  // Bottom-right corner
   ctx.save();
   ctx.scale(-1, -1);
-  ctx.drawImage(assets.common.selectorCorner, -(x + w), -(y + h));
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    -(x + w),
+    -(y + h),
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
   ctx.restore();
 });
 

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -4,7 +4,6 @@
 import Background from "./Background.vue";
 import Buttons from "./Buttons.vue";
 import ButtonSelector from "~/components/Common/ButtonSelector.vue";
-import Bars from "./Bars.vue";
 
 const store = useContactStore();
 const { open: openModal, state: modalState } = useConfirmationModal();
@@ -105,16 +104,24 @@ useKeyDown((key) => {
     "
   />
 
-  <Bars />
+  <CommonBars
+    title="Choose a Chat Room to join."
+    :opacity="
+      store.isIntro ? store.intro.stage3Opacity : store.outro.stage2Opacity
+    "
+    :y-offset="store.isIntro ? store.intro.barOffsetY : 0"
+  />
   <CommonConfirmationModal />
   <CommonButtons
     :y-offset="
-      store.isIntro
-        ? store.intro.bottomBarY - (SCREEN_HEIGHT - 24)
-        : modalState.buttonsYOffset
+      store.isIntro ? store.intro.barOffsetY : modalState.buttonsYOffset
     "
     :opacity="
-      store.isIntro ? store.intro.stage3Opacity : store.outro.stage2Opacity
+      store.isIntro
+        ? store.intro.stage3Opacity
+        : store.isOutro
+          ? store.outro.stage2Opacity
+          : 1
     "
     b-label="Quit"
     :a-label="ACTIONS[selectedButton][0]"

app/components/Home/TopScreen/Calendar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 // NOTE: calendar background is handled by TopScreenBackground
+const app = useAppStore();
 const store = useHomeStore();
 
 const { assets } = useAssets();
@@ -12,6 +13,7 @@ useRender((ctx) => {
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
   const CALENDAR_TOP = 64;
+  const SELECTOR_SIZE = 13;
 
   ctx.fillStyle = "#343434";
 
@@ -61,9 +63,15 @@ useRender((ctx) => {
 
         if (now.getDate() === day) {
           ctx.drawImage(
-            assets.home.topScreen.calendar.daySelector,
-            cellLeft,
-            cellTop,
+            assets.home.topScreen.calendar.daySelectorsSheet,
+            0,
+            (app.color.row * 4 + app.color.col) * SELECTOR_SIZE,
+            SELECTOR_SIZE,
+            SELECTOR_SIZE,
+            cellLeft + 1,
+            cellTop + 1,
+            SELECTOR_SIZE,
+            SELECTOR_SIZE,
           );
         }
 

app/components/Home/TopScreen/Clock.vue

@@ -2,6 +2,7 @@
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
+const app = useAppStore();
 const store = useHomeStore();
 
 const { assets } = useAssets();
@@ -86,7 +87,7 @@ useRender((ctx) => {
     23,
     2,
   );
-  renderHand(now.getSeconds() / 60, "#49db8a", 35, 2);
+  renderHand(now.getSeconds() / 60, app.color.hex, 35, 2);
 
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);

app/components/Home/TopScreen/StatusBar.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+const app = useAppStore();
 const store = useHomeStore();
 
 const { assets } = useAssets();
 
+const BAR_WIDTH = 256;
+const BAR_HEIGHT = 16;
+
 useRender((ctx) => {
   const TEXT_Y = 11;
 
@@ -10,7 +14,17 @@ useRender((ctx) => {
 
   ctx.globalAlpha =
     store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1;
-  ctx.drawImage(assets.home.topScreen.statusBar.statusBar, 0, 0);
+  ctx.drawImage(
+    assets.home.topScreen.statusBar.statusBarsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    0,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
 
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";

app/components/Settings/BottomScreen/Background.vue

@@ -3,8 +3,6 @@ const { assets } = useAssets();
 
 useRender((ctx) => {
   ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
-  ctx.drawImage(assets.settings.bottomScreen.topBar, 0, 0);
-  ctx.drawImage(assets.settings.bottomScreen.bottomBar, 0, 168);
 });
 
 defineOptions({

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -5,5 +5,6 @@ import Menus from "./Menus/Menus.vue";
 
 <template>
   <Background />
+  <CommonBars />
   <Menus />
 </template>

app/components/Settings/TopScreen/Calendar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const app = useAppStore();
 const { assets } = useAssets();
 
 useRender((ctx) => {
@@ -11,6 +12,7 @@ useRender((ctx) => {
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
   const CALENDAR_TOP = 64;
+  const SELECTOR_SIZE = 13;
 
   ctx.fillStyle = "#343434";
 
@@ -50,9 +52,15 @@ useRender((ctx) => {
 
         if (now.getDate() === day) {
           ctx.drawImage(
-            assets.home.topScreen.calendar.daySelector,
-            cellLeft,
-            cellTop,
+            assets.home.topScreen.calendar.daySelectorsSheet,
+            0,
+            (app.color.row * 4 + app.color.col) * SELECTOR_SIZE,
+            SELECTOR_SIZE,
+            SELECTOR_SIZE,
+            cellLeft + 1,
+            cellTop + 1,
+            SELECTOR_SIZE,
+            SELECTOR_SIZE,
           );
         }
 

app/components/Settings/TopScreen/Clock.vue

@@ -2,6 +2,7 @@
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
+const app = useAppStore();
 const { assets } = useAssets();
 
 function drawLine(
@@ -76,7 +77,7 @@ useRender((ctx) => {
     23,
     2,
   );
-  renderHand(now.getSeconds() / 60, "#49db8a", 35, 2);
+  renderHand(now.getSeconds() / 60, app.color.hex, 35, 2);
 
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);

app/components/Settings/TopScreen/StatusBar.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts">
+const app = useAppStore();
 const { assets } = useAssets();
 
+const BAR_WIDTH = 256;
+const BAR_HEIGHT = 16;
+
 useRender((ctx) => {
   const TEXT_Y = 11;
 
-  ctx.drawImage(assets.home.topScreen.statusBar.statusBar, 0, 0);
+  ctx.drawImage(
+    assets.home.topScreen.statusBar.statusBarsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    0,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
 
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";

app/stores/contact.ts

@@ -9,8 +9,7 @@ export const useContactStore = defineStore("contact", {
 
       titleY: SCREEN_HEIGHT,
 
-      topBarY: -20,
-      bottomBarY: SCREEN_HEIGHT + 20,
+      barOffsetY: 20,
     },
 
     outro: {
@@ -60,13 +59,11 @@ export const useContactStore = defineStore("contact", {
           this.intro,
           {
             stage3Opacity: 0,
-            topBarY: -20,
-            bottomBarY: SCREEN_HEIGHT - 4,
+            barOffsetY: 20,
           },
           {
             stage3Opacity: 1,
-            topBarY: 0,
-            bottomBarY: SCREEN_HEIGHT - 24,
+            barOffsetY: 0,
             duration: 0.1,
             ease: "none",
           },
@@ -93,7 +90,6 @@ export const useContactStore = defineStore("contact", {
       const timeline = gsap.timeline({
         onComplete: () => {
           setTimeout(() => {
-            this.isOutro = false;
             const router = useRouter();
             router.push({ query: {} });
           }, 2000);

i18n/locales/en.json

@@ -29,7 +29,12 @@
     },
     "user": {
       "title": "User",
-      "description": "Enter user informations."
+      "description": "Enter user informations.",
+
+      "color": {
+        "title": "Color",
+        "description": "Select your favorite color."
+      }
     },
     "touchScreen": {
       "title": "Touch Screen",