oupsi avec la pièce jointe c'est mieu

2026-09-28 11:47:44 +02:00
parent 9ac50800bb
commit 4659049cef
9 changed files with 593 additions and 0 deletions
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <title>Blind Test – Buzzer</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body class="buzzer-page">
+  <!-- Saisie du nom -->
+  <div id="joinView" class="card" hidden>
+    <h2>Rejoindre la partie</h2>
+    <div class="row">
+      <input id="name" type="text" placeholder="Ton nom" maxlength="20" autocomplete="off">
+      <button id="joinBtn" class="primary">Rejoindre</button>
+    </div>
+    <p id="joinError" class="error"></p>
+  </div>
+
+  <!-- Buzzer -->
+  <div id="playView" hidden style="display:none;flex-direction:column;align-items:center;gap:20px;width:100%">
+    <div class="me"><span id="meName"></span><span id="meScore"></span></div>
+    <button id="buzz" disabled>BUZZ</button>
+    <div id="msg"></div>
+    <ul id="board" class="board" style="width:100%;max-width:420px"></ul>
+  </div>
+
+<script src="/socket.io/socket.io.js"></script>
+<script>
+const $ = id => document.getElementById(id);
+const params = new URLSearchParams(location.search);
+const roomId = (params.get('room') || '').toUpperCase();
+const KEY = 'bt_player';
+let saved = JSON.parse(localStorage.getItem(KEY) || 'null') || {};
+if (saved.roomId !== roomId) saved = { name: saved.name || '' }; // autre room : on garde juste le nom
+let me = null;
+let state = { phase: 'lobby', players: [], buzzer: null, lockedOut: [] };
+const socket = io();
+
+function showJoin(err) {
+  $('joinView').hidden = false;
+  $('playView').style.display = 'none';
+  if (err) $('joinError').textContent = err;
+  if (!$('name').value) $('name').value = saved.name || '';
+}
+function join(name, silent) {
+  if (!roomId) return showJoin('Scanne le QR code affiché sur l\'écran principal.');
+  socket.emit('player:join', { roomId, token: saved.token, name }, res => {
+    if (res.error) {
+      if (res.error === 'no_room') {
+        if (silent && me) return setTimeout(() => join(name, true), 2000); // le serveur a peut-être redémarré
+        return showJoin('Partie introuvable. Rescanne le QR code.');
+      }
+      if (res.error === 'name_taken') return showJoin('Ce nom est déjà pris.');
+      return showJoin('Entre un nom.');
+    }
+    me = res;
+    saved = { roomId, token: res.token, name: res.name };
+    localStorage.setItem(KEY, JSON.stringify(saved));
+    $('joinView').hidden = true;
+    $('playView').style.display = 'flex';
+    $('meName').textContent = res.name;
+    render();
+  });
+}
+socket.on('connect', () => {
+  if (saved.token && saved.name) join(saved.name, true);
+  else showJoin();
+});
+socket.on('state', s => { state = s; render(); });
+
+function render() {
+  if (!me) return;
+  const mine = state.players.find(p => p.id === me.id);
+  $('meScore').textContent = mine ? `${mine.score} pt${mine.score > 1 ? 's' : ''}` : '';
+  const locked = state.lockedOut.includes(me.id);
+  const buzz = $('buzz');
+  let msg = '', enabled = false, label = 'BUZZ';
+  switch (state.phase) {
+    case 'lobby':   msg = 'En attente du prochain morceau…'; label = '⏳'; break;
+    case 'playing': if (locked) { msg = 'Bloqué pour ce morceau'; label = '🚫'; } else { enabled = true; msg = 'Buzze !'; } break;
+    case 'buzzed':  msg = state.buzzer && state.buzzer.id === me.id ? 'À toi de répondre !' : `${state.buzzer ? state.buzzer.name : ''} a buzzé`; label = '🔔'; break;
+    case 'result':  msg = state.buzzer ? `${state.buzzer.name} marque un point !` : ''; label = '✅'; break;
+    case 'ended':   msg = 'Partie terminée !'; label = '🏆'; break;
+  }
+  buzz.disabled = !enabled;
+  buzz.textContent = label;
+  $('msg').textContent = msg;
+
+  const board = $('board'); board.textContent = '';
+  [...state.players].sort((a, b) => b.score - a.score || a.name.localeCompare(b.name)).forEach(p => {
+    const li = document.createElement('li');
+    const n = document.createElement('span'); n.className = 'name'; n.textContent = p.name;
+    const s = document.createElement('span'); s.className = 'score'; s.textContent = p.score;
+    li.append(n, s); board.appendChild(li);
+  });
+}
+
+$('buzz').addEventListener('pointerdown', e => {
+  e.preventDefault();
+  if ($('buzz').disabled) return;
+  socket.emit('player:buzz');
+  if (navigator.vibrate) navigator.vibrate(80);
+});
+$('joinBtn').addEventListener('click', () => { $('joinError').textContent = ''; join($('name').value, false); });
+$('name').addEventListener('keydown', e => { if (e.key === 'Enter') $('joinBtn').click(); });
+</script>
+</body>
+</html>
@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Blind Test – Master</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<main class="master">
+  <header><h1>🎧 Blind Test</h1><div id="roomTag" class="tag"></div></header>
+
+  <div id="mainLayout" class="layout">
+    <section>
+      <!-- Lobby : QR code + saisie de l'URL -->
+      <div id="lobby" class="card">
+        <div class="lobby-grid">
+          <div class="qr">
+            <img id="qr" alt="QR code pour rejoindre la partie">
+            <p id="joinUrl" class="small"></p>
+          </div>
+          <div>
+            <h2>Nouveau morceau</h2>
+            <p class="muted">Colle l'URL d'une vidéo YouTube puis valide.</p>
+            <div class="row">
+              <input id="url" type="url" placeholder="https://www.youtube.com/watch?v=…" autocomplete="off">
+              <button id="go" class="primary">Valider</button>
+            </div>
+            <p id="urlError" class="error"></p>
+            <button id="endFromLobby" class="ghost">Terminer la partie</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Jeu : vidéo + buzz -->
+      <div id="game" class="card" hidden>
+        <div class="video">
+          <div id="yt"></div>
+          <div id="mask" class="mask" hidden>🎵</div>
+        </div>
+        <div id="status" class="status"></div>
+        <div id="judge" class="judge" hidden>
+          <button id="btnTrue" class="ok">✅ Vrai</button>
+          <button id="btnFalse" class="ko">❌ Faux</button>
+        </div>
+        <div class="row">
+          <button id="next" class="primary"></button>
+          <button id="endBtn" class="ghost">Terminer la partie</button>
+          <label><input type="checkbox" id="hide"> Masquer la vidéo</label>
+        </div>
+      </div>
+
+      <!-- Fin de partie -->
+      <div id="endScreen" class="card" hidden>
+        <h2>🏆 Résultats</h2>
+        <ol id="final" class="board final"></ol>
+        <button id="newGame" class="primary">Nouvelle partie</button>
+      </div>
+    </section>
+
+    <aside id="side" class="card">
+      <h2>Participants</h2>
+      <ul id="board" class="board"></ul>
+      <p id="empty" class="muted">Personne n'a encore rejoint.</p>
+    </aside>
+  </div>
+</main>
+
+<script src="/socket.io/socket.io.js"></script>
+<script>
+const $ = id => document.getElementById(id);
+const socket = io();
+let roomId = localStorage.getItem('bt_room');
+let state = { phase: 'lobby', players: [], buzzer: null, lockedOut: [] };
+let nextVideo = null;
+
+/* ---------- YouTube ---------- */
+let yt = null, ytReady = false, queued = null;
+const apiTag = document.createElement('script');
+apiTag.src = 'https://www.youtube.com/iframe_api';
+document.head.appendChild(apiTag);
+window.onYouTubeIframeAPIReady = () => { if (queued && !yt) createPlayer(); };
+function createPlayer() {
+  yt = new YT.Player('yt', {
+    width: '100%', height: '100%',
+    playerVars: { autoplay: 1, rel: 0, playsinline: 1, origin: location.origin },
+    events: { onReady: () => { ytReady = true; if (queued) { yt.loadVideoById(queued); queued = null; } } }
+  });
+}
+function loadVideo(id) {
+  if (ytReady) { yt.loadVideoById(id); return; }
+  queued = id;
+  if (!yt && window.YT && YT.Player) createPlayer();
+}
+const ytDo = fn => { if (ytReady) yt[fn](); };
+
+function parseYoutubeId(input) {
+  input = input.trim();
+  if (/^[\w-]{11}$/.test(input)) return input;
+  try {
+    const u = new URL(input);
+    const h = u.hostname.replace(/^www\.|^m\./, '');
+    if (h === 'youtu.be') return u.pathname.slice(1, 12);
+    if (h.endsWith('youtube.com')) {
+      if (u.searchParams.get('v')) return u.searchParams.get('v').slice(0, 11);
+      const m = u.pathname.match(/^\/(embed|shorts|live)\/([\w-]{11})/);
+      if (m) return m[2];
+    }
+  } catch (e) {}
+  return null;
+}
+
+/* ---------- Socket ---------- */
+socket.on('connect', () => {
+  socket.emit('master:create', { roomId }, res => {
+    roomId = res.roomId;
+    localStorage.setItem('bt_room', roomId);
+    const joinUrl = `${location.origin}/buzzer.html?room=${roomId}`;
+    $('qr').src = '/qr.svg?text=' + encodeURIComponent(joinUrl);
+    $('joinUrl').textContent = joinUrl;
+    $('roomTag').textContent = 'SALLE ' + roomId;
+  });
+});
+socket.on('state', s => { const prev = state.phase; state = s; render(prev); });
+
+/* ---------- Rendu ---------- */
+function sorted(players) {
+  return [...players].sort((a, b) => b.score - a.score || a.name.localeCompare(b.name));
+}
+function fillBoard(el, players, medals) {
+  el.textContent = '';
+  const icons = ['🥇', '🥈', '🥉'];
+  sorted(players).forEach((p, i) => {
+    const li = document.createElement('li');
+    if (medals) {
+      const m = document.createElement('span'); m.textContent = icons[i] || (i + 1) + '.'; li.appendChild(m);
+    } else {
+      const d = document.createElement('span'); d.className = 'dot' + (p.connected ? '' : ' off'); li.appendChild(d);
+    }
+    const n = document.createElement('span'); n.className = 'name'; n.textContent = p.name;
+    const s = document.createElement('span'); s.className = 'score'; s.textContent = p.score;
+    li.append(n, s);
+    el.appendChild(li);
+  });
+}
+function render(prev) {
+  const ph = state.phase;
+  $('lobby').hidden = ph !== 'lobby';
+  $('game').hidden = !['playing', 'buzzed', 'result'].includes(ph);
+  $('endScreen').hidden = ph !== 'ended';
+  $('side').hidden = ph === 'ended';
+  $('mainLayout').style.gridTemplateColumns = ph === 'ended' ? '1fr' : '';
+  $('empty').hidden = state.players.length > 0;
+  fillBoard($('board'), state.players, false);
+  fillBoard($('final'), state.players, true);
+
+  // Vidéo
+  if (ph !== prev) {
+    if (ph === 'playing' && prev === 'lobby' && nextVideo) { loadVideo(nextVideo); nextVideo = null; }
+    else if (ph === 'playing' && prev === 'buzzed') ytDo('playVideo');
+    else if (ph === 'buzzed') ytDo('pauseVideo');
+    else if (ph === 'lobby' || ph === 'ended') ytDo('stopVideo');
+  }
+
+  // Statut
+  const name = state.buzzer ? state.buzzer.name : '';
+  let text = '';
+  if (ph === 'playing') {
+    text = '🎵 Écoute… premier à buzzer !';
+    if (state.lockedOut.length) text += ` (${state.lockedOut.length} bloqué${state.lockedOut.length > 1 ? 's' : ''})`;
+  } else if (ph === 'buzzed') text = `🔔 ${name} propose …`;
+  else if (ph === 'result') text = `✅ ${name} gagne un point !`;
+  $('status').textContent = text;
+  $('judge').hidden = ph !== 'buzzed';
+  $('next').textContent = ph === 'result' ? 'Morceau suivant ▶' : 'Passer ce morceau ⏭';
+  updateMask();
+}
+function updateMask() {
+  $('mask').hidden = !($('hide').checked && state.phase !== 'result');
+}
+$('hide').addEventListener('change', updateMask);
+
+/* ---------- Actions ---------- */
+function submitUrl() {
+  const id = parseYoutubeId($('url').value);
+  if (!id) { $('urlError').textContent = "URL YouTube invalide."; return; }
+  $('urlError').textContent = '';
+  nextVideo = id;
+  $('url').value = '';
+  socket.emit('master:start');
+}
+$('go').addEventListener('click', submitUrl);
+$('url').addEventListener('keydown', e => { if (e.key === 'Enter') submitUrl(); });
+$('btnTrue').addEventListener('click', () => socket.emit('master:judge', true));
+$('btnFalse').addEventListener('click', () => socket.emit('master:judge', false));
+$('next').addEventListener('click', () => socket.emit('master:next'));
+$('endBtn').addEventListener('click', () => socket.emit('master:end'));
+$('endFromLobby').addEventListener('click', () => socket.emit('master:end'));
+$('newGame').addEventListener('click', () => socket.emit('master:newgame'));
+</script>
+</body>
+</html>
@@ -0,0 +1,55 @@
+:root{--bg:#0f1220;--card:#181c30;--card2:#222744;--text:#f2f4ff;--muted:#8d93b5;--accent:#7c5cff;--ok:#22c55e;--ko:#ef4444;--r:16px}
+*{box-sizing:border-box}
+[hidden]{display:none!important}
+body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
+h1,h2{margin:0}
+h2{font-size:1.25rem;margin-bottom:12px}
+.muted,.small{color:var(--muted)}
+.small{font-size:.85rem;word-break:break-all}
+.error{color:var(--ko);min-height:1.2em;margin:8px 0}
+.card{background:var(--card);border-radius:var(--r);padding:24px}
+.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
+input[type=url],input[type=text]{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;border:2px solid var(--card2);background:var(--bg);color:var(--text);font-size:1rem}
+input:focus{outline:none;border-color:var(--accent)}
+button{font:inherit;font-weight:700;border:none;border-radius:12px;padding:14px 22px;cursor:pointer;color:var(--text);background:var(--card2)}
+button:hover{filter:brightness(1.15)}
+button.primary{background:var(--accent)}
+button.ok{background:var(--ok);color:#052e12}
+button.ko{background:var(--ko)}
+button.ghost{background:transparent;border:2px solid var(--card2);color:var(--muted)}
+label{color:var(--muted);display:flex;gap:6px;align-items:center}
+
+/* Master */
+.master{max-width:1200px;margin:0 auto;padding:20px}
+.master header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
+.tag{background:var(--card);padding:6px 14px;border-radius:999px;color:var(--muted);font-weight:700;letter-spacing:.05em}
+.layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
+@media(max-width:900px){.layout{grid-template-columns:1fr}}
+.lobby-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center}
+@media(max-width:700px){.lobby-grid{grid-template-columns:1fr}}
+.qr img{width:100%;background:#fff;border-radius:12px;padding:8px;display:block}
+.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
+.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
+.mask{position:absolute;inset:0;background:linear-gradient(135deg,#2b2250,#0f1220);display:flex;align-items:center;justify-content:center;font-size:6rem;z-index:2}
+.status{font-size:1.6rem;font-weight:800;margin:20px 0 12px;min-height:2em}
+.judge{display:flex;gap:16px;margin-bottom:16px}
+.judge button{flex:1;font-size:1.6rem;padding:22px}
+.board{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
+.board li{display:flex;align-items:center;gap:10px;background:var(--card2);padding:10px 14px;border-radius:10px}
+.board .name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.board .score{font-weight:800;font-size:1.1rem}
+.dot{width:10px;height:10px;border-radius:50%;background:var(--ok)}
+.dot.off{background:#555}
+.board.final li{font-size:1.4rem;padding:16px 20px}
+#endScreen{text-align:center}
+#endScreen .board{margin:20px auto 28px;max-width:520px;text-align:left}
+
+/* Buzzer */
+.buzzer-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;-webkit-user-select:none;user-select:none}
+.buzzer-page .card{width:100%;max-width:420px}
+.buzzer-page .row{flex-direction:column;align-items:stretch}
+.me{display:flex;justify-content:space-between;width:100%;max-width:420px;font-weight:700}
+#buzz{width:min(72vw,320px);aspect-ratio:1;border-radius:50%;font-size:2.6rem;font-weight:900;letter-spacing:.05em;color:#fff;background:radial-gradient(circle at 30% 30%,#ff7b7b,#d00000);box-shadow:0 12px 0 #7a0000,0 20px 40px rgba(0,0,0,.5);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .05s,box-shadow .05s}
+#buzz:active:not(:disabled){transform:translateY(8px);box-shadow:0 4px 0 #7a0000}
+#buzz:disabled{background:#3a3f5c;box-shadow:0 12px 0 #262a40;color:#8d93b5;font-size:1.3rem;cursor:not-allowed;padding:20px}
+#msg{font-size:1.2rem;font-weight:700;min-height:1.5em}