feat: done v1 welcome page

docs/index.html

@@ -25,7 +25,7 @@
     <script src="src/utils/checkCollision.js"></script>
 
     <script src="src/pages/basePage.js"></script>
-    <script src="src/pages/home.js"></script>
+    <script src="src/pages/welcome.js"></script>
     <script src="src/pages/maps/mapBasicIntro.js"></script>
     <script src="src/pages/maps/mapBasicGame.js"></script>
     <script src="src/pages/results.js"></script>

docs/src/config/constants.js

@@ -1,6 +1,9 @@
 const Constants = Object.freeze({
+  Game: Object.freeze({
+    TITLE: 'Unspottable',
+  }),
   Page: Object.freeze({
-    HOME: 'HOME',
+    WELCOME: 'WELCOME',
     RESULTS: 'RESULTS',
     MAP_BASIC_INTRO: 'MAP_BASIC_INTRO',
     MAP_BASIC_GAME: 'MAP_BASIC_GAME',

docs/src/config/theme.js

@@ -13,6 +13,7 @@ const Theme = Object.freeze({
       disabled: '#E0E0E0',
       contrastText: '#FFF',
     }),
+    player: Object.freeze(['#CE0000', '#009100', '#005AB5', '#FFD306']),
   }),
   text: Object.freeze({
     fontSize: Object.freeze({

docs/src/pages/results.js

@@ -11,7 +11,8 @@ class Results extends BasePage {
       width: 200,
       height: 50,
       label: 'Back to Home',
-      action: () => Controller.changePage(new Home(), Constants.Page.HOME),
+      action: () =>
+        Controller.changePage(new Welcome(), Constants.Page.WELCOME),
       color: Theme.palette.primary,
       hoverColor: colorHelper.lighter(Theme.palette.primary, 0.5),
     });

docs/src/pages/welcome.js

@@ -0,0 +1,120 @@
+class Welcome extends BasePage {
+  constructor() {
+    super();
+    this.title = null;
+    this.gameStartArea = null;
+    this.players = [];
+    this.startButton = null;
+    this.introText = null;
+  }
+
+  setup() {
+    this.title = new Text({
+      label: Constants.Game.TITLE,
+      x: width / 2,
+      y: (height / 10) * 1,
+      color: Theme.palette.text.primary,
+      textSize: Theme.text.fontSize.title,
+      textStyle: BOLD,
+      textAlign: CENTER,
+    });
+
+    this.gameStartArea = new Button({
+      x: this.title.x - 180,
+      y: (height / 10) * 2,
+      width: 360,
+      height: 300,
+      color: Theme.palette.background,
+      hoverColor: Theme.palette.background,
+    });
+
+    // initialize players
+    for (var i = 0; i < Settings.players.length; i++) {
+      this.players.push(
+        new Player({
+          idx: i,
+          controls: Settings.players[i].controls,
+          color: Theme.palette.player[i],
+        }),
+      );
+    }
+
+    this.startButton = new Button({
+      x: width / 2 - 100,
+      y: (height / 4) * 3.5,
+      width: 200,
+      height: 50,
+      label: 'Start Game',
+      action: () =>
+        Controller.changePage(
+          new MapBasicIntro(),
+          Constants.Page.MAP_BASIC_INTRO,
+        ),
+      color: Theme.palette.primary,
+      hoverColor: colorHelper.lighter(Theme.palette.primary, 0.5),
+    });
+
+    this.introText = new Text({
+      label: 'COME HERE',
+      x: width / 2,
+      y: (height / 10) * 3,
+      color: colorHelper.lighter(Theme.palette.text.primary, 0.5),
+      textSize: Theme.text.fontSize.large,
+      textStyle: BOLD,
+      textAlign: CENTER,
+    });
+  }
+
+  draw() {
+    this.title?.draw();
+    this.gameStartArea?.draw();
+    this.introText?.draw();
+    this.players.forEach((player) => {
+      player.move();
+      player.draw();
+    });
+
+    if (this.players.every((player) => this.checkPlayersInStartArea(player))) {
+      this.startButton?.draw();
+    }
+
+    this.players.forEach((player, idx) => {
+      if (this.checkPlayersInStartArea(player)) {
+        const moveDown = 38 * idx;
+        this.drawCheckLine(player.color, moveDown);
+      }
+    });
+  }
+
+  mousePressed() {
+    this.startButton?.mousePressed();
+  }
+
+  drawCheckLine(color, moveDown = 0) {
+    push();
+    stroke(color);
+    strokeWeight(5);
+    line(
+      this.gameStartArea.x + 50,
+      this.gameStartArea.y + 20 + moveDown,
+      this.gameStartArea.x + 150,
+      this.gameStartArea.y + 150 + moveDown,
+    );
+    line(
+      this.gameStartArea.x + 150,
+      this.gameStartArea.y + 150 + moveDown,
+      this.gameStartArea.x + this.gameStartArea.width - 10,
+      this.gameStartArea.y + 10 + moveDown,
+    );
+    pop();
+  }
+
+  checkPlayersInStartArea(player) {
+    return (
+      player.x > this.gameStartArea.x &&
+      player.x < this.gameStartArea.x + this.gameStartArea.width &&
+      player.y > this.gameStartArea.y &&
+      player.y < this.gameStartArea.y + this.gameStartArea.height
+    );
+  }
+}

docs/src/sketch.js

@@ -8,15 +8,12 @@
  * add it both here and to `basePage` to ensure consistency across all pages.
  */
 
-function preload() {
-  Controller.changePage(new Home(), Constants.Page.HOME);
-  Store.getCurrentPage().preload();
-}
+function preload() {}
 
 function setup() {
   // TODO: check the way to set size, now use the current screen size to set canvas
   createCanvas(windowWidth, windowHeight);
-  Store.getCurrentPage().setup();
+  Controller.changePage(new Welcome(), Constants.Page.WELCOME);
 }
 
 const pageLabel = new Text(); // TODO: remove it

docs/src/state/controller.js

@@ -5,10 +5,12 @@ const Controller = {
    * @param {string} newPageKey The page to switch to, e.g. `Constants.Page.xxx`.
    */
   changePage(page, newPageKey) {
+    const isSamePage = Store.getCurrentPageKey() == newPageKey;
+    if (isSamePage) return;
+
     Store._updateState({ currentPage: page });
     Store._updateState({ currentPageKey: newPageKey });
 
-    if (page.preload) page.preload();
     if (page.setup) page.setup();
   },
 };