WIP: add TODO and small fixies

app/pages/box/[id].vue

@@ -21,8 +21,6 @@ onMounted(async () => {
   const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
   if (typeof idParam === 'string' && idParam.length > 0) {
     uiStore.selectBox(idParam)
-    //   player.playBox(box).catch(console.error)
-    // }
   }
 })
 </script>

app/pages/playground.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-8">
+    <h1 class="text-3xl font-bold text-center text-white mb-8">Card 3D Playground</h1>
+
+    <div class="container mx-auto flex flex-col lg:flex-row gap-8">
+      <!-- Controls Panel -->
+      <div class="w-full lg:w-1/3 bg-slate-800 p-6 rounded-xl shadow-lg">
+        <h2 class="text-xl font-semibold text-white mb-6">3D Controls</h2>
+
+        <div class="space-y-6">
+          <!-- Rotation -->
+          <div>
+            <h3 class="text-white font-medium mb-2">Rotation</h3>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm text-gray-300 mb-1">X-Axis (rotateX)</label>
+                <input v-model="rotationX" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ rotationX }}°</span>
+              </div>
+
+              <div>
+                <label class="block text-sm text-gray-300 mb-1">Y-Axis (rotateY)</label>
+                <input v-model="rotationY" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ rotationY }}°</span>
+              </div>
+
+              <div>
+                <label class="block text-sm text-gray-300 mb-1">Z-Axis (rotateZ)</label>
+                <input v-model="rotationZ" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ rotationZ }}°</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Translation -->
+          <div>
+            <h3 class="text-white font-medium mb-2">Position (px)</h3>
+            <div class="grid grid-cols-3 gap-4">
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">X</label>
+                <input v-model="translateX" type="range" min="-200" max="200" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ translateX }}px</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Y</label>
+                <input v-model="translateY" type="range" min="-200" max="200" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ translateY }}px</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Z</label>
+                <input v-model="translateZ" type="range" min="-500" max="500" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ translateZ }}px</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Scale -->
+          <div>
+            <h3 class="text-white font-medium mb-2">Scale</h3>
+            <div class="grid grid-cols-3 gap-4">
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">X</label>
+                <input v-model="scaleX" type="range" min="0.5" max="2" step="0.1" class="w-full"
+                  @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ scaleX }}x</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Y</label>
+                <input v-model="scaleY" type="range" min="0.5" max="2" step="0.1" class="w-full"
+                  @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ scaleY }}x</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Z</label>
+                <input v-model="scaleZ" type="range" min="0.5" max="2" step="0.1" class="w-full"
+                  @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ scaleZ }}x</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Reset Button -->
+          <button
+            class="w-full mt-6 bg-esyellow hover:bg-yellow-500 text-black font-medium py-2 px-4 rounded-md transition-colors"
+            @click="resetTransforms">
+            Reset to Default
+          </button>
+        </div>
+      </div>
+
+      <!-- Card Preview -->
+      <div class="flex-1 flex items-center justify-center min-h-[60vh] lg:min-h-auto">
+        <div class="relative w-64 h-96 transition-transform duration-300" :style="cardStyle">
+          <div class="w-full h-full" :style="{
+            transform: `
+              perspective(1000px)
+              rotateX(${rotationX}deg)
+              rotateY(${rotationY}deg)
+              rotateZ(${rotationZ}deg)
+              translate3d(${translateX}px, ${translateY}px, ${translateZ}px)
+              scale3d(${scaleX}, ${scaleY}, ${scaleZ})
+            `,
+            transformStyle: 'preserve-3d',
+            transition: 'transform 0.3s ease-out',
+            willChange: 'transform',
+            backfaceVisibility: 'visible'
+          }">
+            <div
+              class="w-full h-full bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl shadow-2xl flex items-center justify-center p-4">
+              <div class="text-center text-white">
+                <div class="text-6xl mb-2">🃏</div>
+                <h3 class="text-xl font-bold">Card Playground</h3>
+                <p class="text-sm opacity-80">Drag the sliders to transform me!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// State for 3D transformations
+import { useDataStore } from '~/store/data'
+
+const rotationX = ref(0)
+const rotationY = ref(0)
+const rotationZ = ref(0)
+const translateX = ref(0)
+const translateY = ref(0)
+const translateZ = ref(0)
+const scaleX = ref(1)
+const scaleY = ref(1)
+const scaleZ = ref(1)
+const dataStore = useDataStore()
+
+// Computed property for the card's transform style
+const cardStyle = computed(() => {
+  return {
+    transform: `
+      perspective(1000px)
+      rotateX(${rotationX.value}deg)
+      rotateY(${rotationY.value}deg)
+      rotateZ(${rotationZ.value}deg)
+      translate3d(${translateX.value}px, ${translateY.value}px, ${translateZ.value}px)
+      scale3d(${scaleX.value}, ${scaleY.value}, ${scaleZ.value})
+    `,
+    transformStyle: 'preserve-3d',
+    transition: 'transform 0.3s ease-out',
+    willChange: 'transform',
+    backfaceVisibility: 'visible'
+  }
+})
+
+// Function to update transform (for immediate feedback)
+const updateTransform = () => {
+  // The computed property will handle the update
+}
+
+// Function to reset all transforms
+const resetTransforms = () => {
+  rotationX.value = 0
+  rotationY.value = 0
+  rotationZ.value = 0
+  translateX.value = 0
+  translateY.value = 0
+  translateZ.value = 0
+  scaleX.value = 1
+  scaleY.value = 1
+  scaleZ.value = 1
+}
+
+dataStore.isLoading.value = false
+
+// Set page metadata
+definePageMeta({
+  layout: 'default'
+})
+</script>
+
+<style scoped>
+/* Add any additional styles here */
+.container {
+  perspective: 1000px;
+}
+
+/* Style range inputs */
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #475569;
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #f59e0b;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  background: #d97706;
+  transform: scale(1.2);
+}
+
+/* Card styling */
+.card-3d {
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease-out;
+  will-change: transform;
+  backface-visibility: visible;
+}
+</style>