info panel refactor

warp-contracts · Aug 26, 2024 · 3c8c0e9 · 3c8c0e9
1 parent 447708c
commit 3c8c0e9
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 92 deletions.
diff --git a/public/assets/images/time_bar.png b/public/assets/images/time_bar.png
diff --git a/public/css/mithril/app.css b/public/css/mithril/app.css
@@ -4,6 +4,8 @@
   --white: #ffffff;
   --green: #00ff00;
   --red: #ff0000;
+  --darkgrey: #333;
+  --lightgrey: #555;
 
   /* font sizes */
   --regular: 22px;

diff --git a/public/css/mithril/main-scene.css b/public/css/mithril/main-scene.css
@@ -83,3 +83,63 @@
   height: 10px;
   background: blueviolet;
 }
+
+.info-panel {
+  position: absolute;
+  top: 2rem;
+  margin: 0 auto;
+  left: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+
+  .element {
+    background-color: black;
+    font-family: 'Press Start 2P';
+    font-size: 18px;
+    text-transform: uppercase;
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    height: 30px;
+
+    &.warn {
+      color: var(--red);
+    }
+
+    &.info {
+      color: var(--white);
+    }
+
+    img {
+      padding: 0 5px;
+    }
+  }
+
+  .timebar-container {
+    width: 300px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--darkgrey);
+  }
+
+  .timebar {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+  }
+
+  .timebar-progress {
+    height: 100%;
+    background-color: var(--green);
+    image-rendering: pixelated;
+    background-image: repeating-linear-gradient(45deg, var(--green) 0px, var(--green) 2px, black 2px, black 4px);
+  }
+}
diff --git a/src/game/gui/MainSceneGui.js b/src/game/gui/MainSceneGui.js
@@ -1,16 +1,67 @@
 export function MainSceneGui(initialVnode) {
   return {
     view: function (vnode) {
-      const { mainPlayerStats: stats, mainPlayerEquipment: equipment } = vnode.attrs;
+      const { mainPlayerStats: stats, mainPlayerEquipment: equipment, gameStats, roundInfo, gameOver } = vnode.attrs;
       return [
         stats ? m(WeaponInfo, { stats }) : null,
         equipment ? m(EquipmentGui, { equipment }) : null,
         m(KeyboardMapping),
+        m(InfoPanel, { gameStats, stats, roundInfo, gameOver }),
       ];
     },
   };
 }
 
+function InfoPanel() {
+  return {
+    view: function (vnode) {
+      const { gameStats, roundInfo, gameOver, stats } = vnode.attrs;
+      return m('.info-panel', [
+        gameOver
+          ? m('.element', 'GAME OVER')
+          : gameStats?.gameTreasuresCounter
+            ? m('.element', [
+                m('span', gameStats?.gameTreasuresCounter),
+                m('img', { src: `/assets/images/token.png` }),
+                m('span', 'HIDDEN'),
+              ])
+            : m('.element', 'Find the treasure...'),
+        m('.element', `ROUNDS LEFT ${roundInfo.roundsToGo || roundInfo.currentRound || '700'}`),
+        m(Timebar, { progress: roundInfo.gone * 10, pause: gameOver }),
+        m(`.element ${stats?.ap?.current == 0 ? 'warn' : 'info'}`, `AP: ${stats?.ap?.current}`),
+      ]);
+    },
+  };
+}
+
+function Timebar() {
+  let width;
+  return {
+    oninit: function (vnode) {
+      const progress = vnode.attrs.progress || 0;
+      width = 100 - Math.max(0, Math.min(100, progress));
+    },
+    onbeforeupdate: function (vnode) {
+      const pause = vnode.attrs.pause;
+      if (!pause) {
+        const progress = vnode.attrs.progress || 0;
+        width = 100 - Math.max(0, Math.min(100, progress));
+      }
+    },
+    view: function (vnode) {
+      return m('div.timebar-container', [
+        m('div.timebar', [
+          m('div.timebar-progress', {
+            style: {
+              width: width + '%',
+            },
+          }),
+        ]),
+      ]);
+    },
+  };
+}
+
 function EquipmentGui(initialVnode) {
   return {
     view: function (vnode) {

diff --git a/src/game/scenes/MainScene.js b/src/game/scenes/MainScene.js
@@ -28,6 +28,7 @@ export default class MainScene extends Phaser.Scene {
   roundsCountdownTotal;
   gameOver = false;
   lockingTx = null;
+  gameStats = {};
 
   constructor() {
     super(mainSceneKey);
@@ -142,6 +143,9 @@ export default class MainScene extends Phaser.Scene {
         return m(MainSceneGui, {
           mainPlayerStats: self.mainPlayer?.stats,
           mainPlayerEquipment: self.mainPlayer?.equipment,
+          gameStats: self.gameStats,
+          roundInfo: self.roundInfo,
+          gameOver: self.gameOver,
         });
       },
     });
@@ -288,10 +292,9 @@ export default class MainScene extends Phaser.Scene {
     if (this.gameOver) {
       return;
     }
-    const roundInfo = this.roundTick();
-    if ((this.gameEnd && this.gameEnd < Date.now()) || roundInfo.roundsToGo == 0) {
+    this.roundInfo = this.roundTick();
+    if ((this.gameEnd && this.gameEnd < Date.now()) || this.roundInfo.roundsToGo == 0) {
       this.gameOver = true;
-      this.statsScene?.gameOver();
       this.backgroundMusic.stop();
       this.gameOverSound.play();
       this.server.send({ cmd: Const.Command.info }); // sent just so we can send the tokens at the end of the game
@@ -301,16 +304,16 @@ export default class MainScene extends Phaser.Scene {
         this.scene.start(leaderboardSceneKey, { players: this.allPlayers, mainPlayer: this.mainPlayer });
       }, 2000);
     }
-    if (roundInfo.roundsToGo == 3 && !this.threeRoundsPlayed) {
+    if (this.roundInfo.roundsToGo == 3 && !this.threeRoundsPlayed) {
       this.threeRoundsPlayed = true;
       this.threeRoundsLeftSound.play();
     }
-    if (roundInfo.roundsToGo == 1 && !this.lastRoundPlayed) {
+    if (this.roundInfo.roundsToGo == 1 && !this.lastRoundPlayed) {
       this.lastRoundPlayed = true;
       this.lastRoundSound.play();
     }
 
-    this.game.events.emit(EVENTS_NAME.updateRoundInfo, roundInfo);
+    // this.game.events.emit(EVENTS_NAME.updateRoundInfo, roundInfo);
 
     Object.keys(this.allPlayers).forEach((p) => {
       this.allPlayers[p].update();
@@ -687,6 +690,7 @@ export default class MainScene extends Phaser.Scene {
       newCoinsGained = responsePlayer.stats.coins.gained;
       self.mainPlayer.equipment = responsePlayer.equipment;
       self.mainPlayer.updateStats(responsePlayer.stats);
+      self.gameStats = gameStats;
       this.game.events.emit(EVENTS_NAME.updateStats, {
         player: responsePlayer.stats,
         game: gameStats,

diff --git a/src/game/scenes/StatsScene.js b/src/game/scenes/StatsScene.js
@@ -1,14 +1,11 @@
 import { EVENTS_NAME } from '../utils/events.js';
-import { Text } from '../objects/Text.js';
-import { colors } from '../utils/style.js';
 import { mainSceneKey, statsSceneKey } from '../../main.js';
 import { trimString } from '../utils/utils.js';
 import Phaser from 'phaser';
 
 export default class StatsScene extends Phaser.Scene {
   walletAddress;
   stats;
-  roundInfo;
   beaverChoice;
   processId;
   allPlayers;
@@ -27,7 +24,6 @@ export default class StatsScene extends Phaser.Scene {
     this.load.image('hacker_beaver_portrait', 'assets/images/beavers/hacker_beaver/hacker_beaver_portrait.png');
     this.load.image('heavy_beaver_portrait', 'assets/images/beavers/heavy_beaver/heavy_beaver_portrait.png');
     this.load.image('speedy_beaver_portrait', 'assets/images/beavers/speedy_beaver/speedy_beaver_portrait.png');
-    this.load.image('time_bar', 'assets/images/time_bar.png');
     this.load.image('AO', 'assets/images/token.png');
   }
 
@@ -42,71 +38,10 @@ export default class StatsScene extends Phaser.Scene {
       this.beaverStatsBox = this.add.dom(100, 100 + beaverStatsBoxEl.width, beaverStatsBoxEl);
     }
     this.initListeners();
-    this.addCounterAO();
-    this.addTitle();
-    this.addRoundBar();
-    this.addSubtitle();
-  }
-
-  addCounterAO() {
-    this.aoCounter = new Text(this, this.gameWidth / 2, 30, 'Find the treasure...', {
-      backgroundColor: 'black',
-      fontFamily: '"Press Start 2P"',
-      fontSize: '20px',
-      textTransform: 'uppercase',
-      color: 'white',
-    }).setDepth(1);
-    this.aoCounter.x = this.gameWidth / 2 - this.aoCounter.width / 2;
-    this.aoCounterImg = this.add.image(
-      this.gameWidth / 2 + this.aoCounter.width / 2 + 24,
-      this.aoCounter.y + this.aoCounter.height / 2,
-      'AO'
-    );
-    this.aoCounterImg.setDepth(2);
-    this.aoCounterImg.visible = false;
-  }
-
-  addTitle() {
-    this.title = new Text(this, this.gameWidth / 2, 80, 'ROUNDS LEFT 700', {
-      backgroundColor: 'black',
-      fontFamily: '"Press Start 2P"',
-      fontSize: '20px',
-      textTransform: 'uppercase',
-      color: 'white',
-    }).setDepth(1);
-    this.title.x = this.gameWidth / 2 - this.title.width / 2;
-  }
-
-  addSubtitle() {
-    this.subtitle = new Text(this, this.gameWidth / 2, this.timeBar.y + this.timeBar.height, 'AP: 10', {
-      backgroundColor: 'black',
-      fontFamily: '"Press Start 2P"',
-      fontSize: '20px',
-      textTransform: 'uppercase',
-      color: colors.white,
-    }).setDepth(1);
-    this.subtitle.x = this.gameWidth / 2 - this.subtitle.width / 2;
-  }
-
-  addRoundBar() {
-    this.timeBar = this.add
-      .image(window.innerWidth / 2, this.title.y + this.title.height + 50, 'time_bar')
-      .setDepth(100);
-
-    this.timeMask = this.add.sprite(this.timeBar.x, this.timeBar.y, 'time_bar').setDepth(100);
-    this.timeMask.visible = false;
-    this.initialtimeMaskPosition = this.timeMask.x;
-    this.timeBar.mask = new Phaser.Display.Masks.BitmapMask(this, this.timeMask);
-    this.stepWidth = this.timeMask.displayWidth / 10;
-  }
-
-  gameOver() {
-    this.title.setText(`GAME OVER`);
   }
 
   initListeners() {
     this.game.events.on(EVENTS_NAME.updateStats, (stats) => this.onUpdateStats(stats));
-    this.game.events.on(EVENTS_NAME.updateRoundInfo, (roundInfo) => this.onUpdateRoundInfo(roundInfo));
     this.game.events.on(EVENTS_NAME.updatePlayers, (player) => this.onUpdatePlayers(player));
     this.game.events.on(EVENTS_NAME.updateOtherPlayerStats, (player) => this.onUpdateOtherPlayerStats(player));
     this.game.events.on(EVENTS_NAME.nextMessage, ({ response, lag }) => this.onNexMessage(response, lag));
@@ -238,26 +173,6 @@ export default class StatsScene extends Phaser.Scene {
       `${stats?.player?.kills.frags}/${stats?.player?.kills.deaths}`;
     document.getElementById('stats-scene-cbcoins').innerText = stats?.player?.coins.balance;
     document.getElementById('stats-scene-gained').innerText = stats?.player?.coins.gained;
-    this.subtitle.setText(`AP: ${stats?.player?.ap?.current}`);
-    if (stats?.player?.ap?.current === 0) {
-      this.subtitle.setColor(colors.red);
-    } else {
-      this.subtitle.setColor(colors.white);
-    }
-    if (stats?.game?.gameTreasuresCounter) {
-      this.aoCounter.setText(`${stats?.game?.gameTreasuresCounter}   HIDDEN`);
-      this.aoCounter.x = this.gameWidth / 2 - this.aoCounter.width / 2;
-      this.aoCounterImg.x = this.gameWidth / 2 + this.aoCounter.width / 2 - 150;
-      this.aoCounterImg.visible = true;
-      this.aoCounterImg.setDepth(2);
-    }
-  }
-
-  onUpdateRoundInfo(roundInfo) {
-    if (!this.mainScene.gameOver) {
-      this.timeMask.x = this.initialtimeMaskPosition - this.stepWidth * roundInfo.gone;
-      this.title.setText(`ROUNDS LEFT ${roundInfo.roundsToGo || roundInfo.currentRound}`);
-    }
   }
 
   onUpdatePlayers(player) {