pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: colorize the ui based on the app color

Browse Source
This commit is contained in:
Stevan
2025-12-28 23:54:23 +01:00
parent 22c9fe2742
commit dafdbdc533
20 changed files with 194 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/components/Common/Bars.vue Normal file
View File

@@ -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>

56
app/components/Common/ButtonSelector.vue
View File

@@ -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();
});

19
app/components/Contact/BottomScreen/BottomScreen.vue
View File

@@ -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]"

14
app/components/Home/TopScreen/Calendar.vue
View File

@@ -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,
);
}

3
app/components/Home/TopScreen/Clock.vue
View File

@@ -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);

16
app/components/Home/TopScreen/StatusBar.vue
View File

@@ -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";

2
app/components/Settings/BottomScreen/Background.vue
View File

@@ -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({

1
app/components/Settings/BottomScreen/BottomScreen.vue
View File

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

14
app/components/Settings/TopScreen/Calendar.vue
View File

@@ -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,
);
}

3
app/components/Settings/TopScreen/Clock.vue
View File

@@ -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);

16
app/components/Settings/TopScreen/StatusBar.vue
View File

@@ -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";