125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import type { Screen as NDSScreen } from "#components";
|
|
|
|
type ScreenInstance = InstanceType<typeof NDSScreen>;
|
|
|
|
const { isReady } = useAssets();
|
|
|
|
const app = useAppStore();
|
|
|
|
const topScreen = useTemplateRef<ScreenInstance>("topScreen");
|
|
const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
|
|
|
|
const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
|
|
const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
|
|
|
|
const a = useAchievementsStore();
|
|
|
|
const keyToButton: Record<string, string> = {
|
|
ArrowUp: "UP",
|
|
ArrowDown: "DOWN",
|
|
ArrowLeft: "LEFT",
|
|
ArrowRight: "RIGHT",
|
|
d: "A",
|
|
s: "B",
|
|
z: "X",
|
|
q: "Y",
|
|
" ": "SELECT",
|
|
Enter: "START",
|
|
};
|
|
|
|
// events are dispatched from NDS.vue in 3d mode
|
|
// events are dispatched from here in 2d mode
|
|
// that's a bit dirty but who cares, there is a lot of dirty things going on here
|
|
// like who choose Nuxt to build such an app
|
|
useKeyDown((key) => {
|
|
if (app.settings.renderingMode === "3d") return;
|
|
const button = keyToButton[key];
|
|
if (button) {
|
|
window.dispatchEvent(
|
|
new KeyboardEvent("keydown", { key: `NDS_${button}` }),
|
|
);
|
|
}
|
|
|
|
// testing purpose only
|
|
if (key === "m") {
|
|
a.reset();
|
|
} else if (key === "o") {
|
|
for (const ach of ACHIEVEMENTS) {
|
|
a.unlock(ach.id);
|
|
}
|
|
} else if (key === "p") {
|
|
for (const ach of ACHIEVEMENTS) {
|
|
if (!a.isUnlocked(ach.id)) {
|
|
a.unlock(ach.id);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
useKeyUp((key) => {
|
|
if (app.settings.renderingMode === "3d") return;
|
|
const button = keyToButton[key];
|
|
if (button) {
|
|
window.dispatchEvent(new KeyboardEvent("keyup", { key: `NDS_${button}` }));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<LoadingScreen v-if="!isReady" />
|
|
<div v-else>
|
|
<TresCanvas
|
|
v-if="app.settings.renderingMode === '3d'"
|
|
window-size
|
|
clear-color="#181818"
|
|
>
|
|
<TresPerspectiveCamera :args="[45, 1, 0.001, 1000]" />
|
|
|
|
<TresAmbientLight />
|
|
<TresDirectionalLight />
|
|
|
|
<NDS
|
|
v-if="topScreenCanvas && bottomScreenCanvas"
|
|
:top-screen-canvas="topScreenCanvas"
|
|
:bottom-screen-canvas="bottomScreenCanvas"
|
|
/>
|
|
</TresCanvas>
|
|
|
|
<div
|
|
:style="{
|
|
visibility: app.settings.renderingMode === '3d' ? 'hidden' : 'visible',
|
|
}"
|
|
>
|
|
<div>
|
|
<Screen ref="topScreen">
|
|
<IntroTopScreen v-if="!app.booted" />
|
|
<HomeTopScreen v-else-if="app.screen === 'home'" />
|
|
<ContactTopScreen v-else-if="app.screen === 'contact'" />
|
|
<ProjectsTopScreen v-else-if="app.screen === 'projects'" />
|
|
<SettingsTopScreen v-else-if="app.screen === 'settings'" />
|
|
<GalleryTopScreen v-else-if="app.screen === 'gallery'" />
|
|
<AchievementsTopScreen v-else-if="app.screen === 'achievements'" />
|
|
|
|
<AchievementsNotification />
|
|
<CommonConfetti screen="top" />
|
|
</Screen>
|
|
</div>
|
|
<div>
|
|
<Screen ref="bottomScreen">
|
|
<IntroBottomScreen v-if="!app.booted" />
|
|
<HomeBottomScreen v-else-if="app.screen === 'home'" />
|
|
<ContactBottomScreen v-else-if="app.screen === 'contact'" />
|
|
<ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
|
|
<SettingsBottomScreen v-else-if="app.screen === 'settings'" />
|
|
<GalleryBottomScreen v-else-if="app.screen === 'gallery'" />
|
|
<AchievementsBottomScreen v-else-if="app.screen === 'achievements'" />
|
|
|
|
<CommonConfetti screen="bottom" />
|
|
</Screen>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|