evilSpins v1

app/components/Boxes.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="boxes">
+    <button
+      @click="uiStore.closeBox"
+      v-if="uiStore.isBoxSelected"
+      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
+      aria-label="close the box"
+    >
+      close
+    </button>
+    <box
+      v-for="(box, i) in dataStore.boxes.slice()"
+      :key="box.id"
+      :tabindex="dataStore.boxes.length - i"
+      :box="box"
+      @click="onBoxClick(box)"
+      class="text-center"
+      :class="box.state"
+      :id="box.id"
+    >
+      <playButton
+        @click.stop="playSelectedBox(box)"
+        :objectToPlay="box"
+        class="relative z-40 m-auto"
+      />
+      <deck :box="box" class="box-page" v-if="box.state === 'box-selected'" @click.stop />
+    </box>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Box } from '~~/types/types'
+import { useDataStore } from '~/store/data'
+import { usePlayerStore } from '~/store/player'
+import { useUiStore } from '~/store/ui'
+
+const dataStore = useDataStore()
+const playerStore = usePlayerStore()
+const uiStore = useUiStore()
+
+function openBox(id: string) {
+  uiStore.selectBox(id)
+  // Scroll to the top smoothly
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
+function onBoxClick(b: Box) {
+  if (b.state !== 'box-selected') {
+    openBox(b.id)
+  }
+}
+
+function playSelectedBox(b: Box) {
+  playerStore.playBox(b)
+}
+</script>
+
+<style lang="scss" scoped>
+.boxes {
+  @apply flex flex-col;
+
+  .box {
+    .play-button {
+      @apply relative z-40 -bottom-1/2 opacity-0;
+    }
+
+    &.box-selected .play-button {
+      @apply opacity-100;
+      bottom: 20%;
+      transition:
+        bottom 0.7s ease,
+        opacity 0.7s ease;
+    }
+  }
+}
+</style>