more control instructions fade in/out; flexbox, focus ring for emulator

css/ui.css

@@ -223,6 +223,8 @@ a.dropdown-toggle {
 div.emulator {
   background-color: #666;
   margin-top: 20px auto 0;
+  display:flex;
+  flex-direction:column;
 }
 div.emuoverlay {
   display:flex;
@@ -249,6 +251,10 @@ div.emuspacer {
   width:90%;
   pointer-events:auto;
 }
+.emuvideo:focus {
+  outline:none;
+  border-color:#888;
+}
 canvas.pixelated {
   image-rendering: optimizeSpeed;             /* Older versions of FF          */
   image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
@@ -517,7 +523,8 @@ div.asset_toolbar {
   margin:8px;
 }
 .control-insns {
-  margin-top:1em;
+  margin-top: auto;
+  margin-bottom: 2em;
 }
 .control-key {
   border: 2px solid rgba(0,0,0,0.2);

index.html

@@ -214,7 +214,7 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
   </div>
   <div id="workspace">
   </div>
-  <div class="emulator" id="emulator">
+  <div class="emulator disable-select" id="emulator">
     <div id="replaydiv" class="replaydiv" style="display:none">
      <div style="display:flex">
       <button id="replay_min" class="btn" title="Start of replay"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
@@ -226,13 +226,34 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
      </div>
     </div>
     <!-- control instructions -->
-    <div id="emucontrols-nes" class="text-center small control-insns" style="display:none">
+    <div class="emucontrols-vcs text-center small control-insns" style="display:none">
+      <span class="control-def"><span class="control-key">&#x2190;&#x2191;&#x2193;&#x2192;</span> Joystick</span>
+      <span class="control-def"><span class="control-key small">Space</span> Button</span>
+    </div>
+    <div class="emucontrols-nes text-center small control-insns" style="display:none">
       <span class="control-def"><span class="control-key">&#x2190;&#x2191;&#x2193;&#x2192;</span> Joypad</span>
       <span class="control-def"><span class="control-key">X</span> Button A</span>
       <span class="control-def"><span class="control-key">Z</span> Button B</span>
       <span class="control-def"><span class="control-key small">Space</span> Select</span>
       <span class="control-def"><span class="control-key small">Enter</span> Start</span>
     </div>
+    <div class="emucontrols-vicdual emucontrols-galaxian text-center small control-insns" style="display:none">
+      <span class="control-def"><span class="control-key">&#x2190;&#x2191;&#x2193;&#x2192;</span> Joystick</span>
+      <span class="control-def"><span class="control-key small">Space</span> Button 1</span>
+      <span class="control-def"><span class="control-key small">Shift</span> Button 2</span>
+      <span class="control-def"><span class="control-key">1</span> 1p</span>
+      <span class="control-def"><span class="control-key">2</span> 2p</span>
+      <span class="control-def"><span class="control-key">5</span> Coin</span>
+    </div>
+    <div class="emucontrols-mw8080bw text-center small control-insns" style="display:none">
+      <span class="control-def"><span class="control-key">&#x2190;&nbsp;&#x2192;</span> Joystick</span>
+      <span class="control-def"><span class="control-key small">Space</span> Fire</span>
+    </div>
+    <div class="emucontrols-williams text-center small control-insns" style="display:none">
+      <span class="control-def"><span class="control-key">A W S D</span> Move</span>
+      <span class="control-def"><span class="control-key">&#x2190;&#x2191;&#x2193;&#x2192;</span> Fire</span>
+    </div>
+    <!-- -->
     <div id="javatari-div" style="float:center;margin:10px;display:none">
       <div id="javatari-screen" style="margin: 0 auto; box-shadow: 2px 2px 10px rgb(60, 60, 60);"></div>
       <div id="javatari-console-panel" style="margin: 0 auto; box-shadow: 2px 2px 10px rgb(60, 60, 60);"></div>

scripts/sync-dev.sh

@@ -2,5 +2,5 @@
 
 . ./scripts/env.sh
 DESTPATH=$RSYNC_PATH/dev/
-git ls-files -z | rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules -ril --chmod=a+rx -e "ssh -p 2222" --files-from - -0 . $DESTPATH
+git ls-files -z | rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules -ril --chmod=a+rx -e "ssh" --files-from - -0 . $DESTPATH
-rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" ./gen $DESTPATH/
+rsync --stats -rpilvz --chmod=a+rx -e "ssh" ./gen config.js $DESTPATH/

scripts/sync-version-prod.sh

@@ -21,5 +21,5 @@ mkdir -p $TMPDIR
 git archive $VERSION | tar x -C $TMPDIR
 echo "Copying to $DESTPATH..."
 rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules --copy-dest=$DEVPATH -rilz --chmod=a+rx -e "ssh -p 2222" $TMPDIR/ $SUBMODS $DESTPATH
-rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" --copy-dest=$DEVPATH ./gen  $DESTPATH/
+rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" --copy-dest=$DEVPATH ./gen config.js $DESTPATH/
 echo "Done."

src/ui.ts

@@ -1653,7 +1653,17 @@ function addPageFocusHandlers() {
 }
 
 function showInstructions() {
-  $("#emucontrols-" + getRootBasePlatform(platform_id)).show();
+  var div = $(document).find(".emucontrols-" + getRootBasePlatform(platform_id));
+  $("#emulator").append(div);
+  var vcanvas = $("#emulator").find("canvas");
+  if (vcanvas) {
+    vcanvas.on('focus', () => {
+      if (platform.isRunning()) div.fadeIn(200);
+    });
+    vcanvas.on('blur', () => {
+      div.fadeOut(200);
+    });
+  }
 }
 
 function installGAHooks() {

tools/Makefile

@@ -1,5 +1,5 @@
 
-all: binaries images/parrot.c
+all: binaries
 
 %.lzg: %
 	lzg -9 $< $@

tools/nes/Makefile

@@ -1,4 +1,9 @@
 
+all: nametable.dat
+
+clean:
+	rm -f *.dat road.png
+
 nametable.dat: road.png
 	makechr -e error.png $< #-b 0000ff
 

tools/vicdual/Makefile

@@ -1,6 +1,9 @@
 
 all: cp437.vicdual.c c64.vicdual.c
 
+clean:
+	rm -f cp437.vicdual.c c64.vicdual.c
+
 # convert DOS CP437 font (256 chars)
 cp437.vicdual.c: ../fonts/cp437-8x8.bdf
 	python ../parsebdf8.py $< -r -C > $@

tools/williams/Makefile

@@ -1,12 +1,15 @@
 
 all: baddies.c badspacerobots.tga tom-thumb.c swave.c.rom.h
 
+clean:
+	rm -f baddies.[ch] *.gif *.tga *.tga.png tom-thumb.c swave.c.rom.h
+
 %.h: %
 	cat $* | hexdump -v -e '"\n" 128/1 "0x%02x,"' > $@
 
 # convert PCX (or PNG) file to Williams C sprite
 %.c: %.pcx
-	python ../pcx2will.py $< > $@
+	python3 ../pcx2will.py $< > $@
 
 # convert PNG into RLE-encoded TGA bitmap
 %.tga: %.png
@@ -23,5 +26,5 @@ all: baddies.c badspacerobots.tga tom-thumb.c swave.c.rom.h
 
 # convert BDF font file to definitions
 %.c: ../fonts/%.bdf
-	python ../parsebdf4bit.py -s 33 -e 97 $< > $@
+	python3 ../parsebdf4bit.py -s 33 -e 97 $< > $@