def formatVed(vorpJsName):
name = 'vorp'
h = []
h.append(format.headStart(name, 2))
h.append("""
<link rel="stylesheet" type="text/css" href="../css/plexode3.css">
<link rel="stylesheet" type="text/css" href="edit/ved.css">
""")
h.append('<script src="%s"></script>' % vorpJsName)
h.append("""
<script>
var vedApp;
function main() {
var stor = new Stor(localStorage, 'ved');
stor.listenToStorage();
vedApp = new VedApp(document.getElementById('vedroot'), stor);
vedApp.render();
}
</script>
</head><body onload="main()">""")
h.append(format.navDiv(name, 2))
h.append(format.mainDiv("""<div id="vedroot">ved stuff goes here</div>"""))
h.append(format.footer())
return ''.join(h)
def formatInstaHtml():
name = 'insta-html'
h = []
h.append(format.headStart(name, 1))
h.append('</head><body onload="onLoadHandler()">')
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
Type HTML in the textarea, and it will be instantly rendered below.
<textarea onkeyup="changeHtml()" rows="20" style="width:100%" id="ta">
</textarea>
<div id="div"></div>
<script>
var ta;
var div;
function onLoadHandler() {
ta = document.getElementById("ta");
ta.focus();
div = document.getElementById("div");
changeHtml();
}
function changeHtml() {
div.innerHTML = '<br>' + ta.value;
}
</script>
"""))
h.append(format.footer())
return ''.join(h)
def formatChordo():
name = 'chordo'
h = []
h.append(format.headStart(name, 1))
h.append("""
<link rel="stylesheet" type="text/css" href="./chordo.css">
<script src="../js/plex/dom.js"></script>
<script src="../js/plex/event.js"></script>
<script src="../js/plex/func.js"></script>
<script src="../js/plex/map.js"></script>
<script src="../js/plex/object.js"></script>
<script src="../js/plex/pubsub.js"></script>
<script src="../js/plex/string.js"></script>
<script src="../js/plex/url.js"></script>
<script src="../js/plex/wij/tachanges.js"></script>
<script src="../chordo/chordo.js"></script>
<script src="../chordo/songmodel.js"></script>
<script src="../chordo/songparser.js"></script>
<script src="../chordo/songrenderer.js"></script>
<script>
// Global, for debugging.
var chordo;
function onLoadHandler() {
chordo = new Chordo(
new SongParser(),
new SongRenderer(),
'ta',
'output',
'jazzChords');
chordo.start();
chordo.redraw();
}
</script>
</head><body onload="onLoadHandler()">
""")
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<div>
<input type="checkbox" id="jazzChords">
<label for="jazzChords">include jazz chords</label>
</div>
<textarea id="ta">
Em: o /2 /3 o o o
E: o /2 /3 1 o o
C: x //3 /2 o 1 o
maj bar: 1 1/3 1/4 12 1 1
C: Hello!
E: This is major
-
Em: This is minor.
F maj bar: Bar chord
</textarea>
<div id="output"></div>
"""))
h.append(format.footer())
return ''.join(h)
def formatVorp():
name = 'vorp'
h = []
h.append(format.headStart(name, 1))
h.append("""
<link rel="stylesheet" type="text/css" href="./vorp.css">
</head><body>""")
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<div class=center>
<h1>About Vorp</h1>
Vorp is a free 2D physics-based action/puzzle game that runs in modern web browsers.
<p>
It's written in JavaScript, and it uses the
HTML5 <canvas> element to render all the graphics.
There are no sound effects yet.
<p>
It works well in <a href="http://www.google.com/chrome/">Chrome</a>,
<a href="http://www.google.com/search?q=firefox+4">Firefox 4</a>, Safari, and
<a href="http://www.opera.com/">Opera</a>.
<br>
It's slow in Firefox 3, but it works.
<br>
<a href="http://www.google.com/search?q=internet+explorer+9">IE 9</a>
might work. IE 8 and lower don't have <canvas> support, so they won't work on their own,
but they might if you install the <a href="http://code.google.com/chrome/chromeframe/">Chrome Frame</a> plugin.
<h1>Controls</h1>
Use the arrow keys to move.
<p>
Press Z to pick things up with your tractor beam.<br>
Press X to drop or throw things.<br>
<small>(Dvorak nerds can use semicolon and Q.)</small>
<p>
After you pick something up, hold down the Z key for a stiff hold, or release it to drag or swing an object.<br>
Holding Z down charges the tractor beam; if you press X when the beam is charged,
you'll throw the object instead of dropping it.
<p>
<h1>Play it!</h1>
<a href="level1/index.html">level 1: test level with portals and lots of blocks to throw around</a><br>
<a href="level2/index.html">level 2: tiny test of a button and a player-blocking field</a><br>
<a href="level3/index.html">level 3: a proper level with real challenges and puzzles</a><br>
<a href="level4/index.html">level 4: small test for a beam-sensor and a door</a><br>
<a href="level5/index.html">level 5: tiny test of a grip-switch</a><br>
<a href="level6/index.html">level 6: the second proper level</a><br>
<p>
Each level is a web page, and the exits are links between web pages.<br>
To restart a level, hit "refresh" on your browser. You can bookmark levels and send URLs to people,
just like you can with any other web page.
<p>
Vorp is still under construction, so check back here for updates.
</div>
"""))
h.append(format.footer())
return ''.join(h)
def formatMinigames():
name = 'minigames'
h = []
h.append(format.headStart(name, 1))
h.append("""
<link rel="stylesheet" type="text/css" href="minigames.css">
</head><body>""")
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<a href="./1/index.html">minigame 1</a></br>
"""))
h.append(format.footer())
return ''.join(h)
def formatChordo():
name = 'chordo'
h = []
h.append(format.headStart(name, 1))
h.append("""
<link rel="stylesheet" type="text/css" href="./chordo.css">
<script src="../js/plex/dom.js"></script>
<script src="../js/plex/event.js"></script>
<script src="../js/plex/func.js"></script>
<script src="../js/plex/object.js"></script>
<script src="../js/plex/pubsub.js"></script>
<script src="../js/plex/string.js"></script>
<script src="../js/plex/url.js"></script>
<script src="../js/plex/wij/tachanges.js"></script>
<script src="../chordo/chordo.js"></script>
<script src="../chordo/songmodel.js"></script>
<script src="../chordo/songparser.js"></script>
<script src="../chordo/songrenderer.js"></script>
<script>
function onLoadHandler() {
console.log('onload');
var c = new Chordo(
new SongParser(),
new SongRenderer(),
'ta',
'output');
c.start();
c.redraw();
}
</script>
</head><body onload="onLoadHandler()">
""")
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<textarea id="ta">
Em: o /2 /3 o o o
E: o /2 /3 1 o o
C: x //3 /2 o 1 o
maj bar: 1 1/3 1/4 12 1 1
C: Hello!
E: This is major
-
Em: This is minor.
F maj bar: Bar chord
</textarea>
<div id="output"></div>
"""))
h.append(format.footer())
return ''.join(h)
def formatMain():
name = 'main'
h = []
h.append(format.headStart(name, 0))
h.append('</head><body>')
h.append(format.navDiv(name, 0))
h.append(format.mainDiv("""
<p>
<i>2011-06-27</i><br>
Upgraded <a href="/vorp">Vorp</a> graphics and handling a bit.<br>
Now plexode's source is on github, at
<a href="https://github.com/aaronwhyte/plexode">https://github.com/aaronwhyte/plexode</a>.
<p>
<i>2011-01-23</i><br>
Added a new game, <a href="/vorp">Vorp</a>, to the nav bar.
<p>
<i>2010-06-26</i><br>
Refactored the whole site!<br>
For example, now you can go to <a href="eval3">plexode.com/eval3</a>
instead of <a href="cgi-bin/eval3.py">plexode.com/cgi-bin/eval3.py</a>
<br>All old-style URLs should get redirected to the new URLs. eval2 and eval3 URL hash fragments are preserved, even on IE.
<p>
I also got rid of some cruft, and added some stuff.
<p>
<i>2009-02-22</i><br>
Insta-html and eval have a beautiful baby and it is <a href="eval3">eval3</a>.
It is full of wonders. Here is a snake I made with it:
<a href="eval3#ht=DUDE%20OMG%20%3Cb%20id%3D%22wave%22%20style%3D%22font-size%3A150%25%3B%20color%3Agreen%22%3E%3C%2Fb%3E%20IT%20IS%20A%20SNAKE&ohh=1&ohj=1&jt=var%20a%20%3D%20[]%3B%0Avar%20n%20%3D%20(new%20Date()).getTime()%3B%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%2020%3B%20%2B%2Bi)%20{%0A%20%20var%20s%20%3D%20Math.sin(n%2F210%20%2B%20i%2F1.1)%20*%2025%20%2B%20Math.sin(n%2F240%20%2B%20i%2F3)%20*%2025%3B%0A%20%20var%20c%20%3D%20-Math.cos(n%2F200%20%2B%20i%2F2)%20*%2025%20-%20Math.cos(n%2F260%20%2B%20i%2F2.9)%20*%2025%3B%0A%20%20a.push(%27%3Cb%20style%3D%22position%3Arelative%3Bleft%3A%27%2C%20s%2C%20%27px%3Btop%3A%27%2C%20c%2C%20%27px%22%3Es%3C%2Fb%3E%20%27)%3B%0A}%0Agebi(%27wave%27).innerHTML%20%3D%20a.join(%27%27)%3B%0A%0An%20%25%20100000%3B%0A&ojh=1&ojj=1&ms=30&oth=0&otj=1&cex=1">A snake.</a>
<p>
<i>2008-03-02</i><br>
Now <a href="eval2">eval2</a> saves and loads content using the href
fragment, so you can save a JS program as a bookmark, or send one to a friend.<br>
See <a href="eval2#%2F%2Feval%20every%20100ms!%0Avar%20a%20%3D%20%5B%5D%3B%0Afor%20(var%20i%20%3D%201%3B%20i%20%3C%3D%2020%3B%20%2B%2Bi)%20%7B%0A%20%20var%20n%20%3D%20(new%20Date()).getTime()%3B%0A%20%20var%20s%20%3D%20Math.sin(n%2F200%20%2B%20i)%20*%209%3B%0A%20%20var%20c%20%3D%20-Math.cos(n%2F200%20%2B%20i)%20*%209%3B%0A%20%20a.push('%26nbsp%3B%3Cb%20style%3D%22position%3Arelative%3Bleft%3A'%2C%20s%2C%20'px%3Btop%3A'%2C%20c%2C%20'px%22%3E%23%3C%2Fb%3E%26nbsp%3B')%3B%0A%7D%0Agebi('d').innerHTML%20%3D%20a.join('')%3B%0A''%3B">Super
Fun Time Example URL</a>.
Good idea, Julie!
<p>
<i>Many moons ago...</i><br>
Welcome to Plexode!<br>
Want to <a href="/fracas">play a game</a>?
"""))
h.append(format.footer())
return ''.join(h)
def formatFracas():
name = 'fracas'
h = []
h.append(format.headStart(name, 1))
h.append("""
<link rel="stylesheet" type="text/css" href="./fracas.css">
<script src="../js/vec2d.js"></script>
<script src="./FracRend.js"></script>
<script src="./Fracas.js"></script>
<script src="./levels/level0.js"></script>
<script src="./levels/level1.js"></script>
<script src="./levels/level2.js"></script>
<script src="./levels/level3.js"></script>
<script src="./levels/level4.js"></script>
<script src="./levels/level5.js"></script>
<script>
function onloadHandler() {
var frac = new Fracas('fracas');
frac.startGame();
}
</script>
</head><body onload="onloadHandler()">""")
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<div id="game">
<div align="center">
<div class="smalldoc" style="padding-bottom:4px">
Arrows move, space & arrows fire. Defeat the gnomes!
</div>
<div id="fracas">fracas goes here</div>
</div>
</div>
"""))
h.append(format.footer())
return ''.join(h)
def formatEval2():
name = 'eval2'
h = []
h.append(format.headStart(name, 1))
h.append(format.plexScripts())
h.append("""
<script src="../js/eval2.js"></script>
<style>
#log {
height:100em;
background:#eee;
font-family:monospace;
font-size:smaller;
display:none;
}
#ac, #peek {
height:8em;
overflow:auto;
}
#ac, #peek, #out {
font-family:courier new, monospace;
}
#ac {
background:#ddf;
}
#peek {
background:#ffd;
padding:0 0.5em;
}
#ac div.name {
padding:0 0.5em; float:left;
}
#ac div.type {
padding:0 0.5em;
text-align:right;
}
#ac .plexWijMenuItemHilited {
background:#44f;
color:#ff8;
}
#taBorder {
border:2px solid #44f;
padding:0.25em;
}
#ta {
width:100%;
height:20em;
border:0;
padding:0;
margin:0;
}
</style>
""")
h.append('</head><body onload="plex.eval2.start()">')
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<div id="log"></div>
A JavaScript evaluator - Now with autocomplete!<sub>BETA</sub><br>
[ctrl-up] and [ctrl-down] change the hilited item.<br>
[ctrl-right] and [ctrl-.] insert the hilited item and append a "."<br>
[ctrl-enter] inserts the hilited item only.<br>
<table cellspacing=0 cellpadding=0 border=0
style="width:100%; table-layout:fixed">
<tr><td style="width:50%">
<div id="ac"></div>
<td style="width:50%"><div id="peek"></div>
</table>
<div id="taBorder"><div>
<textarea id="ta" name="ta"></textarea>
</div></div>
<div style="margin:1em 0">
<button onclick="plex.eval2.evalOnce()">eval once</button>
N:<input id="ms" type="text" value="100" size="5">
<button onclick="plex.eval2.evalEveryN(gebi('ms').value)">eval every N ms</button>
</div>
<div id="out"></div>
<div id="d"></div>
"""))
h.append(format.footer())
return ''.join(h)
def formatEval():
name = 'eval'
h = []
h.append(format.headStart(name, 1))
h.append('</head><body>')
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
A JavaScript evaluator. <button onclick="toggleHelp()">help</button><br>
<div id="help" style="display:none">
Some util functions:""" +
format.table(
'id="tab" style="border-collapse:collapse; border-color:silver;" ' +
'border=1 cellpadding=2', [
['<code>expose(object)</code>', 'shows object\'s key/value pairs'],
['<code>ce(nodeName, parentNode)</code>',
'createElement - parent optional'],
['<code>ct(text, parentNode)</code>',
'create text node - parent optional'],
['<code>gebi(id)</code>', 'document.getElementById(id)']]) +
"""
The table above has an id='tab'.<br>
There's a div with id='d' at the bottom of the document.
</div>
<textarea rows="20" cols="60" id="ta" name="ta" style="width:100%">
</textarea>
<div style="margin:1em 0;">
<button onclick="once()">eval once</button>
<button onclick="everyN(1000)">eval every second</button>
N:<input id="ms" type="text" value="100" size="5">
<button onclick="everyN(getElementById('ms').value)">eval every N ms</button>
</div>
<pre id="out" style="font-size:1em"></pre>
<div id="d"></div>
<script>
var tickId = null;
var plexOut = gebi('out');
var plexTa = gebi('ta');
var plexD = gebi('d')
plexTa.focus();
function toggleHelp() {
var help = gebi('help');
help.style.display = help.style.display ? '' : 'none';
}
function once() {
if (tickId != null) {
clearInterval(tickId);
tickId = null;
}
calc();
}
function everySec() {
everyN(1000);
}
function everyN(n) {
if (tickId != null) {
clearInterval(tickId)
}
calc();
tickId = setInterval(calc, n);
}
function calc() {
var expr = gebi('ta').value;
var out = gebi('out');
try{
out.innerHTML = textToHtml(eval(expr).toString());
} catch (e) {
out.innerHTML =
'<div style="color:red">Error:</div>' + textToHtml(expose(e), '<br>');
}
}
</script>
"""))
h.append(format.footer())
return ''.join(h)
def formatEval3(quirks=False):
mode = '';
if quirks:
name = 'eval3quirks'
mode = ' (quirks mode)'
else:
name = 'eval3'
h = []
h.append(format.headStart(name, 1, quirks))
h.append("""
<script src="../js/plex/dom.js"></script>
<script src="../js/plex/event.js"></script>
<script src="../js/plex/func.js"></script>
<script src="../js/plex/map.js"></script>
<script src="../js/plex/object.js"></script>
<script src="../js/plex/pubsub.js"></script>
<script src="../js/plex/string.js"></script>
<script src="../js/plex/url.js"></script>
<script src="../js/plex/wij/tachanges.js"></script>
<script src="../js/base64.js"></script>
<script src="../js/plex/bitqueue.js"></script>
<script src="../js/plex/lempelziv.js"></script>
<script src="../js/plex/squisher.js"></script>
<script src="../js/eval3.js"></script>
<style>
#taBorder {
border:2px solid #44f;
padding:0.25em;
}
.ta {
width:100%;
height:20em;
}
.nowrap {
white-space:nowrap;
}
</style>
</head><body onload="plex.eval3.start()">
""")
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<table style="width:100%" cellpadding=4>
<tr>
<td style="width:50%" valign="top">
<b>HTML</b>""" + mode +
"""<br>
<textarea class="ta" id="ht"></textarea>
<button onclick="plex.eval3.evalHtml()">set innerHTML now</button>
<span class="nowrap">When HTML changes:</span>
<span class="nowrap"><input type="checkbox" id="ohh" checked><label for="ohh">set innerHTML</label>
</span>
<span class="nowrap">
<input type="checkbox" id="ohj" checked><label for="ohj">eval JS</label>
</span>
</td>
<td style="width:50%" valign="top">
<b>JS</b><br>
<textarea class="ta" id="jt"></textarea>
<button onclick="plex_eval3_evalJs()">eval JS now</button>
<span class="nowrap">When JS changes:</span>
<span class="nowrap"><input type="checkbox" id="ojh" checked><label for="ojh">set innerHTML</label>
</span>
<span class="nowrap">
<input type="checkbox" id="ojj" checked><label for="ojj">eval JS</label>
</span>
<span class="nowrap">
<input type="checkbox" id="cex" checked><label for="cex">catch exceptions</label>
<span>
</td>
</tr>
</table>
<div style="text-align:center">
Every <input type="text" value="100" size="4" id="ms">ms
<span class="nowrap">
<input type="checkbox" id="oth"><label for="oth">set innerHTML</label>
</span>
<span class="nowrap">
<input type="checkbox" id="otj"><label for="otj">eval JS</label>
</span>
</div>
<hr>
<div id="hd"></div>
<hr>
<div id="jd"></div>
"""))
h.append(format.footer())
return ''.join(h)
def formatEval3Quirks():
name = 'eval3quirks'
h = []
h.append(format.headStartQuirks(name, 1))
h.append("""
<script src="../js/plex/dom.js"></script>
<script src="../js/plex/event.js"></script>
<script src="../js/plex/func.js"></script>
<script src="../js/plex/object.js"></script>
<script src="../js/plex/pubsub.js"></script>
<script src="../js/plex/string.js"></script>
<script src="../js/plex/url.js"></script>
<script src="../js/plex/wij/tachanges.js"></script>
<script src="../js/eval3.js"></script>
<style>
#log {
height:100em;
background:#eee;
font-family:monospace;
font-size:smaller;
display:none;
}
#taBorder {
border:2px solid #44f;
padding:0.25em;
}
.ta {
width:100%;
height:20em;
}
.nowrap {
white-space:nowrap;
}
</style>
""")
h.append('</head><body onload="plex.eval3.start()">')
h.append('</head><body>')
h.append(format.navDiv(name, 1))
h.append(format.mainDiv("""
<div id="log"></div>
<table style="width:100%" cellpadding=4>
<tr>
<td style="width:50%" valign="top">
<b>HTML</b> (quirks mode)<br>
<textarea class="ta" id="ht"></textarea>
<button onclick="plex.eval3.evalHtml()">set innerHTML now</button>
<span class="nowrap">When HTML changes:</span>
<span class="nowrap"><input type="checkbox" id="ohh" checked><label for="ohh">set innerHTML</label>
</span>
<span class="nowrap">
<input type="checkbox" id="ohj" checked><label for="ohj">eval JS</label>
</span>
</td>
<td style="width:50%" valign="top">
<b>JS</b><br>
<textarea class="ta" id="jt"></textarea>
<button onclick="plex_eval3_evalJs()">eval JS now</button>
<span class="nowrap">When JS changes:</span>
<span class="nowrap"><input type="checkbox" id="ojh" checked><label for="ojh">set innerHTML</label>
</span>
<span class="nowrap">
<input type="checkbox" id="ojj" checked><label for="ojj">eval JS</label>
</span>
<span class="nowrap">
<input type="checkbox" id="cex" checked><label for="cex">catch exceptions</label>
<span>
</td>
</tr>
</table>
<div style="text-align:center">
Every <input type="text" value="100" size="4" id="ms">ms
<span class="nowrap">
<input type="checkbox" id="oth"><label for="oth">set innerHTML</label>
</span>
<span class="nowrap">
<input type="checkbox" id="otj"><label for="otj">eval JS</label>
</span>
</div>
<hr>
<div id="hd"></div>
<hr>
<div id="jd"></div>
"""))
h.append(format.footer())
return ''.join(h)
def formatMain():
name = 'main'
h = []
h.append(format.headStart(name, 0))
h.append("""
<style>
.news {
display:block;
max-width:50em;
margin:1.5em 0;
}
.date {
display:block;
font-weight:bold;
}
a {
white-space:nowrap;
}
</style>
""")
h.append('</head><body>')
h.append(format.navDiv(name, 0))
h.append(format.mainDiv("""
<div class="news">
It's an anagram for "explode!"<br>
This site started as an HTML rapid-prototyping tool back in the early 2000's.
It's got some web development tools, a couple of action-packed JavaScript/HTML games, and some wiggly demos.
<br>
All the source is on <a href="https://github.com/aaronwhyte/plexode/">github</a>.
<div>
<div class="news">
<span class="date">2015-09-26</span>
Here's a hella old eval3
<a href="http://plexode.com/eval3/#s=aekVQXANJVQMbAx10AYMeFBERAYIeF5sBSkUePQNEQk+mAXilA1mEGxJRWQGHAVNGRRwBfRtCQ1RQTVZVRrx+spq0ph8dEHQfPU8dSRIfAS5KRElCRk0P4QHj2tzeTQ0BSEpXRgFWVAFQVlMBUblESvPxSEZOKgCAIoEwuGjZFQkFIiEwtB4DBoDJaRSZwB52V0DgsHhMLFqmDjTaZgAJxBIKAJcaZEIgPI5KJpNGhVLRNIyuAhHIpFj8qlhDIzrJ4xIRVJMmkBPlYPJxQdo1KAJBwSdNSBVIpRNJRPI1PBNTANVq8srNbrtfCIPDVWnoPslcqFSdNotViB5EJpQKhGodFo9sl0wv1JlhUKpTKBMI2CL0hJ8jn5CKZFk0ov8vmMzms3nU7Ad1n9BvlGteDpdNt9RCQPs9p0lYrWoqWruWusewroRqloCW1tu3qGqs+9t1m2YBufD34J3IB4O9u95vdE0d1wBNwVKwuHxOLxsjIxaIxUykp0vWmU0mymAibCM80ugrWi7EsyJEqNoC26B/644PBEGVyfsm28XV0F6fNvXWfQD3aYhim9fFQnTgx9nLfx+39WiAICWCGwRgVbIHdJfYKZeDIOdxpGMKpjgBE90XkWyEoJdVl3oZp605Z1dYWcwDloBOGgPBMGFykADwVOkaQxCoDFoBWJmBb2KYQUiLEiAFTDFaNlXwUB8oUb1TFOXCUFyA8FHJWVUJnf6al1lV3YtSM3RVjJ5o3Zl6gDTgm3vUqNJiXWZGxcF/ZIBma2oj8EwPBii3FBKiFooqBl4gig2WlOcWGg+c5ZZETp4oGYITiWhGnbhtF1FIVhCEUU1ENsJD0mWF5DawF5oBeVKeipn6mjVbI+A+u3+gF/gTVSTAqOmIWlnKK3eAGonjFVJ3ldkQjtgxbg4KNRQBB5/qTXVhipFQTVEYprLQUphxVuwCRpFRWgJFUC1or0AQQAEE1gf6UVIqKDC5YUUC5ii3JWWy37hEm47lBacSoTVqbPb26BPuq87ub28bzvW975vsFknv7AAOwJpMFyB4hVwmEDTliLk1EipE+sKmmloWq3Hb2rqwrIVa0rajJEmiSrlmilsOcp+ZoXRbLSle1M3te2dUwy3mwuARVFuRu8U1u3carLHLrMauNSyAULy2vIxPvjKL/aTN8GzDMsL2bFRCxdcXN2e6dqYrUX+1Npch3G9tzvlqgRBMCgQ5JSN4y/CMK5jMea1aLSoxI/RDEoCSmKgqgDbXEioA8/RVCQUBPMYWZ3AgExFAhpJZEiMBOYoWTpFo6RJOkVzptiXjja9W9fuLYmrUjymEr8Ro4O65Hre17/Sg3XGk9zG8d2vwABFr3wBvDb8i42+L6A+igLuX53ZxZigWcz9/nSX57W3T0QAtYf8NMcZkDJGCHGjAvUBwAngPFAtLaqIBgBTtAteDenOs0MaBACAR2EgBASGELTEgIi8hEB0AImoSPlACAxcgaQ1ABfiJprQT4Njjd4FB3y9IYQyE28E0kG0WBhCqxIBIYgyAKDKv05omykQ4h1ClZ790OnMCqBBgY04nrtimc0DJzIvvHNJFoBIoBOMrUmcwCUXoqPHcoaQKpSCHgDH+JIAYEgIxybeEmOoEo8hVCXHwAYXgAA==">
gnomes demo</a>. These gem-coveting dungeon dwellers were going to be the enemies in Fracas II.
</div>
<div class="news">
<span class="date">2015-09-25</span>
Here's another little vorp level:
<a href="http://plexode.com/vorp/?20150925#level=data~aeotB48JkRpIaDqVqccRUA1qIPTCnxQNuhOhyozgqqACkKAGwCQoGiYaMxoaHDIkLw8SKx4sMC8eMCkm0TUkIswcNDUXQ0dMMsAyGjUeLywcJxrBTxYdQy4lFgYoIwzRJR4qK1rNYhojKM9eHWNGMignmCbQHDAjZTk9FicSLjFwMjU9Eic1n2XJuxVaJCInZC14wDAaKNGlcXlW0BRLNx8ItVQNDvh7wVcrQzrxRv2DhUzQJpg2BA56NQJJYKolsJ1YBF%2FBYGhWSA4KBlZMV%2FSWEwyKwqILwGhYzBlkwsMssJSQLIl9o9poczBaSQ9aQdMIoJJldqeHU%2BDhdRyynsRjMpWA0LolptFyodLBd0xdVLauO9frJEBdWgOHMGAriqK2MJlDq8MJaNxVcp1VosMO%2BJQ8JSo01RgoxFzmM1xLTxFhmSKV%2BPEK2JGXa6o92QcNROQLnMK50vB5aBExfHuWpGjXBKozqGmXXwRX7LEJChvfULB5vVhBGTzi2aVIY7hGeRUynaR5bWH5iD7JP8fog4KsPoZlhRvPcpcVaMcKob5rOl99XbRfUQHRz23eyPcZH%2B%2BsXb31teJqZAqcRDneCbcg03ZsksAYCGCU58sgUZoEOkhEFkvyWOqkDZNs7rpPuCz5rUV6glmiR7DOCrxqyUikvAjbilEzywxbADPRgbD5xmZydwhEphHo5x0gsYsgEeyz%2BSEdzOJEMC%2BKWnMELQXRZuydg0ri6pkvdD53tm%2BSRjOcMwJycqeNyC7cuQSJJtyTiGxOME2Sa5jMzZCZxHwZc2E0ChEp7OAzgwe4LpICYLT%2Bpp3zuCxqTZERhAwCVDp2ix7p3SQ0UCi08jODLBUxNdOKAfQMUkviGHhSLcspE7vg1SRQQ%2BM8%2BUk3wLTNRlOHersTgqHwfAAA=">surf's up and zombies to go</a>
<br>It's already pretty hard. But to make it insane-o challenging, try it without your tractor beam - use yourself as bait to draw the zombies into the grip-switches.
</div>
<div class="news">
<span class="date">2013-10-26</span>
Now the Vorp editor is integrated into the game, and there's sharing by URL.
</div>
<div class="news">
<span class="date">2013-06-02</span>
<a href="/vorp">Vorp</a> has three new levels, with zombies and turrets!
</div>
<div class="news">
<span class="date">2013-03-18</span>
Now <a href="/eval3">eval3<a> is using a new URL compressor,
<a href="https://github.com/aaronwhyte/plexode/blob/master/public_html/js/plex/squisher.js">plex.squisher</a>,
that is always on.
All old URLs should still work. But the new ones should survive linkification better,
because they only use URL-friendly base64 characters. So they're more likely to work if you paste them into Gmail,
or forum markdown.
<p>
Here's a sample URL that animates wiggly tree tentacles on a canvas:
<a href="/eval3/#s=aekVQXANJVQMbAx10AUpFHpaCHhcVEQGDHhUZoHgePQOLG1RKTVdGU6kfHRB0HwMNA0uRk3APdh4IRFVJVk3GCBw9T2FPAR4BCWJkCmXLzU5QU0YjRk9F0AERDxEREgELAWmtTwlPEBIU5hEK2GF/I1NCT0RJcTkdDqBLsJTueAUCwUCQKAIOcYPC0NgcFg4QCYSjMNh7kiUOiASe6AfT8f0AB8CaUVd4QCgZjUfjsTlTtlgTc0MmMRjcge4uEQ5IAlEwxGopcQVCj3Gg1EQzGoqF4oIA0FQ7Ezieb3qIkIAnGAzFjiCQQCr3FAzGA4k4aszMZhhSzRX5uBIIOgIe1wIjiOgPJBGKokKBPKpGLJVuwTIt5bDMMABIr7LA1bhGBKKBoBI7bJhPIxUKmaIbfIuaIpGKLFhpcZgBAJEB5HVxNGZGYgJByKBbkC+a3W8B4UzW7CQPCfE4IXvTPS5HaWo1T/D7Rn9BodFFMNM+O5pK54JzhTz2gKgBDoBnOt5uv2JUISwBPM1/tB5VfZPKhNIWGBIRb8ikXfN9GxFMUBVfxl2kOCA31fc/H6gl/oAgI2H0ZFk2VEZlyKOkAVoWoAWaeJ5GhAEDABVxXlgCxo2licATaNw3jgadqTFAxDIWgQDzcFQVTbZeAxeAERhNFQRgBeuF3ufCQo7g5+IRf1/0OgEE4NbCPYHhKCzhig5JYlCWoPfl+5UhSYmufRkhCZRlmYh6IA4ZqVZeR8+X4SaNnSjmWYFaCQDcfJ3ZMA973xn99pSmdl5VbqFZrfWBoIf2d0cceipllOjpplmbZvhucTqnOdYuOCMEjnoSZ8jiOqSlqPqCk+axeMytj9A8RBNEYQhTbZuJVlVfiCZpfiDcyTaJNhsabo0CbERedbJlulWXGkMQqcyoIaZdTFOVBUlUVYJqmjGQY0OG07Mj2gZBoQzAIMouQDFASxJJIAwRvQThUvlN70gcS75BIAxeAAA=">
<b>cthulhu</b></a>.
<p>
The new compressor turns the form fields into a JSON string,
percent-encodes all but the most vanilla characters,
does static-dictionary substitution to make some common strings shorter (like "document" and "function"),
then uses Lempel-Ziv to compress repeated strings,
and finally encodes everything in linkifier-friendly base64.
<p>
Aaaand in <a href="/vorp">Vorp</a>, it should be easier to make small movements with the little pink square that is you -
better for lining up throws, or getting onto a beam sensor.
</div>
<div class="news">
<span class="date">2013-02-13</span>
I've been working on <a href="./vorp">Vorp</a>!<br>
Now there are ten lesson levels, and a couple new challenging levels.
</div>
<div class="news">
<span class="date">2011-06-27</span>
Upgraded <a href="/vorp">Vorp</a> graphics and handling a bit.<br>
Now plexode's source is on github, at
<a href="https://github.com/aaronwhyte/plexode">https://github.com/aaronwhyte/plexode</a>.
</div>
<div class="news">
<span class="date">2011-01-23</span>
Added a new game, <a href="/vorp">Vorp</a>, to the nav bar.
</div>
<div class="news">
<span class="date">2010-06-26</span>
Refactored the whole site!<br>
For example, now you can go to <a href="eval3">plexode.com/eval3</a>
instead of <a href="cgi-bin/eval3.py">plexode.com/cgi-bin/eval3.py</a>
<br>All old-style URLs should get redirected to the new URLs. eval2 and eval3 URL hash fragments are preserved, even on IE.
<p>
I also got rid of some cruft, and added some stuff.
</div>
<div class="news">
<span class="date">2009-02-22</span>
Insta-html and eval have a beautiful baby and it is <a href="eval3">eval3</a>.
It is full of wonders. Here is a snake I made with it:
<a href="eval3#ht=DUDE%20OMG%20%3Cb%20id%3D%22wave%22%20style%3D%22font-size%3A150%25%3B%20color%3Agreen%22%3E%3C%2Fb%3E%20IT%20IS%20A%20SNAKE&ohh=1&ohj=1&jt=var%20a%20%3D%20[]%3B%0Avar%20n%20%3D%20(new%20Date()).getTime()%3B%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%2020%3B%20%2B%2Bi)%20{%0A%20%20var%20s%20%3D%20Math.sin(n%2F210%20%2B%20i%2F1.1)%20*%2025%20%2B%20Math.sin(n%2F240%20%2B%20i%2F3)%20*%2025%3B%0A%20%20var%20c%20%3D%20-Math.cos(n%2F200%20%2B%20i%2F2)%20*%2025%20-%20Math.cos(n%2F260%20%2B%20i%2F2.9)%20*%2025%3B%0A%20%20a.push(%27%3Cb%20style%3D%22position%3Arelative%3Bleft%3A%27%2C%20s%2C%20%27px%3Btop%3A%27%2C%20c%2C%20%27px%22%3Es%3C%2Fb%3E%20%27)%3B%0A}%0Agebi(%27wave%27).innerHTML%20%3D%20a.join(%27%27)%3B%0A%0An%20%25%20100000%3B%0A&ojh=1&ojj=1&ms=30&oth=0&otj=1&cex=1">A snake.</a>
</div>
<div class="news">
<span class="date">2008-03-02</span>
Now <a href="eval2">eval2</a> saves and loads content using the href
fragment, so you can save a JS program as a bookmark, or send one to a friend.<br>
See <a href="eval2#%2F%2Feval%20every%20100ms!%0Avar%20a%20%3D%20%5B%5D%3B%0Afor%20(var%20i%20%3D%201%3B%20i%20%3C%3D%2020%3B%20%2B%2Bi)%20%7B%0A%20%20var%20n%20%3D%20(new%20Date()).getTime()%3B%0A%20%20var%20s%20%3D%20Math.sin(n%2F200%20%2B%20i)%20*%209%3B%0A%20%20var%20c%20%3D%20-Math.cos(n%2F200%20%2B%20i)%20*%209%3B%0A%20%20a.push('%26nbsp%3B%3Cb%20style%3D%22position%3Arelative%3Bleft%3A'%2C%20s%2C%20'px%3Btop%3A'%2C%20c%2C%20'px%22%3E%23%3C%2Fb%3E%26nbsp%3B')%3B%0A%7D%0Agebi('d').innerHTML%20%3D%20a.join('')%3B%0A''%3B">Super
Fun Time Example URL</a>.
</div>
<div class="news">
<span class="date">Many moons ago...</span>
Welcome to Plexode!<br>
Want to <a href="/fracas">play a game</a>?
</div>
"""))
h.append(format.footer())
return ''.join(h)
<script src="./mark.js"></script>
<script src="./rayScan.js"></script>
<script src="./skipqueue.js"></script>
<script src="./wham.js"></script>
<script src="./phy.js"></script>
<script src="./renderer.js"></script>
<script src="./fracas2.js"></script>
<script src="./main.js"></script>
</head>
<body onload="main()">
"""
print format.navDiv(name)
print format.mainDiv("""
Fracas 2 is under construction. Use I, J, K, and L to move. Space + move = fire.<br>
<canvas id="canvas" width=800 height=600" style="background:black">
Looks like this web browser doesn't support the HTML 5 canvas element. :-(<br>
You should get one that does, like Safari 4+, Chrome, Firefox 3+, IE 9+, probably Opera...
</canvas>
</body></html>
<canvas id="canvas" width=800 height=600">
Looks like this web browser doesn't support the HTML 5 canvas element. :-(<br>
You should get one that does, like Safari 4+, Chrome, Firefox 3+, IE 9+, probably Opera...
</canvas>
""")
print format.footer()