feat: tilt settings + 30s settings refresh

Author: lhermann

client/src/composables/useSpamProtection.js

@@ -1,15 +1,23 @@
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, unref } from 'vue'
 
-const SPAM_THRESHOLD = 15 // clicks
 const SPAM_WINDOW = 10000 // 10 seconds in ms
-const COOLDOWN_DURATION = 10000 // 5 seconds in ms
 
-export function useSpamProtection (roomId) {
+export function useSpamProtection (roomId, settings = {}) {
   const clicks = ref([])
   const cooldownUntil = ref(0)
   const buttonStates = ref({}) // emoji -> { lastClick, state, clickCount, pendingRequests }
   const forceUpdate = ref(0) // Used to force reactivity updates
 
+  // Get settings from room config or use defaults (supports reactive settings)
+  const SPAM_THRESHOLD = computed(() => {
+    const s = unref(settings)
+    return s.maxReactions || 15
+  })
+  const COOLDOWN_DURATION = computed(() => {
+    const s = unref(settings)
+    return (s.cooldownSeconds || 10) * 1000 // Convert to ms
+  })
+
   const storageKey = `spam_protection_${roomId}`
 
   // Timer to update cooldown display every 100ms
@@ -104,7 +112,7 @@ export function useSpamProtection (roomId) {
   const cooldownProgress = computed(() => {
     const remaining = cooldownRemaining.value
     if (remaining === 0) return 0
-    const total = COOLDOWN_DURATION
+    const total = COOLDOWN_DURATION.value
     return Math.round((remaining / total) * 100)
   })
 
@@ -119,8 +127,8 @@ export function useSpamProtection (roomId) {
     clicks.value.push(now)
 
     // Check for spam
-    if (clicks.value.length >= SPAM_THRESHOLD) {
-      cooldownUntil.value = now + COOLDOWN_DURATION
+    if (clicks.value.length >= SPAM_THRESHOLD.value) {
+      cooldownUntil.value = now + COOLDOWN_DURATION.value
       clicks.value = [] // Clear clicks after triggering cooldown
       startUpdateTimer() // Start the countdown timer
     }

client/src/views/Dashboard.vue

@@ -115,6 +115,46 @@
               </div>
             </div>
 
+            <!-- Tilt Limit Settings -->
+            <div class="space-y-3 pt-3 border-t border-gray-200">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                  Spam Protection
+                </label>
+                <p class="text-xs text-gray-500 mb-3">
+                  Prevent spam by limiting how fast users can send reactions
+                </p>
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div>
+                  <label class="block text-xs font-medium text-gray-600 mb-1">
+                    Max Reactions
+                  </label>
+                  <input
+                    v-model.number="roomForm.tiltMaxReactions"
+                    type="number"
+                    min="1"
+                    max="100"
+                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                  <p class="text-xs text-gray-500 mt-1">Reactions before cooldown</p>
+                </div>
+                <div>
+                  <label class="block text-xs font-medium text-gray-600 mb-1">
+                    Cooldown (seconds)
+                  </label>
+                  <input
+                    v-model.number="roomForm.tiltCooldownSeconds"
+                    type="number"
+                    min="1"
+                    max="60"
+                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                  <p class="text-xs text-gray-500 mt-1">Wait time after limit</p>
+                </div>
+              </div>
+            </div>
+
             <!-- Submit Button -->
             <button
               type="submit"
@@ -286,6 +326,8 @@ const roomForm = reactive({
   emojis: ['❤️', '🔥', '👏'],
   backgroundInput: '',
   backgroundOutput: '',
+  tiltMaxReactions: 15,
+  tiltCooldownSeconds: 10,
 })
 
 // Copy status tracking
@@ -339,6 +381,8 @@ async function validateAndLoadRoom () {
     roomForm.emojis = roomData.settings?.emojis?.map((e) => e.emoji) || ['❤️', '🔥', '👏']
     roomForm.backgroundInput = roomData.settings?.backgroundInput || ''
     roomForm.backgroundOutput = roomData.settings?.backgroundOutput || ''
+    roomForm.tiltMaxReactions = roomData.settings?.tiltLimit?.maxReactions || 15
+    roomForm.tiltCooldownSeconds = roomData.settings?.tiltLimit?.cooldownSeconds || 10
   } catch (err) {
     error.value = 'Unable to load room data. Please check your connection and try again.'
     console.error('Dashboard load error:', err)
@@ -359,6 +403,10 @@ async function updateRoom () {
         emojis: roomForm.emojis.filter((e) => e.trim()).map((emoji) => ({ emoji })),
         backgroundInput: roomForm.backgroundInput || undefined,
         backgroundOutput: roomForm.backgroundOutput || undefined,
+        tiltLimit: {
+          maxReactions: roomForm.tiltMaxReactions,
+          cooldownSeconds: roomForm.tiltCooldownSeconds,
+        },
       },
     }
 

client/src/views/Input.vue

@@ -138,6 +138,19 @@ const props = defineProps({
 })
 
 const { fetchRoom, submitReaction: apiSubmitReaction } = useRoomApi()
+
+const loading = ref(true)
+const error = ref(false)
+const roomData = ref(null)
+const emojis = computed(() => roomData.value?.settings?.emojis || [])
+let refreshInterval = null
+
+// Get tilt limit settings from room or use defaults
+const tiltSettings = computed(() => ({
+  maxReactions: roomData.value?.settings?.tiltLimit?.maxReactions || 15,
+  cooldownSeconds: roomData.value?.settings?.tiltLimit?.cooldownSeconds || 10,
+}))
+
 const {
   canSubmit,
   cooldownRemaining,
@@ -147,12 +160,7 @@ const {
   setButtonLoading,
   setButtonSuccess,
   clearButtonState,
-} = useSpamProtection(props.roomId)
-
-const loading = ref(true)
-const error = ref(false)
-const roomData = ref(null)
-const emojis = computed(() => roomData.value?.settings?.emojis || [])
+} = useSpamProtection(props.roomId, tiltSettings)
 
 // Computed property for background style
 const backgroundStyle = computed(() => {
@@ -182,23 +190,40 @@ const backgroundStyle = computed(() => {
   }
 })
 
-onMounted(async () => {
-  // Add classes to prevent zoom and scrolling on mobile
-  document.body.classList.add('h-svh', 'overflow-hidden', 'touch-manipulation')
-
-  // Fetch room data
+// Fetch room data (initial load and periodic refresh)
+async function loadRoomData () {
   try {
     roomData.value = await fetchRoom(props.roomId)
     loading.value = false
   } catch (err) {
     console.error('Failed to fetch room:', err)
-    error.value = true
-    loading.value = false
+    // Only show error on initial load
+    if (!roomData.value) {
+      error.value = true
+      loading.value = false
+    }
   }
+}
+
+onMounted(async () => {
+  // Add classes to prevent zoom and scrolling on mobile
+  document.body.classList.add('h-svh', 'overflow-hidden', 'touch-manipulation')
+
+  // Initial fetch
+  await loadRoomData()
+
+  // Set up periodic refresh every 30 seconds
+  refreshInterval = setInterval(loadRoomData, 30000)
 })
 
 onBeforeUnmount(() => {
   document.body.classList.remove('h-svh', 'overflow-hidden', 'touch-manipulation')
+
+  // Clear refresh interval
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
 })
 
 async function submitReaction (emoji) {

functions/src/types/index.ts

@@ -11,6 +11,10 @@ export interface Room {
     }>
     backgroundInput?: string // Optional full URL or solid color for input view
     backgroundOutput?: string // Optional full URL or solid color for output view
+    tiltLimit?: {
+      maxReactions: number // Number of reactions before cooldown (default: 15)
+      cooldownSeconds: number // Cooldown duration in seconds (default: 10)
+    }
   }
   createdAt: Date
   updatedAt: Date