Shabdle++: Upgrade your Shabdle (https://kach.github.io/shabdle/) with past puzzles, custom puzzles, random puzzles and static links!

shabdle++.user.js

// ==UserScript==
// @name         Shabdle++
// @namespace    http:/gist.github.com/hrishikeshrt/
// @version      0.3
// @description  Upgrade your Shabdle with past puzzles, custom puzzles, random puzzles and static links!
// @author       You
// @match        https://kach.github.io/shabdle/*
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @downloadURL  https://gist.githubusercontent.com/hrishikeshrt/694cfb91903068eb581c6fe220f382bf/raw/shabdle++.user.js
// @updateURL    https://gist.githubusercontent.com/hrishikeshrt/694cfb91903068eb581c6fe220f382bf/raw/shabdle++.user.js
// @grant        none
// ==/UserScript==
<!-- CSS only -->

(function() {
    'use strict';
    var $, jQuery;
    $ = jQuery = window.jQuery;

    const BASE_URL = "https://kach.github.io/shabdle/";
    const WORD_PARAM = "word";

    // Calculate Hashes
    String.prototype.hash = function() {
        var hash = 0,
            i, chr;
        if (this.length === 0) return hash;
        for (i = 0; i < this.length; i++) {
            chr = this.charCodeAt(i);
            hash = ((hash << 5) - hash) + chr;
            hash |= 0; // Convert to 32bit integer
        }
        return parseInt(hash, 16);
    }

    // Constant objects from parent page
    // constants
    // todays_utc_date, AKSHAR_MATRA, AKSHAR_MATRA, AKSHAR_POORA, AKSHAR_AADHA, dotted_circle, puzzles, wl;
    // variables
    // puzzle, rows
    // functions
    // classify_akshar, add_row

    /* -------------------------------------------------------------------------- */

    const sorted_puzzle_entries = Object.entries(puzzles).sort(function (a, b) {
        var _a = a[0].split("-");
        var _b = b[0].split("-");
        return (_b[0] - _a[0]) || (_b[1] - _a[1]) || (_b[2] - _a[2]);
    });


    /* -------------------------------------------------------------------------- */

    function search_word_by_hash (wordhash) {
        for (const word of wl) {
            if (word.hash() == wordhash) {
                return word;
            }
        }
        return null;
    }

    function render_puzzle_with_word (word) {
        document.getElementById('grid').innerHTML = "";
        // document.getElementById('keyboard').innerHTML = "";
        // make_keyboard();

        if (!wl.includes(word) ) {
            alert("Invalid word");
            return;
        }
        puzzle = [];
        rows = [];
        var row = [];
        var needs_new = false;
        for (var i = 0; i < word.length; i++) {
            var c = classify_akshar(word, i);

            if (i == 0 || (c != AKSHAR_MATRA && needs_new)) {
                if (classify_akshar(word, i - 1) == AKSHAR_POORA) row[row.length - 1] += dotted_circle;
                row.push('');
                puzzle.push({pre: '', post: '', mid: ''});
            }
            if (c == AKSHAR_MATRA) {
                row[row.length - 1] += word.charAt(i);
                if (word.charCodeAt(i) == 0x094d) {
                    puzzle[puzzle.length - 1].pre += word.charAt(i);
                } else {
                    puzzle[puzzle.length - 1].post += word.charAt(i);
                }
            }
            if (c == AKSHAR_AADHA) {
                row[row.length - 1] += word.charAt(i);
                puzzle[puzzle.length - 1].pre += word.charAt(i);
            }
            if (c == AKSHAR_POORA) {
                puzzle[puzzle.length - 1].mid = word.charAt(i);
            }

            if (c == AKSHAR_POORA || (c == AKSHAR_MATRA && word.charCodeAt(i) != 0x094d)) {
                needs_new = true;
            } else {
                needs_new = false;
            }
        }
        add_row();
        $("#static-link").val(`${BASE_URL}?${WORD_PARAM}=${word.hash()}`);
    };

    /* -------------------------------------------------------------------------- */


    const $control_panel = $('<div />', {
        style: 'position:fixed; top: 5px; right: 5px; border: 1px solid silver; border-radius: 5px; padding: 5px;',
        html: [
            'Date: <span id="date-selector-container"></span>',
            '<button style="width:100%; margin-top: 5px;" type="button" id="custom-button">Custom Word</button>',
            '<button style="width:100%; margin-top: 5px;" type="button" id="random-button">Random Word</button>',
            '<input style="box-shadow: 0 0 2px 2px #3d94db;" id="static-link" style="border:none; background:none;" value="" readonly>'
        ].join("<br>")
    })
    $control_panel.prependTo($(document.body));

    $("#static-link").click(function() {
        var input_field = document.getElementById("static-link");
        input_field.select();
        document.execCommand("copy");
    });

    /* -------------------------------------------------------------------------- */

    // Generate Date Selector for Past Puzzles
    const $date_select = $('<select />', {
        id: 'date-selector',
        name: 'date-selector',
        style: 'padding: 5px;',
        on: {
            change: function() {
                render_puzzle_with_word($(this).val());
            }
        }
    });
    $('#date-selector-container').append($date_select);
    var start = false;
    for (const [_date, _word] of sorted_puzzle_entries) {
        if (!start) {
            start = (_date == todays_utc_date);
        }
        if (!start) {
            continue;
        }
        var $option = $('<option />', {
            html: _date,
            value: _word
        });
        $date_select.append($option);
    }

    /* -------------------------------------------------------------------------- */
    // Custom Puzzle

    $('#custom-button').click(function() {
        const word = prompt("Enter Word");
        render_puzzle_with_word(word);
    });

    /* -------------------------------------------------------------------------- */
    // Random Puzzle

    $('#random-button').click(function() {
        const word = wl[Math.floor(Math.random() * wl.length)];
        console.log(word);
        render_puzzle_with_word(word);
    });

    /* -------------------------------------------------------------------------- */

    // Main

    /* -------------------------------------------------------------------------- */
    // Process Parameters

    $(document).ready(function () {
        const parameters_string = location.href.split('?')[1];
        const query_string = new URLSearchParams(parameters_string);

        var todays_word = puzzles[todays_utc_date];
        for (const [name, value] of query_string.entries()) {
            if (name == WORD_PARAM) {
                var hashed_word = search_word_by_hash(value);
                if (hashed_word) {
                    render_puzzle_with_word(hashed_word);
                } else {
                    $("#static-link").val(`${BASE_URL}?${WORD_PARAM}=${todays_word.hash()}`);
                }
            }
        }
        window.search_word_by_hash = search_word_by_hash;
    });

})();