Platine etape 1

app/components/Box.vue

@@ -5,6 +5,7 @@
         <img v-if="isCompilation" class="cover absolute" :src="`/${box.id}/${box.activeSide}/cover.jpg`" alt="" />
         <div v-else class="size-full flex flex-col justify-center items-center text-7xl text-black"
           v-html="box.description" />
+        <CinemaScreen />
       </div>
       <div class="face back flex flex-row flex-wrap items-start p-4 overflow-hidden"
         :class="{ 'overflow-y-scroll': !isCompilation }" ref="backFace">
@@ -142,13 +143,6 @@ function rotateBox() {
   applyTransform(0.8)
 }
 
-watch(
-  () => props.box.activeSide,
-  () => {
-    rotateBox()
-  }
-)
-
 // --- Inertie ---
 function tickInertia() {
   if (!enableInertia) return
@@ -246,6 +240,10 @@ onBeforeUnmount(() => {
 })
 
 // --- Watchers ---
+watch(
+  () => props.box.activeSide,
+  () => rotateBox()
+)
 watch(
   () => props.box.state,
   () => applyBoxState()
@@ -255,7 +253,10 @@ watch(
   () => applyColor(),
   { deep: true }
 )
-watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
+watch(
+  isDraggable,
+  (enabled) => (enabled ? addListeners() : removeListeners())
+)
 </script>
 
 <style lang="scss" scoped>