From 3300c694c52e897686894636a0e61f6a6b01d6aa Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 28 Aug 2025 19:15:29 -0600
Subject: [PATCH] mejoras UI/UX v7

---
 client/src/components/AppCredits.vue     |  6 +++++-
 client/src/views/DemoGame.vue            |  9 ++++++++-
 client/src/views/Game.vue                |  8 +++++++-
 client/src/views/games/OfferActions.vue  | 11 ++++++++++-
 client/src/views/games/OfferControls.vue |  5 +++--
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/client/src/components/AppCredits.vue b/client/src/components/AppCredits.vue
index 4f378b5..8d7fd00 100644
--- a/client/src/components/AppCredits.vue
+++ b/client/src/components/AppCredits.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-credits" :class="[variantClass, positionClass]" aria-label="Créditos y contacto" ref="rootEl">
+  <div class="app-credits" :class="[variantClass, positionClass, (collapsed ? 'is-collapsed' : 'is-expanded')]" aria-label="Créditos y contacto" ref="rootEl">
     <div class="credits-card" :class="{ collapsed }">
       <button v-if="!collapsed" class="btn-toggle close" @click="collapse" title="Ocultar">×</button>
 
@@ -27,6 +27,7 @@ import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue';
 interface Props { 
   position?: 'bottom-right'|'bottom-center';
   variant?: 'overlay'|'inline';
+  defaultCollapsed?: boolean;
 }
 const props = defineProps<Props>();
 const positionClass = computed(() => (props.variant === 'inline') ? '' : (props.position || 'bottom-right'));
@@ -48,6 +49,9 @@ function collapse() { collapsed.value = true; setTimeout(setBottomGap, 0); }
 function expand() { collapsed.value = false; setTimeout(setBottomGap, 0); }
 
 onMounted(async () => {
+  // Set initial collapsed state (default true for inline uses)
+  if (typeof props.defaultCollapsed === 'boolean') collapsed.value = props.defaultCollapsed;
+  else collapsed.value = props.variant === 'inline' ? true : false;
   await nextTick();
   setBottomGap();
   window.addEventListener('resize', setBottomGap);
diff --git a/client/src/views/DemoGame.vue b/client/src/views/DemoGame.vue
index fe7af68..4a3f78a 100644
--- a/client/src/views/DemoGame.vue
+++ b/client/src/views/DemoGame.vue
@@ -71,8 +71,8 @@
 
       <div class="game-footer">
         <button @click="leaveGame" class="btn btn-leave">Salir del Juego</button>
+        <AppCredits variant="inline" :default-collapsed="true" />
       </div>
-      <AppCredits variant="inline" />
     </div>
 
 
@@ -456,6 +456,13 @@ async function leaveGame() {
 <style scoped>
 .game { min-height: calc(var(--app-vh, 1vh) * 100); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display:flex; align-items:center; justify-content:center; padding:20px; }
 .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); margin-bottom: 50px; }
+.game-footer { display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
+.game-footer .app-credits.inline { width: auto; flex: 0 0 auto; }
+.game-footer .app-credits.inline.is-collapsed .credits-card { white-space: nowrap; }
+.game-footer .app-credits.inline.is-expanded { flex: 1 1 100%; width: 100%; }
+.game-footer .btn-leave { order: 1; }
+.game-footer .app-credits.inline.is-collapsed { margin-left: auto; order: 1; }
+.game-footer .app-credits.inline.is-expanded { flex: 1 1 100%; order: 2; }
 .game-header { display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
 .game-header h1 { margin: 0; font-size: 20px; }
 .meta { display:flex; gap: 16px; font-size: 14px; }
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index f4e967e..334b0f1 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -68,8 +68,8 @@
 
       <div class="game-footer">
         <button @click="leaveGame" class="btn btn-leave">Leave Game</button>
+        <AppCredits variant="inline" :default-collapsed="true" />
       </div>
-      <AppCredits variant="inline" />
     </div>
   </div>
 </template>
@@ -244,6 +244,12 @@ function leaveGame() {
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   margin-bottom: 50px;
 }
+.game-footer { display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
+.game-footer .btn-leave { order: 1; }
+.game-footer .app-credits.inline { width: auto; flex: 0 0 auto; }
+.game-footer .app-credits.inline.is-collapsed { margin-left: auto; order: 1; }
+.game-footer .app-credits.inline.is-collapsed .credits-card { white-space: nowrap; }
+.game-footer .app-credits.inline.is-expanded { flex: 1 1 100%; order: 2; width: 100%; }
 
 .game-header {
   margin-bottom: 30px;
diff --git a/client/src/views/games/OfferActions.vue b/client/src/views/games/OfferActions.vue
index 8ac55b3..c4206b1 100644
--- a/client/src/views/games/OfferActions.vue
+++ b/client/src/views/games/OfferActions.vue
@@ -1,6 +1,9 @@
 <template>
+  <div v-if="isFinished" class="offer-actions-card finished-only">
+    Juego terminado
+  </div>
   <div
-    v-if="shouldShowComponent"
+    v-else-if="shouldShowComponent"
     class="offer-actions-card"
     :style="({ '--p1': p1Color, '--p2': p2Color } as any)"
   >
@@ -195,6 +198,12 @@ defineEmits(['p2Action', 'p2Force', 'assignShame', 'report']);
 </script>
 
 <style scoped>
+.finished-only { 
+  text-align: center; 
+  padding: 12px; 
+  font-weight: 700; 
+  color: #334155; 
+}
 .offer-actions-card {
   background: #ffffff;
   border: 1px solid #eeeeee;
diff --git a/client/src/views/games/OfferControls.vue b/client/src/views/games/OfferControls.vue
index a094284..621cc40 100644
--- a/client/src/views/games/OfferControls.vue
+++ b/client/src/views/games/OfferControls.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="offer-card" :class="{ disabled: isFinished }" :aria-disabled="isFinished ? 'true' : 'false'">
-    <div v-if="isFinished" class="banner finished">🏁 Juego finalizado</div>
-    
+    <div v-if="isFinished" class="banner finished">Juego terminado</div>
+    <template v-else>
     <!-- Header (tap 5x to unlock Básico) -->
     <div class="offer-header" :class="{ clickable: !advancedUnlocked }" @click="onHeaderClick" :title="unlockTitle">
       Controles de oferta
@@ -106,6 +106,7 @@
       <div v-if="isNonsense && !isFinished" class="hint invalid">⚠️ La oferta no tiene sentido.</div>
       <div v-if="!isFinished && disableNoOffer" class="hint blocked">🚫 "No ofrecer" no está disponible porque P2 te obliga a proponer.</div>
     </div>
+    </template>
   </div>
 </template>