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

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
5 changed files with 205 additions and 24 deletions
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(); };
}
};