[WIP] Discord embedded implementation

.github/workflows/deployment.yml

@@ -11,7 +11,7 @@ jobs:
     outputs:
       image: ${{ steps.image_name.outputs.image }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Generate image name
         id: image_name
@@ -25,8 +25,19 @@ jobs:
           HARBOR_PASSWORD: ${{ secrets.HARBOR_PASSWORD }}
           HARBOR_URI: ${{ secrets.HARBOR_URI }}
 
+      - name: Import Secrets
+        id: import-secrets
+        uses: hashicorp/vault-action@v3
+        with:
+          url: ${{ secrets.VAULT_ADDR }}
+          method: userpass
+          username: ${{ secrets.VAULT_USERNAME }}
+          password: ${{ secrets.VAULT_PASSWORD }}
+          secrets: |
+            applications/data/aznopoly DISCORD_CLIENT_ID | VITE_DISCORD_CLIENT_ID;
+
       - name: Build the Docker image
-        run: docker buildx build . --file Dockerfile --tag $HARBOR_URI/abstractolotl/aznopoly-web:${IMAGE_NAME} --tag $HARBOR_URI/abstractolotl/aznopoly-web:latest
+        run: docker buildx build . --build-arg vite_discord_client_id=$VITE_DISCORD_CLIENT_ID --file Dockerfile --tag $HARBOR_URI/abstractolotl/aznopoly-web:${IMAGE_NAME} --tag $HARBOR_URI/abstractolotl/aznopoly-web:latest
         env:
           HARBOR_URI: ${{ secrets.HARBOR_URI }}
           IMAGE_NAME: ${{ steps.image_name.outputs.image }}
@@ -41,10 +52,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout'  # Checkout the repository code.
-        uses: 'actions/checkout@v3'
+        uses: 'actions/checkout@v4'
 
       - name: Deploy
-        uses: WyriHaximus/github-action-helm3@v3
+        uses: WyriHaximus/github-action-helm3@v4
         with:
           exec: helm upgrade --install --atomic --timeout 5m --history-max 5 --namespace=frontend --set image.tag=${IMAGE_NAME} aznopoly-web helm-charts
           kubeconfig: '${{ secrets.KUBECONFIG }}'

.github/workflows/staging.yml

@@ -12,7 +12,7 @@ jobs:
     outputs:
       image: ${{ steps.image_name.outputs.image }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Generate image name
         id: image_name
@@ -26,8 +26,19 @@ jobs:
           HARBOR_PASSWORD: ${{ secrets.HARBOR_PASSWORD }}
           HARBOR_URI: ${{ secrets.HARBOR_URI }}
 
+      - name: Import Secrets
+        id: import-secrets
+        uses: hashicorp/vault-action@v3
+        with:
+          url: ${{ secrets.VAULT_ADDR }}
+          method: userpass
+          username: ${{ secrets.VAULT_USERNAME }}
+          password: ${{ secrets.VAULT_PASSWORD }}
+          secrets: |
+            applications/data/aznopoly DISCORD_CLIENT_ID | VITE_DISCORD_CLIENT_ID;
+
       - name: Build the Docker image
-        run: docker buildx build . --file Dockerfile --tag $HARBOR_URI/abstractolotl/aznopoly-web:${IMAGE_NAME}
+        run: docker buildx build . --build-arg vite_discord_client_id=$VITE_DISCORD_CLIENT_ID --file Dockerfile --tag $HARBOR_URI/abstractolotl/aznopoly-web:${IMAGE_NAME}
         env:
           HARBOR_URI: ${{ secrets.HARBOR_URI }}
           IMAGE_NAME: ${{ steps.image_name.outputs.image }}
@@ -41,13 +52,12 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false && github.event.action != 'closed' && github.event.action != 'merged' && github.event.action != 'converted_to_draft'
-
     steps:
       - name: 'Checkout'  # Checkout the repository code.
-        uses: 'actions/checkout@v3'
+        uses: 'actions/checkout@v4'
 
       - name: Deploy
-        uses: WyriHaximus/github-action-helm3@v3
+        uses: WyriHaximus/github-action-helm3@v4
         with:
           exec: helm upgrade --install --atomic --timeout 5m --history-max 5 --namespace=frontend --set image.tag=${IMAGE_NAME} --set ingress.domain=${GITHUB_HEAD_REF/\//-}.aznopoly.abstractolotl.de aznopoly-web-${GITHUB_HEAD_REF/\//-} helm-charts
           kubeconfig: '${{ secrets.KUBECONFIG }}'

Dockerfile

@@ -14,15 +14,21 @@ COPY --from=install /temp/dev/node_modules node_modules
 COPY . .
 
 ENV NODE_ENV=production
+ARG vite_discord_client_id
+ENV VITE_DISCORD_CLIENT_ID=$vite_discord_client_id
 RUN yarn build
-COPY assets dist/assets
 
-FROM base AS release
-COPY --from=install /temp/dev/node_modules node_modules
-COPY --from=prerelease /app/dist/* ./dist
-COPY --from=prerelease /app/dist/assets ./dist/assets
-COPY --from=prerelease /app/package.json .
-RUN yarn global add http-server
+FROM nginx:alpine AS release
+# Configure Nginx
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+RUN rm -rf /usr/share/nginx/html/*
+# Copy the built app to the html directory
+COPY --from=install /temp/dev/node_modules /usr/share/nginx/html/node_modules
+COPY --from=prerelease /app/dist/index.html /usr/share/nginx/html/
+COPY --from=prerelease /app/dist/style.css /usr/share/nginx/html/
+COPY --from=prerelease /app/dist/favicon.ico /usr/share/nginx/html/
+COPY --from=prerelease /app/dist/assets /usr/share/nginx/html/assets
+COPY --from=prerelease /app/package.json /usr/share/nginx/html/
 
 EXPOSE 8080
-CMD [ "http-server", "dist" ]
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

docker/nginx.conf

@@ -0,0 +1,14 @@
+worker_processes 4;
+events { worker_connections 1024; }
+
+http {
+    server {
+        listen 8080;
+        root  /usr/share/nginx/html;
+        include /etc/nginx/mime.types;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@discord/embedded-app-sdk": "^1.1.2",
     "@types/color-convert": "^2.0.3",
     "@types/seedrandom": "^3.0.8",
     "babylonjs": "^7.3.0",

src/client.ts

@@ -23,13 +23,22 @@ export default class AzNopolyClient extends EventTarget {
         }
 
         this.state = ClientState.CONNECTING;
-        this.socket = new WebSocket("wss://" + BASE_URL + "/room/" + roomId)
+        this.socket = new WebSocket("wss://" + this.getBaseUrl() + "/room/" + roomId)
 
         this.socket.addEventListener("open", this.onOpen.bind(this))
         this.socket.addEventListener("close", this.onClose.bind(this))
         this.socket.addEventListener("message", this.onMessage.bind(this))
     }
 
+    private getBaseUrl() {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('frame_id') !== null) {
+            // Discord rooting is different
+            return location.host + "/server";
+        }
+        return BASE_URL;
+    }
+
     private publishClientEvent(event: PacketType, data: ClientPacket) {
         this.dispatchEvent(new CustomEvent(event, { detail: data }));
     }

src/game.ts

@@ -24,8 +24,12 @@ export default class AzNopolyGame {
 
         this._client.addEventListener(PacketType.ROOM_INIT, ((event: CustomEvent<RoomInitPacket>) => {
             const uuid = event.detail.data.uuid;
+            let userName = localStorage.getItem("playerName");
+            if (sessionStorage.getItem('discordName') !== null) {
+                userName = sessionStorage.getItem('discordName');
+            }
             this.setProfile(uuid, {
-                name: localStorage.getItem("playerName") || "Player",
+                name: userName || "Player",
                 colorIndex: parseInt(localStorage.getItem("playerColor") || "0"),
                 avatar: localStorage.getItem("playerAvatar") as Avatars || Avatars.AXOLOTL,
                 host: uuid === event.detail.data.room.host,

src/main.ts

@@ -17,6 +17,8 @@ import * as THREE from 'three';
 
 //import * as WebGLDebugUtils from './webgl-debug.js';
 import DebugScene from './phaser/scenes/debug-scene.js';
+import {DiscordClient} from "@/util/discord.ts";
+import {RoomEvent} from "@/room.ts";
 
 window.onload = () => {
     setTimeout(async () => {
@@ -45,7 +47,7 @@ window.onload = () => {
             physics: {
                 default: 'arcade',
                 arcade: {
-                    gravity: { y: 0 },
+                    gravity: { y: 0, x: 0 },
                     debug: true
                 }
             },
@@ -80,10 +82,19 @@ window.onload = () => {
 
         const params = new URLSearchParams(window.location.search);
         const debug = params.get('debug');
+
         if (debug !== null) {
             console.log('Debug mode enabled', debug);
             mock(aznopoly);
             game.scene.start(debug || 'lobby');
+        } else if (params.get('frame_id') !== null) {
+            let discordClient = new DiscordClient();
+            await discordClient.handleAuthentication();
+
+            aznopoly.init(discordClient.getRoomId())
+            aznopoly.room.addEventListener(RoomEvent.READY, () => {
+                game.scene.start('lobby')
+            }, { once: true });
         } else {
             game.scene.start('title');
         }

src/phaser/components/ui/avatar.ts

@@ -31,6 +31,7 @@ export default class AzNopolyAvatar extends Phaser.GameObjects.Container {
 
     constructor(scene: Phaser.Scene, x: number, y: number, size: number, avatar: Avatars, colorIndex: number) {
         super(scene, x, y);
+
         this.colorIndex = colorIndex;
         this.scene = scene;
 

src/phaser/components/ui/input-field.ts

@@ -59,6 +59,10 @@ export default class AzNopolyInput extends Phaser.GameObjects.Container {
         this.add(this.graphics);
     }
 
+    public setDisabled(value: boolean) {
+        this.inputDom.disabled = value;
+    }
+
     public getValue() {
         return this.inputDom.value;
     }
@@ -69,6 +73,7 @@ export default class AzNopolyInput extends Phaser.GameObjects.Container {
 
     public setChangeListener(callback: (value: string) => void) {
         this.inputDom.addEventListener("input", () => {
+            if (this.inputDom.disabled) return;
             callback(this.inputDom.value);
         });
     }

src/phaser/components/ui/lobby/profile-customization-panel.ts

@@ -110,6 +110,9 @@ export default class ProfileCustomizationPanel extends AzNopolyPanel {
         labelName.setOrigin(1, 0.5);
 
         this.inputName = new AzNopolyInput(scene, bounds.x + bounds.width * 0.5, labelName.y, 200, 40, "text");
+        if (sessionStorage.getItem("discordName") !== null) {
+            this.inputName.setDisabled(true)
+        }
         this.inputName.setPosition(this.inputName.x, this.inputName.y - this.inputName.height * 0.5);
         this.inputName.setValue(this.profile.name);
         this.inputName.setChangeListener((value) => {

src/phaser/components/ui/player-list.ts

@@ -64,7 +64,7 @@ export default class PlayerList extends AzNopolyPanel {
     public updatePlayerList(players: PlayerProfile[]) {
         const newEntries: Phaser.GameObjects.Container[] = [];
 
-        const oldEntries = this.playerEntries;;
+        const oldEntries = this.playerEntries;
         oldEntries.forEach(entry => {
             entry.destroy();
         });
@@ -90,5 +90,4 @@ export default class PlayerList extends AzNopolyPanel {
         this.setHeadline(`CONNECTED PLAYERS (${num} / 4)`);
     }
 
-
 }

src/phaser/scenes/lobby-scene-controller.ts

@@ -1,7 +1,7 @@
 import { PLAYER_COLORS } from "@/style";
 import AzNopolyGame from "../../game";
-import { RoomEvent } from "../../room";
-import { SceneSwitcher } from "../../util/scene-switcher";
+import { RoomEvent } from "@/room.ts";
+import { SceneSwitcher } from "@/util/scene-switcher.ts";
 import { PlayerProfile } from "../components/ui/player-info";
 import NetworkSceneController from "./base/base-scene-controller";
 import LobbyScene from "./lobby-scene";

src/phaser/scenes/lobby-scene.ts

@@ -1,4 +1,4 @@
-import { FONT_STYLE_PANEL_HEADLINE, PLAYER_COLORS } from "../../style";
+import { FONT_STYLE_PANEL_HEADLINE, PLAYER_COLORS } from "@/style.ts";
 
 import TilingBackground from "../components/ui/tiling-background";
 import { AzNopolyButton } from "../components/ui/button";
@@ -18,6 +18,7 @@ export default class LobbyScene extends BaseScene<LobbySceneController> {
     preload() {
         ProfileCustomizationPanel.preload(this);
         PlayerList.preload(this);
+        AzNopolyButton.preload(this);
         this.load.image('host_crown', 'assets/crown.png');
         this.load.image('lobby_bg', 'assets/lobby_background.png');
     }
@@ -29,7 +30,7 @@ export default class LobbyScene extends BaseScene<LobbySceneController> {
     create() {
         this.cameras.main.fadeIn(100);
         this.add.existing(new TilingBackground(this, 'lobby_bg', new Phaser.Math.Vector2(2, 1), 35, 1.75));
-        this.add.text(0, 0, `Lobby ( ${this.aznopoly.room.id} )`, FONT_STYLE_PANEL_HEADLINE);
+        this.add.text(0, 0, `Lobby ( ${this.aznopoly.room.getName()} )`, FONT_STYLE_PANEL_HEADLINE);
 
         const totalWidth = PlayerList.WIDTH + ProfileCustomizationPanel.WIDTH + 20;
         this.playerList = new PlayerList(this, this.aznopoly.isHost, SETTINGS.DISPLAY_WIDTH * 0.5 - totalWidth * 0.5 + PlayerList.WIDTH * 0.5, SETTINGS.DISPLAY_HEIGHT * 0.5);

src/room.ts

@@ -31,6 +31,10 @@ export default class Room extends EventTarget {
         this.client.addEventListener(PacketType.ROOM_LEAVE, this.onRoomLeave.bind(this) as EventListener);
     }
 
+    public getName() {
+        return sessionStorage.getItem('discordChannel') || this.id;
+    }
+
     public lockRoom() {
         this.locked = true;
     }