randomizing

<div id="yomis" hidden>
    <p>
        		<div class="randomJapanese shuffle colorize">{{Expression}}</div>
				{{#Traditional}}
					<div class="randomTraditionalChinese shuffle colorize">{{Traditional}}</div>
				{{/Traditional}}

				{{#Simplified}}
					<div class="randomSimplifiedChinese shuffle colorize">{{Simplified}}</div>
				{{/Simplified}}

        <div id="container"></div>
    </p>
</div>

<script>
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

function setRandomBackgroundColor() {
    const nightMode = document.body.classList.contains("night_mode");
    document.body.style.background = randomHsl(!nightMode);
}

function randomHsl(lightColor) {
    const hue = (Math.random() * 361) | 0;
    const saturation = (50 + (Math.random() * 50)) | 0;
    let lightness = (Math.random() * 35) | 0;
    if (lightColor) {
        lightness += 65;
    }
    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

function colorizeEachChar(element) {
    const text = element.textContent;
    const nightMode = document.body.classList.contains("night_mode");
    const resultArray = [];
    for (const char of text) {
        if (/\S/.test(char)) {
            resultArray.push(
                `<span style="color: ${randomHsl(nightMode)};">${char}</span>`
            );
        } else {
            resultArray.push(" ");
        }
    }
    element.innerHTML = resultArray.join("");
}

setTimeout(() => {
    // Randomize the alignment and size of the text

    const alignments = ["justify","left","center","right","top","bottom","vertical horizontal"];
    const alignmentindex = Math.floor(Math.random()*alignments.length);

    const size = Math.floor(Math.random()*20)+Math.floor(Math.random()*20)+Math.floor(Math.random()*20)+10;

    const yomis = document.getElementById("yomis");
    yomis.style.fontSize = size+"px";
    yomis.style.textAlign = alignments[alignmentindex];

    // Randomize the color of each character

    document.querySelectorAll(".colorize").forEach(colorizeEachChar);

    // Randomize the order of the elements with the "shuffle" class

    const fields = [...document.querySelectorAll(".shuffle")];
    shuffleArray(fields);
    const container = document.getElementById("container");
    fields.forEach((fld, index) => {
        if (index !== 0) {
            container.appendChild(document.createElement("br"));
        }
        container.appendChild(fld);
    });

    // Randomize the background color

    setRandomBackgroundColor();

    // Un-hide the main container

    yomis.hidden = false;
}, 0);
</script>


<script>
   var writingModes = ["horizontal-tb", "vertical-lr"];
   var alignments = ["justify","left","center","right"];
   var randomWritingMode;
   var randomAlignment;

   if(globalThis.onUpdateHook) {
      randomWritingMode = writingModes[Math.floor(Math.random() * writingModes.length)];
      randomAlignment = alignments[Math.floor(Math.random() * alignments.length)];

      document.documentElement.style.setProperty('--writing-mode', randomWritingMode);
      document.documentElement.style.setProperty('--alignment', randomAlignment);
   }
</script>