diff --git a/main.go b/main.go
index e3809ed..4004e46 100644
--- a/main.go
+++ b/main.go
@@ -38,6 +38,7 @@ func main() {
"channel:manage:redemptions",
),
)
+ fmt.Printf("twitch callback: %s", os.Getenv("TWITCH_CALLBACK"))
if err != nil {
panic(fmt.Errorf("failed to parse templates: %w\n", err))
diff --git a/static/script.js b/static/script.js
index 6a986a1..ab24791 100644
--- a/static/script.js
+++ b/static/script.js
@@ -18,8 +18,8 @@ window.addEventListener("DOMContentLoaded", function() {
this.talkTimer = 0;
this.message = "";
this.keys = {
- h: false,
- l: false,
+ a: false,
+ d: false,
};
this.crouching = false;
this.isPunching = false;
@@ -27,25 +27,29 @@ window.addEventListener("DOMContentLoaded", function() {
this.sentJoin = false;
this.hp = 10;
this.isAlive = true;
+ this._tx = x;
+ this._ty = canvas.height - 60;
+ this._lastTs = 0;
+ this._tFacing = undefined;
}
update() {
this.vx = 0;
- if (this.keys.h) {
+ if (this.keys.a) {
this.vx = -this.speed;
this.facing = -1;
}
- if (this.crouching && this.keys.l) {
+ if (this.crouching && this.keys.d) {
this.speed = 0.5;
this.vx = this.speed;
}
- if (this.crouching && this.keys.h) {
+ if (this.crouching && this.keys.a) {
this.speed = 0.5;
this.vx = -this.speed;
}
- if (this.keys.l) {
+ if (this.keys.d) {
this.vx = this.speed;
this.facing = 1;
}
@@ -84,6 +88,28 @@ window.addEventListener("DOMContentLoaded", function() {
this.talking = false;
}
}
+
+ if (!this.isLocal && typeof this._tx === "number"
+ && typeof this._ty === "number") {
+ if (this._tx > this.x) {
+ this.keys.d = true;
+ }
+
+
+ if (this._tx < this.x) {
+ this.keys.a = true;
+ }
+
+ if (this._tx === this.x) {
+ this.keys.a = false;
+ this.keys.d = false;
+ }
+
+ if (this.facing != this._tFacing && typeof this._tFacing !== 'undefined') {
+ this.facing = this._tFacing;
+ }
+
+ }
}
draw(ctx, time) {
@@ -313,6 +339,10 @@ window.addEventListener("DOMContentLoaded", function() {
document.addEventListener("keydown", this._onKeyDown);
document.addEventListener("keyup", this._onKeyUp);
+ // Send disconnect message on page unload
+ window.addEventListener("beforeunload", () => {
+ this._sendAction("disconnected", "", "");
+ });
if (this.sendBtn) this.sendBtn.addEventListener("click", this._onSendClick);
if (this.leaveBtn) this.leaveBtn.addEventListener("click", this._leaveGame);
@@ -337,7 +367,9 @@ window.addEventListener("DOMContentLoaded", function() {
_scheduleReconnect() {
if (this._stopped) return;
+
if (this._reconnectTimer) {
+ clearTimeout(this._reconnectTimer)
this._reconnectTimer = null;
}
@@ -354,6 +386,7 @@ window.addEventListener("DOMContentLoaded", function() {
}
loop() {
+ if (this._stopped) return;
this.time += 0.1;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -420,19 +453,20 @@ window.addEventListener("DOMContentLoaded", function() {
switch (e.key) {
case 'e':
+ case ' ':
me.punch()
this._sendAction('e', "keyDown")
break;
- case 'k':
+ case 'w':
me.jump();
this._sendAction('k', "keyDown")
break;
- case 'j':
+ case 's':
me.crouching = true;
this._sendAction('j', 'keyDown')
break;
- case 'h':
- case 'l':
+ case 'a':
+ case 'd':
if (!me.keys) me.keys = {};
if (!me.keys[e.key]) me.keys[e.key] = true;
this._sendAction(e.key, 'keyDown')
@@ -454,13 +488,13 @@ window.addEventListener("DOMContentLoaded", function() {
this.chatInput.focus();
}
- if (e.key === 'j') {
+ if (e.key === 's') {
me.crouching = false;
me.speed = 2;
this._sendAction('j', 'keyUp')
}
- if (e.key === 'h' || e.key === 'l') {
+ if (e.key === 'a' || e.key === 'd') {
if (!me.keys) me.keys = {};
me.keys[e.key] = false;
this._sendAction(e.key, 'keyUp')
@@ -479,6 +513,7 @@ window.addEventListener("DOMContentLoaded", function() {
_ensurePlayer(id) {
if (!this.players[id] && id !== "") {
this.players[id] = new StickFigure(250, 1, id, this.canvas)
+ this.players[id].isLocal = (id === this.pageData.username)
}
}
@@ -507,7 +542,6 @@ window.addEventListener("DOMContentLoaded", function() {
this.ws = new WebSocket(scheme + location.host + "/ws");
this.ws.onopen = () => {
- console.log('i am opening')
this._reconnectDelay = 1000;
if (!this._sentJoin && this.pageData.username !== "") {
@@ -522,29 +556,50 @@ window.addEventListener("DOMContentLoaded", function() {
};
this.ws.onmessage = (e) => {
- if (e.data) {
- const data = JSON.parse(e.data);
- this._ensurePlayer(data.Id);
-
- // ignore echo
- if (data.Id === this.pageData.username) return;
-
- const p = this.players[data.Id];
- switch (data.Action) {
- case "t":
- p.talk(data.Message);
- break;
- case "e":
- p.punch();
- break;
- case "k":
- p.jump();
- break;
- case "h":
- case "l":
- p.keys[data.Action] = data.ActionType === "keyDown";
- break;
- }
+ if (!e.data) return;
+ const data = JSON.parse(e.data);
+ if (data.Id === this.pageData.username) return;
+
+ this._ensurePlayer(data.Id)
+ const p = this.players[data.Id];
+
+ if (typeof data.PosX === "number" && typeof data.PosY === "number") {
+ p._tx = data.PosX;
+ p._ty = data.PosY;
+ }
+
+ if (typeof data.Facing === "number") {
+ p.tFacing = data.Facing;
+ }
+
+
+ switch (data.Action) {
+ case "disconnected":
+ delete this.players[data.Id]
+ break;
+ case "t":
+ p.talk(data.Message);
+ break;
+ case "e":
+ p.punch();
+ break;
+ case "k":
+ case "w":
+ p.jump();
+ break;
+ case "j":
+ case "s":
+ p.crouching = data.ActionType === "keyDown"
+ p.speed = 2;
+ break;
+ case "h":
+ case "a":
+ p.keys[data.Action === "h" ? "h" : "a"] = data.ActionType === "keyDown";
+ break;
+ case "l":
+ case "d":
+ p.keys[data.Action === "l" ? "l" : "d"] = data.ActionType === "keyDown";
+ break;
}
};
@@ -553,22 +608,26 @@ window.addEventListener("DOMContentLoaded", function() {
this._scheduleReconnect()
};
- this.ws.onclose = (event) => {
- console.log(event.code)
+ this.ws.onclose = () => {
console.log("leaving game...")
- console.log(this.pageData)
this.ws = null;
this._sentJoin = false;
+ delete this.players[this.pageData.username]
this._scheduleReconnect()
}
}
_sendAction(action, actionType = "", message = "") {
+ const me = this._me();
this._send({
Id: this.pageData.username,
Action: action,
ActionType: actionType,
- Message: message
+ Message: message,
+ PosX: me ? Math.floor(me.x) : undefined,
+ PosY: me ? Math.floor(me.y) : undefined,
+ Facing: me ? me.facing : undefined,
+ Ts: Date.now(),
});
}
diff --git a/templates/index.html b/templates/index.html
index e7d0172..f54283f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -79,11 +79,11 @@
- h - move left
- l - move right
- j - crouch
- k - jump
- e - attack
+ a - move left
+ d - move right
+ s - crouch
+ w - jump
+ space - attack
diff --git a/tmp/main b/tmp/main
index 0a2f587..d092a3c 100755
Binary files a/tmp/main and b/tmp/main differ