mejoras de UX

client/src/views/DemoGame.vue

@@ -12,6 +12,17 @@
             <span class="points">Puntos: {{ s.points }}</span>
           </div>
         </div>
+        <div class="modal-actions">
+          <button @click="changeToPreviousVariant" class="btn btn-prev-variant">
+            ⏪ {{ getPreviousVariant() }}
+          </button>
+          <button @click="restartCurrentVariant" class="btn btn-restart-variant">
+            🔄 {{ currentVariant }}
+          </button>
+          <button @click="changeToNextVariant" class="btn btn-next-variant">
+            {{ getNextVariant() }} ⏩
+          </button>
+        </div>
         <div class="hint">Se cerrará en {{ remainingSeconds }}s</div>
       </div>
     </div>
@@ -116,7 +127,7 @@ const variants = ['G1','G2','G3','G4','G5'];
 
 // End-of-game modal state and helpers
 const endModal = ref<{ visible: boolean }>({ visible: false });
-const remainingSeconds = ref(10);
+const remainingSeconds = ref(20);
 let endTimerTimeout: any = null;
 let endTimerInterval: any = null;
 
@@ -124,7 +135,7 @@ function showEndModal() {
   // Prevent multiple timers
   if (endModal.value.visible) return;
   endModal.value.visible = true;
-  remainingSeconds.value = 10;
+  remainingSeconds.value = 20;
   if (endTimerInterval) clearInterval(endTimerInterval);
   if (endTimerTimeout) clearTimeout(endTimerTimeout);
   endTimerInterval = setInterval(() => {
@@ -132,7 +143,7 @@ function showEndModal() {
   }, 1000);
   endTimerTimeout = setTimeout(() => {
     dismissEndModal();
-  }, 10000);
+  }, 20000);
 }
 
 function dismissEndModal() {
@@ -141,6 +152,40 @@ function dismissEndModal() {
   if (endTimerTimeout) { clearTimeout(endTimerTimeout); endTimerTimeout = null; }
 }
 
+// Function to get next variant in sequence
+function getNextVariant(): string {
+  const currentIndex = variants.indexOf(currentVariant.value);
+  const nextIndex = (currentIndex + 1) % variants.length;
+  return variants[nextIndex];
+}
+
+// Function to get previous variant in sequence
+function getPreviousVariant(): string {
+  const currentIndex = variants.indexOf(currentVariant.value);
+  const previousIndex = (currentIndex - 1 + variants.length) % variants.length;
+  return variants[previousIndex];
+}
+
+// Function to change to next variant and dismiss modal
+function changeToNextVariant() {
+  const nextVariant = getNextVariant();
+  setVariant(nextVariant);
+  dismissEndModal();
+}
+
+// Function to change to previous variant and dismiss modal
+function changeToPreviousVariant() {
+  const previousVariant = getPreviousVariant();
+  setVariant(previousVariant);
+  dismissEndModal();
+}
+
+// Function to restart the same variant and dismiss modal
+function restartCurrentVariant() {
+  setVariant(currentVariant.value);
+  dismissEndModal();
+}
+
 const finalScores = computed(() => {
   return players.value.map(p => {
     const points = (p.role === 'P2')
@@ -271,6 +316,10 @@ onMounted(() => {
 
   room.onMessage("variantChanged", (data: { variant: string }) => {
     currentVariant.value = data.variant as any;
+    // Close end modal if it's open when variant changes
+    if (endModal.value.visible) {
+      dismissEndModal();
+    }
   });
 
   // No round transition banners
@@ -378,6 +427,46 @@ async function leaveGame() {
 .end-modal .score-row .name { font-weight:800; color:#1f2937; }
 .end-modal .score-row .tokens { font-weight:700; color:#374151; }
 .end-modal .score-row .points { font-weight:900; color:#111827; }
+.end-modal .modal-actions { 
+  margin: 16px 0; 
+  display: flex; 
+  gap: 12px; 
+  justify-content: center; 
+  align-items: center;
+}
+.end-modal .btn-next-variant, .end-modal .btn-prev-variant, .end-modal .btn-restart-variant { 
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+  color: white; 
+  border: none; 
+  padding: 12px 16px; 
+  border-radius: 8px; 
+  font-size: 14px; 
+  font-weight: 600; 
+  cursor: pointer; 
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  min-width: 85px;
+}
+.end-modal .btn-prev-variant {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
+}
+.end-modal .btn-restart-variant {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
+}
+.end-modal .btn-next-variant:hover { 
+  transform: translateY(-2px); 
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+}
+.end-modal .btn-prev-variant:hover { 
+  transform: translateY(-2px); 
+  box-shadow: 0 6px 16px rgba(240, 147, 251, 0.4);
+}
+.end-modal .btn-restart-variant:hover { 
+  transform: translateY(-2px); 
+  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
+}
 .end-modal .hint { font-size: 12px; color:#6b7280; text-align:right; }
 .game-container { background: white; border-radius: 20px; padding: 24px; max-width: 1000px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
 .game-header { display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }