Store data in Astro Studio (#1)

* Define database schema

* Migrate home page to Astro

* Enable actions and server output

* Migrate new game page to Astro

* Migrate dealer page to Astro

* Fully migrate new game page to Astro

* Enable view transitions

* New branding

* Refactor bids and tricks pages

* Prevent flash before JS initialization

* Add logic to end game

* Add CI workflow to migrate the database

* Deploy using Astro Studio

.github/workflows/db.yaml

@@ -0,0 +1,34 @@
+name: Astro Studio
+
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{secrets.ASTRO_STUDIO_APP_TOKEN }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  DB:
+    permissions:
+      contents: read
+      actions: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Verify database schema
+        uses: withastro/action-studio@main

astro.config.ts

@@ -1,12 +1,13 @@
 import { defineConfig } from 'astro/config';
+import db from '@astrojs/db';
 import svelte from '@astrojs/svelte';
+import vercel from '@astrojs/vercel/serverless';
 import { browserslistToTargets } from 'lightningcss';
 import browserslist from 'browserslist';
-import vercel from '@astrojs/vercel/serverless';
 
 // https://astro.build/config
 export default defineConfig({
-  output: 'hybrid',
+  output: 'server',
   adapter: vercel({
     imageService: true,
     functionPerRoute: false,
@@ -15,14 +16,14 @@ export default defineConfig({
     checkOrigin: true,
   },
   experimental: {
-    contentCollectionCache: true,
+    actions: true,
   },
   site: 'https://wizard.madebyconnor.co',
   prefetch: {
     prefetchAll: true,
     defaultStrategy: 'hover',
   },
-  integrations: [svelte()],
+  integrations: [svelte(), db()],
   vite: {
     css: {
       transformer: 'lightningcss',

db/config.ts

@@ -0,0 +1,64 @@
+import { defineDb, defineTable, column, NOW } from 'astro:db';
+
+const League = defineTable({
+  columns: {
+    id: column.text({ primaryKey: true }),
+    name: column.text({ optional: true }),
+  },
+});
+
+const Game = defineTable({
+  columns: {
+    id: column.text({ primaryKey: true }),
+    leagueId: column.text({
+      references: () => League.columns.id,
+      optional: true,
+    }),
+    startedAt: column.date({ default: NOW }),
+    endedAt: column.date({ optional: true }),
+  },
+});
+
+const Player = defineTable({
+  columns: {
+    id: column.text({ primaryKey: true }),
+    name: column.text(),
+  },
+});
+
+const PlayerInGame = defineTable({
+  columns: {
+    id: column.text({ primaryKey: true }),
+    gameId: column.text({ references: () => Game.columns.id }),
+    playerId: column.text({ references: () => Player.columns.id }),
+    position: column.number(),
+  },
+});
+
+const Scores = defineTable({
+  columns: {
+    id: column.text({ primaryKey: true }),
+    gameId: column.text({ references: () => Game.columns.id }),
+    playerId: column.text({ references: () => Player.columns.id }),
+    round: column.number(),
+    bid: column.number({ optional: true }),
+    tricks: column.number({ optional: true }),
+  },
+  indexes: [
+    {
+      on: ['gameId', 'playerId', 'round'],
+      unique: true,
+    },
+  ],
+});
+
+// https://astro.build/db/config
+export default defineDb({
+  tables: {
+    League,
+    Game,
+    Player,
+    PlayerInGame,
+    Scores,
+  },
+});

db/seed.ts

@@ -0,0 +1,101 @@
+import { db, Game, Player, PlayerInGame, Scores } from 'astro:db';
+
+import { createId } from '../src/utils/id';
+
+const games = [
+  { id: 'KVMGQ' },
+  // TODO: Add complete game data
+  { id: 'MFFRA', endedAt: new Date() },
+];
+
+const players = [
+  { id: createId(), name: 'Apple' },
+  { id: createId(), name: 'Banana' },
+  { id: createId(), name: 'Cherry' },
+  { id: createId(), name: 'Dragonfruit' },
+  { id: createId(), name: 'Elderflower' },
+];
+
+const playersInGame = players.slice(0, 3).map((player, index) => ({
+  id: createId(),
+  gameId: games[0]?.id as string,
+  playerId: player.id,
+  position: index,
+}));
+
+const scores = [
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[0]?.id as string,
+    round: 1,
+    bid: 1,
+    tricks: 1,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[1]?.id as string,
+    round: 1,
+    bid: 0,
+    tricks: 0,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[2]?.id as string,
+    round: 1,
+    bid: 1,
+    tricks: 0,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[0]?.id as string,
+    round: 2,
+    bid: 1,
+    tricks: 0,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[1]?.id as string,
+    round: 2,
+    bid: 1,
+    tricks: 1,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[2]?.id as string,
+    round: 2,
+    bid: 1,
+    tricks: 1,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[0]?.id as string,
+    round: 3,
+    bid: 0,
+    tricks: 0,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[1]?.id as string,
+    round: 3,
+    bid: 2,
+    tricks: 2,
+  },
+  {
+    gameId: games[0]?.id as string,
+    playerId: players[2]?.id as string,
+    round: 3,
+    bid: 1,
+    tricks: 1,
+  },
+].map((score) => ({
+  id: `${score.gameId}-${score.playerId}-${score.round}`,
+  ...score,
+}));
+
+// https://astro.build/db/seed
+export default async function seed() {
+  await db.insert(Player).values(players);
+  await db.insert(Game).values(games);
+  await db.insert(PlayerInGame).values(playersInGame);
+  await db.insert(Scores).values(scores);
+}

package.json

@@ -29,7 +29,7 @@
     "check": "astro check",
     "sync": "astro sync",
     "prebuild": "npm run check",
-    "build": "astro build",
+    "build": "astro build --remote",
     "preview": "astro preview",
     "prelint": "npm run sync",
     "lint": "foundry run eslint . --ext .js,.jsx,.json,.ts,.tsx",

public/icons/default/browserconfig.xml → public/icons/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/icons/default/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <TileColor>#8e4491</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/icons/default/site.webmanifest → public/icons/site.webmanifest

@@ -1,10 +1,10 @@
 {
-    "name": "Connor B\u00e4r",
-    "short_name": "Connor B\u00e4r",
+    "name": "Wizard",
+    "short_name": "Wizard",
     "icons": [
         {
-            "src": "/icons/default/android-chrome-192x192.png",
-            "sizes": "192x192",
+            "src": "/icons/android-chrome-144x144.png",
+            "sizes": "144x144",
             "type": "image/png"
         }
     ],