<widget xmlns="http://www.w3.org/1999/xhtml">
<parameters> <parameter name="basePath" default="/images/moons/"/> <parameter name="size" default="512"/> </parameters>
<content><![CDATA[
<label for="wh-x">
Alignment step:
1 / 6433
</label>
<input id="wh-x" type="range" min="1" max="6433" value="1"
style="width:100%;">
When:
0 Cycles,
1 days
<img id="wh-base"
src="{basePath}WyrdeHaven_center.png"
alt="WyrdeHaven base"
style="position:absolute;inset:0;object-fit:contain;z-index:1;"/>
<img id="wh-tiriel"
src=""
alt="Tiriel"
style="position:absolute;inset:0;object-fit:contain;z-index:2;"/>
<img id="wh-rhaen"
src=""
alt="Rhaen"
style="position:absolute;inset:0;object-fit:contain;z-index:3;"/>
<img id="wh-veyra"
src=""
alt="Veyra"
style="position:absolute;inset:0;object-fit:contain;z-index:4;"/>
<script type="text/javascript">
(function() {
const BASE = "{basePath}";
const SIZE = {size};
const el = {
x: document.getElementById("wh-x"),
xval: document.getElementById("wh-xval"),
cyc: document.getElementById("wh-cycles"),
days: document.getElementById("wh-days"),
tiriel: document.getElementById("wh-tiriel"),
rhaen: document.getElementById("wh-rhaen"),
veyra: document.getElementById("wh-veyra")
};
function pad2(n) {
return ("0" + n).slice(-2);
}
function update() {
const X = parseInt(el.x.value, 10);
const Y = Math.floor(X / 479);
const Z = X % 479;
const iT = (X - 1) % 12;
const iR = (X - 1) % 32;
const iV = (X - 1) % 67;
el.xval.textContent = X;
el.cyc.textContent = Y;
el.days.textContent = Z;
el.tiriel.src = BASE + "Tiriel_" + pad2(iT) + ".png";
el.rhaen.src = BASE + "Rhaen_" + pad2(iR) + ".png";
el.veyra.src = BASE + "Veyra_" + pad2(iV) + ".png";
}
el.x.addEventListener("input", update);
update();
})();
</script>
]]></content>
</widget>