Widget:MoonStack: Difference between revisions

From WyrdeWiki
VisualWikitext
No edit summary
No edit summary
Line 3: Line 3:


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


{|
{|
|-
|-
| ''basePath'' ||   || Location of image files for the orbits ||   || /
| ''basePath'' ||   || Location of image files for the orbits ||   || /images/moons/
|-
|-
| ''size'' ||   || maximum image size in pixels ||   || 512
| ''size'' ||   || maximum image size in pixels ||   || 512
|-
| ''id'' ||   || unique id prefix if you embed multiple widgets on one page ||   || wh
|}
|}
</noinclude><includeonly><widget xmlns="http://www.w3.org/1999/xhtml">
</noinclude><includeonly>
 
<div class="wh-moonstack" style="max-width:<!--{$size|default:512|escape:'html'}-->px;margin:1rem 0;">
  <parameters>
    <!-- Base path where the PNGs are stored -->
    <parameter name="basePath" default="/images/moons/"/>
    <!-- Optional width for the visualization -->
    <parameter name="size" default="512"/>
  </parameters>
 
  <content><![CDATA[
    <div class="wh-moonstack" style="max-width:{size}px;margin:1rem 0;">
     
      <label for="wh-x">
        <strong>Alignment step:</strong>
        <span id="wh-xval">1</span> / 6433
      </label>
      <input id="wh-x" type="range" min="1" max="6433" value="1"
            style="width:100%;">
 
      <div style="margin:.5rem 0;">
        <strong>When:</strong>
        <span id="wh-cycles">0</span> Cycles,
        <span id="wh-days">1</span> days
      </div>
 
      <div id="wh-stage"
        style="
          position:relative;
          width:{size}px;
          height:{size}px;
          isolation:isolate;
          border:1px solid #333;
          background:#000;
        ">
       
        <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;"/>
      </div>
 
    </div>
 
    <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";
  <label for="<!--{$id|default:'wh'|escape:'html'}-->-x">
          el.rhaen.src  = BASE + "Rhaen_" + pad2(iR) + ".png";
    <strong>Alignment step:</strong>
          el.veyra.src  = BASE + "Veyra_" + pad2(iV) + ".png";
    <span id="<!--{$id|default:'wh'|escape:'html'}-->-xval">1</span> / 6433
        }
  </label>
  <input id="<!--{$id|default:'wh'|escape:'html'}-->-x" type="range" min="1" max="6433" value="1" style="width:100%;">


        el.x.addEventListener("input", update);
  <div style="margin:.5rem 0;">
        update();
    <strong>When:</strong>
      })();
    <span id="<!--{$id|default:'wh'|escape:'html'}-->-cycles">0</span> Cycles,
    </script>
    <span id="<!--{$id|default:'wh'|escape:'html'}-->-days">1</span> days
  </div>


   ]]></content>
   <div id="<!--{$id|default:'wh'|escape:'html'}-->-stage"
      style="position:relative;width:<!--{$size|default:512|escape:'html'}-->px;height:<!--{$size|default:512|escape:'html'}-->px;isolation:isolate;background:#000;border:1px solid #333;">
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-base"
        src="<!--{$basePath|default:'/images/moons/'|escape:'html'}-->WyrdeHaven_center.png"
        alt="WyrdeHaven base"
        style="position:absolute;inset:0;object-fit:contain;z-index:1;"/>
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-tiriel" src="" alt="Tiriel"
        style="position:absolute;inset:0;object-fit:contain;z-index:2;"/>
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-rhaen"  src="" alt="Rhaen"
        style="position:absolute;inset:0;object-fit:contain;z-index:3;"/>
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-veyra"  src="" alt="Veyra"
        style="position:absolute;inset:0;object-fit:contain;z-index:4;"/>
  </div>
</div>


</widget></includeonly>
<script type="text/javascript">
(function() {
  var ID  = "<!--{$id|default:'wh'|escape:'js'}-->";
  var BASE = "<!--{$basePath|default:'/images/moons/'|escape:'js'}-->";
  function ge(s){return document.getElementById(ID + s);}
  var el = {
    x:    ge("-x"),
    xval: ge("-xval"),
    cyc:  ge("-cycles"),
    day:  ge("-days"),
    t:    ge("-tiriel"),
    r:    ge("-rhaen"),
    v:    ge("-veyra")
  };
  function pad2(n){return ("0"+n).slice(-2);}
  function update(){
    var X = parseInt(el.x.value,10);
    var Y = Math.floor(X/479);
    var Z = X % 479;
    var iT = (X-1) % 12;
    var iR = (X-1) % 32;
    var iV = (X-1) % 67;
    el.xval.textContent = X;
    el.cyc.textContent  = Y;
    el.day.textContent  = Z;
    el.t.src = BASE + "Tiriel_" + pad2(iT) + ".png";
    el.r.src = BASE + "Rhaen_"  + pad2(iR) + ".png";
    el.v.src = BASE + "Veyra_"  + pad2(iV) + ".png";
  }
  el.x.addEventListener("input", update);
  update();
})();
</script></includeonly>

Revision as of 13:06, 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
Retrieved from "https://www.wyrdehavenchronicl.es/wiki/index.php?title=Widget:MoonStack&oldid=627"
Last modified
This page was last edited on 10 November 2025, at 13:06.