X-Git-Url: https://fortfriendship.online/gitweb/gnargle.github.io.git/blobdiff_plain/e1629297248ecf61f9da889b75db1f8c5fb5321a..4fa4f03536f3049f3b79d4637c2f90378e453cba:/projects/pipboy.html

diff --git a/projects/pipboy.html b/projects/pipboy.html
index ccf0356..838b3b1 100644
--- a/projects/pipboy.html
+++ b/projects/pipboy.html
@@ -421,7 +421,7 @@
               </p>
               <a href="../img/projects/pipboy/errorlowmem.png">
                 <img
-                  class="blog-img"
+                  class="blog-img-lrg"
                   src="../img/projects/pipboy/errorlowmem.png"
                   alt="A screenshot of the espruino terminal reading 'New interpreter error: LOW_MEMORY,MEMORY'"
                 />
@@ -502,7 +502,7 @@
               <b>Code Updated. Check the github link to keep up.</b>
               <a href="../img/projects/pipboy/imgstringdump.png">
                 <img
-                  class="blog-img"
+                  class="blog-img-lrg"
                   src="../img/projects/pipboy/imgstringdump.png"
                   alt="A screenshot of the pipboys serial connection in vscode showing the file read from disk."
                 />
@@ -514,6 +514,88 @@
                 it looks exactly the same. but rest assured it is there!
               </p>
               <p>OK, next up, we swap images on the fly.</p>
+              <b>Code Updated. Check the github link to keep up.</b>
+              <video width="672" height="378" class="video-embed" controls>
+                <source
+                  src="../img/projects/pipboy/pipboyperkswitch.mp4"
+                  type="video/mp4"
+                />
+                Your browser does not support the video tag.
+              </video>
+              <p>
+                Done! Again! Wow we're going win after win today. Apart from the
+                weird bit of artifacting in the top left of the image there,
+                but, er... I'm sure that's fine. Let's ignore it for now. We'll
+                see if it continues with other images.
+              </p>
+              <p>
+                OK, so this is actually a fair cut through the work we need to
+                do here. So let's structure the screen a bit, and add the name
+                and descriptions.
+              </p>
+              <b>Code Updated. Check the github link to keep up.</b>
+              <p>
+                Hoooo boy I spent a while here huh! So much for 'live' blogging.
+              </p>
+              <a href="../img/projects/pipboy/perklist1.jpg">
+                <img
+                  class="blog-img-lrg"
+                  src="../img/projects/pipboy/perklist1.jpg"
+                  alt="A photo of the pipboy screen showing a decent approximation of the perk menu from FO3/NV. Action Girl is selected and shows its icon and description."
+                />
+              </a>
+              <p>
+                While I've been gone I basically drew the rest of the fucking
+                owl. Look! It's the screen from the game! Pretty much
+                completely!
+              </p>
+              <p>
+                There's some artistic license; in-game the perk description
+                displays in the same column as the image, but the available area
+                there is too small to display it readably on screen, so I've
+                bannered it at the bottom instead.
+              </p>
+              <p>
+                But yeah, we've got the basics of the screen here! The list of
+                perks, the box around the selected one, the image, the
+                description. They're all loaded dynamically from the list of
+                files on the SD card, and I've just gone in and tested the
+                reselection with a timeout, and hot damn, it works.
+              </p>
+              <a href="../img/projects/pipboy/perklist2.jpg">
+                <img
+                  class="blog-img-lrg"
+                  src="../img/projects/pipboy/perklist2.jpg"
+                  alt="Another photo of the pipboy showing the perk menu. Now Cherchez La femme, second in the list, is selected."
+                />
+              </a>
+              <p>
+                Additionally, if you're code digging, you'll see I've done a
+                bunch of reorganisation. While I was hacking before, I've gone
+                in and refactored and made all of this actually functionally
+                useful for building up the application proper.
+              </p>
+              <p>
+                Next thing, then, is input. Which hopefully, shouldn't be too
+                bad? I'll tackle that at some point over the weekend. Then it's
+                just filling the rest of the perk data (and fixing whatever is
+                wrong with the action girl image) and presto, that's a screen!
+              </p>
+              <b>Code Updated. Check the github link to keep up.</b>
+              <p>
+                OK I lied did a tiny bit more tonight. It's some housekeeping
+                code - I wanted to make sure the images displayed centrally if
+                they were cropped to just their actual data, any rows of empty
+                pixels around them removed.
+              </p>
+              <p>
+                This turned out to be a smart decision - It saves space, it
+                looks nice, and it meant I redid the action girl icon with its
+                bit of corrupted data, a bug I would have otherwise inevtiably
+                ignored until the end. No photos right now because not much has
+                actually changed but it's good and sets us up for just
+                implementing the manual selection now.
+              </p>
             </div>
           </div>
         </div>