Finish splash screen, fixes 34, fixes #109

battlecode · Jan 12, 2017 · 526e781 · 526e781
1 parent b1d6f89
commit 526e781
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
   "homepage": "https://github.com/battlecode/battlecode-client-17#readme",
   "dependencies": {
     "battlecode-playback": "git+ssh://git@github.com/battlecode/battlecode-playback.git#f287b374a32268ebbc5984ae22aa6286c259d0f0",
-    "victor": "^1.1.0"
+    "victor": "^1.1.0",
+    "web-request": "^1.0.7"
   },
   "devDependencies": {
     "@types/blue-tape": "^0.1.30",
@@ -69,14 +70,20 @@
       }
     ],
     "mac": {
-      "target": ["dir"],
+      "target": [
+        "dir"
+      ],
       "category": "public.app-category.games"
     },
     "win": {
-      "target": ["dir"]
+      "target": [
+        "dir"
+      ]
     },
     "linux": {
-      "target": ["dir"]
+      "target": [
+        "dir"
+      ]
     }
   }
 }
diff --git a/src/app.ts b/src/app.ts
@@ -89,6 +89,7 @@ export default class Client {
 
     this.root = root;
     this.root.id = "root";
+    conf.gameVersion = "2017.1.1.7";
     this.conf = config.defaults(conf);
 
     imageloader.loadAll(conf, (images: imageloader.AllImages) => {

diff --git a/src/config.ts b/src/config.ts
@@ -69,7 +69,8 @@ export enum Mode {
   HELP,
   MAPEDITOR,
   CONSOLE,
-  QUEUE
+  QUEUE,
+  SPLASH
 }
 
 /**
@@ -89,6 +90,6 @@ export function defaults(supplied?: any): Config {
     healthBars: supplied.healthBars || true,
     circleBots: supplied.circleBots || false,
     indicators: supplied.indicators || true,
-    mode: supplied.mode || Mode.GAME
+    mode: supplied.mode || Mode.SPLASH
   };
 }
diff --git a/src/game/gamearea.ts b/src/game/gamearea.ts
@@ -3,12 +3,15 @@ import {AllImages} from '../imageloader';
 
 import {GameWorld} from 'battlecode-playback';
 
+import * as WebRequest from 'web-request';
+
 export default class GameArea {
 
   // HTML elements
   private readonly images: AllImages;
   readonly div: HTMLDivElement;
   readonly canvas: HTMLCanvasElement;
+  readonly splashDiv: HTMLDivElement;
   private readonly wrapper: HTMLDivElement;
   private readonly mapEditorCanvas: HTMLCanvasElement;
 
@@ -30,11 +33,14 @@ export default class GameArea {
     const canvas: HTMLCanvasElement = document.createElement('canvas');
     canvas.id = "battlecode-canvas";
     this.canvas = canvas;
-    this.loadSplashScreenInto(this.canvas);
+
+    this.splashDiv = document.createElement("div");
+    this.splashDiv.id = "battlecode-splash";
+    this.loadSplashDiv();
 
     // Add elements to the main div
     this.div.appendChild(this.wrapper);
-    this.wrapper.appendChild(canvas);
+    this.wrapper.appendChild(this.splashDiv);
   }
 
   /**
@@ -51,34 +57,31 @@ export default class GameArea {
   /**
    * Displays the splash screen
    */
-  loadSplashScreenInto(splashCanvas : HTMLCanvasElement) {
+  loadSplashDiv() {
 
-    // Wait for the font to load ...
-    // sleep time expects milliseconds
-    function sleep (time) {
-      return new Promise((resolve) => setTimeout(resolve, time));
-    }
-
-    // Usage!
-    sleep(500).then(() => {
-
-        let ctx = splashCanvas.getContext("2d");
-        if (ctx === null) {
-            throw new Error("Couldn't load canvas2d context");
-        } else {
-
-          ctx['imageSmoothingEnabled'] = false;
-          ctx.font = '42px "Graduate"';
-          ctx.fillStyle = 'white';
-          ctx.fillText("Battlecode Client", 0, 48, 300);
-          ctx.font = '32px "Graduate"';
-          ctx.fillText("v1.1.5", 110, 88);
-
-        }
-
-        this.wrapper.appendChild(splashCanvas);
+    let splashTitle = document.createElement("h1");
+    splashTitle.id = "splashTitle";
+    splashTitle.appendChild(document.createTextNode("Battlecode Client"));
+    this.splashDiv.appendChild(splashTitle);
+
+    let splashSubtitle = document.createElement("h3");
+    splashSubtitle.id = "splashSubtitle";
+    splashSubtitle.appendChild(document.createTextNode("v" + this.conf.gameVersion));
+    this.splashDiv.appendChild(splashSubtitle);
+
+    // Set the version string from http://www.battlecode.org/contestants/latest/
+    (async function (splashDiv, version) {
+
+      var result = await WebRequest.get('http://www.battlecode.org/contestants/latest/');
+      if(result.content.trim() != version.trim()) {
+        let newVersion = document.createElement("a");
+        newVersion.id = "splashNewVersion";
+        newVersion.href = "http://www.battlecode.org/contestants/releases/"
+        newVersion.innerHTML = "New version available (download with <code>gradle build</code>): v" + result.content;
+        splashDiv.appendChild(newVersion);
+      }
 
-    });
+    })(this.splashDiv, this.conf.gameVersion);
 
   }
 
@@ -100,6 +103,8 @@ export default class GameArea {
     // ...and add the correct one
     if (mode === Mode.MAPEDITOR) {
       this.wrapper.appendChild(this.mapEditorCanvas);
+    } else if (mode === Mode.SPLASH) {
+      this.wrapper.appendChild(this.splashDiv);
     } else {
       this.wrapper.appendChild(this.canvas);
     }

diff --git a/src/style.css b/src/style.css
@@ -226,4 +226,26 @@ input[type='file'] {
     height: 70vh; /* HELP: I'd prefer this be calc(100vh - ?px) but I can't get it to work */
     text-align: left;
     overflow: scroll;
+}
+
+#splashSubtitle {
+    font-size: 24px;
+    font-family: Graduate;
+    color: white;
+}
+
+#splashTitle {
+    font-size: 56px;
+    font-family: Graduate;
+    font-weight: bold;
+    color: #e03636;
+    text-shadow:
+    -1px -1px 0 #fff,
+    1px -1px 0 #fff,
+    -1px 1px 0 #fff,
+    1px 1px 0 #fff;
+}
+
+#splashNewVersion {
+    color: deepskyblue;
 }