128 lines
6.3 KiB
Vue
128 lines
6.3 KiB
Vue
<script setup lang="ts">
|
|
const app = useAppStore();
|
|
const { isReady } = useAssets();
|
|
const { t } = useI18n();
|
|
|
|
const onClick = () => {
|
|
if (!isReady.value) return;
|
|
app.userHasInteracted = true;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="fixed inset-0 bg-[#181818] flex flex-col items-center justify-center gap-4"
|
|
:class="{ 'cursor-pointer': isReady }"
|
|
@click="onClick"
|
|
>
|
|
<svg
|
|
viewBox="0 0 512 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-20 transition-[fill] duration-500 animate-pulse"
|
|
:style="{ fill: isReady ? '#888888' : '#2a2a2a' }"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M488,32c0-17.645-14.355-32-32-32H56C38.355,0,24,14.355,24,32v215c0,0.113,0.012,0.223,0.017,0.334
|
|
C24.011,247.556,24,247.777,24,248c0,7.331,3.307,13.9,8.504,18.306C27.23,272.013,24,279.635,24,288v192c0,17.645,14.355,32,32,32
|
|
h400c17.645,0,32-14.355,32-32V288c0-8.365-3.23-15.987-8.504-21.694C484.693,261.9,488,255.331,488,248
|
|
c0-0.223-0.011-0.444-0.017-0.666c0.005-0.112,0.017-0.222,0.017-0.334V32z M112,256v-16h280v16H112z M56,256h-8
|
|
c-4.411,0-8-3.589-8-8s3.589-8,8-8h48v16H56z M408,240h56c4.411,0,8,3.589,8,8s-3.589,8-8,8h-8h-48V240z M56,16h400
|
|
c8.822,0,16,7.178,16,16v193.376c-2.504-0.888-5.195-1.376-8-1.376H48c-2.804,0-5.496,0.488-8,1.376V32C40,23.178,47.178,16,56,16z
|
|
M472,480c0,8.823-7.178,16-16,16H56c-8.822,0-16-7.177-16-16V288c0-8.822,7.178-16,16-16h400c8.822,0,16,7.178,16,16V480z"
|
|
/>
|
|
<path
|
|
d="M368,296H144c-4.418,0-8,3.582-8,8v160c0,4.418,3.582,8,8,8h224c4.418,0,8-3.582,8-8V304C376,299.582,372.418,296,368,296z
|
|
M360,456H152V312h208V456z"
|
|
/>
|
|
<path
|
|
d="M144,208h224c4.418,0,8-3.582,8-8V40c0-4.418-3.582-8-8-8H144c-4.418,0-8,3.582-8,8v160C136,204.418,139.582,208,144,208z
|
|
M152,48h208v144H152V48z"
|
|
/>
|
|
<path
|
|
d="M120,368H96v-24c0-4.418-3.582-8-8-8s-8,3.582-8,8v24H56c-4.418,0-8,3.582-8,8s3.582,8,8,8h24v24c0,4.418,3.582,8,8,8
|
|
s8-3.582,8-8v-24h24c4.418,0,8-3.582,8-8S124.418,368,120,368z"
|
|
/>
|
|
<path
|
|
d="M424,396c-6.617,0-12,5.383-12,12s5.383,12,12,12s12-5.383,12-12S430.617,396,424,396z"
|
|
/>
|
|
<path
|
|
d="M424,340c-6.617,0-12,5.383-12,12s5.383,12,12,12s12-5.383,12-12S430.617,340,424,340z"
|
|
/>
|
|
<path
|
|
d="M452,368c-6.617,0-12,5.383-12,12s5.383,12,12,12s12-5.383,12-12S458.617,368,452,368z"
|
|
/>
|
|
<path
|
|
d="M396,368c-6.617,0-12,5.383-12,12s5.383,12,12,12s12-5.383,12-12S402.617,368,396,368z"
|
|
/>
|
|
<path
|
|
d="M400,136c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.561,2.34-5.66c0-2.1-0.85-4.17-2.34-5.66
|
|
c-1.49-1.49-3.55-2.34-5.66-2.34c-2.11,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.55-2.34,5.66c0,2.11,0.85,4.17,2.34,5.66
|
|
C395.83,135.15,397.89,136,400,136z"
|
|
/>
|
|
<path
|
|
d="M112,136c2.1,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.561,2.34-5.66c0-2.1-0.85-4.17-2.34-5.66
|
|
c-1.49-1.49-3.56-2.34-5.66-2.34s-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.55-2.34,5.66c0,2.11,0.85,4.17,2.34,5.66
|
|
C107.83,135.15,109.9,136,112,136z"
|
|
/>
|
|
<path
|
|
d="M88,136c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66
|
|
C92.17,120.85,90.1,120,88,120c-2.11,0-4.17,0.85-5.66,2.34C80.85,123.83,80,125.89,80,128c0,2.1,0.85,4.17,2.34,5.66
|
|
C83.83,135.15,85.89,136,88,136z"
|
|
/>
|
|
<path
|
|
d="M64,136c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66
|
|
C68.17,120.85,66.11,120,64,120c-2.11,0-4.17,0.85-5.66,2.34C56.85,123.83,56,125.89,56,128c0,2.11,0.85,4.17,2.34,5.66
|
|
C59.83,135.15,61.89,136,64,136z"
|
|
/>
|
|
<path
|
|
d="M64,112c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66C68.17,96.85,66.11,96,64,96
|
|
c-2.11,0-4.17,0.85-5.66,2.34C56.85,99.83,56,101.89,56,104c0,2.11,0.85,4.17,2.34,5.66C59.83,111.15,61.89,112,64,112z"
|
|
/>
|
|
<path
|
|
d="M88,112c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66C92.17,96.85,90.1,96,88,96
|
|
c-2.11,0-4.17,0.85-5.66,2.34C80.85,99.83,80,101.89,80,104c0,2.1,0.85,4.17,2.34,5.66C83.83,111.15,85.89,112,88,112z"
|
|
/>
|
|
<path
|
|
d="M112,112c2.1,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.561,2.34-5.66c0-2.1-0.85-4.17-2.34-5.66
|
|
C116.17,96.85,114.11,96,112,96c-2.1,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.55-2.34,5.66c0,2.11,0.85,4.17,2.34,5.66
|
|
C107.83,111.15,109.9,112,112,112z"
|
|
/>
|
|
<path
|
|
d="M400,112c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.561,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66
|
|
C404.17,96.85,402.11,96,400,96c-2.11,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.55-2.34,5.66c0,2.11,0.85,4.17,2.34,5.66
|
|
C395.83,111.15,397.89,112,400,112z"
|
|
/>
|
|
<path
|
|
d="M424,112c2.1,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.561,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66
|
|
C428.17,96.85,426.11,96,424,96c-2.11,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.56-2.34,5.66c0,2.1,0.85,4.17,2.34,5.66
|
|
C419.83,111.15,421.89,112,424,112z"
|
|
/>
|
|
<path
|
|
d="M448,112c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66
|
|
C452.17,96.85,450.11,96,448,96c-2.11,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.55-2.34,5.66c0,2.11,0.85,4.17,2.34,5.66
|
|
C443.83,111.15,445.89,112,448,112z"
|
|
/>
|
|
<path
|
|
d="M424,136c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.1-0.85-4.17-2.34-5.66
|
|
c-1.49-1.49-3.55-2.34-5.66-2.34c-2.11,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.56-2.34,5.66c0,2.1,0.85,4.17,2.34,5.66
|
|
C419.83,135.15,421.89,136,424,136z"
|
|
/>
|
|
<path
|
|
d="M448,136c2.11,0,4.17-0.85,5.66-2.34c1.49-1.49,2.34-3.55,2.34-5.66c0-2.11-0.85-4.17-2.34-5.66
|
|
c-1.49-1.49-3.55-2.34-5.66-2.34c-2.11,0-4.17,0.85-5.66,2.34c-1.49,1.49-2.34,3.55-2.34,5.66c0,2.11,0.85,4.17,2.34,5.66
|
|
C443.83,135.15,445.89,136,448,136z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<span
|
|
class="select-none transition-colors duration-500 animate-pulse"
|
|
:style="{ color: isReady ? '#888888' : '#2a2a2a', fontFamily: 'NDS10' }"
|
|
>
|
|
{{
|
|
isReady ? t("loadingScreen.clickToStart") : t("loadingScreen.loading")
|
|
}}
|
|
</span>
|
|
</div>
|
|
</template>
|