Mikescher/www.mikescher.com
1
0
Fork 0
Code Actions

befunge93_runner (WIP)

Browse Source
This commit is contained in:
Mike Schwörer 2018-01-02 00:25:09 +01:00
parent e56ca264a3
commit 9f3ae53eb1
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
5 changed files with 205 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
www/data/css/styles.css
View File

@ -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 */

46
www/data/css/styles_befungerunner.scss
View File

@ -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; }

2
www/data/css/styles_blogview.scss
View File

@ -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;
}

83
www/data/javascript/blogpost_bef93runner.js
View File

@ -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(); };
}
};

55
www/fragments/befunge93_runner.php
View File

@ -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(' ', ' ', $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;