Revision as of 15:30, 10 November 2025

This widget allows you to embed the lunar orbits of WyrdeHaven in your mediaWiki page

Usage

{{#widget:MoonStack | basePath=/images/moons/ | size=512 | id=ms1}}

basePath	Location of image files for the orbits	/images/moons/
size	maximum image size in pixels	512
id	unique id prefix if you embed multiple widgets on one page	wh

@@ Line 15: / Line 15: @@
 </noinclude><includeonly>
 <div class="wh-moonstack" style="max-width:<!--{$size|default:512|escape:'html'}-->px;margin:1rem 0;">
+  <label for="<!--{$id|default:'wh'|escape:'html'}-->-x"><strong>Alignment step:</strong>
+  <span id="<!--{$id|default:'wh'|escape:'html'}-->-xval">1</span> / 6433
+  </label>
-   <label for="<!--{$id|default:'wh'|escape:'html'}-->-x">
+   <div style="display:flex;align-items:center;gap:0.5rem;">
-     <strong>Alignment step:</strong>
+     <input id="<!--{$id|default:'wh'|escape:'html'}-->-x" type="range" min="1" max="6433" value="1" style="flex-grow:1;">
-    <span id="<!--{$id|default:'wh'|escape:'html'}-->-xval">1</span> / 6433
+    <button id="<!--{$id|default:'wh'|escape:'html'}-->-play" style="font-size:1rem;padding:0.2rem 0.5rem;cursor:pointer;">▶</button>
-  </label>
+  </div>
-  <input id="<!--{$id|default:'wh'|escape:'html'}-->-x" type="range" min="1" max="6433" value="1" style="width:100%;">
    <div style="margin:.5rem 0;">
@@ Line 107: / Line 109: @@
    update();
+var playBtn = document.getElementById(ID + "-play");
+var timer = null;
+var playing = false;
+function stepForward(){
+  var v = parseInt(el.x.value, 10);
+  if(v >= 6433) v = 1;
+  else v++;
+  el.x.value = v;
+  update();
+}
+playBtn.addEventListener("click", function(){
+  if(!playing){
+    playing = true;
+    playBtn.textContent = "■";  // stop icon
+    timer = setInterval(stepForward, 200);
+  } else {
+    playing = false;
+    playBtn.textContent = "▶";  // play icon
+    clearInterval(timer);
+    timer = null;
+  }
+});
 })();
 </script></includeonly>