Widget:MoonStack: Difference between revisions

From WyrdeWiki
VisualWikitext
No edit summary
Tag: Reverted
(Undo revision 630 by Nekomusume Daisuki (talk))
Tag: Undo
Line 13: Line 13:
| ''id'' ||   || unique id prefix if you embed multiple widgets on one page ||   || wh
| ''id'' ||   || unique id prefix if you embed multiple widgets on one page ||   || wh
|}
|}
</noinclude><includeonly><content><![CDATA[
</noinclude><includeonly>
  <div class="wh-moonstack" style="max-width:{size}px;margin:1rem 0;">
<div class="wh-moonstack" style="max-width:<!--{$size|default:512|escape:'html'}-->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;">
  <label for="<!--{$id|default:'wh'|escape:'html'}-->-x">
      <strong>When:</strong>
    <strong>Alignment step:</strong>
      <span id="wh-cycles">0</span> Cycles,
    <span id="<!--{$id|default:'wh'|escape:'html'}-->-xval">1</span> / 6433
      <span id="wh-days">1</span> days
  </label>
    </div>
  <input id="<!--{$id|default:'wh'|escape:'html'}-->-x" type="range" min="1" max="6433" value="1" style="width:100%;">


    <div id="wh-stage"
  <div style="margin:.5rem 0;">
        style="position:relative;width:{size}px;height:{size}px;isolation:isolate;border:1px solid #333;background:#000;overflow:hidden;">
    <strong>When:</strong>
      <img id="wh-base"
    <span id="<!--{$id|default:'wh'|escape:'html'}-->-cycles">0</span> Cycles,
          src="{basePath}WyrdeHaven_center.png"
    <span id="<!--{$id|default:'wh'|escape:'html'}-->-days">1</span> days
          alt="WyrdeHaven base"
  </div>
          style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;"
          loading="lazy" decoding="async"/>


      <img id="wh-tiriel"
  <div id="<!--{$id|default:'wh'|escape:'html'}-->-stage"
          src=""
      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;">
          alt="Tiriel"
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-base"
          style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;"
        src="<!--{$basePath|default:'/images/moons/'|escape:'html'}-->WyrdeHaven_center.png"
          loading="lazy" decoding="async"/>
        alt="WyrdeHaven base"
 
        style="position:absolute;inset:0;object-fit:contain;z-index:1;"/>
      <img id="wh-rhaen"
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-tiriel" src="" alt="Tiriel"
          src=""
        style="position:absolute;inset:0;object-fit:contain;z-index:2;"/>
          alt="Rhaen"
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-rhaen" src="" alt="Rhaen"
          style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3;"
        style="position:absolute;inset:0;object-fit:contain;z-index:3;"/>
          loading="lazy" decoding="async"/>
    <img id="<!--{$id|default:'wh'|escape:'html'}-->-veyra" src="" alt="Veyra"
 
        style="position:absolute;inset:0;object-fit:contain;z-index:4;"/>
      <img id="wh-veyra"
          src=""
          alt="Veyra"
          style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:4;"
          loading="lazy" decoding="async"/>
    </div>
   </div>
   </div>
</div>


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

Revision as of 14:05, 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=631"
Last modified
This page was last edited on 10 November 2025, at 14:05.