129 lines
3.9 KiB
HTML
129 lines
3.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>SpaceTac - Loot Generator Samples</title>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: #111;
|
|
color: #eee;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 22px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
position: relative;
|
|
margin-left: 1em;
|
|
width: 300px;
|
|
}
|
|
|
|
input[type="range"]:after,
|
|
input[type="range"]:before {
|
|
position: absolute;
|
|
top: 20px;
|
|
color: #aaa;
|
|
}
|
|
|
|
input[type="range"]:before {
|
|
left: 0em;
|
|
content: attr(min);
|
|
}
|
|
|
|
input[type="range"]:after {
|
|
right: 0em;
|
|
content: attr(max);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script src="vendor/phaser/phaser.min.js"></script>
|
|
<script src="build.js"></script>
|
|
|
|
<div id="loot">
|
|
<h1>SpaceTac - Loot Generator Samples</h1>
|
|
<select id="template">
|
|
<option value="---">---</option>
|
|
</select>
|
|
<input id="level" type="range" value="1" min="1" max="20" step="1" />
|
|
<button id="refresh" type="button">Refresh</button>
|
|
<div id="result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = function () {
|
|
var generator = new TK.SpaceTac.LootGenerator();
|
|
var result = document.getElementById("result");
|
|
var current_level = 1;
|
|
var current_name = "";
|
|
var qualities = {}
|
|
|
|
qualities[TK.SpaceTac.EquipmentQuality.WEAK] = "#e66";
|
|
qualities[TK.SpaceTac.EquipmentQuality.COMMON] = "#eee";
|
|
qualities[TK.SpaceTac.EquipmentQuality.FINE] = "#669";
|
|
qualities[TK.SpaceTac.EquipmentQuality.PREMIUM] = "#66b";
|
|
qualities[TK.SpaceTac.EquipmentQuality.LEGENDARY] = "#66e";
|
|
|
|
function update() {
|
|
result.innerHTML = "";
|
|
generator.templates.forEach(function (template) {
|
|
if (template.name != current_name) {
|
|
return;
|
|
}
|
|
TK.iterenum(TK.SpaceTac.EquipmentQuality, function (quality) {
|
|
var loot = template.generate(current_level, quality);
|
|
|
|
var block = document.createElement("div");
|
|
block.setAttribute("style", "color:" + qualities[quality]);
|
|
result.appendChild(block);
|
|
|
|
var title = document.createElement("h2");
|
|
title.textContent = loot.getFullName() + " (Price " + loot.price.toString() + ")";
|
|
block.appendChild(title);
|
|
|
|
var description = document.createElement("pre");
|
|
description.textContent = loot.getFullDescription();
|
|
block.appendChild(description);
|
|
});
|
|
});
|
|
}
|
|
|
|
TK.sortedBy(generator.templates, function (template) {
|
|
return template.name;
|
|
}).forEach(function (template) {
|
|
var opt = document.createElement('option');
|
|
opt.value = template.name;
|
|
opt.innerHTML = template.name;
|
|
document.getElementById("template").appendChild(opt);
|
|
});
|
|
|
|
document.getElementById("level").onchange = function () {
|
|
current_level = this.value;
|
|
update();
|
|
}
|
|
document.getElementById("template").onchange = function () {
|
|
current_name = this.value;
|
|
update();
|
|
}
|
|
document.getElementById("refresh").onclick = function () {
|
|
update();
|
|
}
|
|
update();
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html> |