Stephanie Gredell 5 months ago
parent
commit
82c3966bf7
  1. 19
      static/script.js
  2. 1
      templates/index.html
  3. 2
      todo.md

19
static/script.js

@ -251,12 +251,13 @@ window.addEventListener("DOMContentLoaded", function() {
} }
class Game { class Game {
constructor({ canvasId = 'canvas', chatInputId = 'msg', sendBtnId = "send" }) { constructor({ canvasId = 'canvas', chatInputId = 'msg', sendBtnId = "send", leaveBtnId = "leave" }) {
this.canvas = document.getElementById(canvasId); this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');
this.chatInput = document.getElementById(chatInputId); this.chatInput = document.getElementById(chatInputId);
this.sendBtn = document.getElementById(sendBtnId); this.sendBtn = document.getElementById(sendBtnId);
this.leaveBtn = document.getElementById(leaveBtnId);
this.time = 0; this.time = 0;
this.players = {}; this.players = {};
@ -275,6 +276,7 @@ window.addEventListener("DOMContentLoaded", function() {
document.addEventListener("keydown", this._onKeyDown); document.addEventListener("keydown", this._onKeyDown);
document.addEventListener("keyup", this._onKeyUp); document.addEventListener("keyup", this._onKeyUp);
if (this.sendBtn) this.sendBtn.addEventListener("click", this._onSendClick); if (this.sendBtn) this.sendBtn.addEventListener("click", this._onSendClick);
if (this.leaveBtn) this.leaveBtn.addEventListener("click", this._leaveGame);
this._ensurePlayer(this.pageData.username); this._ensurePlayer(this.pageData.username);
this._initWebSocket(); this._initWebSocket();
@ -333,7 +335,6 @@ window.addEventListener("DOMContentLoaded", function() {
const metaTag = document.querySelector('meta[name="pagedata"]'); const metaTag = document.querySelector('meta[name="pagedata"]');
const json = JSON.parse(metaTag.getAttribute("content")); const json = JSON.parse(metaTag.getAttribute("content"));
return json; return json;
} }
_isTypingInChat() { _isTypingInChat() {
@ -389,6 +390,12 @@ window.addEventListener("DOMContentLoaded", function() {
me.keys[e.key] = false; me.keys[e.key] = false;
this._sendAction(e.key, 'keyUp') this._sendAction(e.key, 'keyUp')
} }
if (this._isTypingInChat()) {
if (e.key === 'Enter') {
this._onSendClick()
}
}
} }
_ensurePlayer(id) { _ensurePlayer(id) {
@ -454,6 +461,10 @@ window.addEventListener("DOMContentLoaded", function() {
this.ws.onerror = (err) => { this.ws.onerror = (err) => {
console.log("ws error:", err); console.log("ws error:", err);
}; };
this.ws.onclose = () => {
console.log("leaving game...")
}
} }
_sendAction(action, actionType = "", message = "") { _sendAction(action, actionType = "", message = "") {
@ -470,6 +481,9 @@ window.addEventListener("DOMContentLoaded", function() {
this.ws.send(JSON.stringify(obj)); this.ws.send(JSON.stringify(obj));
} }
} }
_leavegame() {
this.ws.close();
}
} }
@ -477,6 +491,7 @@ window.addEventListener("DOMContentLoaded", function() {
canvasId: 'canvas', canvasId: 'canvas',
chatInputId: 'msg', chatInputId: 'msg',
sendBtnId: 'send', sendBtnId: 'send',
leaveBtnId: 'leave',
}); });
game.start(); game.start();
}); });

1
templates/index.html

@ -76,6 +76,7 @@
Logged In as {{ .Username}} Logged In as {{ .Username}}
{{ end }} {{ end }}
</div> </div>
<button id="leave">Leave Game</button>
<canvas id="canvas" width="1024" height="400"></canvas> <canvas id="canvas" width="1024" height="400"></canvas>
<div class="controls"> <div class="controls">
<span class="pill">h - move left</span> <span class="pill">h - move left</span>

2
todo.md

@ -8,3 +8,5 @@
- death - death
- weapons from channel point - weapons from channel point
- - https://dev.twitch.tv/docs/eventsub/ - - https://dev.twitch.tv/docs/eventsub/
- jetpack
- remap wasd

Loading…
Cancel
Save