agrega funcionalidad de share a UuidSelector

- Agrega botón "📤 Compartir" en el modal de QR
- Implementa navigator.share() con fallback a clipboard
- Incluye estilos con gradiente rosa para el botón
- Mejora la experiencia de usuario para compartir links

client/src/views/Lobby.vue

@@ -37,55 +37,36 @@
         <div v-else class="hint ok">Nombre confirmado ✔</div>
       </div>
 
-      <div class="rooms-section">
+      <div class="qr-section">
-        <h2>Available Rooms</h2>
+        <h2>🎯 Your Game Access</h2>
-        <div v-if="availableRooms.length === 0" class="no-rooms">
+        <div class="qr-container">
-          No rooms available. Click Quick Play to start a new game!
+          <div class="qr-header">
-        </div>
+            <h3>{{ playerName || 'Guest' }}'s Game Link</h3>
-        <div v-else class="rooms-list">
+            <p class="uuid-display">UUID: {{ routeUuid.substring(0, 8) }}...</p>
-          <div
+          </div>
-            v-for="room in availableRooms"
+          <div class="qr-code-wrapper">
-            :key="room.roomId"
+            <canvas ref="qrCanvas" class="qr-canvas"></canvas>
-            class="room-card"
+          </div>
-            :class="{ disabled: !nameConfirmed }"
+          <div class="qr-footer">
-            @click="nameConfirmed ? joinRoom(room.roomId) : null"
+            <p class="url-display">{{ gameUrl }}</p>
-          >
+            <div class="qr-actions">
-            <div class="room-info">
+              <button @click="copyUrl" class="btn btn-copy">📋 Copy Link</button>
-              <span class="room-id">Room #{{ room.roomId.slice(0, 6) }}</span>
+              <button @click="shareQR" class="btn btn-share">📤 Share QR</button>
-              <span class="room-players">{{ room.playerCount }}/2 players</span>
             </div>
-            <span class="room-status" :class="`status-${room.status}`">
-              {{ room.status }}
-            </span>
           </div>
         </div>
       </div>
-
-      <div class="online-players">
-        <h3>Online Players</h3>
-        <div class="players-grid">
-          <div
-            v-for="player in onlinePlayers"
-            :key="player.sessionId"
-            class="player-tag"
-            :class="{ 'in-game': player.inGame }"
-          >
-            {{ player.name }}
-            <span v-if="player.inGame" class="status-dot">🎮</span>
-          </div>
-        </div>
-        <div class="player-count">Total: {{ totalPlayers }} players online</div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
 import PlayerStats from './games/PlayerStats.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { colyseusService } from '../services/colyseus';
 import { getStateCallbacks } from 'colyseus.js';
+import QRCode from 'qrcode';
 
 const router = useRouter();
 const route = useRoute();
@@ -93,9 +74,13 @@ const routeUuid = computed(() => (route.params as any)?.uuid as string || '');
 const inputName = ref('');
 const isJoining = ref(false);
 const colorInput = ref('#667eea');
-const availableRooms = ref<any[]>([]);
+const qrCanvas = ref<HTMLCanvasElement>();
-const onlinePlayers = ref<any[]>([]);
+
-const totalPlayers = ref(0);
+// QR Code computed properties
+const gameUrl = computed(() => {
+  const baseUrl = window.location.origin;
+  return `${baseUrl}/${routeUuid.value}`;
+});
 
 const playerName = computed(() => colyseusService.playerName.value);
 const nameConfirmed = computed(() => colyseusService.nameConfirmed.value);
@@ -250,6 +235,9 @@ onMounted(async () => {
         onlinePlayers.value.splice(index, 1);
       }
     });
+
+    // Generate QR code after lobby is set up
+    await generateQRCode();
   } catch (error) {
     console.error('Failed to join lobby:', error);
   }
@@ -312,16 +300,68 @@ async function joinRoom(roomId: string) {
     isJoining.value = false;
   }
 }
+
+// QR Code functions
+async function generateQRCode() {
+  await nextTick();
+  if (qrCanvas.value && routeUuid.value) {
+    try {
+      // Responsive QR size based on screen width
+      const isMobile = window.innerWidth <= 767;
+      const qrSize = isMobile ? 200 : 256;
+      
+      await QRCode.toCanvas(qrCanvas.value, gameUrl.value, {
+        width: qrSize,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF'
+        }
+      });
+    } catch (error) {
+      console.error('Error generating QR code:', error);
+    }
+  }
+}
+
+async function copyUrl() {
+  try {
+    await navigator.clipboard.writeText(gameUrl.value);
+    // Could add a toast notification here
+    console.log('URL copied to clipboard');
+  } catch (error) {
+    console.error('Failed to copy URL:', error);
+  }
+}
+
+function shareQR() {
+  if (navigator.share) {
+    navigator.share({
+      title: 'Join my Snatch Game',
+      text: `Join ${playerName.value || 'me'} in Snatch Game!`,
+      url: gameUrl.value
+    }).catch(err => console.log('Error sharing:', err));
+  } else {
+    // Fallback: copy to clipboard
+    copyUrl();
+  }
+}
 </script>
 
 <style scoped>
 .lobby {
   min-height: 100vh;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 20px;
+  overflow-y: auto;
+}
+
+@media (min-width: 768px) {
+  .lobby {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .lobby-container {
@@ -587,4 +627,164 @@ async function joinRoom(roomId: string) {
 .room-card.disabled { opacity: 0.6; cursor: not-allowed; }
 .hint { color:#666; font-size: 14px; margin-top: 10px; }
 .hint.ok { color: #2e7d32; }
+
+/* QR Code Section Styles */
+.qr-section {
+  margin: 40px 0;
+}
+
+.qr-section h2 {
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.qr-container {
+  background: #f8f9fa;
+  border-radius: 15px;
+  padding: 30px;
+  text-align: center;
+  border: 2px solid #e0e0e0;
+  transition: all 0.3s;
+}
+
+.qr-container:hover {
+  border-color: #667eea;
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);
+}
+
+.qr-header h3 {
+  color: #333;
+  margin: 0 0 10px 0;
+  font-size: 1.4rem;
+}
+
+.uuid-display {
+  font-family: monospace;
+  color: #666;
+  font-size: 14px;
+  margin: 0 0 20px 0;
+}
+
+.qr-code-wrapper {
+  display: inline-block;
+  background: white;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  margin: 20px 0;
+}
+
+.qr-canvas {
+  display: block;
+  border-radius: 8px;
+}
+
+.qr-footer {
+  margin-top: 20px;
+}
+
+.url-display {
+  font-size: 12px;
+  color: #666;
+  margin: 0 0 15px 0;
+  word-break: break-all;
+  background: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.qr-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-copy,
+.btn-share {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 6px;
+}
+
+.btn-copy {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+}
+
+.btn-copy:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 10px rgba(79, 172, 254, 0.3);
+}
+
+.btn-share {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.btn-share:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 10px rgba(240, 147, 251, 0.3);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 767px) {
+  .lobby {
+    padding: 10px;
+  }
+  
+  .lobby-container {
+    padding: 20px;
+    max-width: none;
+    width: 100%;
+    margin: 0;
+  }
+  
+  .qr-container {
+    padding: 20px;
+  }
+  
+  .qr-code-wrapper {
+    padding: 15px;
+    margin: 15px 0;
+  }
+  
+  .qr-canvas {
+    width: 200px !important;
+    height: 200px !important;
+  }
+  
+  .qr-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .btn-copy,
+  .btn-share {
+    width: 100%;
+    margin: 5px 0;
+  }
+  
+  .url-display {
+    font-size: 11px;
+    padding: 6px 8px;
+  }
+  
+  .title {
+    font-size: 2rem;
+  }
+  
+  .main-actions {
+    margin: 20px 0;
+  }
+  
+  .btn-large {
+    padding: 15px 20px;
+    font-size: 18px;
+    width: 100%;
+  }
+}
 </style>

client/src/views/UuidSelector.vue

@@ -88,6 +88,7 @@
           </div>
           <div class="modal-buttons">
             <button class="btn-download" @click="downloadPNG">📥 Descargar PNG</button>
+            <button class="btn-share" @click="shareQR">📤 Compartir</button>
             <button class="btn-print" @click="executePrint">🖨️ Imprimir</button>
           </div>
         </div>
@@ -472,6 +473,31 @@ async function downloadPNG() {
     alert('Error al generar la imagen PNG');
   }
 }
+
+function shareQR() {
+  if (!printModal.value.uuid) return;
+  
+  if (navigator.share) {
+    navigator.share({
+      title: 'Join my Snatch Game',
+      text: `Join ${printModal.value.name || 'me'} in Snatch Game!`,
+      url: printModal.value.url
+    }).catch(err => console.log('Error sharing:', err));
+  } else {
+    // Fallback: copy to clipboard
+    copyToClipboard();
+  }
+}
+
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(printModal.value.url);
+    alert('Link copiado al portapapeles');
+  } catch (error) {
+    console.error('Failed to copy URL:', error);
+    alert('Error al copiar el link');
+  }
+}
 </script>
 
 <style scoped>
@@ -849,6 +875,7 @@ async function downloadPNG() {
 }
 
 .btn-download,
+.btn-share,
 .btn-print {
   flex: 1;
   padding: 12px;
@@ -870,6 +897,16 @@ async function downloadPNG() {
   box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
 }
 
+.btn-share {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.btn-share:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(240, 147, 251, 0.4);
+}
+
 .btn-print {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;