Merge pull request #40 from Lux-AI-Challenge/v3.0.x

v3.0.0
Lux-AI-Challenge · Aug 23, 2021 · f1e44ac · f1e44ac
2 parents 44a236a + da1b3e2
commit f1e44ac
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lux-viewer-2021",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "",
   "author": "Lux AI challenge",
   "main": "index.js",
@@ -38,7 +38,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@lux-ai/2021-challenge": "^2.2.0",
+    "@lux-ai/2021-challenge": "^3.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.2",
     "@types/classnames": "^2.2.10",

diff --git a/src/components/Game.tsx b/src/components/Game.tsx
@@ -1,5 +1,5 @@
 import 'phaser';
-import React, { KeyboardEvent, useEffect, useState } from 'react';
+import React, { KeyboardEvent, useEffect, useState, version } from 'react';
 import MainScene, { Frame, FrameTileData } from '../scenes/MainScene';
 import { createGame } from '../game';
 import {
@@ -25,6 +25,7 @@ import UploadSVG from '../icons/upload.svg';
 import { parseReplayData } from '../utils/replays';
 import clientConfigs from './configs.json';
 import WarningsPanel from './WarningsPanel';
+// import debug_replay from './replay.json';
 export type GameComponentProps = {
   // replayData?: any;
 };
@@ -47,6 +48,8 @@ export const GameComponent = () => {
   const [running, setRunning] = useState(false);
   const [useKaggleReplay, setUseKaggleReplay] = useState(true);
   const [playbackSpeed, _setPlaybackSpeed] = useState(1);
+  const [replayVersion, setReplayVersion] = useState('');
+  const [warningMessage, setWarningMessage] = useState('');
   const setPlaybackSpeed = (speed: number) => {
     if (speed >= 0.5 && speed <= 32) {
       _setPlaybackSpeed(speed);
@@ -235,7 +238,6 @@ export const GameComponent = () => {
     } else if (turn % cycleLength < 5 && turn > 5) {
       idx = 6 - ((turn % cycleLength) + 2);
     }
-    console.log({ canvasWrapper });
     canvasWrapper.style.transition = `background-color linear ${
       1 / main.speed
     }s`;
@@ -254,28 +256,24 @@ export const GameComponent = () => {
   };
 
   /** load game given json replay data */
-  const loadGame = (jsonReplayData: any, skipVersionCheck = false) => {
-    if (!skipVersionCheck) {
+  const loadGame = (jsonReplayData: any) => {
+    let versionMisMatch = false;
+    let versionvals = ['x', 'x'];
+    setReplayVersion(jsonReplayData.version);
+    if (jsonReplayData.version !== undefined) {
+      versionvals = jsonReplayData.version.split('.');
       if (
-        jsonReplayData.version === undefined ||
-        jsonReplayData.version !== clientConfigs.version
+        versionvals[0] !== clientConfigs.version[0] ||
+        versionvals[1] !== clientConfigs.version[2]
       ) {
-        if (jsonReplayData.version === undefined) {
-          alert('No version associated with replay data, cannot load');
-          return;
-        }
-        const versionvals = jsonReplayData.version.split('.');
-        if (
-          versionvals[0] !== clientConfigs.version[0] ||
-          versionvals[1] !== clientConfigs.version[2]
-        ) {
-          alert(
-            `Replay file works on version ${versionvals[0]}.${versionvals[1]}.x but client is on version ${clientConfigs.version}. The visualizer will most likely not work correctly. Download an older visualizer here to watch the replay: https://github.com/Lux-AI-Challenge/LuxViewer2021/releases`
-          );
-          return;
-        }
+        versionMisMatch = true;
       }
     }
+    if (versionMisMatch) {
+      let warningMessage = `Replay file works on version ${versionvals[0]}.${versionvals[1]}.x but client is on version ${clientConfigs.version}. The visualizer will not be able to parse this replay file. Download an older visualizer with version ${versionvals[0]}.${versionvals[1]}.x here to watch the replay: https://github.com/Lux-AI-Challenge/LuxViewer2021/releases`;
+      setWarningMessage(warningMessage);
+      return;
+    }
     if (game) {
       game.destroy(true, false);
     }
@@ -346,7 +344,7 @@ export const GameComponent = () => {
                 console.log('post message:');
                 console.log(event.data);
                 replay = parseReplayData(replay);
-                loadGame(replay, true);
+                loadGame(replay);
                 const el = document.getElementsByTagName('html');
                 if (window.innerWidth * 0.65 <= 768) {
                   el[0].style.fontSize = '6pt';
@@ -372,7 +370,7 @@ export const GameComponent = () => {
     } else if (window.innerWidth <= 1280) {
       el[0].style.fontSize = '8pt';
     }
-    // loadGame(debug_replay);
+    // loadGame(parseReplayData(debug_replay));
   }, []);
   useEffect(() => {
     const handleKeyDown = (event: globalThis.KeyboardEvent) => {
@@ -447,7 +445,7 @@ export const GameComponent = () => {
     <div className="Game">
       <ThemeProvider theme={theme}>
         <div id="content"></div>
-        {!isReady && (
+        {!isReady && warningMessage === '' && (
           <div className="upload-no-replay-wrapper">
             <p>Welcome to the Lux AI Season 1 Visualizer</p>
             <div>
@@ -473,8 +471,21 @@ export const GameComponent = () => {
             </div>
           </div>
         )}
+        {warningMessage !== '' && (
+          <div className="upload-no-replay-wrapper">
+            <p>{warningMessage}</p>
+          </div>
+        )}
+
         <div id="version-number">
-          <strong>Version: </strong>
+          {replayVersion && (
+            <>
+              <strong>Replay Version: </strong>
+              {replayVersion}
+              <br></br>
+            </>
+          )}
+          <strong>Client Version: </strong>
           {clientConfigs.version}
         </div>
         {isReady && (

diff --git a/src/components/configs.json b/src/components/configs.json
@@ -1,3 +1,3 @@
 {
-  "version": "2.2.0"
+  "version": "3.0.0"
 }
diff --git a/src/components/styles.css b/src/components/styles.css
@@ -43,6 +43,10 @@
 .Game .upload-icon-no-replay {
   width: 3rem;
 }
+.Game .upload-no-replay-wrapper > p {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .Game .upload-no-replay-wrapper > div > .upload-btn .upload-text {
   margin-right: 1rem;
 }
@@ -112,8 +116,8 @@
   background-color: rgba(50, 61, 52, 0.1);
   padding: 0.5rem;
   border-radius: 1rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
+  /* height: 1.5rem; */
+  /* line-height: 1.5rem; */
 }
 
 .Game .debug-sidetext {
@@ -139,7 +143,7 @@
 .Game .warnings-button {
   position: absolute;
   top: 1rem;
-  right: 10rem;
+  right: 12rem;
   background-color: rgba(255, 255, 255, 0.25);
   border-radius: 1rem;
   color: white;

diff --git a/src/scenes/MainScene.ts b/src/scenes/MainScene.ts
@@ -774,7 +774,6 @@ class MainScene extends Phaser.Scene {
     if (!f) {
       return;
     }
-    console.log(`Errors on turn ${turn}`, f.errors);
 
     const dayLength = this.luxgame.configs.parameters.DAY_LENGTH;
     const cycleLength =
@@ -1379,6 +1378,8 @@ class MainScene extends Phaser.Scene {
   lastPointerPosition = null;
 
   update(time: number, delta: number) {
+    // console.log('drawing stuff');
+    // console.log(1 / (delta * 1e-3));
     const panvelocity = 32 * Math.sqrt(this.overallScale);
     const wkey = this.input.keyboard.addKey('W');
     if (wkey.isDown) {

diff --git a/src/utils/replays.ts b/src/utils/replays.ts
@@ -16,17 +16,21 @@ export const parseReplayData = (rawReplayData: any) => {
       );
       commands.push(turnCommands);
     });
+    let width = rawReplayData.configuration.width;
+    let height = rawReplayData.configuration.height;
     const replay = {
       allCommands: commands.slice(1), // slice 1 to remove empty first entry that represents the "observation"
       mapType: rawReplayData.configuration.mapType,
+      width: width === -1 ? undefined : width,
+      height: height === -1 ? undefined : height,
       seed: parseInt(rawReplayData.configuration.seed),
       teamDetails: [
         {
-          name: 'team-1',
+          name: 'team 0',
           tournamentID: '',
         },
         {
-          name: 'team-2',
+          name: 'team 1',
           tournamentID: '',
         },
       ],