253 lines
6.8 KiB
HTML
253 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script type='text/javascript' src='hashr.js'></script>
|
|
<script type='text/javascript'>
|
|
var name = "";
|
|
var role = "";
|
|
var gold = 0;
|
|
var death = "";
|
|
var deaths = ["","","",""];
|
|
var year = new Date().getFullYear();
|
|
|
|
var edit = false;
|
|
var rowmap = [ "6", "7", "8", "9", "10", "11", "12" ];
|
|
var target = 0;
|
|
function getSelectedText() {
|
|
var text = "";
|
|
if (typeof window.getSelection != "undefined") {
|
|
text = window.getSelection().toString();
|
|
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
|
|
text = document.selection.createRange().text;
|
|
}
|
|
return text;
|
|
}
|
|
function handleClick(e) {
|
|
if (edit) return;
|
|
if (rowmap.indexOf(e.target.className) !== -1) {
|
|
target = e.target;
|
|
value = "";
|
|
switch(target.className) {
|
|
case "6": // name
|
|
value = name;
|
|
break;
|
|
case "7": // gold
|
|
value = gold;
|
|
break;
|
|
case "8": // death str 1
|
|
value = deaths[0];
|
|
break;
|
|
case "9": // death str 1
|
|
value = deaths[1];
|
|
break;
|
|
case "10": // death str 1
|
|
value = deaths[2];
|
|
break;
|
|
case "11": // death str 1
|
|
value = deaths[3];
|
|
break;
|
|
case "12": // year
|
|
value = year;
|
|
break;
|
|
}
|
|
editor.style.left = e.clientX+"px";
|
|
editor.style.top = e.clientY+"px";
|
|
editor.value = value;
|
|
edit = true;
|
|
document.body.appendChild(editor);
|
|
setTimeout(function() { editor.focus();}, 1);
|
|
}
|
|
}
|
|
var editor = document.createElement('input');
|
|
editor.style.position = 'absolute';
|
|
editor.addEventListener('keyup', function(e) {
|
|
if (e.keyCode == 13) {
|
|
editor.onchange({target: editor});
|
|
outrip();
|
|
}
|
|
});
|
|
editor.onchange = function(e) {
|
|
if (!target) return;
|
|
if (e.target.value > 16) {
|
|
e.target.value = e.target.value.substr(0, 16);
|
|
}
|
|
switch(target.className) {
|
|
case "6": // name
|
|
name = e.target.value;
|
|
break;
|
|
case "7": // gold
|
|
gold = parseInt(e.target.value);
|
|
break;
|
|
case "8": // death str 1
|
|
deaths[0] = e.target.value;
|
|
break;
|
|
case "9": // death str 1
|
|
deaths[1] = e.target.value;
|
|
break;
|
|
case "10": // death str 1
|
|
deaths[2] = e.target.value;
|
|
break;
|
|
case "11": // death str 1
|
|
deaths[3] = e.target.value;
|
|
break;
|
|
case "12": // year
|
|
year = e.target.value;
|
|
break;
|
|
}
|
|
}
|
|
editor.addEventListener('blur', function(e) {
|
|
editor.parentNode.removeChild(editor);
|
|
edit = false;
|
|
outrip();
|
|
});
|
|
var properEditor = document.createElement('div');
|
|
properEditor.addEventListener('blur', function(e) {
|
|
edit = false;
|
|
outrip();
|
|
});
|
|
properEditor.className = 'editor';
|
|
var fields = ["name","gold","death0","death-1","death-2","death-3","death-4","year","role","area","depth","points","moves","level","hp"];
|
|
for (var i = 0; i < fields.length; i++) {
|
|
var label = document.createElement('label');
|
|
label.innerHTML = fields[i];
|
|
label.for = fields[i];
|
|
var field = document.createElement('input');
|
|
field.name = fields[i];
|
|
field.addEventListener('change', function(editor) {
|
|
});
|
|
}
|
|
function pad(str, cols) {
|
|
while(str.length < cols) {
|
|
str = (str.length%2 ? "" : " ") + str + (str.length%2 ? " " : "");
|
|
}
|
|
return str;
|
|
}
|
|
function split(str, cols) {
|
|
var strs = [];
|
|
while(str.length > 1) {
|
|
var pos = str.substring(0, cols).lastIndexOf(' ');
|
|
pos = pos <= 0 ? cols : pos;
|
|
strs.push(str.substring(0, pos));
|
|
var i = str.indexOf(' ', pos)+1;
|
|
if(i < pos || i > pos+cols) i = pos;
|
|
str = str.substring(i);
|
|
}
|
|
strs.push(str);
|
|
return strs;
|
|
}
|
|
function outrip() {
|
|
var out = "";
|
|
while (deaths.length < 4) deaths.push(pad("", 18));
|
|
year = year+"";
|
|
|
|
var rip_txt = [
|
|
" ----------",
|
|
" / \\",
|
|
" / REST \\",
|
|
" / IN \\",
|
|
" / PEACE \\",
|
|
" / \\",
|
|
" |"+pad(name,18)+ "|", /* Name of player */
|
|
" |"+pad(gold+" Au",18)+ "|", /* Amount of $ */
|
|
" |"+pad(deaths[0],18)+"|", /* Type of death */
|
|
" |"+pad(deaths[1],18)+"|", /* . */
|
|
" |"+pad(deaths[2],18)+"|", /* . */
|
|
" |"+pad(deaths[3],18)+"|", /* . */
|
|
" |"+pad(year,18)+ "|", /* Real year of death */
|
|
" *| * * * | *",
|
|
" _________)/\\\\_//(\\/(/\\)/\\//\\/|_)_______"
|
|
];
|
|
out = rip_txt.join('\n');
|
|
out += "\n\n\nGoodbye " + name + " the " + role + "...\n\n";
|
|
out += "You died in The Dungeons of Doom on dungeon level 1 with 70 points\n";
|
|
out += "and "+gold+" pieces of gold, after 242 moves.";
|
|
document.getElementById('rip').innerHTML = (function(lines) {
|
|
for (var i = 24; i >= 0; i--) {
|
|
lines[i] = '<div class="'+i+'">'+(lines[i]?lines[i]:'')+' </div>';
|
|
}
|
|
return lines.join('');
|
|
})(out.split('\n'));
|
|
Hashr.save(JSON.stringify([ name, role, gold, deaths[0], deaths[1], deaths[2], deaths[3], year ]));
|
|
}
|
|
window.onload = function() {
|
|
if (window.location.hash) {
|
|
var data = JSON.parse(Hashr.load());
|
|
console.log(data);
|
|
name = data[0];
|
|
role = data[1];
|
|
gold = data[2];
|
|
deaths[0] = data[3];
|
|
deaths[1] = data[4];
|
|
deaths[2] = data[5];
|
|
deaths[3] = data[6];
|
|
year = data[7];
|
|
} else {
|
|
name = "Kitty"
|
|
, role = "Wizard"
|
|
, gold = 215
|
|
, deaths = split("sweated to death while working out", 17);
|
|
}
|
|
outrip();
|
|
}
|
|
document.ondblclick = handleClick;
|
|
</script>
|
|
<style type='text/css'>
|
|
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
|
|
@font-face {
|
|
font-family: 'Fixed';
|
|
src: url('MISCFS__.TTF');
|
|
}
|
|
html {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
body {
|
|
background: #000;
|
|
}
|
|
#rip {
|
|
color: #a8a8a8;
|
|
font-size: 2.25vw;
|
|
width: 100vw;
|
|
height: 33.3333333333vw;
|
|
font-family: 'Fixed', monospace;
|
|
white-space: pre;
|
|
}
|
|
#rip-editor {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: #999;
|
|
opacity: 0.9;
|
|
width: 100%;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
display: none;
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="rip"></div>
|
|
<div id="rip-editor">
|
|
<label for="field-0">Name:</label> <input name="field-0"></input>
|
|
<label for="field-1">Role:</label> <input name="field-1"></input>
|
|
<label for="field-2">Gold:</label> <input name="field-2"></input>
|
|
<label for="field-3">Death0:</label> <input name="field-3"></input>
|
|
<label for="field-4">Death1:</label> <input name="field-4"></input>
|
|
<label for="field-5">Death2:</label> <input name="field-5"></input>
|
|
<label for="field-6">Death3:</label> <input name="field-6"></input>
|
|
<label for="field-7">Year:</label> <input name="field-7"></input>
|
|
<label for="field-8">Location:</label> <input name="field-8"></input>
|
|
<label for="field-9">Depth:</label> <input name="field-9"></input>
|
|
<label for="field-10">Points:</label> <input name="field-10"></input>
|
|
<label for="field-11">Level:</label> <input name="field-11"></input>
|
|
<label for="field-12">Points:</label> <input name="field-12"></input>
|
|
</div>
|
|
</body>
|
|
</html>
|