Pihkaal
ee60239f3f
All checks were successful
Build and Push Docker Image / build (push) Successful in 2m21s
72 lines
2.4 KiB
Vue
72 lines
2.4 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);
|
|
</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 />
|
|
|
|
<NDS3D
|
|
v-if="topScreenCanvas && bottomScreenCanvas"
|
|
:top-screen-canvas="topScreenCanvas"
|
|
:bottom-screen-canvas="bottomScreenCanvas"
|
|
/>
|
|
</TresCanvas>
|
|
|
|
<NDS2D
|
|
:style="{
|
|
visibility: app.settings.renderingMode === '3d' ? 'hidden' : 'visible',
|
|
}"
|
|
>
|
|
<template #topScreen>
|
|
<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>
|
|
</template>
|
|
<template #bottomScreen>
|
|
<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>
|
|
</template>
|
|
</NDS2D>
|
|
</div>
|
|
</template>
|