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.

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>

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" />