diff --git a/index.html b/index.html
index 43f179d..7415a95 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,9 @@
SHOOTING WORD
Введите имя канала для игры
+
+
СКОПИРОВАТЬ ССЫЛКУ
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 = `${username}: ${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} 0 `;
})();
-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;