update uwu

site/pages/index.vue

@@ -1,20 +1,88 @@
 <template>
-
-  <div class="uwu-floating">
-      
-
-  </div>
-
   <div class="caramel-wrapper">
     <div class="caramel-stage">
-    <video class="caramel-video" autoplay loop playsinline muted preload="auto">
-      <source src="~/assets/caramelldansen.webm" type="video/webm" />
-      quick turn on video
-    </video>
+      <div class="caramel-float-anchor">
+       <video
+          ref="videoEl"
+          class="caramel-video"
+          autoplay
+          loop
+          muted
+          playsinline
+          preload="auto"
+        >
+          <source src="~/assets/caramelldansen.webm" type="video/webm" />
+        </video>
+
+        <button
+          class="audio-toggle"
+          @click="toggleAudio"
+          :aria-label="muted ? 'Unmute video' : 'Mute video'"
+        >
+          {{ muted ? '🔇' : '🔊' }}
+        </button>
+
+        <div
+          class="uwu-floating"
+          :data-pos="position"
+        >
+          :3
+        </div>
+      </div>
     </div>
   </div>
-  
+
   <div class="fixed bottom-4 right-6 opacity-40 text-xs select-none">
     gimme.pet
   </div>
-</template>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const videoEl = ref<HTMLVideoElement | null>(null)
+const muted = ref(true)
+
+function toggleAudio() {
+  if (!videoEl.value) return
+
+  muted.value = !muted.value
+  videoEl.value.muted = muted.value
+
+  if (!muted.value) {
+    videoEl.value.volume = 0.8
+    videoEl.value.play().catch(() => {})
+  }
+}
+
+const position = ref<'top' | 'bottom' | 'left' | 'right'>('top')
+
+function updatePosition() {
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+
+  // prioritize not colliding with short screens
+  if (vh < 520) {
+    position.value = 'bottom'
+  } else if (vw < 480) {
+    position.value = 'left'
+  } else if (vw > 1200) {
+    position.value = 'right'
+  } else {
+    position.value = 'top'
+  }
+}
+
+onMounted(() => {
+   if (videoEl.value) {
+    videoEl.value.muted = true
+  }
+  
+  updatePosition()
+  window.addEventListener('resize', updatePosition)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePosition)
+})
+</script>