From 9673c6ce9e7c5d89a4cddb553da35277423728fb Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 8 Aug 2025 00:10:10 -0600
Subject: [PATCH] fix: prevent multiple P2 actions on same offer and improve UI
 consistency

- Add server validation to prevent P2 from taking multiple actions on the same offer
- Hide P2 action buttons after an action is taken (using \!state.p2Action condition)
- Add offer details display to G3, G4, and G5 (was missing)
- Fix G2 to show offer details instead of just 'Oferta activa'
- Reset game status to PLAYING when changing variant from FINISHED state
- Ensure P2 can only make one decision per offer in all variants
---
 client/src/views/games/G1.vue | 2 +-
 client/src/views/games/G2.vue | 6 +++---
 client/src/views/games/G3.vue | 4 +++-
 client/src/views/games/G4.vue | 4 +++-
 client/src/views/games/G5.vue | 4 +++-
 server/src/rooms/GameRoom.ts  | 4 ++++
 6 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/client/src/views/games/G1.vue b/client/src/views/games/G1.vue
index f5df698..4dfd3bd 100644
--- a/client/src/views/games/G1.vue
+++ b/client/src/views/games/G1.vue
@@ -2,7 +2,7 @@
   <div class="g">
     <h3>G1 – Sin derechos de propiedad</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
-    <div v-if="state.offer?.active" class="controls">
+    <div v-if="state.offer?.active && !state.p2Action" class="controls">
       <div class="offer-view">Oferta: 🦃 {{ state.offer.offerPavo }} / 🌽 {{ state.offer.offerElote }} | Pedido: 🦃 {{ state.offer.requestPavo }} / 🌽 {{ state.offer.requestElote }}</div>
       <div v-if="myRole === 'P2'">
         <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
diff --git a/client/src/views/games/G2.vue b/client/src/views/games/G2.vue
index 36bcd33..4a0f81d 100644
--- a/client/src/views/games/G2.vue
+++ b/client/src/views/games/G2.vue
@@ -5,8 +5,8 @@
       <label><input type="checkbox" :checked="state.forcedByP2" @change="$emit('p2Force', ($event.target as HTMLInputElement).checked)"/> Forzar oferta</label>
     </div>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" :disable-no-offer="state.forcedByP2" @propose="onPropose" @no-offer="onNoOffer"/>
-    <div v-if="state.offer?.active" class="note">Oferta activa</div>
-    <div v-if="state.offer?.active" class="controls">
+    <div v-if="state.offer?.active && !state.p2Action" class="controls">
+      <div class="offer-view">Oferta: 🦃 {{ state.offer.offerPavo }} / 🌽 {{ state.offer.offerElote }} | Pedido: 🦃 {{ state.offer.requestPavo }} / 🌽 {{ state.offer.requestElote }}</div>
       <div v-if="myRole === 'P2'">
         <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
         <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
@@ -35,6 +35,6 @@ function onNoOffer() {
 .g { background:#fff; padding:12px; border-radius:8px; }
 .controls { display:flex; gap:8px; margin:8px 0; }
 .btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
-.note { color:#1565c0; font-weight:600; }
+.offer-view { font-size: 14px; color:#333; }
 .hint { color:#666; }
 </style>
diff --git a/client/src/views/games/G3.vue b/client/src/views/games/G3.vue
index 0623e24..87b79e5 100644
--- a/client/src/views/games/G3.vue
+++ b/client/src/views/games/G3.vue
@@ -2,7 +2,8 @@
   <div class="g">
     <h3>G3 – Token de repudio (vergüenza)</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
-    <div v-if="state.offer?.active" class="controls">
+    <div v-if="state.offer?.active && !state.p2Action" class="controls">
+      <div class="offer-view">Oferta: 🦃 {{ state.offer.offerPavo }} / 🌽 {{ state.offer.offerElote }} | Pedido: 🦃 {{ state.offer.requestPavo }} / 🌽 {{ state.offer.requestElote }}</div>
       <div v-if="myRole === 'P2'">
         <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
         <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
@@ -34,5 +35,6 @@ function onNoOffer() {
 .controls { display:flex; gap:8px; margin:8px 0; }
 .btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
 .btn.warn { background:#ffecb3; color:#8d6e63; }
+.offer-view { font-size: 14px; color:#333; }
 .hint { color:#666; }
 </style>
diff --git a/client/src/views/games/G4.vue b/client/src/views/games/G4.vue
index 6dd72d0..fbc28f1 100644
--- a/client/src/views/games/G4.vue
+++ b/client/src/views/games/G4.vue
@@ -2,7 +2,8 @@
   <div class="g">
     <h3>G4 – Derechos mínimos de propiedad (juez)</h3>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
-    <div v-if="state.offer?.active" class="controls">
+    <div v-if="state.offer?.active && !state.p2Action" class="controls">
+      <div class="offer-view">Oferta: 🦃 {{ state.offer.offerPavo }} / 🌽 {{ state.offer.offerElote }} | Pedido: 🦃 {{ state.offer.requestPavo }} / 🌽 {{ state.offer.requestElote }}</div>
       <div v-if="myRole === 'P2'">
         <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
         <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
@@ -34,5 +35,6 @@ function onNoOffer() {
 .controls { display:flex; gap:8px; margin:8px 0; }
 .btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
 .btn.warn { background:#ffe0e0; color:#b71c1c; }
+.offer-view { font-size: 14px; color:#333; }
 .hint { color:#666; }
 </style>
diff --git a/client/src/views/games/G5.vue b/client/src/views/games/G5.vue
index b700f53..b427b28 100644
--- a/client/src/views/games/G5.vue
+++ b/client/src/views/games/G5.vue
@@ -6,7 +6,8 @@
       <button class="btn" @click="send">Enviar</button>
     </div>
     <OfferControls v-if="myRole==='P1' && !state.offer?.active" @propose="onPropose" @no-offer="onNoOffer"/>
-    <div v-if="state.offer?.active" class="controls">
+    <div v-if="state.offer?.active && !state.p2Action" class="controls">
+      <div class="offer-view">Oferta: 🦃 {{ state.offer.offerPavo }} / 🌽 {{ state.offer.offerElote }} | Pedido: 🦃 {{ state.offer.requestPavo }} / 🌽 {{ state.offer.requestElote }}</div>
       <div v-if="myRole === 'P2'">
         <button class="btn" @click="$emit('p2Action', 'accept')">P2: Aceptar</button>
         <button class="btn" @click="$emit('p2Action', 'reject')">P2: Rechazar</button>
@@ -46,5 +47,6 @@ function onNoOffer() {
 .chat { display:flex; gap:8px; margin:8px 0; }
 .chat input { flex:1; padding:8px; border-radius:6px; border:1px solid #ddd; }
 .btn { padding:8px 12px; border:none; border-radius:6px; background:#e3f2fd; color:#1565c0; cursor:pointer; }
+.offer-view { font-size: 14px; color:#333; }
 .hint { color:#666; }
 </style>
diff --git a/server/src/rooms/GameRoom.ts b/server/src/rooms/GameRoom.ts
index 1e3472b..1180af3 100644
--- a/server/src/rooms/GameRoom.ts
+++ b/server/src/rooms/GameRoom.ts
@@ -85,6 +85,10 @@ export class GameRoom extends Room<GameState> {
       const player = this.state.players.get(client.sessionId);
       if (!player) return;
       if (player.role !== "P2") return;
+      
+      // Prevent multiple actions on the same offer
+      if (this.state.p2Action) return;
+      
       this.state.p2Action = action; // accept | reject | snatch
       this.resolveP2Action();