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 (
@@ -24,8 +33,11 @@ export function LobbyScreen({
Code de la salle
- {room.code}
- Partage ce code avec tes amis !
+
+ {copied ? "Copié !" : "Clique sur le code pour le copier"}
{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);