From 3fd3f01637288fb37faafa7e64297bcd68d793f0 Mon Sep 17 00:00:00 2001
From: jessy-david-dev <ultralionfr@gmail.com>
Date: Fri, 10 Apr 2026 15:47:33 +0200
Subject: [PATCH] feat(lobby): add clickable code copy to clipboard with visual
 feedback

---
 app/components/LobbyScreen.tsx | 16 ++++++++++++++--
 app/globals.css                | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/app/components/LobbyScreen.tsx b/app/components/LobbyScreen.tsx
index 39fad43..3dfba34 100644
--- a/app/components/LobbyScreen.tsx
+++ b/app/components/LobbyScreen.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import type { Room } from "../api/rooms/route";
 
 type LobbyScreenProps = {
@@ -17,6 +18,14 @@ export function LobbyScreen({
   room, playerId, error, setError, loading, onLeave, onStart, onReset,
 }: LobbyScreenProps) {
   const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false;
+  const [copied, setCopied] = useState(false);
+
+  function copyCode() {
+    navigator.clipboard.writeText(room.code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
 
   return (
     <div className="screen lobby-screen">
@@ -24,8 +33,11 @@ export function LobbyScreen({
 
       <div className="lobby-code-block">
         <span className="lobby-code-label">Code de la salle</span>
-        <span className="lobby-code">{room.code}</span>
-        <span className="lobby-code-hint">Partage ce code avec tes amis !</span>
+        <button className="lobby-code-copy" onClick={copyCode} title="Copier le code">
+          <span className="lobby-code">{room.code}</span>
+          <span className="lobby-copy-icon">{copied ? "✓" : "⧉"}</span>
+        </button>
+        <span className="lobby-code-hint">{copied ? "Copié !" : "Clique sur le code pour le copier"}</span>
       </div>
 
       {error && (
diff --git a/app/globals.css b/app/globals.css
index 1f766f5..6c96990 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -298,6 +298,28 @@ body {
   margin-bottom: 8px;
 }
 
+.lobby-code-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 8px;
+  margin: 0 auto;
+  transition: background var(--transition);
+}
+.lobby-code-copy:hover { background: var(--bg-3); }
+
+.lobby-copy-icon {
+  font-size: 22px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+.lobby-code-copy:hover .lobby-copy-icon { color: var(--accent); }
+
 .lobby-code {
   display: block;
   font-size: clamp(42px, 12vw, 64px);