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

b93: speed

Browse Source
This commit is contained in:
Mike Schwörer 2018-01-02 19:41:41 +01:00
parent 89f2e3e5c5
commit cb816b5dd7
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
7 changed files with 166 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -646,6 +646,19 @@ html, body {
background: #333; background: #333;
color: #FFF; color: #FFF;
border: 1px solid black; } border: 1px solid black; }
.bce_code .bce_code_ctrl .ctrl_btn_group {
display: flex;
flex-direction: row; }
.bce_code .bce_code_ctrl .ctrl_btn_ll {
margin-right: 0;
flex-grow: 1; }
.bce_code .bce_code_ctrl .ctrl_btn_rr {
margin-left: 0;
flex-grow: 0;
min-width: 25px;
border-left: none; }
.bce_code .bce_code_ctrl .ctrl_btn_rr:hover {
border-left: none; }
.bce_code .bce_code_ctrl .ctrl_btn_disabled { .bce_code .bce_code_ctrl .ctrl_btn_disabled {
background: #999; background: #999;
color: #BBB; } color: #BBB; }
@ -677,28 +690,36 @@ html, body {
overflow-x: auto; overflow-x: auto;
background: #FFF; background: #FFF;
color: #000; color: #000;
flex-grow: 1;
margin: 0 4px 4px 4px;
border: 1px solid #888; border: 1px solid #888;
height: 200px; } flex-grow: 1; }
.bce_code_out .bce_code_out_stack { .bce_code_out .bce_code_out_stack {
font-family: Consolas, Monaco, "Courier New", Menlo, monospace; font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
overflow-y: scroll; overflow-y: scroll;
overflow-x: auto; overflow-x: auto;
background: #FFF; background: #FFF;
color: #000; color: #000;
margin: 0 4px 4px 4px;
width: 200px;
border: 1px solid #888; border: 1px solid #888;
height: 200px; } flex-grow: 1; }
.bce_code_out .bce_code_out_left {
flex-grow: 1;
margin: 0 4px 4px 4px;
height: 200px;
display: flex;
flex-direction: column; }
.bce_code_out .bce_code_out_right {
height: 200px;
width: 200px;
margin: 0 4px 4px 4px;
display: flex;
flex-direction: column; }
@media (max-width: 767px) { @media (max-width: 767px) {
.bce_code_out { .bce_code_out {
flex-direction: column; } flex-direction: column; }
.bce_code_out .bce_code_out_text { .bce_code_out .bce_code_out_left {
flex-grow: 0; flex-grow: 0;
height: 100px; } height: 100px; }
.bce_code_out .bce_code_out_stack { .bce_code_out .b93rnr_outpanel_right {
width: auto; width: auto;
height: 150px; } } height: 150px; } }
.b93rnr_outpanel_hidden { .b93rnr_outpanel_hidden {

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

@ -55,6 +55,14 @@
} }
} }
.ctrl_btn_group {
display: flex;
flex-direction: row;
}
.ctrl_btn_ll {margin-right: 0; flex-grow: 1; }
.ctrl_btn_rr {margin-left: 0; flex-grow: 0; min-width: 25px; border-left: none; &:hover { border-left: none; } }
.ctrl_btn_disabled { background: #999; color: #BBB; } .ctrl_btn_disabled { background: #999; color: #BBB; }
.ctrl_btn_disabled:hover { background: #999; color: #BBB; cursor: default; } .ctrl_btn_disabled:hover { background: #999; color: #BBB; cursor: default; }
} }
@ -83,10 +91,8 @@
overflow-x: auto; overflow-x: auto;
background: #FFF; background: #FFF;
color: #000; color: #000;
flex-grow: 1;
margin: 0 4px 4px 4px;
border: 1px solid #888; border: 1px solid #888;
height: 200px; flex-grow: 1;
} }
.bce_code_out_stack { .bce_code_out_stack {
@ -95,18 +101,32 @@
overflow-x: auto; overflow-x: auto;
background: #FFF; background: #FFF;
color: #000; color: #000;
margin: 0 4px 4px 4px;
width: 200px;
border: 1px solid #888; border: 1px solid #888;
flex-grow: 1;
}
.bce_code_out_left {
flex-grow: 1;
margin: 0 4px 4px 4px;
height: 200px; height: 200px;
display: flex;
flex-direction: column;
}
.bce_code_out_right {
height: 200px;
width: 200px;
margin: 0 4px 4px 4px;
display: flex;
flex-direction: column;
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.bce_code_out { .bce_code_out {
flex-direction: column; flex-direction: column;
.bce_code_out_text { flex-grow: 0; height: 100px;} .bce_code_out_left { flex-grow: 0; height: 100px;}
.bce_code_out_stack { width: auto; height: 150px;} .bce_code_out_right { width: auto; height: 150px;}
} }
} }

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

@ -1,5 +1,6 @@
const BefState = Object.freeze ({ UNINIITIALIZED: {}, INITIAL: {}, RUNNING: {}, PAUSED: {} }); const BefState = Object.freeze ({ UNINIITIALIZED: {}, INITIAL: {}, RUNNING: {}, PAUSED: {} });
const BefSpeed = Object.freeze ({ NORMAL: {str:'+'}, FAST: {str:'++'}, SUPERFAST: {str:'3+'}, MAX: {str:'4+'} });
Array.prototype.peek = function() { return this[this.length - 1]; }; Array.prototype.peek = function() { return this[this.length - 1]; };
Array.prototype.revjoin = function(sep) { Array.prototype.revjoin = function(sep) {
@ -9,15 +10,17 @@ Array.prototype.revjoin = function(sep) {
}; };
function BefObject(domBase) { function BefObject(domBase) {
this.btnStart = domBase.getElementsByClassName('b93rnr_start')[0]; this.btnStart = domBase.getElementsByClassName('b93rnr_start')[0];
this.btnStop = domBase.getElementsByClassName('b93rnr_pause')[0]; this.btnStop = domBase.getElementsByClassName('b93rnr_pause')[0];
this.btnReset = domBase.getElementsByClassName('b93rnr_reset')[0]; this.btnReset = domBase.getElementsByClassName('b93rnr_reset')[0];
this.pnlCode = domBase.getElementsByClassName('b93rnr_data')[0]; this.btnSpeed = domBase.getElementsByClassName('b93rnr_speed')[0];
this.pnlBottom = domBase.getElementsByClassName('b93rnr_outpanel')[0]; this.pnlCode = domBase.getElementsByClassName('b93rnr_data')[0];
this.pnlOutput = domBase.getElementsByClassName('b93rnr_output')[0]; this.pnlBottom = domBase.getElementsByClassName('b93rnr_outpanel')[0];
this.pnlStack = domBase.getElementsByClassName('b93rnr_stack')[0]; this.pnlOutput = domBase.getElementsByClassName('b93rnr_output')[0];
this.pnlStack = domBase.getElementsByClassName('b93rnr_stack')[0];
this.lblStackSize = domBase.getElementsByClassName('b93rnr_stacksize')[0];
this.state = BefState.UNINIITIALIZED; this.state = BefState.UNINIITIALIZED;
this.initial = atob(this.pnlCode.getAttribute('data-befcode')); this.initial = atob(this.pnlCode.getAttribute('data-befcode'));
this.code = []; this.code = [];
this.width = 0; this.width = 0;
@ -29,6 +32,7 @@ function BefObject(domBase) {
this.stack = []; this.stack = [];
this.timer = null; this.timer = null;
this.psteps = 0; this.psteps = 0;
this.simspeed = BefSpeed.SUPERFAST;
} }
BefObject.prototype.Init = function() { BefObject.prototype.Init = function() {
@ -81,8 +85,6 @@ BefObject.prototype.stop = function() {
BefObject.prototype.reset = function() { BefObject.prototype.reset = function() {
if (this.state === BefState.RUNNING) this.stop(); if (this.state === BefState.RUNNING) this.stop();
//reset
this.state = BefState.INITIAL; this.state = BefState.INITIAL;
this.Init(); this.Init();
this.state = BefState.INITIAL; this.state = BefState.INITIAL;
@ -91,36 +93,69 @@ BefObject.prototype.reset = function() {
this.updateDisplay(); this.updateDisplay();
}; };
BefObject.prototype.step = function() { BefObject.prototype.incSpeed = function() {
let t0 = performance.now(); if (this.simspeed === BefSpeed.NORMAL) this.simspeed = BefSpeed.FAST;
let first = true; else if (this.simspeed === BefSpeed.FAST) this.simspeed = BefSpeed.SUPERFAST;
else if (this.simspeed === BefSpeed.SUPERFAST) this.simspeed = BefSpeed.MAX;
let steps = 0; else if (this.simspeed === BefSpeed.MAX) this.simspeed = BefSpeed.NORMAL;
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.updateUI();
};
BefObject.prototype.step = function() {
if (this.simspeed === BefSpeed.NORMAL) {
this.stepSingle();
} else if (this.simspeed === BefSpeed.FAST) {
let t0 = performance.now();
let stepc = 0;
while(this.state=== BefState.RUNNING && (stepc===0 || (performance.now() - t0 < 16)) && stepc < 128) // 16ms == 60FPS
{
this.stepSingle();
stepc++;
}
} else if (this.simspeed === BefSpeed.SUPERFAST) {
let t0 = performance.now();
let first = true;
while(this.state=== BefState.RUNNING && (first || (performance.now() - t0 < 16))) // 16ms == 60FPS
{
this.stepSingle();
first = false;
}
} else if (this.simspeed === BefSpeed.MAX) {
let t0 = performance.now();
let first = true;
while(this.state=== BefState.RUNNING && (first || (performance.now() - t0 < 33))) // 32ms == 30FPS
{
this.stepSingle();
first = false;
}
}
if (this.state !== BefState.RUNNING) this.updateUI();
this.updateDisplay(); this.updateDisplay();
}; };
BefObject.prototype.stepSingle = function() {
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();
}
};
BefObject.prototype.exec = function(chr) { BefObject.prototype.exec = function(chr) {
if (this.strmode) if (this.strmode)
{ {
this.psteps++; this.psteps++;
@ -197,7 +232,6 @@ BefObject.prototype.pop_i = function() { return this.stack.pop(); };
BefObject.prototype.peek_i = function() { return this.stack.peek(); }; BefObject.prototype.peek_i = function() { return this.stack.peek(); };
BefObject.prototype.push_b = function(v) { this.stack.push(v?1:0); }; BefObject.prototype.push_b = function(v) { this.stack.push(v?1:0); };
BefObject.prototype.pop_b = function() { return this.stack.pop()!==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.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.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.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); };
@ -209,6 +243,8 @@ BefObject.prototype.updateUI = function() {
classListSet(this.btnReset, '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); classListSet(this.pnlBottom, 'b93rnr_outpanel_hidden', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
this.btnSpeed.innerHTML = this.simspeed.str;
}; };
BefObject.prototype.updateDisplay = function() { BefObject.prototype.updateDisplay = function() {
@ -233,6 +269,8 @@ BefObject.prototype.updateDisplay = function() {
this.pnlOutput.innerHTML = htmlescape(this.output); this.pnlOutput.innerHTML = htmlescape(this.output);
this.pnlStack.innerHTML = this.stack.revjoin("<br/>"); this.pnlStack.innerHTML = this.stack.revjoin("<br/>");
this.lblStackSize.innerHTML = "(" + this.stack.length + ")";
}; };
BefObject.prototype.parseBef = function(str) { BefObject.prototype.parseBef = function(str) {
@ -285,5 +323,6 @@ window.onload = function ()
befungeObject.btnStart.onclick = function () { if (befungeObject.btnStart.classList.contains('ctrl_btn_disabled')) return; befungeObject.start(); }; 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.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.btnReset.onclick = function () { if (befungeObject.btnReset.classList.contains('ctrl_btn_disabled')) return; befungeObject.reset(); };
befungeObject.btnSpeed.onclick = function () { if (befungeObject.btnSpeed.classList.contains('ctrl_btn_disabled')) return; befungeObject.incSpeed(); };
} }
}; };

15
www/fragments/befunge93_runner.php
View File

@ -23,7 +23,10 @@ if ($PARAM_INTERACTIVE) {
$result .= ' <div class="bce_code_data b93rnr_data" data-befcode="' . base64_encode($PARAM_CODE) . '">' . fmtBef($PARAM_CODE) . '</div>' . "\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="bce_code_ctrl">' . "\n";
$result .= ' <div class="ctrl_btn_left">' . "\n"; $result .= ' <div class="ctrl_btn_left">' . "\n";
$result .= ' <div class="ctrl_btn b93rnr_start">Start</div>' . "\n"; $result .= ' <div class="ctrl_btn_group">' . "\n";
$result .= ' <div class="ctrl_btn ctrl_btn_ll b93rnr_start">Start</div>' . "\n";
$result .= ' <div class="ctrl_btn ctrl_btn_rr b93rnr_speed">3+</div>' . "\n";
$result .= ' </div>' . "\n";
$result .= ' <div class="ctrl_btn b93rnr_pause ctrl_btn_disabled">Pause</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 class="ctrl_btn b93rnr_reset ctrl_btn_disabled">Reset</div>' . "\n";
$result .= ' </div>' . "\n"; $result .= ' </div>' . "\n";
@ -34,8 +37,14 @@ if ($PARAM_INTERACTIVE) {
} }
$result .= ' </div>' . "\n"; $result .= ' </div>' . "\n";
$result .= ' <div class="bce_code_out b93rnr_outpanel b93rnr_outpanel_hidden">' . "\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_left">' . "\n";
$result .= ' <div class="bce_code_out_stack b93rnr_stack"></div>' . "\n"; $result .= ' <b>Output:</b>' . "\n";
$result .= ' <div class="bce_code_out_text b93rnr_output"></div>' . "\n";
$result .= ' </div>' . "\n";
$result .= ' <div class="bce_code_out_right">' . "\n";
$result .= ' <span><b>Stack:</b>&nbsp;&nbsp;&nbsp;<i class="b93rnr_stacksize">(0)</i></span>' . "\n";
$result .= ' <div class="bce_code_out_stack b93rnr_stack"></div>' . "\n";
$result .= ' </div>' . "\n";
$result .= ' </div>' . "\n"; $result .= ' </div>' . "\n";
$result .= '</div>' . "\n"; $result .= '</div>' . "\n";

2
www/fragments/blogview_euler_single.php
View File

@ -7,7 +7,7 @@ require_once (__DIR__ . '/../internals/ParsedownCustom.php');
$subview = $OPTIONS['subview']; $subview = $OPTIONS['subview'];
$euler = Euler::listAll(); $euler = Euler::listAll();
$problem = Euler::getEulerProblem(intval(explode('-', $subview)[1])); $problem = Euler::getEulerProblemFromStrIdent($subview);
if ($post === NULL) httpError(404, 'problem not found'); if ($post === NULL) httpError(404, 'problem not found');

11
www/internals/euler.php
View File

@ -35,6 +35,17 @@ class Euler
return array_map('self::readSingle', $files); return array_map('self::readSingle', $files);
} }
public static function getEulerProblemFromStrIdent($ident)
{
$e = explode('-', $ident, 2);
if (count($e)!==2) return null;
$i = intval($e[1], 10);
if ($i == 0) return null;
return self::getEulerProblem($i);
}
public static function getEulerProblem($num) public static function getEulerProblem($num)
{ {
foreach (self::listAll() as $ep) { foreach (self::listAll() as $ep) {

14
www/pages/blog_view.php
View File

@ -19,7 +19,19 @@ if ($post === NULL) httpError(404, 'blogpost not found');
<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs"/> <meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs"/>
<link rel="icon" type="image/png" href="/data/images/favicon.png"/> <link rel="icon" type="image/png" href="/data/images/favicon.png"/>
<link rel="stylesheet" href="/data/css/styles.css"/> <link rel="stylesheet" href="/data/css/styles.css"/>
<link rel="canonical" href="<?php echo (($subview !== '') ? ($post['canonical']) : ($post['canonical'] . '/' . $subview)); ?>"/> <?php
if ($post['type'] === 'euler' && $subview !== '')
{
require_once(__DIR__ . '/../internals/euler.php');
$problem = Euler::getEulerProblemFromStrIdent($subview);
if ($problem !== NULL) echo '<link rel="canonical" href="' . $problem['canonical'] . '"/>';
}
else
{
echo '<link rel="canonical" href="' . $post['canonical'] . '"/>';
}
?>
</head> </head>
<body> <body>
<div id="mastercontainer"> <div id="mastercontainer">