<script setup lang="ts">
const app = useAppStore();
const { isReady } = useAssets();
const { t } = useI18n();
</script>

<template>
  <div
    class="fixed inset-0 bg-[#181818] flex flex-col items-center justify-center gap-4"
    :class="{ 'cursor-pointer': isReady }"
    @click="isReady && (app.userHasInteracted = true)"
  >
    <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>
