From 6c16d97670255ff49f51830605f21929e17dd041 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 25 Jun 2026 07:21:58 +0500
Subject: [PATCH] feat: add settings and browser input

---
 TODO.md                     |  3 +++
 game.html                   | 11 +++++---
 index.html                  |  3 +++
 js/config.js                |  1 +
 js/game.js                  | 43 +++++++++++++++++++++++++----
 js/index.js                 |  4 ++-
 js/input.js                 | 54 +++++++++++++++++++++++++++++++++----
 js/main.js                  |  7 +++--
 tmi.min.js => js/tmi.min.js |  0
 js/utils.js                 |  5 ++++
 serve.json                  |  6 +++++
 style.css                   | 45 ++++++++++++++++++++++++++++++-
 12 files changed, 165 insertions(+), 17 deletions(-)
 create mode 100644 TODO.md
 rename tmi.min.js => js/tmi.min.js (100%)
 create mode 100644 serve.json
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..d2e2c30
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,3 @@
+# TODO
+
+- [ ] Переделать процесс работы с инпутами — прятать локальные, если не используется
diff --git a/game.html b/game.html
index cee5f1e..e57424e 100644
--- a/game.html
+++ b/game.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Shooting word</title>
     <link rel="stylesheet" href="style.css" />
-    <script src="tmi.min.js"></script>
+    <script src="js/tmi.min.js"></script>
   </head>
   <body>
     <div id="game-container">
@@ -17,8 +17,13 @@
         <span class="ui-text">LIVES: <span id="lives">3</span></span>
       </div>
 
-      <div id="input-display" class="hidden">
-        <div id="typed-text"></div>
+      <div id="input-display">
+        <div id="input-local">
+          <div id="typed-text"></div>
+        </div>
+        <div id="input-chat" class="hidden">
+          <div id="chat-text"></div>
+        </div>
       </div>
 
       <div id="start-screen" class="hidden">
diff --git a/index.html b/index.html
index 43f179d..7415a95 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,9 @@
         <div class="screen-title">SHOOTING WORD</div>
         <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>
         <button id="copy-btn">СКОПИРОВАТЬ ССЫЛКУ</button>
         <div id="game-link"></div>
         <div class="obs-note">
diff --git a/js/config.js b/js/config.js
index 040b6a0..fdac298 100644
--- a/js/config.js
+++ b/js/config.js
@@ -23,6 +23,7 @@ const CONFIG = {
     heavyEnemyChancePerWave: 0.02,
     scoreSimple: 10,
     scoreHeavy: 50,
+    gameOverDelay: 10000,
   },
   speed: {
     simpleEnemyCrossTime: 60,
diff --git a/js/game.js b/js/game.js
index 718c4d7..cb70e2f 100644
--- a/js/game.js
+++ b/js/game.js
@@ -20,6 +20,35 @@ let introPlaying = false;
 
 let playerStats = {};
 
+const params = new URLSearchParams(location.search);
+const settings = {
+  autoRestart: params.get("autoRestart") !== "0",
+};
+
+function initKeyboardBridge() {
+  if (initKeyboardBridge._done) return;
+  initKeyboardBridge._done = true;
+  let buffer = "";
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      buffer = buffer.slice(0, -1);
+      InputModule.updateLocalDisplay(buffer);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const line = buffer;
+      buffer = "";
+      InputModule.submitLocal(line);
+    } else if (e.key === "Escape") {
+      buffer = "";
+      InputModule.clear();
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+      buffer += e.key;
+      InputModule.updateLocalDisplay(buffer);
+    }
+  });
+}
+
 const game = {
   launchProjectile(word, targetEnemy, isHit, username) {
     projectiles.push(new Projectile(word, targetEnemy, isHit, username));
@@ -137,11 +166,15 @@ function gameOver() {
     gameOverTimeout = null;
     document.getElementById("gameover-screen").classList.add("hidden");
     document.getElementById("ui-overlay").classList.add("hidden");
-    document.getElementById("input-display").classList.add("hidden");
+    document.getElementById("input-chat").classList.add("hidden");
     gameLoopStarted = false;
-    recalc();
-    runIntro();
-  }, 10000);
+    if (settings.autoRestart) {
+      recalc();
+      runIntro();
+    } else {
+      document.body.classList.add("hidden");
+    }
+  }, CONFIG.game.gameOverDelay);
 }
 
 function startGame() {
@@ -168,7 +201,7 @@ function startGame() {
   document.getElementById("start-screen").classList.add("hidden");
   document.getElementById("gameover-screen").classList.add("hidden");
   document.getElementById("ui-overlay").classList.remove("hidden");
-  document.getElementById("input-display").classList.remove("hidden");
+  document.getElementById("input-chat").classList.remove("hidden");
 
   if (!gameLoopStarted) {
     gameLoopStarted = true;
diff --git a/js/index.js b/js/index.js
index 4843bd6..3ee9a64 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,10 +1,12 @@
 const input = document.getElementById("channel-input");
 const copyBtn = document.getElementById("copy-btn");
 const linkEl = document.getElementById("game-link");
+const autoRestartEl = document.getElementById("opt-auto-restart");
 
 function copyLink() {
   const name = input.value.trim().toLowerCase() || "Ku6ep_XBOCTuK";
-  const url = `${location.origin}${location.pathname.replace(/\/[^/]*$/, "/")}game.html?channel=${encodeURIComponent(name)}`;
+  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";
diff --git a/js/input.js b/js/input.js
index ed260d5..ca7a75f 100644
--- a/js/input.js
+++ b/js/input.js
@@ -1,5 +1,6 @@
 const InputModule = {
   currentLine: "",
+  localBuffer: "",
 
   submitLine(text, username) {
     const line = text.trim().toLowerCase();
@@ -16,22 +17,54 @@ const InputModule = {
     if (gameState !== "playing") return;
 
     this.currentLine = line;
-    this.updateDisplay(line);
+    this.updateChatDisplay(line, username);
 
     const enemy = this.findEnemy(line);
 
     this.animateShoot(line, enemy, username);
   },
 
+  submitLocal(text) {
+    const line = text.trim().toLowerCase();
+    if (!line) return;
+    if (introPlaying) return;
+
+    if (line === CONFIG.commands.play) {
+      if (gameState === "start" || gameState === "gameover") {
+        startGame();
+      }
+      return;
+    }
+
+    if (gameState !== "playing") return;
+
+    this.currentLine = line;
+    this.updateLocalDisplay(line);
+
+    const enemy = this.findEnemy(line);
+    const username = channelName;
+
+    this.animateShoot(line, enemy, username);
+  },
+
   animateShoot(line, enemy, username) {
-    const el = document.getElementById("typed-text");
+    const localEl = document.getElementById("typed-text");
+    const chatEl = document.getElementById("chat-text");
+
+    const isLocal = username === channelName;
+    const el = isLocal ? localEl : chatEl;
 
     el.classList.add("shooting");
 
     setTimeout(() => {
       el.classList.remove("shooting");
       this.currentLine = "";
-      this.updateDisplay("");
+      if (isLocal) {
+        this.updateLocalDisplay("");
+        this.localBuffer = "";
+      } else {
+        this.updateChatDisplay("", "");
+      }
 
       if (enemy) {
         game.launchProjectile(line, enemy, true, username);
@@ -50,13 +83,24 @@ const InputModule = {
     return null;
   },
 
-  updateDisplay(text) {
+  updateLocalDisplay(text) {
     const el = document.getElementById("typed-text");
     el.innerHTML = text;
   },
 
+  updateChatDisplay(text, username) {
+    const el = document.getElementById("chat-text");
+    if (text) {
+      el.innerHTML = `<span style="opacity:0.6">${username}:</span> ${text}`;
+    } else {
+      el.innerHTML = "";
+    }
+  },
+
   clear() {
     this.currentLine = "";
-    this.updateDisplay("");
+    this.localBuffer = "";
+    this.updateLocalDisplay("");
+    this.updateChatDisplay("", "");
   },
 };
diff --git a/js/main.js b/js/main.js
index 2d53245..67bb02b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -14,8 +14,9 @@
     `${CONFIG.texts.finalScoreLabel} <span id="final-score">0</span>`;
 })();
 
-const params = new URLSearchParams(location.search);
-const channel = params.get("channel") || "ku6ep_xboctuk";
+const gameParams = new URLSearchParams(location.search);
+const channel = gameParams.get("channel") || "ku6ep_xboctuk";
+const channelName = channel;
 const client = new tmi.Client({ channels: [channel] });
 client.connect();
 
@@ -24,6 +25,8 @@ client.on("message", (channel, tags, message, self) => {
   InputModule.submitLine(message, username);
 });
 
+initKeyboardBridge();
+
 window.addEventListener("resize", recalc);
 recalc();
 runIntro();
diff --git a/tmi.min.js b/js/tmi.min.js
similarity index 100%
rename from tmi.min.js
rename to js/tmi.min.js
diff --git a/js/utils.js b/js/utils.js
index 5f85417..095ed8a 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -87,6 +87,11 @@ function applyOverlayScale(W, H) {
     typed.style.fontSize = Math.round(20 * H / 1000) + "px";
     typed.style.minHeight = Math.round(28 * H / 1000) + "px";
   }
+  const chatText = document.getElementById("chat-text");
+  if (chatText) {
+    chatText.style.fontSize = Math.round(16 * H / 1000) + "px";
+    chatText.style.minHeight = Math.round(28 * H / 1000) + "px";
+  }
   const chForm = document.getElementById("channel-form");
   if (chForm) {
     chForm.querySelector(".screen-title").style.fontSize = Math.round(80 * H / 1000) + "px";
diff --git a/serve.json b/serve.json
new file mode 100644
index 0000000..20c6bac
--- /dev/null
+++ b/serve.json
@@ -0,0 +1,6 @@
+{
+  "cleanUrls": true,
+  "rewrites": [
+    { "source": "/game", "destination": "/game.html" }
+  ]
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index eb78492..dc91fdc 100644
--- a/style.css
+++ b/style.css
@@ -70,10 +70,20 @@ body {
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 14px 16px;
+  display: flex;
   background: rgba(0, 0, 0, 0.85);
   border-top: 1px solid #00ff41;
   z-index: 5;
+}
+#input-local {
+  flex: 1;
+  padding: 14px 16px;
+  border-right: 1px solid #00ff41;
+  text-align: center;
+}
+#input-chat {
+  flex: 1;
+  padding: 14px 16px;
   text-align: center;
 }
 #typed-text {
@@ -83,6 +93,14 @@ body {
   letter-spacing: 2px;
   text-shadow: 0 0 10px #00ff41;
 }
+#chat-text {
+  color: #00cc33;
+  font-size: 16px;
+  min-height: 28px;
+  letter-spacing: 1px;
+  text-shadow: 0 0 8px #00cc33;
+  opacity: 0.8;
+}
 #start-screen,
 #gameover-screen {
   position: absolute;
@@ -241,6 +259,31 @@ body {
 #channel-form input:focus {
   box-shadow: 0 0 30px rgba(0, 255, 65, 0.4);
 }
+#settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.settings-label {
+  color: #00cc33;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  opacity: 0.9;
+  text-shadow: 0 0 6px #00ff41;
+}
+.settings-label:hover {
+  opacity: 1;
+}
+.settings-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: #00ff41;
+  cursor: pointer;
+}
 #channel-form button {
   background: transparent;
   border: 2px solid #00ff41;
