Ku6epXBOCTuK/shooting-word
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add settings and browser input

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-06-25 07:23:34 +05:00
parent b3b0c645e9
commit 6c16d97670
12 changed files with 165 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+3
View File
@@ -0,0 +1,3 @@
# TODO
- [ ] Переделать процесс работы с инпутами — прятать локальные, если не используется
game.html
+8 -3
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shooting word</title> <title>Shooting word</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="tmi.min.js"></script> <script src="js/tmi.min.js"></script>
</head> </head>
<body> <body>
<div id="game-container"> <div id="game-container">
@@ -17,8 +17,13 @@
<span class="ui-text">LIVES: <span id="lives">3</span></span> <span class="ui-text">LIVES: <span id="lives">3</span></span>
</div> </div>
<div id="input-display" class="hidden"> <div id="input-display">
<div id="typed-text"></div> <div id="input-local">
<div id="typed-text"></div>
</div>
<div id="input-chat" class="hidden">
<div id="chat-text"></div>
</div>
</div> </div>
<div id="start-screen" class="hidden"> <div id="start-screen" class="hidden">
index.html
+3
View File
@@ -12,6 +12,9 @@
<div class="screen-title">SHOOTING WORD</div> <div class="screen-title">SHOOTING WORD</div>
<div class="screen-subtitle">Введите имя канала для игры</div> <div class="screen-subtitle">Введите имя канала для игры</div>
<input type="text" id="channel-input" placeholder="Ku6ep_XBOCTuK" autofocus /> <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> <button id="copy-btn">СКОПИРОВАТЬ ССЫЛКУ</button>
<div id="game-link"></div> <div id="game-link"></div>
<div class="obs-note"> <div class="obs-note">
js/config.js
+1
View File
@@ -23,6 +23,7 @@ const CONFIG = {
heavyEnemyChancePerWave: 0.02, heavyEnemyChancePerWave: 0.02,
scoreSimple: 10, scoreSimple: 10,
scoreHeavy: 50, scoreHeavy: 50,
gameOverDelay: 10000,
}, },
speed: { speed: {
simpleEnemyCrossTime: 60, simpleEnemyCrossTime: 60,
js/game.js
+38 -5
View File
@@ -20,6 +20,35 @@ let introPlaying = false;
let playerStats = {}; 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 = { const game = {
launchProjectile(word, targetEnemy, isHit, username) { launchProjectile(word, targetEnemy, isHit, username) {
projectiles.push(new Projectile(word, targetEnemy, isHit, username)); projectiles.push(new Projectile(word, targetEnemy, isHit, username));
@@ -137,11 +166,15 @@ function gameOver() {
gameOverTimeout = null; gameOverTimeout = null;
document.getElementById("gameover-screen").classList.add("hidden"); document.getElementById("gameover-screen").classList.add("hidden");
document.getElementById("ui-overlay").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; gameLoopStarted = false;
recalc(); if (settings.autoRestart) {
runIntro(); recalc();
}, 10000); runIntro();
} else {
document.body.classList.add("hidden");
}
}, CONFIG.game.gameOverDelay);
} }
function startGame() { function startGame() {
@@ -168,7 +201,7 @@ function startGame() {
document.getElementById("start-screen").classList.add("hidden"); document.getElementById("start-screen").classList.add("hidden");
document.getElementById("gameover-screen").classList.add("hidden"); document.getElementById("gameover-screen").classList.add("hidden");
document.getElementById("ui-overlay").classList.remove("hidden"); document.getElementById("ui-overlay").classList.remove("hidden");
document.getElementById("input-display").classList.remove("hidden"); document.getElementById("input-chat").classList.remove("hidden");
if (!gameLoopStarted) { if (!gameLoopStarted) {
gameLoopStarted = true; gameLoopStarted = true;
js/index.js
+3 -1
View File
@@ -1,10 +1,12 @@
const input = document.getElementById("channel-input"); const input = document.getElementById("channel-input");
const copyBtn = document.getElementById("copy-btn"); const copyBtn = document.getElementById("copy-btn");
const linkEl = document.getElementById("game-link"); const linkEl = document.getElementById("game-link");
const autoRestartEl = document.getElementById("opt-auto-restart");
function copyLink() { function copyLink() {
const name = input.value.trim().toLowerCase() || "Ku6ep_XBOCTuK"; 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(() => { navigator.clipboard.writeText(url).then(() => {
linkEl.textContent = "СКОПИРОВАНО!"; linkEl.textContent = "СКОПИРОВАНО!";
linkEl.className = "copied"; linkEl.className = "copied";
js/input.js
+49 -5
View File
@@ -1,5 +1,6 @@
const InputModule = { const InputModule = {
currentLine: "", currentLine: "",
localBuffer: "",
submitLine(text, username) { submitLine(text, username) {
const line = text.trim().toLowerCase(); const line = text.trim().toLowerCase();
@@ -16,22 +17,54 @@ const InputModule = {
if (gameState !== "playing") return; if (gameState !== "playing") return;
this.currentLine = line; this.currentLine = line;
this.updateDisplay(line); this.updateChatDisplay(line, username);
const enemy = this.findEnemy(line); const enemy = this.findEnemy(line);
this.animateShoot(line, enemy, username); 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) { 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"); el.classList.add("shooting");
setTimeout(() => { setTimeout(() => {
el.classList.remove("shooting"); el.classList.remove("shooting");
this.currentLine = ""; this.currentLine = "";
this.updateDisplay(""); if (isLocal) {
this.updateLocalDisplay("");
this.localBuffer = "";
} else {
this.updateChatDisplay("", "");
}
if (enemy) { if (enemy) {
game.launchProjectile(line, enemy, true, username); game.launchProjectile(line, enemy, true, username);
@@ -50,13 +83,24 @@ const InputModule = {
return null; return null;
}, },
updateDisplay(text) { updateLocalDisplay(text) {
const el = document.getElementById("typed-text"); const el = document.getElementById("typed-text");
el.innerHTML = 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() { clear() {
this.currentLine = ""; this.currentLine = "";
this.updateDisplay(""); this.localBuffer = "";
this.updateLocalDisplay("");
this.updateChatDisplay("", "");
}, },
}; };
js/main.js
+5 -2
View File
@@ -14,8 +14,9 @@
`${CONFIG.texts.finalScoreLabel} <span id="final-score">0</span>`; `${CONFIG.texts.finalScoreLabel} <span id="final-score">0</span>`;
})(); })();
const params = new URLSearchParams(location.search); const gameParams = new URLSearchParams(location.search);
const channel = params.get("channel") || "ku6ep_xboctuk"; const channel = gameParams.get("channel") || "ku6ep_xboctuk";
const channelName = channel;
const client = new tmi.Client({ channels: [channel] }); const client = new tmi.Client({ channels: [channel] });
client.connect(); client.connect();
@@ -24,6 +25,8 @@ client.on("message", (channel, tags, message, self) => {
InputModule.submitLine(message, username); InputModule.submitLine(message, username);
}); });
initKeyboardBridge();
window.addEventListener("resize", recalc); window.addEventListener("resize", recalc);
recalc(); recalc();
runIntro(); runIntro();
tmi.min.js → js/tmi.min.js
Vendored
View File
js/utils.js
+5
View File
@@ -87,6 +87,11 @@ function applyOverlayScale(W, H) {
typed.style.fontSize = Math.round(20 * H / 1000) + "px"; typed.style.fontSize = Math.round(20 * H / 1000) + "px";
typed.style.minHeight = Math.round(28 * 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"); const chForm = document.getElementById("channel-form");
if (chForm) { if (chForm) {
chForm.querySelector(".screen-title").style.fontSize = Math.round(80 * H / 1000) + "px"; chForm.querySelector(".screen-title").style.fontSize = Math.round(80 * H / 1000) + "px";
serve.json
+6
View File
@@ -0,0 +1,6 @@
{
"cleanUrls": true,
"rewrites": [
{ "source": "/game", "destination": "/game.html" }
]
}
style.css
+44 -1
View File
@@ -70,10 +70,20 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 14px 16px; display: flex;
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.85);
border-top: 1px solid #00ff41; border-top: 1px solid #00ff41;
z-index: 5; 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; text-align: center;
} }
#typed-text { #typed-text {
@@ -83,6 +93,14 @@ body {
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 10px #00ff41; 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, #start-screen,
#gameover-screen { #gameover-screen {
position: absolute; position: absolute;
@@ -241,6 +259,31 @@ body {
#channel-form input:focus { #channel-form input:focus {
box-shadow: 0 0 30px rgba(0, 255, 65, 0.4); 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 { #channel-form button {
background: transparent; background: transparent;
border: 2px solid #00ff41; border: 2px solid #00ff41;