feat: add settings and browser input
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
# TODO
|
||||
|
||||
- [ ] Переделать процесс работы с инпутами — прятать локальные, если не используется
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -23,6 +23,7 @@ const CONFIG = {
|
||||
heavyEnemyChancePerWave: 0.02,
|
||||
scoreSimple: 10,
|
||||
scoreHeavy: 50,
|
||||
gameOverDelay: 10000,
|
||||
},
|
||||
speed: {
|
||||
simpleEnemyCrossTime: 60,
|
||||
|
||||
+38
-5
@@ -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;
|
||||
|
||||
+3
-1
@@ -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";
|
||||
|
||||
+49
-5
@@ -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("", "");
|
||||
},
|
||||
};
|
||||
|
||||
+5
-2
@@ -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();
|
||||
|
||||
Vendored
@@ -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";
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"cleanUrls": true,
|
||||
"rewrites": [
|
||||
{ "source": "/game", "destination": "/game.html" }
|
||||
]
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user