147 lines
3.9 KiB
Vue
147 lines
3.9 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 isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
|
|
const isTouchDevice = () =>
|
|
"ontouchstart" in window || navigator.maxTouchPoints > 0;
|
|
|
|
const showFullscreenBtn = ref(true);
|
|
|
|
const toggleFullscreen = () => {
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
document.documentElement.requestFullscreen();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (isIOS()) {
|
|
showFullscreenBtn.value = false;
|
|
return;
|
|
}
|
|
|
|
if (!isTouchDevice()) return;
|
|
|
|
const landscape = window.matchMedia("(orientation: landscape)");
|
|
|
|
const onOrientationChange = (e: MediaQueryListEvent | MediaQueryList) => {
|
|
if (e.matches && !document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(() => {});
|
|
}
|
|
};
|
|
|
|
landscape.addEventListener("change", onOrientationChange);
|
|
|
|
onUnmounted(() => {
|
|
landscape.removeEventListener("change", onOrientationChange);
|
|
});
|
|
});
|
|
</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>
|
|
|
|
<button
|
|
v-if="showFullscreenBtn"
|
|
class="fullscreen-btn"
|
|
@click="toggleFullscreen"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fullscreen-btn {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 4px;
|
|
background: none;
|
|
border: none;
|
|
color: #666;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.fullscreen-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
</style>
|