diff --git a/web/static/index.html b/web/static/index.html index e28d5f4..ac9ec93 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -171,6 +171,23 @@ } #game-id-display span:hover { text-decoration: underline; } + .btn-view-script { + background: rgba(255,255,255,.12); + color: rgba(255,255,255,.9); + border: 1px solid rgba(255,255,255,.2); + border-radius: 999px; + padding: 6px 12px; + font-size: .72rem; + font-weight: 700; + letter-spacing: .3px; + cursor: pointer; + transition: background .15s, border-color .15s; + } + .btn-view-script:hover { + background: rgba(255,255,255,.18); + border-color: rgba(255,255,255,.35); + } + #status-badge { padding: 4px 14px; border-radius: 20px; @@ -612,6 +629,86 @@ } #winner-overlay.open { display: flex; } + #current-script-modal { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,.72); + backdrop-filter: blur(8px); + z-index: 140; + align-items: center; + justify-content: center; + padding: 16px; + } + #current-script-modal.open { display: flex; } + + .current-script-card { + width: min(960px, 96vw); + max-height: 86vh; + display: flex; + flex-direction: column; + background: rgba(15,15,15,.96); + border: 1px solid rgba(255,255,255,.14); + border-radius: 16px; + box-shadow: var(--shadow); + overflow: hidden; + } + .current-script-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 14px; + border-bottom: 1px solid rgba(255,255,255,.08); + background: rgba(255,255,255,.02); + } + .current-script-title { + font-size: .78rem; + text-transform: uppercase; + letter-spacing: 1.2px; + color: var(--gold); + font-weight: 800; + } + .current-script-controls { + display: flex; + align-items: center; + gap: 8px; + } + .btn-script-mini { + background: rgba(255,255,255,.1); + color: #fff; + border: 1px solid rgba(255,255,255,.2); + border-radius: 8px; + padding: 6px 10px; + font-size: .72rem; + cursor: pointer; + } + .btn-script-mini:hover { background: rgba(255,255,255,.16); } + .current-script-meta { + font-size: .72rem; + color: rgba(255,255,255,.6); + } + #current-script-pre { + margin: 0; + flex: 1; + overflow: auto; + padding: 12px; + background: #0d1117; + color: #e6edf3; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; + font-size: .84rem; + line-height: 1.45; + white-space: pre; + } + #current-script-pre .kw { color: #ff7b72; } + #current-script-pre .fn { color: #d2a8ff; } + #current-script-pre .str { color: #a5d6ff; } + #current-script-pre .num { color: #79c0ff; } + #current-script-pre .cmt { color: #8b949e; font-style: italic; } + #current-script-pre .op { color: #ff7b72; } + #current-script-pre .pun { color: #e6edf3; } + #current-script-pre .id { color: #e6edf3; } + .winner-card { background: rgba(20,20,20,.9); border: 1px solid rgba(255,255,255,.12); @@ -870,7 +967,9 @@
Hra:
Čekání…
-
+
+ +
@@ -919,6 +1018,23 @@ + +
+
+
+
+
Aktuální pravidlový skript
+
Načítám…
+
+
+ + +
+
+ 

+  

+

+
 
 

     

@@ -1011,6 +1127,7 @@ let restartRequestedAt = 0;
 let restartFallbackTimer = null;
 let joinPending = false;
 let tableVisible = false;
+let currentScriptOpen = false;
 
 const SUIT_ICONS  = { hearts:'♥', diamonds:'♦', spades:'♠', clubs:'♣' };
 const SUIT_NAMES  = { hearts:'Srdce', diamonds:'Kára', spades:'Piky', clubs:'Kříže' };
@@ -1056,6 +1173,7 @@ function connect() {
             activeRules = msg.rules || [];
             renderRulesTicker();
             renderActiveRulesList();
+            if (currentScriptOpen) refreshCurrentScript();
         } else if (msg.type === 'error') {
             if (joinPending) joinPending = false;
             if (isRestarting) {
@@ -1213,6 +1331,45 @@ function sendChoice(choice) {
     }));
 }
 
+async function fetchCurrentScript() {
+    if (!gameId) throw new Error('missing game id');
+    const resp = await fetch(`/api/script?game_id=${gameId}`);
+    if (!resp.ok) {
+        const text = await resp.text();
+        throw new Error(text || resp.statusText);
+    }
+    const data = await resp.json();
+    return data.script || '';
+}
+
+async function openCurrentScript() {
+    currentScriptOpen = true;
+    const modal = document.getElementById('current-script-modal');
+    modal.classList.add('open');
+    await refreshCurrentScript();
+}
+
+function closeCurrentScript(e) {
+    if (e && e.target && e.target.id !== 'current-script-modal') return;
+    currentScriptOpen = false;
+    document.getElementById('current-script-modal').classList.remove('open');
+}
+
+async function refreshCurrentScript() {
+    const pre = document.getElementById('current-script-pre');
+    const meta = document.getElementById('current-script-meta');
+    pre.textContent = 'Načítám skript…';
+    meta.textContent = 'Načítám…';
+    try {
+        const script = await fetchCurrentScript();
+        pre.innerHTML = highlight(formatJS(script));
+        meta.textContent = `Hra ${String(gameId || '').toUpperCase()} · ${new Date().toLocaleTimeString()}`;
+    } catch (err) {
+        pre.textContent = `Chyba: ${err.message}`;
+        meta.textContent = 'Skript se nepodařilo načíst';
+    }
+}
+
 // ── Rule generation flow ───────────────────────────────────────────────
 async function generateRule() {
     const prompt = document.getElementById('rule-prompt-input').value.trim();