nucleo000/snatchgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras UI/UX

Browse Source
This commit is contained in:
josedario87
2025-08-28 18:53:37 -06:00
parent 6f2f7a4e12
commit 1a1478745a
8 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/AppCredits.vue
View File

@@ -6,7 +6,7 @@
<template v-if="!collapsed">
<span>Hecho por <strong>Nucleo Inteligencia</strong></span>
<span class="sep">•</span>
<span>2025</span>
<span>2024</span>
<span class="sep">•</span>
<a href="mailto:firstcontact@nucleoriofrio.com" class="credits-link">firstcontact@nucleoriofrio.com</a>
<span class="sep">•</span>
@@ -68,7 +68,7 @@ onUnmounted(() => {
.app-credits.overlay { position: fixed; }
.app-credits.bottom-right { right: 12px; bottom: 12px; }
.app-credits.bottom-center { left: 50%; transform: translateX(-50%); bottom: 12px; position: fixed; }
.app-credits.inline { position: static; margin-top: 10px; display: flex; justify-content: flex-end; }
.app-credits.inline { position: static; margin-top: 10px; display: flex; justify-content: flex-end; width: 100%; }
.credits-card {
display: inline-flex;
@@ -85,6 +85,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
pointer-events: auto; /* allow clicking the mailto link */
max-width: 100%;
}
.credits-card.collapsed { gap: 6px; padding: 4px 6px; }
.credits-card.collapsed > span:not(.sep),
@@ -94,7 +95,7 @@ onUnmounted(() => {
.app-credits.inline .credits-card { background: rgba(255,255,255,0.14); border-color: rgba(0,0,0,0.04); }
.credits-card strong { color: #475569; font-weight: 700; }
.credits-card .sep { opacity: 0.55; }
.credits-link { color: #64748b; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.45); }
.credits-link { color: #64748b; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.45); overflow-wrap: anywhere; word-break: break-word; }
.credits-link:hover { color: #334155; border-bottom-color: rgba(51,65,85,0.55); }
.credits-link.icon { border-bottom: none; display: inline-flex; align-items:center; justify-content:center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.6); color:#334155; font-weight: 700; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.credits-link.icon:hover { background: rgba(255,255,255,0.9); }
@@ -105,6 +106,18 @@ onUnmounted(() => {
.btn-toggle:focus { outline: none; }
@media (max-width: 480px) {
.credits-card { font-size: 11px; padding: 6px 8px; }
.app-credits.inline { margin-top: 6px; }
.app-credits.inline .credits-card {
font-size: 10px;
padding: 4px 6px;
gap: 4px;
border-radius: 8px;
white-space: normal;
display: flex;
flex-wrap: wrap;
max-width: 100%;
}
.app-credits.inline .credits-card .sep { margin: 0 4px; }
.app-credits.inline .credits-link.icon { width: 16px; height: 16px; font-size: 11px; }
}
</style>

2
client/src/views/DemoGame.vue
View File

@@ -455,7 +455,7 @@ 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); }
.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-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; }

1
client/src/views/Game.vue
View File

@@ -242,6 +242,7 @@ function leaveGame() {
max-width: 900px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
margin-bottom: 50px;
}
.game-header {

1
client/src/views/games/G1.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="g">
<h3>G1 – Sin derechos de propiedad</h3>
<OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
<OfferActions
:state="state"

1
client/src/views/games/G2.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="g">
<h3>G2 – Regla contraproductiva (P2 puede forzar)</h3>
<OfferControls
v-if="myRole==='P1' && !state.offer?.active && !state.g2ForcePending"
:my-role="myRole"

1
client/src/views/games/G3.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="g">
<h3>G3 – Token de repudio (vergüenza)</h3>
<OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
<OfferActions
:state="state"

1
client/src/views/games/G4.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="g">
<h3>G4 – Derechos mínimos de propiedad (juez)</h3>
<OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
<OfferActions
:state="state"

1
client/src/views/games/G5.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="g">
<h3>G5 – Cheap talk (chat previo no vinculante)</h3>
<OfferControls v-if="myRole==='P1' && !state.offer?.active" :my-role="myRole" @propose="onPropose" @no-offer="onNoOffer"/>
<OfferActions
:state="state"