From 931c493928d6fb7b0036981bc1559af9e7ac269b Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Thu, 18 Sep 2025 14:57:52 -0400
Subject: [PATCH] Games now have a page and everything works on multiple size
 screens, but I need to do a serious refactoring to normalize all data to be
 Go style.

---
 admin/db.go                                  |   3 +-
 common/api.go                                |   4 +-
 data/models.go                               |   4 ++
 migrations/20250918184107_game_page_info.sql |  15 +++++
 static/images/game_mini_header.png           | Bin 0 -> 7268 bytes
 static/input_style.css                       |   2 +-
 static/style.css                             |  57 ++++++++++++++++-
 views/game.html                              |  62 ++++++++++++-------
 views/layouts/main.html                      |   2 +-
 9 files changed, 123 insertions(+), 26 deletions(-)
 create mode 100644 migrations/20250918184107_game_page_info.sql
 create mode 100644 static/images/game_mini_header.png

diff --git a/admin/db.go b/admin/db.go
index 89b7735..af662c7 100644
--- a/admin/db.go
+++ b/admin/db.go
@@ -127,13 +127,14 @@ func Update(table string, value reflect.Value) error {
     // skip update of id to avoid replacing it
     if tag == "id" { continue }
 
+    fmt.Println(">>>>>>>>>>>>>>>>> field", tag, "=", field.Interface())
     builder = builder.Set(tag, field.Interface())
   }
 
   builder = builder.Where(sq.Eq{"id": value.FieldByName("Id").Interface()})
   sql_query, args, err := builder.ToSql()
 
-  fmt.Println("UPDATE QUERY", sql_query, args)
+  fmt.Println("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!UPDATE QUERY", sql_query, args)
   if err != nil { return err}
 
   _, err = data.DB.Exec(sql_query, args...)
diff --git a/common/api.go b/common/api.go
index 9d3f70b..6028589 100644
--- a/common/api.go
+++ b/common/api.go
@@ -56,7 +56,9 @@ func ReflectOnPost(typeOf reflect.Type, c *fiber.Ctx) (reflect.Value, error) {
   var validate *validator.Validate
   validate = validator.New(validator.WithRequiredStructEnabled())
 
-  if err := validate.Struct(result); err != nil {
+  err := validate.Struct(result)
+
+  if err != nil {
     validationErrors := err.(validator.ValidationErrors)
     log.Println(validationErrors)
     return result_val, err
diff --git a/data/models.go b/data/models.go
index 3021b26..7cfbeb9 100644
--- a/data/models.go
+++ b/data/models.go
@@ -36,6 +36,10 @@ type Game struct {
   Url string `db:"url" json:"url"`
   Tags string `db:"tags" json:"tags"`
   Video string `db:"video" json:"video"`
+  CurrentStatus string `db:"current_status" json:"current_status" form:"current_status"`
+  PlannedWork string `db:"planned_work" json:"planned_work" form:"planned_work"`
+  CodeUrl string `db:"code_url" json:"code_url" form:"code_url"`
+  HeaderImage string `db:"header_image" json:"header_image" form:"header_image"`
 }
 
 func Models() map[string]reflect.Type {
diff --git a/migrations/20250918184107_game_page_info.sql b/migrations/20250918184107_game_page_info.sql
new file mode 100644
index 0000000..e8c3559
--- /dev/null
+++ b/migrations/20250918184107_game_page_info.sql
@@ -0,0 +1,15 @@
+-- +goose Up
+-- +goose StatementBegin
+ALTER TABLE game ADD COLUMN current_status TEXT DEFAULT "";
+ALTER TABLE game ADD COLUMN planned_work TEXT DEFAULT "";
+ALTER TABLE game ADD COLUMN code_url TEXT DEFAULT "";
+ALTER TABLE game ADD COLUMN header_image TEXT DEFAULT "";
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+ALTER TABLE game DROP COLUMN current_status;
+ALTER TABLE game DROP COLUMN planned_work;
+ALTER TABLE game DROP COLUMN code_url;
+ALTER TABLE game DROP COLUMN header_image;
+-- +goose StatementEnd
diff --git a/static/images/game_mini_header.png b/static/images/game_mini_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..600c910d8f95f563d92b77c1682497af4189a3e9
GIT binary patch
literal 7268
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
C9m;3`

literal 0
HcmV?d00001

diff --git a/static/input_style.css b/static/input_style.css
index 5ad1bf8..71aa6c0 100644
--- a/static/input_style.css
+++ b/static/input_style.css
@@ -200,7 +200,7 @@ block.center-vertical {
 }
 
 bar {
-  @apply flex flex-row p-4 gap-4;
+  @apply flex flex-col sm:flex-row p-4 gap-4;
 }
 
 bar.center-horizontal {
diff --git a/static/style.css b/static/style.css
index 66d63b9..0527f8b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -247,6 +247,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -262,6 +265,9 @@
   .aspect-\[9\/12\]\! {
     aspect-ratio: 9/12 !important;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .aspect-square\! {
     aspect-ratio: 1 / 1 !important;
   }
@@ -308,12 +314,21 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .resize {
+    resize: both;
+  }
   .two-panel {
     grid-template-columns: repeat(1, minmax(0, 1fr));
     grid-template-rows: repeat(2, minmax(0, 1fr));
@@ -351,6 +366,9 @@
   .justify-evenly {
     justify-content: space-evenly;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\! {
     gap: calc(var(--spacing) * 0) !important;
   }
@@ -414,6 +432,10 @@
     border-width: 1px !important;
     border-color: var(--color-red-900) !important;
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-1 {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -484,6 +506,9 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
@@ -496,6 +521,9 @@
   .\!p-4 {
     padding: calc(var(--spacing) * 4) !important;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -523,6 +551,9 @@
   .\!pb-20 {
     padding-bottom: calc(var(--spacing) * 20) !important;
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -541,6 +572,9 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
   .pb-10\! {
     padding-bottom: calc(var(--spacing) * 10) !important;
   }
@@ -589,12 +623,18 @@
     --tw-font-weight: var(--font-weight-light);
     font-weight: var(--font-weight-light);
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
   .text-gray-50 {
     color: var(--color-gray-50);
   }
   .text-gray-300 {
     color: var(--color-gray-300);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
   .text-gray-950 {
     color: var(--color-gray-950);
   }
@@ -604,15 +644,27 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .\*\:\!p-0 {
+    :is(& > *) {
+      padding: calc(var(--spacing) * 0) !important;
+    }
+  }
   .\*\:text-xl {
     :is(& > *) {
       font-size: var(--text-xl);
@@ -1045,9 +1097,12 @@ block.center-vertical {
 }
 bar {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: calc(var(--spacing) * 4);
   padding: calc(var(--spacing) * 4);
+  @media (width >= 40rem) {
+    flex-direction: row;
+  }
 }
 bar.center-horizontal {
   justify-content: center;
diff --git a/views/game.html b/views/game.html
index 6d4deda..b86739f 100644
--- a/views/game.html
+++ b/views/game.html
@@ -6,35 +6,55 @@
 
   <div class="gap-3 pb-3 flex flex-col lg:flex-row-reverse">
     <div class="!text-sm !p-0 flex flex-col md:flex-row lg:flex-col">
-      <shape class="video">small header</shape>
-      <p class="m-2" x-text="item.description"></p>
+      <img :src="item.header_image" />
+      <block>
+        <p class="m-2" x-text="item.description"></p>
+        <table>
+          <tr><th class="text-gray-400 text-left">RECENT REVIEWS:</th><td>Insanely Optimistic</td></tr>
+          <tr><th class="text-gray-400 text-left">ENGLISH REVIEWS:</th><td>Probably Racist</td></tr>
+          <tr><th class="text-gray-400 text-left">RELEASE DATE:</th><td>A Total Fantasy</td></tr>
+          <tr><th class="text-gray-400 text-left">DEVELOPER:</th><td>Zed A. Shaw</td></tr>
+          <tr><th class="text-gray-400 text-left">PUBLISHER:</th><td>My Fucking Self</td></tr>
+        </table>
+      </block>
+    </div>
+    <div class="flex">
+      <video controls>
+        <template x-if="item.video">
+            <source :src="item.video" type="video/mp4" />
+        </template>
+      </video>
     </div>
-    <video controls width="600">
-      <template x-if="item.video">
-          <source :src="item.video" type="video/mp4" />
-      </template>
-    </video>
   </div>
 
-  <grid class="bg-gray-800 two-panel">
+  <bar class="!p-0 *:!p-0">
     <block>
-      <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>
+      <table class="flex flex-col">
+        <template x-for="tag in item.tags.split(' ')">
+          <tr>
+            <td style="width: 24px; min-width: 24px; max-width: 24px" class="aspect-square bg-gray-300 p-1"><img src="/icons/baby.svg" /></td>
+            <td class="p-1" x-text="tag"></td>
+          </tr>
+        </template>
+      </table>
 
-    <block class="bg-gray-800">
-      <h2>Current Status</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>
+        <h4>Current Status</h4>
+        <p x-text="item.current_status"></p>
+      </block>
     </block>
 
     <block>
-      <h2>Planned Work</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>
+        <h4>Planned Work</h4>
+        <p x-text="item.planned_work"></p>
+      </block>
 
-    <block class="bg-gray-800">
-      <h2>Read The Code</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>
-      <button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
+      <block>
+        <h4>Read The Code</h4>
+        <p>All of the code for this project is online in my personal git repository.  It's not open source, but you can read the code, run the game, and learn from it.  Think of it like the programmer's version of a thirst trap on Instagram. You can look but you own nothing.</p>
+        <button><a :href="item.code_url" target="_blank">View the Git</a></button>
+      </block>
     </block>
-  </grid>
+  </bar>
 </div>
diff --git a/views/layouts/main.html b/views/layouts/main.html
index c002486..c1ab9f5 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <meta name="viewport" content="initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="author" content="Zed A. Shaw" />
     <meta name="description" content="My Go learning project, which is a Twitch support thing." />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />