befunge93_runner (WIP)

2018-01-02 00:25:09 +01:00 · 2018-01-02 00:25:09 +01:00 · 9f3ae53eb1
commit 9f3ae53eb1
parent e56ca264a3
5 changed files with 205 additions and 24 deletions
--- a/www/data/css/styles.css
+++ b/www/data/css/styles.css
@ -246,8 +246,6 @@ html, body {
  background-color: #F8F8F8;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
  border-radius: 2px; }
 .bc_markdown blockquote {
  padding: 0 0 0 15px;
@ -614,9 +612,8 @@ html, body {
  border: 1px solid rgba(0, 0, 0, 0.15); }
  .bce_code .bce_code_data {
    overflow-x: auto;
-    white-space: pre;
    font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
-    padding: 9.5px;
+    padding: 5px 9.5px;
    font-size: 10pt; }
  .bce_code .bce_code_ctrl {
    background: #BBB;
@ -630,6 +627,7 @@ html, body {
    .bce_code .bce_code_ctrl .ctrl_btn_right {
      margin-left: auto; }
    .bce_code .bce_code_ctrl .ctrl_btn {
+      user-select: none;
      display: block;
      border: 1px solid #000;
      background: #444;
@ -666,5 +664,42 @@ html, body {
    display: flex;
    flex-direction: column;
    margin: 0; } }
+.bce_code_out {
+  display: flex;
+  flex-direction: row;
+  background: #BBB; }
+  .bce_code_out .bce_code_out_text {
+    font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
+    overflow-y: auto;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    flex-grow: 1;
+    margin: 0 4px 4px 4px;
+    border: 1px solid #888;
+    min-height: 200px; }
+  .bce_code_out .bce_code_out_stack {
+    font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
+    overflow-y: scroll;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    margin: 0 4px 4px 4px;
+    width: 200px;
+    border: 1px solid #888;
+    min-height: 200px; }
+
+@media (max-width: 767px) {
+  .bce_code_out {
+    flex-direction: column; }
+    .bce_code_out .bce_code_out_text {
+      flex-grow: 0;
+      min-height: 100px; }
+    .bce_code_out .bce_code_out_stack {
+      width: auto;
+      min-height: 150px; } }
+.b93rnr_outpanel_hidden {
+  visibility: collapse;
+  display: none; }

 /*# sourceMappingURL=styles.css.map */
--- a/www/data/css/styles_befungerunner.scss
+++ b/www/data/css/styles_befungerunner.scss
@ -7,9 +7,8 @@

  .bce_code_data {
    overflow-x: auto;
-    white-space: pre;
    font-family: $FONT_CODE;
-    padding: 9.5px;
+    padding: 5px 9.5px;

    font-size: 10pt;
  }
@ -33,6 +32,7 @@
    }

    .ctrl_btn {
+      user-select: none;
      display: block;
      border: 1px solid #000;
      background: #444;
@ -67,4 +67,44 @@

    } .ctrl_btn_left, .ctrl_btn_right { display: flex; flex-direction: column; margin: 0; }
  }
-}
+}
+
+.bce_code_out {
+  display: flex;
+  flex-direction: row;
+  background: #BBB;
+
+  .bce_code_out_text {
+    font-family: $FONT_CODE;
+    overflow-y: auto;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    flex-grow: 1;
+    margin: 0 4px 4px 4px;
+    border: 1px solid #888;
+    min-height: 200px;
+  }
+
+  .bce_code_out_stack {
+    font-family: $FONT_CODE;
+    overflow-y: scroll;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    margin: 0 4px 4px 4px;
+    width: 200px;
+    border: 1px solid #888;
+    min-height: 200px;
+  }
+}
+@media (max-width: 767px) {
+  .bce_code_out {
+    flex-direction: column;
+
+    .bce_code_out_text { flex-grow: 0; min-height: 100px;}
+    .bce_code_out_stack { width: auto; min-height: 150px;}
+  }
+}
+
+.b93rnr_outpanel_hidden { visibility: collapse; display: none; }
--- a/www/data/css/styles_blogview.scss
+++ b/www/data/css/styles_blogview.scss
@ -47,8 +47,6 @@
    background-color: $COL_BACKGROUND_3;
    color: black;
    border: 1px solid rgba(0,0,0,.15);
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
    border-radius: 2px;
  }

--- a/www/data/javascript/blogpost_bef93runner.js
+++ b/www/data/javascript/blogpost_bef93runner.js
@ -0,0 +1,83 @@
+
+const BefState = Object.freeze ({ UNINIITIALIZED: {}, INITIAL: {}, RUNNING: {}, PAUSED: {} });
+
+function BefObject(domBase) {
+    this.btnStart  = domBase.getElementsByClassName('b93rnr_start')[0];
+    this.btnStop   = domBase.getElementsByClassName('b93rnr_pause')[0];
+    this.btnReset  = domBase.getElementsByClassName('b93rnr_reset')[0];
+    this.pnlCode   = domBase.getElementsByClassName('b93rnr_data')[0];
+    this.pnlBottom = domBase.getElementsByClassName('b93rnr_outpanel')[0];
+    this.pnlOutput = domBase.getElementsByClassName('b93rnr_output')[0];
+    this.pnlStack  = domBase.getElementsByClassName('b93rnr_stack')[0];
+
+    this.state    = BefState.UNINIITIALIZED;
+    this.code     = this.parseBef(atob(this.pnlCode.getAttribute('data-befcode')));
+    this.position = [0, 0];
+    this.output   = '';
+    this.stack    = [];
+}
+
+BefObject.prototype.Init = function() {
+    this.state = BefState.INITIAL;
+};
+
+BefObject.prototype.Start = function() {
+    if (this.state === BefState.UNINIITIALIZED) this.Init();
+
+    this.state = BefState.RUNNING;
+
+    // run
+
+    this.updateUI();
+};
+
+BefObject.prototype.Stop = function() {
+    this.state = BefState.PAUSED;
+
+    // pause
+
+    this.updateUI();
+};
+
+BefObject.prototype.Reset = function() {
+    if (this.state === BefState.RUNNING) this.Stop();
+
+    //reset
+
+    this.state = BefState.INITIAL;
+
+    this.updateUI();
+};
+
+BefObject.prototype.updateUI = function() {
+
+    classListSet(this.btnStart, 'ctrl_btn_disabled', this.state === BefState.RUNNING || this.state === BefState.PAUSED);
+    classListSet(this.btnStop,  'ctrl_btn_disabled', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
+    classListSet(this.btnReset, 'ctrl_btn_disabled', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
+
+    classListSet(this.pnlBottom, 'b93rnr_outpanel_hidden', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
+};
+
+function classListSet(e, cls, active) {
+    if (active) {
+        if (e.classList.contains(cls)) return;
+        e.classList.add(cls);
+    } else {
+        if (!e.classList.contains(cls)) return;
+        e.classList.remove(cls);
+    }
+}
+
+window.onload = function ()
+{
+    let elements = document.getElementsByClassName("b93rnr_base");
+
+    for (let elem of elements) {
+
+        let befungeObject = new BefObject(elem);
+
+        befungeObject.btnStart.onclick = function () { if (befungeObject.btnStart.classList.contains('ctrl_btn_disabled')) return; befungeObject.Start(); };
+        befungeObject.btnStop.onclick  = function () { if (befungeObject.btnStop.classList.contains('ctrl_btn_disabled'))  return; befungeObject.Stop(); };
+        befungeObject.btnReset.onclick = function () { if (befungeObject.btnReset.classList.contains('ctrl_btn_disabled')) return; befungeObject.Reset(); };
+    }
+};
--- a/www/fragments/befunge93_runner.php
+++ b/www/fragments/befunge93_runner.php
@ -5,27 +5,52 @@ global $PARAM_CODE;
 global $PARAM_URL;
 global $PARAM_INTERACTIVE;

+function fmtBef($str) {
+	$str = htmlspecialchars($str);
+	$str = str_replace("\r\n", "\n", $str);
+	$str = join("\n", array_map(function($p){return rtrim($p);}, explode("\n", $str)));
+	$str = str_replace(' ', '&nbsp;', $str);
+	$str = nl2br($str);
+	return $str;
+}

 $result = '';

-$result .= '<div class="bce_code">' . "\n";
-$result .= '	<div class="bce_code_data">' .htmlspecialchars($PARAM_CODE) . '</div>' . "\n";
-$result .= '	<div class="bce_code_ctrl">' . "\n";
 if ($PARAM_INTERACTIVE) {
+	$result .= '<div class="bce_code b93rnr_base">' . "\n";
+	$result .= '	<div class="bce_code_data b93rnr_data" data-befcode="' . base64_encode($PARAM_CODE) . '">' . fmtBef($PARAM_CODE) . '</div>' . "\n";
+	$result .= '	<div class="bce_code_ctrl">' . "\n";
 	$result .= '		<div class="ctrl_btn_left">' . "\n";
-	$result .= '			<div class="ctrl_btn">Start</div>' . "\n";
-	$result .= '			<div class="ctrl_btn">Stop</div>' . "\n";
-	$result .= '			<div class="ctrl_btn">Reset</div>' . "\n";
+	$result .= '			<div class="ctrl_btn b93rnr_start">Start</div>' . "\n";
+	$result .= '			<div class="ctrl_btn b93rnr_pause ctrl_btn_disabled">Pause</div>' . "\n";
+	$result .= '			<div class="ctrl_btn b93rnr_reset ctrl_btn_disabled">Reset</div>' . "\n";
 	$result .= '		</div>' . "\n";
-}
-if ($PARAM_URL !== '') {
-	$result .= '		<div class="ctrl_btn_right">' . "\n";
-	$result .= '			<a class="ctrl_btn" href="' .$PARAM_URL . '" download target="_blank">Download</a>' . "\n";
-	$result .= '		</div>' . "\n";
-}
-$result .= '	</div>' . "\n";
-$result .= '</div>' . "\n";
+	if ($PARAM_URL !== '') {
+		$result .= '		<div class="ctrl_btn_right">' . "\n";
+		$result .= '			<a class="ctrl_btn" href="' . $PARAM_URL . '" download target="_blank">Download</a>' . "\n";
+		$result .= '		</div>' . "\n";
+	}
+	$result .= '	</div>' . "\n";
+	$result .= '	<div class="bce_code_out b93rnr_outpanel b93rnr_outpanel_hidden">' . "\n";
+	$result .= '		<div class="bce_code_out_text b93rnr_output"></div>' . "\n";
+	$result .= '		<div class="bce_code_out_stack b93rnr_stack"></div>' . "\n";
+	$result .= '	</div>' . "\n";
+	$result .= '</div>' . "\n";

-$result .= includeScriptOnce("/data/javascript/blogpost_bef93runner.js", false) . "\n";
+	$result .= includeScriptOnce("/data/javascript/blogpost_bef93runner.js", false) . "\n";
+}
+else
+{
+	$result .= '<div class="bce_code">' . "\n";
+	$result .= '	<div class="bce_code_data">' . fmtBef($PARAM_CODE) . '</div>' . "\n";
+	$result .= '	<div class="bce_code_ctrl">' . "\n";
+	if ($PARAM_URL !== '') {
+		$result .= '		<div class="ctrl_btn_right">' . "\n";
+		$result .= '			<a class="ctrl_btn" href="' . $PARAM_URL . '" download target="_blank">Download</a>' . "\n";
+		$result .= '		</div>' . "\n";
+	}
+	$result .= '	</div>' . "\n";
+	$result .= '</div>' . "\n";
+}

 return $result;