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

befunge93_runner (FIN)

Browse Source
This commit is contained in:
Mike Schwörer 2018-01-02 17:11:15 +01:00
parent 9f3ae53eb1
commit 89f2e3e5c5
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
5 changed files with 243 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -628,6 +628,9 @@ html, body {
margin-left: auto; }
.bce_code .bce_code_ctrl .ctrl_btn {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
display: block;
border: 1px solid #000;
background: #444;
@ -677,7 +680,7 @@ html, body {
flex-grow: 1;
margin: 0 4px 4px 4px;
border: 1px solid #888;
min-height: 200px; }
height: 200px; }
.bce_code_out .bce_code_out_stack {
font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
overflow-y: scroll;
@ -687,17 +690,17 @@ html, body {
margin: 0 4px 4px 4px;
width: 200px;
border: 1px solid #888;
min-height: 200px; }
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; }
height: 100px; }
.bce_code_out .bce_code_out_stack {
width: auto;
min-height: 150px; } }
height: 150px; } }
.b93rnr_outpanel_hidden {
visibility: collapse;
display: none; }

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

@ -33,6 +33,9 @@
.ctrl_btn {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
display: block;
border: 1px solid #000;
background: #444;
@ -83,7 +86,7 @@
flex-grow: 1;
margin: 0 4px 4px 4px;
border: 1px solid #888;
min-height: 200px;
height: 200px;
}
.bce_code_out_stack {
@ -95,15 +98,15 @@
margin: 0 4px 4px 4px;
width: 200px;
border: 1px solid #888;
min-height: 200px;
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;}
.bce_code_out_text { flex-grow: 0; height: 100px;}
.bce_code_out_stack { width: auto; height: 150px;}
}
}

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

@ -1,6 +1,13 @@
const BefState = Object.freeze ({ UNINIITIALIZED: {}, INITIAL: {}, RUNNING: {}, PAUSED: {} });
Array.prototype.peek = function() { return this[this.length - 1]; };
Array.prototype.revjoin = function(sep) {
let str='';
for(let i=this.length-1; i >= 0;i--) {if (i<this.length-1)str+=sep;str+=this[i]}
return str;
};
function BefObject(domBase) {
this.btnStart = domBase.getElementsByClassName('b93rnr_start')[0];
this.btnStop = domBase.getElementsByClassName('b93rnr_pause')[0];
@ -11,44 +18,190 @@ function BefObject(domBase) {
this.pnlStack = domBase.getElementsByClassName('b93rnr_stack')[0];
this.state = BefState.UNINIITIALIZED;
this.code = this.parseBef(atob(this.pnlCode.getAttribute('data-befcode')));
this.initial = atob(this.pnlCode.getAttribute('data-befcode'));
this.code = [];
this.width = 0;
this.height = 0;
this.position = [0, 0];
this.delta = [0, 0];
this.strmode = false;
this.output = '';
this.stack = [];
this.timer = null;
this.psteps = 0;
}
BefObject.prototype.Init = function() {
this.state = BefState.INITIAL;
let parse = this.parseBef(this.initial);
this.code = parse[0];
this.width = parse[1];
this.height = parse[2];
this.position = [0, 0];
this.delta = [1, 0];
this.strmode = false;
this.output = '';
this.stack = [];
this.psteps = 0;
};
BefObject.prototype.Start = function() {
BefObject.prototype.start = function() {
if (this.state === BefState.UNINIITIALIZED) this.Init();
if (this.delta[0]===0 && this.delta[1]===0) {
this.updateUI();
this.updateDisplay();
return;
}
this.state = BefState.RUNNING;
// run
this.updateUI();
this.updateDisplay();
this.setTimer();
};
BefObject.prototype.Stop = function() {
this.state = BefState.PAUSED;
BefObject.prototype.setTimer = function() {
let me = this;
this.timer = setTimeout(function() { me.step(); if (me.state!==BefState.RUNNING)return; me.setTimer(); }, 0);
};
BefObject.prototype.stop = function() {
this.state = BefState.PAUSED;
clearTimeout(this.timer);
// pause
this.updateUI();
this.updateDisplay();
};
BefObject.prototype.Reset = function() {
if (this.state === BefState.RUNNING) this.Stop();
BefObject.prototype.reset = function() {
if (this.state === BefState.RUNNING) this.stop();
//reset
this.state = BefState.INITIAL;
this.Init();
this.state = BefState.INITIAL;
this.updateUI();
this.updateDisplay();
};
BefObject.prototype.step = function() {
let t0 = performance.now();
let first = true;
let steps = 0;
while(steps===0 || (performance.now() - t0 < 33)) // 32ms == 30FPS
{
first = false;
let chr = this.code[this.position[1]][this.position[0]];
this.exec(chr);
this.move();
if (this.delta[0]===0 && this.delta[1]===0) {
console.log('Finished in ' + this.psteps + ' steps');
this.stop();
return;
}
steps++;
}
this.updateUI();
this.updateDisplay();
};
BefObject.prototype.exec = function(chr) {
if (this.strmode)
{
this.psteps++;
if (chr === '"') this.strmode = false;
else this.push_c(chr);
}
else
{
let t1=0;
let t2=0;
let t3=0;
if (chr !== ' ') this.psteps++;
switch (chr)
{
case ' ': /* NOP */ break;
case '+': this.push_i(this.pop_i()+this.pop_i()); break;
case '-': t1 = this.pop_i(); this.push_i(this.pop_i()-t1); break;
case '*': this.push_i(this.pop_i()*this.pop_i()); break;
case '/': t1 = this.pop_i(); t2 = this.pop_i(); this.push_i( (t1 === 0) ? (0) : Math.floor(t2/t1) ); break;
case '%': t1 = this.pop_i(); t2 = this.pop_i(); this.push_i( (t1 === 0) ? (0) : (t2%t1) ); break;
case '!': this.push_b(!this.pop_b()); break;
case '`': t1 = this.pop_i(); t2 = this.pop_i(); this.push_b(t2 > t1); break;
case '>': this.delta = [+1,0]; break;
case '<': this.delta = [-1,0]; break;
case '^': this.delta = [0,-1]; break;
case 'v': this.delta = [0,+1]; break;
case '?': this.delta = [[+1,0],[-1,0],[0,+1],[0,-1]][Math.floor(Math.random()*4)]; break;
case '_': this.delta = [[-1,0],[+1,0]][ this.pop_b()?0:1 ]; break;
case '|': this.delta = [[0,-1],[0,+1]][ this.pop_b()?0:1 ]; break;
case '"': this.strmode = true; break;
case ':': this.push_i(this.peek_i()); break;
case '\\': t1 = this.pop_i(); t2 = this.pop_i(); this.push_i(t1); this.push_i(t2); break;
case '$': this.pop_i(); break;
case '.': this.output += this.pop_i() + ' '; break;
case ',': this.output += String.fromCharCode(this.pop_i()); break;
case '#': this.move(); break;
case 'p': t1 = this.pop_i(); t2 = this.pop_i(); t3 = this.pop_i(); this.gridset_i(t2, t1, t3); break;
case 'g': t1 = this.pop_i(); t2 = this.pop_i(); this.push_i(this.gridget_i(t2, t1)); break;
case '&': t1 = null; while (t1===null||t1===''||isNaN(parseInt(t1[0], 10))){t1=prompt("Input number",null);} this.push_i(parseInt(t1[0], 10)); break;
case '~': t1 = null; while (t1===null||t1===''){t1=prompt("Input character",null);} this.push_c(t1[0]); break;
case '@': this.delta = [0,0]; break;
case '0': this.push_i(0); break;
case '1': this.push_i(1); break;
case '2': this.push_i(2); break;
case '3': this.push_i(3); break;
case '4': this.push_i(4); break;
case '5': this.push_i(5); break;
case '6': this.push_i(6); break;
case '7': this.push_i(7); break;
case '8': this.push_i(8); break;
case '9': this.push_i(9); break;
default: window.log('BefRunner: Undefinied command: ' + chr.charCodeAt(0));
}
}
};
BefObject.prototype.move = function() {
this.position[0] += this.delta[0];
this.position[1] += this.delta[1];
if (this.position[0] < 0) this.position[0] += this.width;
if (this.position[1] < 0) this.position[1] += this.height;
if (this.position[0] >= this.width) this.position[0] -= this.width;
if (this.position[1] >= this.height) this.position[1] -= this.height;
};
BefObject.prototype.push_i = function(v) { this.stack.push(v); };
BefObject.prototype.pop_i = function() { return this.stack.pop(); };
BefObject.prototype.peek_i = function() { return this.stack.peek(); };
BefObject.prototype.push_b = function(v) { this.stack.push(v?1:0); };
BefObject.prototype.pop_b = function() { return this.stack.pop()!==0; };
BefObject.prototype.peek_b = function() { return this.stack.peek()!==0; };
BefObject.prototype.push_c = function(v) { this.stack.push(v.charCodeAt(0)); };
BefObject.prototype.gridset_i = function(x,y,c) { if (x < 0 || y < 0 || x >= this.width || y >= this.height) return; this.code[y][x]=String.fromCharCode(c); };
BefObject.prototype.gridget_i = function(x,y) { if (x < 0 || y < 0 || x >= this.width || y >= this.height) return 0; return this.code[y][x].charCodeAt(0); };
BefObject.prototype.updateUI = function() {
classListSet(this.btnStart, 'ctrl_btn_disabled', this.state === BefState.RUNNING || this.state === BefState.PAUSED);
@ -58,6 +211,50 @@ BefObject.prototype.updateUI = function() {
classListSet(this.pnlBottom, 'b93rnr_outpanel_hidden', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
};
BefObject.prototype.updateDisplay = function() {
let str = '';
for (let y=0; y < this.height; y++) {
for (let x=0; x < this.width; x++) {
let chr = this.code[y][x];
let cc = chr.charCodeAt(0);
if (chr === '&') chr = '&amp;';
if (chr === '<') chr = '&lt;';
if (chr === '>') chr = '&gt;';
if (chr === ' ') chr = '&nbsp;';
if (cc===0) chr = '<span style="color:#888">0</span>';
else if (cc>127 || cc<32) chr = '<span style="background:black;color:#888;">?</span>';
if (x === this.position[0] && y === this.position[1]) chr = '<span style="background: dodgerblue">' + chr + '</span>';
str += chr;
}
str += '<br/>';
}
this.pnlCode.innerHTML = str;
this.pnlOutput.innerHTML = htmlescape(this.output);
this.pnlStack.innerHTML = this.stack.revjoin("<br/>");
};
BefObject.prototype.parseBef = function(str) {
const lines = str.replace('\r\n', '\n').split('\n').map(function(str){return str.replace(/\s+$/, '')});
let max = 0;
for (let line of lines) max = Math.max(max, line.length);
let result = [];
for (let line of lines)
{
let row = [];
for(let i=0; i < max; i++)
{
row.push((i < line.length ? (line[i]) : ' '));
}
result.push(row)
}
return [result, max, result.length];
};
function classListSet(e, cls, active) {
if (active) {
if (e.classList.contains(cls)) return;
@ -68,6 +265,15 @@ function classListSet(e, cls, active) {
}
}
function htmlescape(str) {
str = str.replace(/&/g, "&amp;");
str = str.replace(/</g, "&lt;");
str = str.replace(/>/g, "&gt;");
str = str.replace(/ /g, "&nbsp;");
str = str.replace(/\n/g, "<br>");
return str;
}
window.onload = function ()
{
let elements = document.getElementsByClassName("b93rnr_base");
@ -76,8 +282,8 @@ window.onload = function ()
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(); };
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(); };
}
};

2
www/fragments/befunge93_runner.php
View File

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

18
www/fragments/blogview_euler_single.php
View File

@ -92,13 +92,13 @@ $max = ceil($max / 20) * 20;
$break = false;
for($i1=0;;$i1++)
{
echo "<div class='bce_pag20'>";
echo "<div class='bce_pag20'>\n";
for($i2=0;$i2<2;$i2++)
{
echo "<div class='bce_pag10'>";
echo "<div class='bce_pag10'>\n";
for($i3=0;$i3<2;$i3++)
{
echo "<div class='bce_pag05'>";
echo "<div class='bce_pag05'>\n";
for($i4=0;$i4<5;$i4++)
{
$ii = $i1*20 + $i2*10 + $i3*5 + $i4 + 1;
@ -107,19 +107,19 @@ $max = ceil($max / 20) * 20;
$pii = str_pad($ii, 3, '0', STR_PAD_LEFT);
if ($ii == $problem['number'])
echo "<div class='bce_pagbtn bce_pagbtn_active'>" . $pii . "</div>";
echo "<div class='bce_pagbtn bce_pagbtn_active'>" . $pii . "</div>\n";
else if (key_exists($ii, $arr))
echo "<a class='bce_pagbtn' href='/blog/1/Project_Euler_with_Befunge/problem-" . $pii . "'>" . $pii . "</a>";
echo "<a class='bce_pagbtn' href='/blog/1/Project_Euler_with_Befunge/problem-" . $pii . "'>" . $pii . "</a>\n";
else
echo "<div class='bce_pagbtn bce_pagbtn_disabled'>" . $pii . "</div>";
echo "<div class='bce_pagbtn bce_pagbtn_disabled'>" . $pii . "</div>\n";
}
echo "</div>";
echo "</div>\n";
if ($break) break;
}
echo "</div>";
echo "</div>\n";
if ($break) break;
}
echo "</div>";
echo "</div>\n";
if ($break) break;
}
?>