+
@@ -73,10 +73,7 @@
// Board rendering using provided SVG assets. Accepts FEN.
const pieceSetPath = '/assets/chess-pieces/chess_1Kbyte_gambit';
- // set board background image (if available)
- boardEl.style.backgroundImage = "url('/assets/chess-pieces/boards/8x8_wood.svg')";
- boardEl.style.backgroundSize = 'cover';
- boardEl.style.position = 'relative';
+ // board visual defaults are handled by CSS (background, size, border, position)
function renderFen(fen){
if(!fen) return;
@@ -88,28 +85,24 @@
let file = 0;
for(let i=0;i
ChessNut
-
+
-
-
+
ChessNut
-
- ChessNut - Salle d'attente
-
+
-
-
-
-
- Room ID:
+
+
+
+
+
+
diff --git a/public/styles/style.css b/public/styles/style.css
new file mode 100644
index 0000000..b1beb23
--- /dev/null
+++ b/public/styles/style.css
@@ -0,0 +1,74 @@
+/* Compiled CSS (from style.scss) - included directly so no build step is required */
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+ margin:0;padding:24px;background: linear-gradient(180deg, #0b1220 0%, #0f172a 60%);color:#e6eef8;
+}
+
+.page{max-width:1100px;margin:0 auto}
+
+header h2{margin:0 0 12px 0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.4)}
+
+.card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:16px;border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,0.6);}
+
+button{background:#2b6cb0;color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}
+button[disabled]{opacity:0.5;cursor:not-allowed}
+input[type="text"], input[type="search"]{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:inherit}
+
+a{color:#f6ad55;text-decoration:none}
+a:hover{text-decoration:underline}
+
+#log{white-space:pre-wrap;border-radius:8px;background:rgba(255,255,255,0.03);padding:8px;height:280px;overflow:auto;color:#dfeeff}
+
+#board{width:800px;height:800px;display:grid;grid-template-columns:repeat(8,1fr);border-radius:6px;overflow:hidden;background-size:cover}
+
+@media (max-width:900px){
+ #board{width:min(92vw,680px);height:min(92vw,680px)}
+}
+
+.muted{opacity:0.8;color:#b9c6d9}
+
+.controls{display:flex;gap:8px;align-items:center}
+
+#players{margin:6px 0;padding-left:18px}
+
+#copyInviteBtn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:6px 10px;border-radius:8px}
+
+#youAreHost{background:rgba(255,255,255,0.04);padding:6px 8px;border-radius:6px;margin-left:6px}
+
+/* layout helpers used from game.html */
+.layout-row{display:flex;gap:20px;align-items:flex-start}
+
+/* board tweaks */
+#board{border:1px solid #333;position:relative;background-image: url('/assets/chess-pieces/boards/8x8_wood.svg');background-size:cover}
+
+/* square cells and piece images (used by renderFen) */
+.square{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
+.square img, .piece{max-width:78%;max-height:78%;user-select:none}
+
+/* Lobby / hero styles - decorative and fun */
+.hero{
+ display:flex;align-items:center;justify-content:space-between;padding:28px;border-radius:12px;margin-bottom:18px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.04);
+ background: linear-gradient(135deg, rgba(43,108,176,0.14), rgba(246,173,85,0.06));
+}
+.hero .title{font-size:28px;font-weight:800;letter-spacing:-0.5px}
+.hero .subtitle{color:rgba(255,255,255,0.85);margin-top:6px;font-weight:500}
+.hero .decor{position:absolute;right:-80px;top:-60px;opacity:0.06;width:420px;height:420px;filter:blur(6px);transform:rotate(20deg)}
+
+.card.lobby{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px}
+
+/* buttons variants */
+.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:inherit}
+.btn-cta{background:linear-gradient(90deg,#3b82f6,#60a5fa);box-shadow:0 8px 20px rgba(59,130,246,0.18)}
+
+/* floating small piece icons */
+.floating-piece{position:absolute;opacity:0.06;width:160px;height:160px;pointer-events:none;transform:translate(-10%,-10%);}
+
+/* subtle button hover */
+button:hover{transform:translateY(-3px);transition:all 180ms ease}
+
+/* players area */
+.players-list{list-style:none;padding-left:0;margin:0;display:flex;gap:10px}
+.players-list li{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:8px}
+
diff --git a/public/styles/style.scss b/public/styles/style.scss
new file mode 100644
index 0000000..089ecfd
--- /dev/null
+++ b/public/styles/style.scss
@@ -0,0 +1,86 @@
+// Style source (SCSS) - variables & small helpers
+$primary: #2b6cb0;
+$accent: #f6ad55;
+$bg1: #0f172a;
+$bg2: #111827;
+$card: rgba(255,255,255,0.04);
+$glass: rgba(255,255,255,0.03);
+
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+ margin:0;padding:24px;background: linear-gradient(180deg, #0b1220 0%, #0f172a 60%);color:#e6eef8;
+}
+
+.page{max-width:1100px;margin:0 auto}
+
+header h2{margin:0 0 12px 0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.4)}
+
+.card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:16px;border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,0.6);}
+
+button{background:$primary;color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}
+button[disabled]{opacity:0.5;cursor:not-allowed}
+input[type="text"], input[type="search"]{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:inherit}
+
+a{color:$accent;text-decoration:none}
+a:hover{text-decoration:underline}
+
+#log{white-space:pre-wrap;border-radius:8px;background:$glass;padding:8px;height:280px;overflow:auto;color:#dfeeff}
+
+#board{width:800px;height:800px;display:grid;grid-template-columns:repeat(8,1fr);border-radius:6px;overflow:hidden;background-size:cover}
+
+/* make board responsive on smaller screens */
+@media (max-width:900px){
+ #board{width:min(92vw,680px);height:min(92vw,680px)}
+}
+
+.muted{opacity:0.8;color:#b9c6d9}
+
+/* small helpers */
+.controls{display:flex;gap:8px;align-items:center}
+
+/* Chat / players list */
+#players{margin:6px 0;padding-left:18px}
+
+/* visually prominent copy button */
+#copyInviteBtn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:6px 10px;border-radius:8px}
+
+/* host badge */
+#youAreHost{background:rgba(255,255,255,0.04);padding:6px 8px;border-radius:6px;margin-left:6px}
+
+/* layout helpers used from game.html */
+.layout-row{display:flex;gap:20px;align-items:flex-start}
+
+/* board tweaks */
+#board{border:1px solid #333;position:relative;background-image: url('/assets/chess-pieces/boards/8x8_wood.svg');background-size:cover}
+
+/* square cells and piece images (used by renderFen) */
+.square{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
+.square img, .piece{max-width:78%;max-height:78%;user-select:none}
+
+/* Lobby / hero styles - decorative and fun */
+.hero{
+ display:flex;align-items:center;justify-content:space-between;padding:28px;border-radius:12px;margin-bottom:18px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.04);
+ background: linear-gradient(135deg, rgba(43,108,176,0.14), rgba(246,173,85,0.06));
+}
+.hero .title{font-size:28px;font-weight:800;letter-spacing:-0.5px}
+.hero .subtitle{color:rgba(255,255,255,0.85);margin-top:6px;font-weight:500}
+.hero .decor{position:absolute;right:-80px;top:-60px;opacity:0.06;width:420px;height:420px;filter:blur(6px);transform:rotate(20deg)}
+
+.card.lobby{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px}
+
+/* buttons variants */
+.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:inherit}
+.btn-cta{background:linear-gradient(90deg,#3b82f6,#60a5fa);box-shadow:0 8px 20px rgba(59,130,246,0.18)}
+
+/* floating small piece icons */
+.floating-piece{position:absolute;opacity:0.06;width:160px;height:160px;pointer-events:none;transform:translate(-10%,-10%);}
+
+/* subtle button hover */
+button:hover{transform:translateY(-3px);transition:all 180ms ease}
+
+/* players area */
+.players-list{list-style:none;padding-left:0;margin:0;display:flex;gap:10px}
+.players-list li{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:8px}
+
diff --git a/public/waiting.html b/public/waiting.html
index 50d9ec8..52d3f9f 100644
--- a/public/waiting.html
+++ b/public/waiting.html
@@ -3,23 +3,32 @@
+
+ ChessNut
+ Créez ou rejoignez une partie — rapide, simple et fun 🎯
+
+ 
+
+
+ Invite your friends — play together
+
+
+
+
+
+
+
+
+
+ ChessNut — Salle d'attente
-
-
- Room: -
- Status: -
- Joueurs: 0/2
-
-
-
-
-
+
+
+ 
+
-
-
+
+
+
+
+
+
+ ChessNut — Salle d'attente
+ Préparez-vous, invitez un ami et lancez la partie quand tout le monde est prêt.
+
+ Room: -
+ Status: -
+ Joueurs: 0/2
+
+
+
+
+
+
+