Add footer also in auth page

Signed-off-by: Seonghyeon Cho <seonghyeoncho96@gmail.com>

Author: sh-cho

packages/client/src/scenes/AuthScene.ts

@@ -3,6 +3,7 @@ import type { IScene } from "../types";
 import { COLORS } from "../constants";
 import { HtmlOverlay } from "../ui/HtmlOverlay";
 import { createBetaBadge } from "../ui/pixiBetaBadge";
+import { createGithubFooter } from "../ui/pixiGithubFooter";
 import { authState } from "../managers/AuthStateManager";
 import { ApiError, authApi } from "../network/rest";
 import { game } from "../core/Game";
@@ -16,6 +17,7 @@ export class AuthScene extends Container implements IScene {
   private title: Text | null = null;
   private logo: Sprite | null = null;
   private betaBadge: Container | null = null;
+  private footerText: Text | null = null;
   private view: AuthView = "chooser";
   private totpTicket: string | null = null;
 
@@ -26,9 +28,21 @@ export class AuthScene extends Container implements IScene {
 
   async init(): Promise<void> {
     this.createTitle();
+    this.createFooter();
     this.render();
   }
 
+  private createFooter(): void {
+    this.footerText = createGithubFooter();
+    this.positionFooter();
+    this.addChild(this.footerText);
+  }
+
+  private positionFooter(): void {
+    if (!this.footerText) return;
+    this.footerText.position.set(this.app.screen.width / 2, this.app.screen.height - 16);
+  }
+
   private createTitle(): void {
     this.title = new Text({
       text: "Differ: Spot the Difference",
@@ -481,6 +495,7 @@ export class AuthScene extends Container implements IScene {
 
   resize(_width: number, _height: number): void {
     this.positionTitle();
+    this.positionFooter();
   }
 
   destroy(): void {

packages/client/src/scenes/MainMenuScene.ts

@@ -8,6 +8,7 @@ import { HtmlOverlay } from "../ui/HtmlOverlay";
 import { ApiError, authApi } from "../network/rest";
 import { evaluatePassword, PASSWORD_HINT } from "../managers/passwordStrength";
 import { createBetaBadge } from "../ui/pixiBetaBadge";
+import { createGithubFooter } from "../ui/pixiGithubFooter";
 
 export class MainMenuScene extends Container implements IScene {
   private app: Application;
@@ -657,30 +658,7 @@ export class MainMenuScene extends Container implements IScene {
   }
 
   private createFooter(): void {
-    const sha = __GIT_SHA__;
-    const label = sha
-      ? `github.com/joe-brothers/differ (${sha})`
-      : "github.com/joe-brothers/differ";
-    this.footerText = new Text({
-      text: label,
-      style: {
-        fontFamily: "Arial, sans-serif",
-        fontSize: 12,
-        fill: COLORS.textSecondary,
-      },
-    });
-    this.footerText.anchor.set(0.5, 1);
-    this.footerText.eventMode = "static";
-    this.footerText.cursor = "pointer";
-    this.footerText.on("pointerover", () => {
-      if (this.footerText) this.footerText.style.fill = COLORS.text;
-    });
-    this.footerText.on("pointerout", () => {
-      if (this.footerText) this.footerText.style.fill = COLORS.textSecondary;
-    });
-    this.footerText.on("pointerdown", () => {
-      window.open("https://github.com/joe-brothers/differ", "_blank", "noopener,noreferrer");
-    });
+    this.footerText = createGithubFooter();
     this.positionFooter();
     this.addChild(this.footerText);
   }

packages/client/src/ui/pixiGithubFooter.ts

@@ -0,0 +1,30 @@
+import { Text } from "pixi.js";
+import { COLORS } from "../constants";
+
+// GitHub repo link rendered at the bottom-center of AuthScene/MainMenuScene.
+// Anchor is (0.5, 1) so callers can place it at (width / 2, height - 16).
+export function createGithubFooter(): Text {
+  const sha = __GIT_SHA__;
+  const label = sha ? `github.com/joe-brothers/differ (${sha})` : "github.com/joe-brothers/differ";
+  const text = new Text({
+    text: label,
+    style: {
+      fontFamily: "Arial, sans-serif",
+      fontSize: 12,
+      fill: COLORS.textSecondary,
+    },
+  });
+  text.anchor.set(0.5, 1);
+  text.eventMode = "static";
+  text.cursor = "pointer";
+  text.on("pointerover", () => {
+    text.style.fill = COLORS.text;
+  });
+  text.on("pointerout", () => {
+    text.style.fill = COLORS.textSecondary;
+  });
+  text.on("pointerdown", () => {
+    window.open("https://github.com/joe-brothers/differ", "_blank", "noopener,noreferrer");
+  });
+  return text;
+}