Merge pull request #3 from robalb/develop

Develop

readme.md

@@ -8,7 +8,7 @@ Try a demo on https://x64.halb.it
 
 The project is composed of two elements:
 - `emscripten_blink` a fork of the [blink](https://github.com/jart/blink/) x86-64 emulator, modified to expose a javascript api when compiled for webassembly.
-- `svelte_blinkenweb` a svelte webapp implementing the frontend for the blink wasm emulator.
+- `svelte_blinkenweb` a svelte webapp implementing a mobile-friendly frontend for the blink wasm emulator.
 
 The assemblers provided by the app are traditional x86-64 ELFs, emulated client-side in the blink runtime.
 

svelte_blinkenweb/src/DesktopLayout.svelte

@@ -23,7 +23,7 @@ import Controls from './components/Controls.svelte';
 	</Pane>
 
 	<PaneResizer class="pf__resizer pf__resizer--vertical" />
-	<Pane defaultSize={30} class="pf__pane pf__pane--h100">
+	<Pane defaultSize={25} class="pf__pane pf__pane--h100">
 		<div class="pane">
           <div class="pane__bar">
             <p>Disassembly</p>
@@ -35,7 +35,7 @@ import Controls from './components/Controls.svelte';
 	</Pane>
 
 	<PaneResizer class="pf__resizer pf__resizer--vertical" />
-	<Pane defaultSize={15} class="pf__pane pf__pane--h100">
+	<Pane defaultSize={20} class="pf__pane pf__pane--h100">
 		<PaneGroup direction="vertical" class="pf__panegroup pf__panegroup--vertical">
 			<Pane defaultSize={50} class="pf__pane">
         <div class="pane">
@@ -61,7 +61,7 @@ import Controls from './components/Controls.svelte';
 		</PaneGroup>
 	</Pane>
   <PaneResizer class="pf__resizer pf__resizer--vertical" />
-	<Pane defaultSize={25} class="pf__pane pf__pane--h100">
+	<Pane defaultSize={30} class="pf__pane pf__pane--h100">
 		<div class="pane">
           <div class="pane__bar">
             <p>Stack memory</p>

svelte_blinkenweb/src/MobileLayout.svelte

@@ -309,8 +309,7 @@ $: showEditor = (
     width: 100%;
     height: 100%;
     overflow: auto;
-
-    margin-bottom: 3rem;
+    padding-bottom: 3rem;
   }
 
   [role="tabpanel"].is-hidden {

svelte_blinkenweb/src/components/Controls.svelte

@@ -152,7 +152,7 @@
 
 
 {#if mobile && !showEditor && $state == blink.states.PROGRAM_STOPPED}
-  <p class="stopinfo">exit reason</p>
+  <p class="stopinfo">{blink.stopReason.details}</p>
 {/if}
 
 
@@ -277,6 +277,9 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .group button:active:not(:disabled):nth-child(1){/* I hereby challenge you to write a line with more selectors */
+    border-right: 1px solid rgba(255,255,255,0.7);
+  }
 
 
   .compilebt{

svelte_blinkenweb/src/styles/style.css

@@ -24,7 +24,8 @@
   font-family: 'Roboto Mono';
   font-style: normal;
   font-weight: 400;
-  font-display: optional;
+  /* font-display: optional; */
+  font-display: block; /* will generate a FOUT, but we really need this specific font */
   src: local(''),
        url('../assets/fonts/roboto-mono-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../assets/fonts/roboto-mono-v21-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */