change replay to not use WS

build/public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   
   <title>🧩 jigsaw.hyottoko.club</title>
-<script type="module" crossorigin src="/assets/index.1449524a.js"></script>
+<script type="module" crossorigin src="/assets/index.382b265e.js"></script>
   <link rel="modulepreload" href="/assets/vendor.b622ee49.js">
   <link rel="stylesheet" href="/assets/index.f7304069.css">
 </head>

build/server/main.js

@@ -320,10 +320,8 @@ EV_SERVER_INIT: event sent to one client after that client
 */
 const EV_SERVER_EVENT = 1;
 const EV_SERVER_INIT = 4;
-const EV_SERVER_REPLAY_DATA = 5;
 const EV_CLIENT_EVENT = 2;
 const EV_CLIENT_INIT = 3;
-const EV_CLIENT_REPLAY_DATA = 6;
 const LOG_HEADER = 1;
 const LOG_ADD_PLAYER = 2;
 const LOG_UPDATE_PLAYER = 4;
@@ -344,10 +342,8 @@ const CHANGE_PLAYER = 3;
 var Protocol = {
     EV_SERVER_EVENT,
     EV_SERVER_INIT,
-    EV_SERVER_REPLAY_DATA,
     EV_CLIENT_EVENT,
     EV_CLIENT_INIT,
-    EV_CLIENT_REPLAY_DATA,
     LOG_HEADER,
     LOG_ADD_PLAYER,
     LOG_UPDATE_PLAYER,
@@ -1932,6 +1928,22 @@ app.get('/api/conf', (req, res) => {
         WS_ADDRESS: config.ws.connectstring,
     });
 });
+app.get('/api/replay-data', async (req, res) => {
+    const q = req.query;
+    const gameId = q.gameId || '';
+    if (!GameLog.exists(q.gameId)) {
+        throw `[gamelog ${gameId} does not exist... ]`;
+    }
+    const offset = parseInt(q.offset, 10) || 0;
+    const size = parseInt(q.size, 10) || 10000;
+    const log = await GameLog.get(gameId, offset, size);
+    let game = null;
+    if (offset === 0) {
+        // also need the game
+        game = await Game.createGameObject(gameId, log[0][2], log[0][3], log[0][4], log[0][5] || ScoreMode.FINAL);
+    }
+    res.send({ log, game: game ? Util.encodeGame(game) : null });
+});
 app.get('/api/newgame-data', (req, res) => {
     const q = req.query;
     const tagSlugs = q.tags ? q.tags.split(',') : [];
@@ -2047,22 +2059,6 @@ wss.on('message', async ({ socket, data }) => {
         const msg = JSON.parse(data);
         const msgType = msg[0];
         switch (msgType) {
-            case Protocol.EV_CLIENT_REPLAY_DATA:
-                {
-                    if (!GameLog.exists(gameId)) {
-                        throw `[gamelog ${gameId} does not exist... ]`;
-                    }
-                    const offset = msg[1];
-                    const size = msg[2];
-                    const log = await GameLog.get(gameId, offset, size);
-                    let game = null;
-                    if (offset === 0) {
-                        // also need the game
-                        game = await Game.createGameObject(gameId, log[0][2], log[0][3], log[0][4], log[0][5] || ScoreMode.FINAL);
-                    }
-                    notify([Protocol.EV_SERVER_REPLAY_DATA, log, game ? Util.encodeGame(game) : null], [socket]);
-                }
-                break;
             case Protocol.EV_CLIENT_INIT:
                 {
                     if (!Game.exists(gameId)) {

src/common/Protocol.ts

@@ -40,10 +40,8 @@ EV_SERVER_INIT: event sent to one client after that client
 */
 const EV_SERVER_EVENT = 1
 const EV_SERVER_INIT = 4
-const EV_SERVER_REPLAY_DATA = 5
 const EV_CLIENT_EVENT = 2
 const EV_CLIENT_INIT = 3
-const EV_CLIENT_REPLAY_DATA = 6
 
 const LOG_HEADER = 1
 const LOG_ADD_PLAYER = 2
@@ -68,10 +66,8 @@ const CHANGE_PLAYER = 3
 export default {
   EV_SERVER_EVENT,
   EV_SERVER_INIT,
-  EV_SERVER_REPLAY_DATA,
   EV_CLIENT_EVENT,
   EV_CLIENT_INIT,
-  EV_CLIENT_REPLAY_DATA,
 
   LOG_HEADER,
   LOG_ADD_PLAYER,

src/frontend/Communication.ts

@@ -96,63 +96,14 @@ function connect(
   })
 }
 
-function requestReplayData(
+async function requestReplayData(
+  gameId: string,
   offset: number,
   size: number
-): void {
+): Promise<{ log: Array<any>, game: any }> {
-  send([Protocol.EV_CLIENT_REPLAY_DATA, offset, size])
+  const res = await fetch(`/api/replay-data?gameId=${gameId}&offset=${offset}&size=${size}`)
-}
+  const json: { log: Array<any>, game: any } = await res.json()
-
+  return json
-// TOOD: change replay stuff
-function connectReplay(
-  address: string,
-  gameId: string,
-  clientId: string
-): Promise<{ game: any, log: Array<any> }> {
-  clientSeq = 0
-  events = {}
-  setConnectionState(CONN_STATE_CONNECTING)
-  return new Promise(resolve => {
-    ws = new WebSocket(address, clientId + '|' + gameId)
-    ws.onopen = (e) => {
-      setConnectionState(CONN_STATE_CONNECTED)
-      requestReplayData(0, 10000)
-    }
-    ws.onmessage = (e) => {
-      const msg = JSON.parse(e.data)
-      const msgType = msg[0]
-      if (msgType === Protocol.EV_SERVER_REPLAY_DATA) {
-        const log: any[] = msg[1]
-        const game = msg[2] // can be null or encoded game
-        if (game !== null) {
-          // this is the first/initial message
-          const replay: {
-            game: any,
-            log: any[]
-          } = { game, log }
-          resolve(replay)
-        } else {
-          // this is just the next batch of log entries
-          changesCallback(msg)
-        }
-      } else {
-        throw `[ 2021-05-09 invalid connectReplay msgType ${msgType} ]`
-      }
-    }
-
-    ws.onerror = (e) => {
-      setConnectionState(CONN_STATE_DISCONNECTED)
-      throw `[ 2021-05-15 onerror ]`
-    }
-
-    ws.onclose = (e) => {
-      if (e.code === CODE_CUSTOM_DISCONNECT || e.code === CODE_GOING_AWAY) {
-        setConnectionState(CONN_STATE_CLOSED)
-      } else {
-        setConnectionState(CONN_STATE_DISCONNECTED)
-      }
-    }
-  })
 }
 
 function disconnect(): void {
@@ -173,7 +124,6 @@ function sendClientEvent(evt: any): void {
 
 export default {
   connect,
-  connectReplay,
   requestReplayData,
   disconnect,
   sendClientEvent,

src/frontend/game.ts

@@ -280,6 +280,25 @@ export async function main(
     HUD.setConnectionState(state)
   })
 
+  const getNextReplayBatch = async (
+    gameId: string,
+    offset: number,
+    size: number
+  ) => {
+    const replay: {
+      game: any,
+      log: Array<any>
+    } = await Communication.requestReplayData(gameId, offset, size)
+    // cut log that was already handled
+    REPLAY.log = REPLAY.log.slice(REPLAY.logPointer)
+    REPLAY.logPointer = 0
+
+    REPLAY.log.push(...replay.log)
+    if (replay.log.length < 10000) {
+      REPLAY.final = true
+    }
+    REPLAY.requesting = false
+  }
   let TIME: () => number = () => 0
   const connect = async () => {
     if (MODE === MODE_PLAY) {
@@ -288,21 +307,10 @@ export async function main(
       Game.setGame(gameObject.id, gameObject)
       TIME = () => Time.timestamp()
     } else if (MODE === MODE_REPLAY) {
-      // TODO: change how replay connect is done...
+      const replay: {
-      Communication.onServerChange((msg) => {
+        game: any,
-        const log = msg[1]
+        log: Array<any>
-
+      } = await Communication.requestReplayData(gameId, 0, 10000)
-        // cut log that was already handled
-        REPLAY.log = REPLAY.log.slice(REPLAY.logPointer)
-        REPLAY.logPointer = 0
-
-        REPLAY.log.push(...msg[1])
-        if (log.length < 10000) {
-          REPLAY.final = true
-        }
-        REPLAY.requesting = false
-      })
-      const replay: {game: any, log: Array<any>} = await Communication.connectReplay(wsAddress, gameId, clientId)
       const gameObject = Util.decodeGame(replay.game)
       Game.setGame(gameObject.id, gameObject)
       REPLAY.requesting = false
@@ -487,7 +495,7 @@ export async function main(
       if (REPLAY.logPointer + 1 >= REPLAY.log.length) {
         REPLAY.lastRealTs = realTs
         REPLAY.requesting = true
-        Communication.requestReplayData(REPLAY.logIdx, 10000)
+        getNextReplayBatch(gameId, REPLAY.logIdx, 10000)
         return
       }
 

src/server/main.ts

@@ -61,6 +61,29 @@ app.get('/api/conf', (req, res) => {
   })
 })
 
+app.get('/api/replay-data', async (req, res) => {
+  const q = req.query as any
+  const gameId = q.gameId || ''
+  if (!GameLog.exists(q.gameId)) {
+    throw `[gamelog ${gameId} does not exist... ]`
+  }
+  const offset = parseInt(q.offset, 10) || 0
+  const size = parseInt(q.size, 10) || 10000
+  const log = await GameLog.get(gameId, offset, size)
+  let game = null
+  if (offset === 0) {
+    // also need the game
+    game = await Game.createGameObject(
+      gameId,
+      log[0][2],
+      log[0][3],
+      log[0][4],
+      log[0][5] || ScoreMode.FINAL
+    )
+  }
+  res.send({ log, game: game ? Util.encodeGame(game) : null })
+})
+
 app.get('/api/newgame-data', (req, res) => {
   const q = req.query as any
   const tagSlugs: string[] = q.tags ? q.tags.split(',') : []
@@ -203,31 +226,6 @@ wss.on('message', async ({socket, data} : { socket: WebSocket, data: any }) => {
     const msg = JSON.parse(data)
     const msgType = msg[0]
     switch (msgType) {
-      case Protocol.EV_CLIENT_REPLAY_DATA: {
-        if (!GameLog.exists(gameId)) {
-          throw `[gamelog ${gameId} does not exist... ]`
-        }
-        const offset = msg[1]
-        const size = msg[2]
-
-        const log = await GameLog.get(gameId, offset, size)
-        let game = null
-        if (offset === 0) {
-          // also need the game
-          game = await Game.createGameObject(
-            gameId,
-            log[0][2],
-            log[0][3],
-            log[0][4],
-            log[0][5] || ScoreMode.FINAL
-          )
-        }
-        notify(
-          [Protocol.EV_SERVER_REPLAY_DATA, log, game ? Util.encodeGame(game) : null],
-          [socket]
-        )
-      } break
-
       case Protocol.EV_CLIENT_INIT: {
         if (!Game.exists(gameId)) {
           throw `[game ${gameId} does not exist... ]`