almost instant time playing

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))

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(),
             });
         }
 

templates/index.html

@@ -79,11 +79,11 @@
     <button id="leave">Leave Game</button>
     <canvas id="canvas" width="1024" height="400"></canvas>
     <div class="controls">
-        <span class="pill">h - move left</span>
-        <span class="pill">l - move right</span>
-        <span class="pill">j - crouch</span>
-        <span class="pill">k - jump</span>
-        <span class="pill">e - attack</span>
+        <span class="pill">a - move left</span>
+        <span class="pill">d - move right</span>
+        <span class="pill">s - crouch</span>
+        <span class="pill">w - jump</span>
+        <span class="pill">space - attack</span>
 
     </div>
     <div class="chat">