fix: update settings

img/github.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>

img/sprite.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="icon-github" viewBox="0 0 24 24">
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+  </symbol>
+  <symbol id="icon-twitch" viewBox="0 0 24 24">
+    <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/>
+  </symbol>
+</svg>

img/twitch.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>

index.html

@@ -13,25 +13,42 @@
         <div class="screen-subtitle">Введите имя канала для игры</div>
         <input type="text" id="channel-input" placeholder="Ku6ep_XBOCTuK" autofocus />
         <div id="settings-panel">
-          <label class="settings-label"><input type="checkbox" id="opt-auto-restart" checked> Автоперезапуск после поражения</label>
+          <div class="settings-row">
+            <label class="settings-label">
+              <input type="checkbox" id="opt-single-play" /> Скрывать игру после поражения
+            </label>
+            <button type="button" class="hint-toggle">?</button>
+          </div>
+          <div class="settings-hints hidden">
+            <div class="settings-hint">С включенной галочкой игра скроется после одной партии.</div>
+            <div class="settings-hint">
+              В OBS для этого источника нужно включить «Отключать источник, когда он не виден»
+            </div>
+            <div class="settings-hint">Чтобы запустить игру заново, скройте и снова покажите источник.</div>
+            <div class="settings-hint">Можно автоматизировать через Streamer.bot.</div>
+          </div>
+        </div>
+        <div class="btn-row">
+          <button id="open-btn" class="btn-primary">ОТКРЫТЬ В БРАУЗЕРЕ</button>
+          <button id="copy-btn" class="btn-primary">СКОПИРОВАТЬ ССЫЛКУ</button>
         </div>
-        <button id="copy-btn">СКОПИРОВАТЬ ССЫЛКУ</button>
         <div id="game-link"></div>
         <div class="obs-note">
-          Вставь ссылку в OBS как источник браузера<br />
+          Открой ссылку в браузере<br />
-          Желательно высоту побольше
+          Или вставь ссылку в OBS как источник браузера<br />
+          Желательно высоту побольше<br />
         </div>
         <div class="links-row">
           <a href="https://github.com/Ku6epXBOCTuK/shooting-word-html" target="_blank" class="page-link">
-            <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+            <svg class="link-icon"><use href="img/sprite.svg#icon-github" /></svg>
             GitHub
           </a>
           <a href="https://github.com/Ku6epXBOCTuK/shooting-word-html/issues" target="_blank" class="page-link">
-            <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+            <svg class="link-icon"><use href="img/sprite.svg#icon-github" /></svg>
             Увидели ошибку? Пиши сюда
           </a>
           <a href="https://www.twitch.tv/ku6ep_xboctuk" target="_blank" class="page-link">
-            <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>
+            <svg class="link-icon"><use href="img/sprite.svg#icon-twitch" /></svg>
             Twitch
           </a>
         </div>

js/game.js

@@ -25,7 +25,7 @@ let playerStats = {};
 
 const params = new URLSearchParams(location.search);
 const settings = {
-  autoRestart: params.get("autoRestart") !== "0",
+  singlePlay: params.get("singlePlay") === "1",
 };
 
 function initKeyboardBridge() {
@@ -183,7 +183,7 @@ function gameOver() {
     document.getElementById("ui-overlay").classList.add("hidden");
     document.getElementById("input-chat").classList.add("hidden");
     gameLoopStarted = false;
-    if (settings.autoRestart) {
+    if (!settings.singlePlay) {
       recalc();
       runIntro();
     } else {

js/index.js

@@ -1,19 +1,43 @@
 const input = document.getElementById("channel-input");
 const copyBtn = document.getElementById("copy-btn");
+const openBtn = document.getElementById("open-btn");
 const linkEl = document.getElementById("game-link");
-const autoRestartEl = document.getElementById("opt-auto-restart");
+const singlePlayEl = document.getElementById("opt-single-play");
+
+function buildUrl() {
+  const name = input.value.trim().toLowerCase() || "Ku6ep_XBOCTuK";
+  const single = singlePlayEl.checked ? "1" : "0";
+  return `${location.origin}${location.pathname.replace(/\/[^/]*$/, "/")}game?channel=${encodeURIComponent(name)}&singlePlay=${single}`;
+}
+
+function updateLink() {
+  linkEl.textContent = buildUrl();
+  linkEl.className = "";
+}
 
 function copyLink() {
-  const name = input.value.trim().toLowerCase() || "Ku6ep_XBOCTuK";
+  navigator.clipboard.writeText(buildUrl()).then(() => {
-  const autoRestart = autoRestartEl.checked ? "1" : "0";
-  const url = `${location.origin}${location.pathname.replace(/\/[^/]*$/, "/")}game.html?channel=${encodeURIComponent(name)}&autoRestart=${autoRestart}`;
-  navigator.clipboard.writeText(url).then(() => {
     linkEl.textContent = "СКОПИРОВАНО!";
     linkEl.className = "copied";
+    setTimeout(updateLink, 1500);
   });
 }
 
-copyBtn.addEventListener("click", copyLink);
+function openLink() {
+  window.open(buildUrl(), "_blank");
+}
+
+input.addEventListener("input", updateLink);
+singlePlayEl.addEventListener("change", updateLink);
 input.addEventListener("keydown", (e) => {
   if (e.key === "Enter") copyLink();
 });
+
+copyBtn.addEventListener("click", copyLink);
+openBtn.addEventListener("click", openLink);
+
+updateLink();
+
+document.querySelector(".hint-toggle").addEventListener("click", () => {
+  document.querySelector(".settings-hints").classList.toggle("hidden");
+});

serve.json

@@ -1,6 +1,7 @@
 {
-  "cleanUrls": true,
+  "cleanUrls": false,
   "rewrites": [
-    { "source": "/game", "destination": "/game.html" }
+    { "source": "/game", "destination": "/game.html" },
+    { "source": "/", "destination": "/index.html" }
   ]
 }

style.css

@@ -65,6 +65,12 @@ body {
   text-shadow: 0 0 8px #00ff41;
   letter-spacing: 1px;
 }
+.ui-text:nth-child(2) {
+  text-align: center;
+}
+.ui-text:nth-child(3) {
+  text-align: right;
+}
 #input-display {
   position: absolute;
   bottom: 0;
@@ -283,6 +289,10 @@ body {
   gap: 10px;
   margin-bottom: 12px;
 }
+.settings-row {
+  display: flex;
+  align-items: center;
+}
 .settings-label {
   color: #00cc33;
   font-size: 28px;
@@ -296,6 +306,39 @@ body {
 .settings-label:hover {
   opacity: 1;
 }
+.hint-toggle {
+  background: transparent;
+  border: 2px solid #00aa33;
+  color: #00aa33;
+  font-size: 18px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  text-shadow: 0 0 6px #00aa33;
+  transition: all 0.15s;
+  margin-left: 8px;
+}
+.hint-toggle:hover {
+  border-color: #00ff41;
+  color: #00ff41;
+  text-shadow: 0 0 10px #00ff41;
+}
+.settings-hints {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+}
+.settings-hint {
+  color: #00aa33;
+  font-size: 18px;
+  text-shadow: none;
+  line-height: 1.5;
+  max-width: 500px;
+  text-align: center;
+}
 .settings-label input[type="checkbox"] {
   width: 28px;
   height: 28px;
@@ -303,7 +346,12 @@ body {
   cursor: pointer;
   margin-right: 12px;
 }
-#channel-form button {
+.btn-row {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.btn-primary {
   background: transparent;
   border: 2px solid #00ff41;
   color: #00ff41;
@@ -315,7 +363,7 @@ body {
   transition: all 0.15s;
   min-width: 260px;
 }
-#channel-form button:hover {
+.btn-primary:hover {
   background: rgba(0, 255, 65, 0.1);
   box-shadow: 0 0 30px rgba(0, 255, 65, 0.4);
 }
@@ -340,7 +388,9 @@ body {
 }
 .links-row {
   display: flex;
-  gap: 40px;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px 40px;
   margin-top: 16px;
 }
 .page-link {
@@ -357,8 +407,8 @@ body {
 .link-icon {
   width: 24px;
   height: 24px;
+  fill: currentColor;
   flex-shrink: 0;
-  color: #00ff41;
 }
 .page-link:hover {
   opacity: 1;