updates some mobile styling for post-mortem

Author: Eoin McGrath

post-mortem/index.html

@@ -29,9 +29,9 @@ <h3> Background </h3>
 <p>
 <a href="https://js13kgames.com/">Js13kGames</a> is an annual
 game jam that challenges developers to
-craft a game within a mere 13KB limit. The tools at your
+craft a game within a measly 13KB limit. The tools at your
 disposal are plain old HTML, JavaScript, and CSS. No fancy
-fonts or frameworks—just the basics. These limitations
+fonts or frameworks — just the basics. These limitations
 encourage creativity. In a web landscape dominated by bloated
 libraries, convoluted tooling, and an overwhelming torrent of
 new versions, it's refreshing to step back and build something
@@ -47,8 +47,11 @@ <h3> The Theme </h3>
 clear idea of the kind of game I wanted to make:
 <ul class="boom">
 <li> Fast paced, frentic and fun. </li>
-<li> Retro style, evoking the glory days of 8bit/16bit games (yep, I'm showing my age!) </li>
-<li> Mobile-friendly. Although mobile gaming hasn’t quite lived up to its early promise, it can still provide a fun-filled five minutes.</li>
+<li> Retro style, evoking the glory days of 8bit/16bit games
+(yep, I'm showing my age!) </li>
+<li> Mobile-friendly. Although mobile gaming hasn’t quite lived
+up to its early promise, it can still provide a fun-filled five
+minutes.</li>
 </ul>
 </p>
 
@@ -145,8 +148,9 @@ <h3> Music </h3>
 </p>
 
 <p>
-<a href="https://keithclark.github.io/ZzFXM/tracker/">ZZfxM’s tracker</a> is an excellent piece of
-software, but my musical expertise
+<a href="https://keithclark.github.io/ZzFXM/tracker/">ZZfxM’s
+tracker</a> is an excellent piece of software, but my musical
+expertise
 is even more lacking than my pixel-pushing skills, so I
 struggled to come up with an original soundtrack. As the
 deadline loomed, I grabbed a free Pico-8 tune and played it
@@ -161,22 +165,25 @@ <h3> Music </h3>
 </p>
 <p>
 <i>
-WARNING: Last-minute changes invite disaster and are the equivalent
-          of deploying to production on a Friday afternoon.
+WARNING: Last-minute changes invite disaster and are the
+equivalent of deploying to production on a Friday afternoon.
 </i>
 </p>
-<img src="https://i.imgflip.com/93oxjd.jpg" alt="Never deploy big changes on a friday"> 
+<img src="https://i.imgflip.com/93oxjd.jpg"
+    alt="Never deploy big changes on a friday"> 
 <h3> Bling </h3>
-<p> Or, <a href="https://www.youtube.com/watch?v=Fy0aCDmgnxg">Juice it or lose it</a>.
+<p> Or, <a href="https://www.youtube.com/watch?v=Fy0aCDmgnxg">
+        Juice it or lose it</a>.
 The following techniques were put to use to make the game 'pop'
 </p>
 <p>
 <ul class="boom">
 <li>Plenty of explosions and particles to create general mayhem.</li>
 <li>Screen shake and flash when certain enemies die</li>
-<li> Our Gecko's tail is not static but moves in tune with the player's movements. </li>
+<li> Our Gecko's tail is not static but moves in tune with the
+player's movements. </li>
 </ul>
-    <img src="gecko_move.gif" alt="Gecko's tail movement">
+<img src="gecko_move.gif" alt="Gecko's tail movement">
 </p>
 
 
@@ -244,7 +251,7 @@ <h3>Ok, ok just lemme play the game!</h3>
     document.body.className = '';
     window.scrollTo(0, 0);
     initAnimate();
-  }, 200);
+  }, 300);
 
   const initAnimate = () => {
     let images = document.querySelectorAll('.animate img');
@@ -298,7 +305,6 @@ <h3>Ok, ok just lemme play the game!</h3>
 });
 </script>
 
-
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-149691096-1"></script>
 <script>

post-mortem/style.css

@@ -16,8 +16,8 @@ body.loading h1 {  transform: scale(0); }
 body.loading h2 { transform: scale(0) rotate(0deg); }
 body.loading #arcade { opacity: 0; }
 
-::selection { background: rgba(234, 239, 44, 1); color: black; }
-::-moz-selection { background: rgba(234, 239, 44, 1); color: black; }
+::selection { background: rgba(234, 239, 44, 1); color: black; text-shadow: transparent 0px 0px; }
+::-moz-selection { background: rgba(234, 239, 44, 1); color: black; text-shadow: transparent 0px 0px; }
 a { color: #F7E26B;; text-decoration: none; border-bottom: 1px dashed #F7E26B; transition: all 0.2s linear}
 a:hover { color: #EB8931; text-decoration: none; border-color: #EB8931; }
 
@@ -51,9 +51,7 @@ h2 {
 h2:hover { transform: rotate(3deg); }
 
 h3 {
-  /* background: rgba(0, 0, 0, 0.2); */
   margin: 3rem 0 1rem 0;
-  padding-left: .5rem;
   font: 26px 'Press Start 2P', Arial, sans-serif;
   line-height: 2.3rem;
   text-shadow: #000 3px 3px 0;
@@ -62,7 +60,7 @@ h3 {
 img { max-width: 80%; margin: 2rem auto; }
 div.imgs img {
   display: inline-block !important;
-  padding-right: 3rem; 
+  padding-right: 3rem;
 }
 div.imgs.big  {
   margin-left: 1rem;
@@ -88,7 +86,7 @@ code {
   margin: 2rem auto;
   padding: 0 2rem;
   max-width: 600px;
-  min-width: 250px;
+  min-width: 260px;
   transition: opacity 2s linear;
 }
 
@@ -172,10 +170,18 @@ footer .boss {
 
 #tweet_me { position: absolute; top: 1em; left: 1em; }
 
+@media (min-width: 320px) {
+  #arcade { width: 260px; }
+  div.imgs.big img { width: 26px; }
+}
 @media (min-width: 360px) {
   #arcade { width: 300px; }
   div.imgs.big img { width: 40px; }
 }
+@media (min-width: 410px) {
+  #arcade { width: 350px; }
+  div.imgs.big img { width: 50px; }
+}
 @media (min-width: 768px) {
   #arcade { width: 600px; }
   div.imgs.big img { width: 50px; }

scripts/encodeImages.js

@@ -1,4 +1,5 @@
 const fs = require('fs');
+const showInfo = (process.argv.slice(2).indexOf('info') !== -1);
 
 const files = fs.readdirSync('a'),
   ext = '.gif',
@@ -16,24 +17,33 @@ function encode(img) {
 
 
 const results = [];
+let key;
 for (let n in files) {
   if (files[n].indexOf(ext) !== -1) {
-    let file = 'a/' + files[n],
-        key = files[n].replace(ext, '');
+    key = files[n].replace(ext, '');
+    let file = 'a/' + files[n];
     encoded[key] = encode('a/'+files[n]);
+
+    let size = fs.statSync(file).size,
+        diff = Math.ceil((encoded[key].length / size) * 100) + '%';
     results.push({
       key: key,
-      size: fs.statSync(file).size,
-      encoded: encoded[key].length
+      size: size,
+      encoded: encoded[key].length,
+      diff: diff
     });
     totalImages += 1;
   }
 }
 
-console.table(results);
-
-console.log('Total [files]: ', results.reduce((total, obj) => obj.size + total,0));
-console.log('Total [encoded]: ', results.reduce((total, obj) => obj.encoded + total,0));
+if (showInfo) {
+  console.table(results);
+  console.log('Total [files]: ', results.reduce((total, obj) => obj.size + total,0));
+  console.log('Total [encoded]: ', results.reduce((total, obj) => obj.encoded + total,0));
+  console.log('');
+  console.log('--------------------------------');
+  console.log('');
+}
 
 encoded = JSON.stringify(encoded);
 encoded = encoded.replace(re, "'");

src/engine/game.js

@@ -18,10 +18,6 @@ export default class Game {
 
     let ua = navigator.userAgent.toLowerCase();
 
-    // this.zzfx = zzfx;
-    // this.zzfxM = zzfxM;
-    // this.zzfxP = zzfxP;
-
     this.android = ua.indexOf("android") > -1;
     this.ios = /ipad|iphone|ipod/.test(ua);
     this.mobile = this.android || this.ios;
@@ -87,9 +83,7 @@ export default class Game {
         Setup(this);
 
         this.track1 = new P8(this.p8S, this.p8M);
-        // this.audio = this.track1.music(0);
-        // this.audio.stop();
-        this.favIcon(this.draw.resize(this.imgs.gecko, 8));
+        this.favIcon(this.draw.resize(this.imgs.donut, 8));
         document.querySelector('#l').style.display = 'none';
         this.c.style.display = "block";
         this.loop();