lots of stuff, fixing/investigating weird production bugs

Author: sojs-coder

.github/workflows/buildanddeploy.yml

@@ -99,10 +99,20 @@ jobs:
     needs: build-and-deploy-gh-pages
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: gh-pages
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build static site
+        run: bunx vite build
+
+      - name: Deploy to Firebase
+        uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}
           firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_CCPORTED }}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/lib/helpers.ts

@@ -1,6 +1,6 @@
 import { ReturnValue, UpdateItemCommand } from "@aws-sdk/client-dynamodb";
 import type { Game } from "./types/game.js";
-import { SessionState } from "./state.js";
+import { SessionState, State } from "./state.js";
 
 export function decamelize(string: string): string {
     // HelloWorld -> Hello World
@@ -28,6 +28,7 @@ export async function openGame(game: Game) {
 
 export async function trackClick(gameID: string): Promise<void> {
     try {
+        State.localPlays += 1;
         const params = {
             TableName: 'games_list',
             Key: {
@@ -73,4 +74,22 @@ export async function detectAdBlockEnabled() {
         isAdBlockEnabled = true;
     }
     return isAdBlockEnabled;
+}
+
+export function getTimeBetween(date1: Date, date2: Date): string {
+    const t1 = date1.getTime();
+    const t2 = date2.getTime();
+    const diff = Math.abs(t2 - t1);
+
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    // Subtract days/hours/minutes to get remainder for each unit
+    const remHours = hours % 24;
+    const remMinutes = minutes % 60;
+    const remSeconds = seconds % 60;
+
+    return `${days}d ${remHours}h ${remMinutes}m ${remSeconds}s`;
 }

src/lib/loadCards.ts

@@ -38,6 +38,6 @@ export async function loadGames(): Promise<Game[]> {
             });
         }
     }
-    console.log(games.reduce((a, v) => a + v.clicks, 0).toLocaleString() + " total plays");
+    SessionState.plays = games.reduce((a, v) => a + v.clicks, 0);
     return games;
 }

src/lib/state.ts

@@ -1,6 +1,6 @@
 import { Servers, type Server, AHosts, findServers } from "./types/servers.js";
 import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
-import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
+import { fromCognitoIdentityPool, type CognitoIdentityCredentials } from "@aws-sdk/credential-provider-cognito-identity";
 import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
 import type { Game } from "./types/game.js";
 import { browser } from '$app/environment';
@@ -11,9 +11,11 @@ export const SessionState = {
     awsReady: false,
     ssr: !browser,
     adBlockEnabled: false,
+    credentials: null as CognitoIdentityCredentials | null,
     dynamoDBClient: null as DynamoDBClient | null,
     s3Client: null as S3Client | null,
     devMode: (browser && window.location.hostname === "localhost"),
+    plays: 0
 }
 
 
@@ -27,6 +29,7 @@ type StateType = {
     pinnedGames: string[];
     games: Game[];
     isAHost: () => boolean;
+    localPlays: number;
 };
 
 function saveState() {
@@ -57,7 +60,8 @@ export const State = createState({
     homeView: "grid",
     pinnedGames: [],
     games: [],
-    isAHost: () => (AHosts.some((h): boolean => h.hostname === State.currentServer.hostname))
+    isAHost: () => (AHosts.some((h): boolean => h.hostname === State.currentServer.hostname)),
+    localPlays: 0
 });
 
 
@@ -81,6 +85,7 @@ export async function initializeTooling() {
         region: "us-west-2",
         credentials
     });
+    SessionState.credentials = await credentials();
     SessionState.awsReady = true;
     SessionState.dynamoDBClient = dynamoDBClient;
     SessionState.s3Client = s3Client;
@@ -123,6 +128,5 @@ async function initializeUnathenticated() {
     });
 
     SessionState.awsReady = true;
-
     return credentials;
 }

src/routes/+page.svelte

@@ -5,6 +5,8 @@
     import { initializeTooling, SessionState, State } from "$lib/state.js";
     import { onMount } from "svelte";
     import type { PageData } from "./$types.js";
+    import { getTimeBetween } from "$lib/helpers.js";
+    import { browser } from "$app/environment";
 
     const { data }: { data: PageData } = $props();
 
@@ -25,43 +27,67 @@
     />
 </svelte:head>
 
-{#if (isAHost)}
+{#if isAHost || SessionState.devMode}
     <div class="container">
         <div class="background"></div>
         <Navigation />
         <CardGrid {games} />
-        <footer>
-            <h3>
-                <b
-                    >Can't find what you're looking for? <a
-                        href="https://discord.gg/GDEFRBTT3Z">Join the discord</a
-                    ></b
-                >
-            </h3>
-            <p>
-                CCPorted is not affiliated with or endorsed by any game
-                developers or publishers. All games are property of their
-                respective owners.
-            </p>
-            <p>
-                DMCA Requests can be sent to <a
-                    href="mailto:ccported@ccported.click"
-                    >ccported@ccported.click</a
-                >
-            </p>
-            <p>
-                Site, design, and development are protected under common law
-                copyright; © {new Date().getFullYear()} CCPorted
-            </p>
-            <p>
-                <a href="/tos/privacy_policy">Privacy Policy</a> |
-                <a href="/tos/terms_of_service">Terms of Service</a>
-            </p>
-        </footer>
     </div>
 {:else}
     <Locked />
 {/if}
+<footer>
+    <h3>
+        <b
+            >Can't find what you're looking for? <a
+                href="https://discord.gg/GDEFRBTT3Z">Join the discord</a
+            ></b
+        >
+    </h3>
+    <p>
+        CCPorted is not affiliated with or endorsed by any game developers or
+        publishers. All games are property of their respective owners.
+    </p>
+    <p>
+        DMCA Requests can be sent to <a href="mailto:ccported@ccported.click"
+            >ccported@ccported.click</a
+        >
+    </p>
+    <p>
+        Site, design, and development are protected under common law copyright;
+        © {new Date().getFullYear()} CCPorted
+    </p>
+    <p>
+        <a href="/tos/privacy_policy">Privacy Policy</a> |
+        <a href="/tos/terms_of_service">Terms of Service</a>
+    </p>
+    <div class="information">
+        <!-- none of this information is statefull, therefore none of it will update. this is intended behavior -->
+        <b>Running Information:</b><br />
+        Browser: {navigator.userAgent}<br />
+        Host: {browser && window.location.hostname}<br />
+        DevMode: {SessionState.devMode}<br />
+        AdBlock: {SessionState.adBlockEnabled}<br />
+        Current Server: {State.currentServer.name} (Loaded {State.servers
+            .length})<br />
+        AHost: {State.isAHost()} (Loaded {State.aHosts.length})<br />
+        Games Loaded: {games.length} ({State.pinnedGames.length} pinned) - rendered
+        {State.homeView}<br />
+        Version: {State.version}<br />
+        Logged In: {State.loggedIn}<br />
+        SSR: {SessionState.ssr}<br />
+        AWS Ready: {SessionState.awsReady}<br />
+        AWS Acting: {SessionState.credentials?.identityId} | {SessionState
+            .credentials?.accessKeyId}<br />
+        Credentials Expires: {SessionState.credentials?.expiration?.toLocaleTimeString()}
+        {getTimeBetween(
+            SessionState.credentials?.expiration || new Date(),
+            new Date(),
+        )} <br />
+        Plays: {SessionState.plays.toLocaleString()} ({State.localPlays.toLocaleString()}
+        local)<br />
+    </div>
+</footer>
 
 <style>
     footer {
@@ -70,4 +96,13 @@
         margin: 20px 0;
         font-size: 14px;
     }
+    .information {
+        margin-top: 10px;
+        font-size: 12px;
+        color: #999;
+        max-width: 600px;
+        margin: auto;
+        text-align: left;
+        font-family: "Courier New", Courier, monospace;
+    }
 </style>