109 lines
3.4 KiB
HTML
109 lines
3.4 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Development preview for the technology tree.
|
|
|
|
It mounts the very same TechnologyTreeView the game uses, against the real
|
|
catalogue, so a technology added or rewired in shared/data/technologies.js
|
|
shows up here exactly as it will in the nation panel.
|
|
|
|
Serve the repository root (e.g. the game server, or
|
|
`python3 -m http.server` from the repo root) and open /tools/tech-tree.html.
|
|
Relative paths assume the page stays under client/ and shared/.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Technology tree — preview</title>
|
|
<style>html, body { height: 100%; margin: 0; }</style>
|
|
<link rel="stylesheet" href="../client/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="modal-nation" class="modal">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span>Technology tree — preview</span>
|
|
</div>
|
|
<div class="tab-page active" id="tab-technology">
|
|
<div id="technology-sub" class="modal-sub">
|
|
<label style="cursor:pointer">
|
|
<input type="checkbox" id="tech-preview-testing"> Testing game (Unlock now buttons)
|
|
</label>
|
|
</div>
|
|
<div id="technology-research" class="tech-research"></div>
|
|
<div id="technology-list" class="modal-body tech-tree-body"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../client/vendor/jquery.min.js"></script>
|
|
<script type="module">
|
|
import { TechnologyTreeView } from "../client/js/ui/tech_tree_view.js";
|
|
import { effectNodes } from "../client/js/modals/format.js";
|
|
import { TECHNOLOGIES } from "../shared/data.js";
|
|
|
|
const indexOf = (id) => TECHNOLOGIES.findIndex((t) => t.id === id);
|
|
|
|
// A sample nation so every card state is visible: a few technologies held, one
|
|
// being researched, and repeatable ones at various levels.
|
|
const researched = new Set(
|
|
["renewable_energy", "intelligence_agencies", "industrial_automation", "infantry_weapons", "construction_technology"].map(indexOf)
|
|
);
|
|
const focus = indexOf("quantum_computing");
|
|
const techInfo = {
|
|
focus,
|
|
progress: 6000,
|
|
progressByTech: { [focus]: 6000 },
|
|
repeatCounts: {
|
|
industrial_automation: 4,
|
|
infantry_weapons: 2,
|
|
construction_technology: 10,
|
|
advanced_metallurgy: 1,
|
|
},
|
|
buildings: new Set(),
|
|
testing: false,
|
|
};
|
|
|
|
const tipFor = (index) => {
|
|
const proto = TECHNOLOGIES[index];
|
|
const repeat = techInfo.repeatCounts[proto.id] || 0;
|
|
const level = proto.repeatable ? repeat + 1 : 1;
|
|
const sections = [];
|
|
if (proto.description) {
|
|
sections.push({ label: "Research", cls: "tip-produce", sign: "+", suffix: "", items: [{ text: proto.description }] });
|
|
}
|
|
sections.push({
|
|
label: proto.repeatable ? `Next level (${repeat + 1})` : "Effect",
|
|
cls: "tip-produce",
|
|
sign: "+",
|
|
suffix: "",
|
|
items: [{ node: effectNodes(proto.effects, level) }],
|
|
});
|
|
return sections;
|
|
};
|
|
|
|
const view = new TechnologyTreeView({
|
|
graph: $("#technology-list"),
|
|
strip: $("#technology-research"),
|
|
assetBase: "../client/assets/",
|
|
tipFor,
|
|
onFocusTechnology: (index) => {
|
|
techInfo.focus = index;
|
|
techInfo.progress = techInfo.progressByTech[index] || 0;
|
|
view.refresh({ researched, techInfo });
|
|
},
|
|
onUnlockTechnology: (index) => {
|
|
researched.add(index);
|
|
view.refresh({ researched, techInfo });
|
|
},
|
|
});
|
|
|
|
const draw = () => view.render({ technologies: TECHNOLOGIES, researched, techInfo });
|
|
draw();
|
|
|
|
document.getElementById("tech-preview-testing").addEventListener("change", (event) => {
|
|
techInfo.testing = event.target.checked;
|
|
draw();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|