Add changelog viewer

.github/workflows/publish.yml

@@ -33,6 +33,7 @@ jobs:
       - name: Generate build number
         run: |
           echo "VITE_BUILD_NUMBER=$((GITHUB_RUN_NUMBER))" >> $GITHUB_ENV
+          echo "VITE_BUILD_COMMIT=$((GITHUB_SHA))" >> $GITHUB_ENV
       - name: Set up Node
         uses: actions/setup-node@v4
         with:

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "VITE_BUILD_NUMBER=`git log --pretty=format:'%h' -n 1` vite",
+    "dev": "VITE_BUILD_COMMIT=`git log --pretty=format:'%h' -n 1` vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint src/",

src/components/changelog.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+export function ChangelogModal({buildNumber, buildCommit, lastCommit}: {buildNumber?: number, buildCommit?: string, lastCommit?: string|null}) {
+    const modalRef = useRef<HTMLDialogElement>(null);
+    const hasNewBuild = useMemo(() => buildCommit && lastCommit && buildCommit !== lastCommit, [buildCommit, lastCommit]);
+    const [latestChanges, setLatestChanges] = useState<string[]>();
+
+    useEffect(() => {
+        if (!buildCommit || !lastCommit) {
+            return;
+        }
+
+        (async () => {
+            const req = await fetch(`https://api.github.com/repos/Half-Shot/wormgine/compare/${lastCommit}...${buildCommit}`);
+            if (!req.ok) {
+                // No good.
+                setLatestChanges(['Could not load changes']);
+            }
+            const result = await req.json();
+            console.log(result);
+            setLatestChanges(result.commits.map((c: any) => `${c.commit.message}`));
+        })();
+    }, [buildCommit, lastCommit, setLatestChanges]);
+
+    const onClick = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        modalRef.current?.showModal();
+    }, [modalRef]);
+
+    const newChangesModal = useMemo(() => {
+        let title = buildNumber ? `Build ${buildNumber}` : `Developer Build ${buildCommit}`;
+        return <dialog ref={modalRef}>
+            <h1>{title}</h1>
+            <p>
+                Changes since {lastCommit?.slice(0,8)}
+            </p>
+            <ol>
+                {latestChanges?.map((v,i) => {
+                    <li key={i}>{v}</li>
+                })}
+            </ol>
+        </dialog>;
+    }, [buildNumber, buildCommit, lastCommit, latestChanges, modalRef]);
+
+    if (!buildNumber && !buildCommit) {
+        return <p>Unknown build</p>;
+    }
+
+    let newChangesButton = null;
+
+    if (hasNewBuild) {
+        newChangesButton = <button onClick={onClick}>
+            See what's new!
+        </button>;
+    }
+
+    return <>
+        <p>Build number {buildNumber ?? buildCommit} {newChangesButton}</p>
+        {newChangesModal}
+    </>;
+}

src/components/menu.tsx

@@ -1,10 +1,13 @@
+import { ChangelogModal } from "./changelog";
 import "./menu.css";
 
 interface Props {
     onNewGame: (level: string) => void
 }
 
-const buildNumber = import.meta.env.VITE_BUILD_NUMBER ?? 'unknown';
+const buildNumber = import.meta.env.VITE_BUILD_NUMBER;
+const buildCommit = import.meta.env.VITE_BUILD_COMMIT;
+const lastCommit = localStorage.getItem('wormgine_last_commit');
 
 export function Menu(props: Props) {
     return <main className="menu">
@@ -23,6 +26,6 @@ export function Menu(props: Props) {
                 <button onClick={() => props.onNewGame("boneIsles")}>Bone Isles</button>
             </li>
         </ul>
-        <small>Build number {buildNumber}</small>
+        <ChangelogModal buildNumber={buildNumber} buildCommit={buildCommit} lastCommit={lastCommit}/>
     </main>;
 }