feat: add settings and browser input

js/config.js

@@ -23,6 +23,7 @@ const CONFIG = {
     heavyEnemyChancePerWave: 0.02,
     scoreSimple: 10,
     scoreHeavy: 50,
+    gameOverDelay: 10000,
   },
   speed: {
     simpleEnemyCrossTime: 60,

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;

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";

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("", "");
   },
 };

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();

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";