All the pages are working again, but Alpine is insanely frustrating.

Makefile

@@ -17,7 +17,7 @@ test: site
 
 test_only:
 	go test zedshaw.games/webapp/tests -c -o runtests$(GO_IS_STUPID_EXE)
-	./runtests$(GO_IS_STUPID_EXE) -test.run TestAdminIndexPage
+	./runtests$(GO_IS_STUPID_EXE) -test.run TestGamePage
 
 migrate_up:
 	go tool goose sqlite3 db.sqlite3 -dir migrations up

admin/handlers.go

@@ -159,19 +159,15 @@ func GetPageAdminIndex(c *fiber.Ctx) error {
 
 func Setup(app *fiber.App) {
   app.Get("/admin/table/", GetPageAdminIndex)
-  app.Get("/api/admin/table/", GetApiTableIndex)
-
-  app.Get("/api/admin/table/:table/", GetApiSelectAll)
   app.Get("/admin/table/:table/", GetPageSelectAll)
-
   app.Get("/admin/new/table/:table/", GetPageInsert)
-  app.Get("/api/admin/new/table/:table/", GetApiInsert)
-  app.Post("/api/admin/new/table/:table/", PostApiInsert)
-
-  app.Get("/api/admin/table/:table/:id/", GetApiSelectOne)
   app.Get("/admin/table/:table/:id/", GetPageSelectOne)
 
-  app.Post("/api/admin/table/:table/:id/", PostApiUpdate)
+  app.Get("/api/admin/table", GetApiTableIndex)
-
+  app.Get("/api/admin/table/:table", GetApiSelectAll)
-  app.Delete("/api/admin/table/:table/:id/", DeleteApi)
+  app.Get("/api/admin/new/table/:table", GetApiInsert)
+  app.Post("/api/admin/new/table/:table", PostApiInsert)
+  app.Get("/api/admin/table/:table/:id", GetApiSelectOne)
+  app.Post("/api/admin/table/:table/:id", PostApiUpdate)
+  app.Delete("/api/admin/table/:table/:id", DeleteApi)
 }

api/handlers.go

@@ -110,6 +110,21 @@ func PostApiLink(c *fiber.Ctx) error {
   return c.Redirect("/live/")
 }
 
+func GetApiGame(c *fiber.Ctx) error {
+  sql, args, err := sq.Select("*").From("game").ToSql()
+  err = data.SelectJson[data.Game](c, err, sql, args...)
+
+  return IfErrNil(err, c)
+}
+
+func GetApiGameId(c *fiber.Ctx) error {
+  sql, args, err := sq.Select("*").
+    From("game").Where(sq.Eq{"id": c.Params("id")}).ToSql()
+
+  err = data.GetJson[data.Game](c, err, sql, args...)
+  return IfErrNil(err, c)
+}
+
 
 func Setup(app *fiber.App) {
   STORE = session.New()
@@ -120,7 +135,11 @@ func Setup(app *fiber.App) {
   })
 
   app.Get("/stream/:id/", Page("stream"))
-  app.Get("/game/:id/:name/", Page("game"))
+  app.Get("/game/:id/:slug/", Page("game"))
+
+  app.Get("/api/game", GetApiGame)
+  app.Get("/api/game/:id", GetApiGameId)
+
   app.Get("/api/stream", GetApiStream)
   app.Get("/api/logout", GetApiLogout)
   app.Get("/api/stream/:id", GetApiStreamId)

data/models.go

@@ -27,10 +27,18 @@ type Stream struct {
   Description string `db:"description" json:"description"`
 }
 
+type Game struct {
+  Id int `db:"id" json:"id"`
+  Slug string `db:"slug" json:"slug"`
+  Title string `db:"title" json:"title"`
+  Description string `db:"description" json:"description"`
+}
+
 func Models() map[string]reflect.Type {
   return map[string]reflect.Type{
     "stream": reflect.TypeFor[Stream](),
     "stream_link": reflect.TypeFor[Link](),
     "user": reflect.TypeFor[User](),
+	"game": reflect.TypeFor[Game](),
   }
 }

migrations/20250802154952_create_game_table.sql

@@ -0,0 +1,10 @@
+-- +goose Up
+-- +goose StatementBegin
+CREATE TABLE game (id INTEGER PRIMARY KEY,
+  slug TEXT, title TEXT, description TEXT);
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+DROP TABLE game;
+-- +goose StatementEnd

pages/game/index.html

@@ -1,5 +1,5 @@
 <script>
-  let Games = new GetJson("/api/game/index.json");
+  let Games = new PaginateTable("/api/game");
 </script>
 <blockstart>
 <block style="--w: 100%; --value: 7">
@@ -11,14 +11,16 @@
 
 <hr/>
 <grid x-data="Games" style="--cols: 2">
-  <template x-for="item in theData">
+  <template x-for="item in contents">
-    <shape style="--h: 200px"><a data-testid="game-link" x-text="item.title" x-bind:href="item.url"></a></shape>
+    <shape style="--h: 200px" class="vertical">
+    <a data-testid="game-link" x-text="item.title" x-bind:href="`/game/${item.id}/${item.slug}/`"></a>
+    <p x-text="item.description"></p>
+    </shape>
   </template>
 </grid>
 
 <block>
-  <h2>Planned Work</h2>
+  <h2>Description</h2>
-  <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
 </block>
 
 <block style="--value: 2; --text: 9">

pages/stream/index.html

@@ -1,6 +1,5 @@
 <script>
-  let Streams = new GetJson("/api/stream");
+  let Streams = new PaginateTable("/api/stream");
-  console.log("Streams", Streams);
 </script>
 
 <blockstart>
@@ -10,7 +9,7 @@
   </block>
 
   <block x-data="Streams">
-    <template x-for="item in theData">
+    <template x-for="item in contents">
       <stream class="horizontal">
         <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
         <info>

static/js/code.js

@@ -37,6 +37,10 @@ class GetJson {
     this.url = url;
   }
 
+  get item() {
+    return this.item;
+  }
+
   async item() {
     const resp = await fetch(`${this.url}`);
     console.assert(resp.status == 200, "failed to get it");
@@ -48,9 +52,9 @@ class GetJson {
 
 const ConfirmDelete = async (table, obj_id) => {
   if(confirm("Are you sure?")) {
-    await fetch("/api/admin/table/" + table + "/" + obj_id + "/",
+    await fetch("/api/admin/table/" + table + "/" + obj_id,
       { method: "DELETE" });
-    window.location = "/admin/table/" + table + "/";
+    window.location = "/admin/table/" + table;
   } else {
     return false;
   }

tests/admin_ui_tests.go

@@ -0,0 +1,15 @@
+package tests
+
+import (
+  "testing"
+  // "github.com/stretchr/testify/require"
+  // "zedshaw.games/webapp/data"
+  // sq "github.com/Masterminds/squirrel"
+)
+
+func TestTableListing(t *testing.T) {
+  z, cancel := Setup(t, 2);
+  defer cancel();
+
+  z.GoTo("/admin/table", `[data-testid="live-index-page"]`)
+}

views/admin/table/contents.html

@@ -1,5 +1,5 @@
 <script>
-  let thePage = new PaginateTable("/api/admin/table/{{ .Table }}/");
+  let thePage = new PaginateTable("/api/admin/table/{{ .Table }}");
 </script>
 
 <blockstart>

views/admin/table/index.html

@@ -1,5 +1,5 @@
 <script>
-  let Data = new PaginateTable("/api/admin/table/")
+  let Data = new PaginateTable("/api/admin/table")
 </script>
 
 <blockstart>

views/admin/table/new.html

@@ -1,12 +1,12 @@
 <script>
-  let Data = new GetJson("/api/admin/new/table/{{ .Table }}/");
+  let Data = new GetJson("/api/admin/new/table/{{ .Table }}");
 </script>
 
 <blockstart>
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
 <block x-data="Data">
-  <form method="POST" action="/api/admin/new/table/{{ .Table }}/">
+  <form method="POST" action="/api/admin/new/table/{{ .Table }}">
     <card>
     <top><h2>New {{ .Table }}</h2></top>
     <middle>

views/admin/table/view.html

@@ -1,5 +1,5 @@
 <script>
-  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/");
+  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}");
 </script>
 
 <blockstart>

views/game.html

@@ -1,17 +1,19 @@
 <script>
-  let req = new GetJson("/api/game/1/index.json");
+  let Game = new GetJson("/api/game/1");
 </script>
 
 <blockstart>
 <shape style="--w: 100%; --h: 300px">Gameplay Demo Video</shape>
 
-<block style="--value: 7">
+<block style="--value: 7"
-  <h1 x-text="Game.title">Title</h1>
+       x-data="{item: {}}"
+       x-init="item = await Game.item()">
+  <h1 x-text="item.title"></h1>
 
   <block class="horizontal">
-  <shape style="--w: 200px; --h: 200px;">Some Image</shape>
+    <shape style="--w: 200px; --h: 200px;">Some Image</shape>
 
-  <p x-text="Game.description">Description</p>
+    <p x-text="item.description"></p>
   </block>
 </block>
 

views/stream.html

@@ -1,16 +1,16 @@
 <script>
-  let req = new GetJson("/api/stream/1");
+  let Stream = new GetJson("/api/stream/1");
-  let link_req = new GetJson("/api/stream/1/links");
+  let Links = new PaginateTable("/api/stream/1/links");
 </script>
 
-<div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
+<div x-init="item = await Stream.item()" x-data="{item: {}}">
   <blockstart>
 
   <block style="--value: 7">
-  <h1 x-text="Stream.title"></h1>
+  <h1 x-text="item.title"></h1>
 
     <div>
-      <p x-text="Stream.description"></p>
+      <p x-text="item.description"></p>
     </div>
   </block>
 
@@ -21,8 +21,8 @@
   <block>
     <h2>Links Posted</h2>
 
-    <ul x-init="links = await link_req.theData()" x-data="{links: {}}">
+    <ul x-data="Links">
-      <template x-for="item in links">
+      <template x-for="item in contents">
         <li><a x-text="item.description" x-bind:href="item.url"></a></li>
       </template>
     </ul>