feat: #fe let user configure email to get rewards

frontend/src/js/backend.ts

@@ -18,6 +18,8 @@ export default {
   createDevice: () => backend.post<Types.Device>("/api/devices"),
   getDevice: (deviceId: string) =>
     backend.get<Types.Device>(`/api/devices/${deviceId}`),
+  updateDevice: (deviceId: string, data: Types.DeviceUpdate) =>
+    backend.patch<Types.Device>(`/api/devices/${deviceId}`, data),
   createLeaderboardView: (data: Types.LeaderboardQuery) =>
     backend.post<Types.LeaderboardItem[]>("/api/devices/leaderboard", data),
   createWordChoice: (data: Types.WordChoice) =>

frontend/src/js/game.ts

@@ -8,6 +8,7 @@ import GameOverScene from "./game_over_scene";
 import PauseScene from "./pause_scene";
 import TutorialScene from "./tutorial_scene";
 import LeaderboardScene from "./leaderboard_scene";
+import RewardsScene from "./rewards_scene";
 
 import * as Types from "../../../backend/src/types";
 import backend from "./backend";
@@ -37,6 +38,7 @@ const CONFIG = {
     FightScene,
     GameOverScene,
     LeaderboardScene,
+    RewardsScene,
     PauseScene, // NOTE: keep this as last for overlaying
   ],
 };

frontend/src/js/rewards_scene.ts

+import "phaser";
+import { FONTS } from "./assets";
+
+import backend from "./backend";
+import Game from "./game";
+
+const BUTTON_HIGHLIGHT_COLOR = "darkorange";
+
+// NOTE: see https://stackoverflow.com/a/26989421
+const RFC_5322 = new RegExp(
+  /^([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~]*])$/,
+);
+
+const TEXT_STYLE: {
+  [key: string]: Phaser.Types.GameObjects.Text.TextStyle;
+} = {
+  MESSAGE: {
+    fontFamily: FONTS.MONO,
+    fontStyle: "bold",
+    color: "#ffffff",
+    fontSize: "32px",
+    testString:
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890",
+    align: "center",
+  },
+  BUTTON: {
+    fontFamily: FONTS.MONO,
+    fontStyle: "bold",
+    color: "white",
+    stroke: "black",
+    strokeThickness: 8,
+    testString: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+    fontSize: "32px",
+  },
+};
+
+export default class RewardsScene extends Phaser.Scene {
+  game!: Game;
+  music!: Phaser.Sound.BaseSound;
+  explanation!: Phaser.GameObjects.Text;
+  mailBox!: Phaser.GameObjects.Text;
+  backBtn!: Phaser.GameObjects.Text;
+
+  constructor() {
+    super("rewards");
+  }
+
+  create(data: { music: Phaser.Sound.BaseSound }) {
+    this.music = data.music;
+
+    this.createExplanation();
+    this.createMailBox();
+    this.createBackBtn();
+    this.bindEvents();
+  }
+
+  createExplanation() {
+    const text = "We reward top players weekly! Enter your email to compete:";
+    this.explanation = this.add
+      .text(this.cameras.main.centerX, this.cameras.main.height * 0.1, text, {
+        ...TEXT_STYLE.MESSAGE,
+        testString: text,
+        wordWrap: { width: this.cameras.main.width * 0.6 },
+      })
+      .setOrigin(0.5, 0);
+  }
+
+  createMailBox() {
+    this.mailBox = this.add
+      .text(this.cameras.main.centerX, this.cameras.main.centerY, "", {
+        ...TEXT_STYLE.BUTTON,
+        padding: { x: 16, y: 16 },
+      })
+      .setOrigin(0.5, 0.5)
+      .setInteractive({ useHandCursor: true })
+      .on("pointerover", () =>
+        this.mailBox.setStyle({ stroke: BUTTON_HIGHLIGHT_COLOR }),
+      )
+      .on("pointerout", () =>
+        this.mailBox.setStyle({ stroke: TEXT_STYLE.BUTTON.stroke }),
+      );
+    this.refreshMailBox();
+  }
+
+  createBackBtn() {
+    const text = "Back to menu";
+    this.backBtn = this.add
+      .text(this.cameras.main.centerX, this.cameras.main.height * 0.9, text, {
+        ...TEXT_STYLE.BUTTON,
+      })
+      .setOrigin(0.5, 1)
+      .setPadding(4)
+      .setInteractive({ useHandCursor: true })
+      .on("pointerover", () =>
+        this.backBtn.setStyle({ stroke: BUTTON_HIGHLIGHT_COLOR }),
+      )
+      .on("pointerout", () =>
+        this.backBtn.setStyle({ stroke: TEXT_STYLE.BUTTON.stroke }),
+      );
+  }
+
+  bindEvents() {
+    this.mailBox.on("pointerup", this.changeEmail.bind(this));
+    this.backBtn.on("pointerup", this.backToWelcome.bind(this));
+  }
+
+  async changeEmail() {
+    const oldMail = this.game.beDevice.email;
+    const newMail = prompt(
+      "Please insert, update or delete your email in the field below.\nTo unsubscribe simply submit an empty field.",
+      oldMail ?? "",
+    );
+    if (newMail === null) return;
+    if (newMail == "" || newMail.match(RFC_5322)) {
+      await this.updateDevice(newMail === "" ? null : newMail);
+      this.refreshMailBox();
+    } else {
+      alert(
+        `Sorry, you entered "${newMail}" but that does not look like an email.\nTo unsubscribe simply submit an empty field.`,
+      );
+    }
+  }
+
+  async updateDevice(email: string | null) {
+    this.game.beDevice = (
+      await backend.updateDevice(this.game.beDevice.id, {
+        email: email,
+      })
+    ).data;
+  }
+
+  refreshMailBox() {
+    const email = this.game.beDevice.email;
+    if (email) {
+      this.mailBox.setText(email).setBackgroundColor("#363");
+    } else {
+      this.mailBox.setText("No email given").setBackgroundColor("#633");
+    }
+  }
+
+  backToWelcome() {
+    this.scene.start("welcome", { music: this.music });
+  }
+}

frontend/src/js/welcome_scene.ts

@@ -36,6 +36,7 @@ export default class WelcomeScene extends Phaser.Scene {
   helpButton!: Phaser.GameObjects.Text;
   playButton!: Phaser.GameObjects.Text;
   leadButton!: Phaser.GameObjects.Text;
+  rewardsButton!: Phaser.GameObjects.Text;
   versionText!: Phaser.GameObjects.Text;
 
   constructor() {
@@ -62,6 +63,7 @@ export default class WelcomeScene extends Phaser.Scene {
     this.helpButton = this.createMainButton("Tutorial", 0);
     this.playButton = this.createMainButton("Play", 1);
     this.leadButton = this.createMainButton("Leaderboard", 2);
+    this.rewardsButton = this.createMainButton("Rewards", 3);
     this.createVersionText();
 
     this.bindEvents();
@@ -116,6 +118,7 @@ export default class WelcomeScene extends Phaser.Scene {
     this.helpButton.on("pointerup", this.startTutorial.bind(this));
     this.playButton.on("pointerup", this.startFight.bind(this));
     this.leadButton.on("pointerup", this.startLeaderboard.bind(this));
+    this.rewardsButton.on("pointerup", this.startRewards.bind(this));
   }
 
   startTutorial() {
@@ -129,4 +132,8 @@ export default class WelcomeScene extends Phaser.Scene {
   startLeaderboard() {
     this.scene.start("leaderboard", { music: this.music });
   }
+
+  startRewards() {
+    this.scene.start("rewards", { music: this.music });
+  }
 }