66 lines
1.1 KiB
Vue
66 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
yOffset?: number;
|
|
opacity?: number;
|
|
title?: string | undefined;
|
|
}>(),
|
|
{
|
|
yOffset: 0,
|
|
opacity: 1,
|
|
title: undefined,
|
|
},
|
|
);
|
|
|
|
const { onRender } = useScreen();
|
|
|
|
const app = useAppStore();
|
|
const { assets } = useAssets();
|
|
|
|
const BAR_WIDTH = 256;
|
|
const BAR_HEIGHT = 24;
|
|
const TITLE_Y = 5;
|
|
|
|
onRender((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,
|
|
);
|
|
}, 50);
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|