{% extends 'base.html' %}
{% block head %}
<title>Wordle</title>
<script>
    function autotab(current,next,previous)
    {
        if (event.keyCode >= 65 && event.keyCode <= 90 && current.value.length == current.getAttribute("maxlength")) 
        {
            try{
                next.focus()
            }
            catch (error) {
            }
        }
        if (event.keyCode === 8 && current.value === "")
        {
            previous.focus()
        }
    }
</script>  

{% endblock %}

{% block body %}
{% set gamewon = [] %}

    <h1>Wordle</h1>
    <h6>Score: {{ score }}</h6>
    <br>
    {% if gamewon[0] is not defined %}
    <div style="display:inline-block" class="difficulty">
        <a href="/easy" >Easy</a>  
        <a href="/medium" >Medium</a>  
        <a href="/hard" >Hard</a>
    </div>
    {% endif %}

    <br>
    <br>
    <table>
    {% for guess in guesses %}
        <tr>
        {% for g_letter, d_letter in zip(guess, daily_letters) %}
            {% if g_letter == d_letter %}
            <td id="correct">{{ g_letter }}</td>
            {% elif g_letter in daily_letters %}
            <td id="wrongspot">{{ g_letter }}</td>
            {% else %}
            <td id="missing">{{ g_letter }}</td>
            {% endif %}
        {% endfor %}
        </tr>
        {% if guess == daily_letters %}
            {% set _ = gamewon.append(1) %}
        {% endif %}
    {% endfor%}

    {% set count = daily_letters|length + 1 - guesses|length %}
        {% for i in range(count) %}
        <tr>
            {% for letter in daily_letters %}
                <td> </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
    {% if guesses|length < (daily_letters|length + 1) and gamewon[0] != 1 %}
        <form action="/" class="form" autocapitalize="characters" method="POST" name="letters">
            <input type="text" autofocus="autofocus" autocomplete="off" maxlength="1" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter1" onkeydown="autotab(this, document.letters.letter2, this)" required>
            <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter2" onkeydown="autotab(this, document.letters.letter3, document.letters.letter1)" required>
            <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter3" onkeydown="autotab(this, document.letters.letter4, document.letters.letter2)" required>
            <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter4" onkeydown="autotab(this, document.letters.letter5, document.letters.letter3)" required>
            <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter5" onkeydown="autotab(this, document.letters.letter6, document.letters.letter4)" required>
        {% if daily_letters|length == 6 %}   
                <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter6" onkeydown="autotab(this, document.letters.letter7, document.letters.letter5)" required>
        {% endif %}
        {% if daily_letters|length == 7 %}
                <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter6" onkeydown="autotab(this, document.letters.letter7, document.letters.letter5)" required>
                <input type="text" maxlength="1" autocomplete="off" onkeypress="return /[a-zA-Z]/i.test(event.key)" class="letter" id="letter" name="letter7" onkeydown="autotab(this, this, document.letters.letter6)" required>
        {% endif %}
            <br>   
            <br>
            <input type="submit" value="Guess" name="guess" class="button" hidden>
        </form>
        <form class="form" action="/reset">
            <input type="submit" autofocus="autofocus" value="Reset" name="reset" class="button" hidden>
        </form>
    {% endif %}
    {% if gamewon[0] == 1 %}
    <script>
        'use strict';
        window.onload = function() {
        // Globals
        var random = Math.random
            , cos = Math.cos
            , sin = Math.sin
            , PI = Math.PI
            , PI2 = PI * 2
            , timer = undefined
            , frame = undefined
            , confetti = [];

        var particles = 10
            , spread = 40
            , sizeMin = 3
            , sizeMax = 12 - sizeMin
            , eccentricity = 10
            , deviation = 100
            , dxThetaMin = -.1
            , dxThetaMax = -dxThetaMin - dxThetaMin
            , dyMin = .13
            , dyMax = .18
            , dThetaMin = .4
            , dThetaMax = .7 - dThetaMin;

        var colorThemes = [
            function() {
            return color(200 * random()|0, 200 * random()|0, 200 * random()|0);
            }, function() {
            var black = 200 * random()|0; return color(200, black, black);
            }, function() {
            var black = 200 * random()|0; return color(black, 200, black);
            }, function() {
            var black = 200 * random()|0; return color(black, black, 200);
            }, function() {
            return color(200, 100, 200 * random()|0);
            }, function() {
            return color(200 * random()|0, 200, 200);
            }, function() {
            var black = 256 * random()|0; return color(black, black, black);
            }, function() {
            return colorThemes[random() < .5 ? 1 : 2]();
            }, function() {
            return colorThemes[random() < .5 ? 3 : 5]();
            }, function() {
            return colorThemes[random() < .5 ? 2 : 4]();
            }
        ];
        function color(r, g, b) {
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }

        // Cosine interpolation
        function interpolation(a, b, t) {
            return (1-cos(PI*t))/2 * (b-a) + a;
        }

        // Create a 1D Maximal Poisson Disc over [0, 1]
        var radius = 1/eccentricity, radius2 = radius+radius;
        function createPoisson() {
            // domain is the set of points which are still available to pick from
            // D = union{ [d_i, d_i+1] | i is even }
            var domain = [radius, 1-radius], measure = 1-radius2, spline = [0, 1];
            while (measure) {
            var dart = measure * random(), i, l, interval, a, b, c, d;

            // Find where dart lies
            for (i = 0, l = domain.length, measure = 0; i < l; i += 2) {
                a = domain[i], b = domain[i+1], interval = b-a;
                if (dart < measure+interval) {
                spline.push(dart += a-measure);
                break;
                }
                measure += interval;
            }
            c = dart-radius, d = dart+radius;

            // Update the domain
            for (i = domain.length-1; i > 0; i -= 2) {
                l = i-1, a = domain[l], b = domain[i];
                // c---d          c---d  Do nothing
                //   c-----d  c-----d    Move interior
                //   c--------------d    Delete interval
                //         c--d          Split interval
                //       a------b
                if (a >= c && a < d)
                if (b > d) domain[l] = d; // Move interior (Left case)
                else domain.splice(l, 2); // Delete interval
                else if (a < c && b > c)
                if (b <= d) domain[i] = c; // Move interior (Right case)
                else domain.splice(i, 0, c, d); // Split interval
            }

            // Re-measure the domain
            for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
                measure += domain[i+1]-domain[i];
            }

            return spline.sort();
        }

        // Create the overarching container
        var container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.top      = '0';
        container.style.left     = '0';
        container.style.width    = '100%';
        container.style.height   = '0';
        container.style.overflow = 'visible';
        container.style.zIndex   = '9999';

        // Confetto constructor
        function Confetto(theme) {
            this.frame = 0;
            this.outer = document.createElement('div');
            this.inner = document.createElement('div');
            this.outer.appendChild(this.inner);

            var outerStyle = this.outer.style, innerStyle = this.inner.style;
            outerStyle.position = 'absolute';
            outerStyle.width  = (sizeMin + sizeMax * random()) + 'px';
            outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
            innerStyle.width  = '100%';
            innerStyle.height = '100%';
            innerStyle.backgroundColor = theme();

            outerStyle.perspective = '50px';
            outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
            this.axis = 'rotate3D(' +
            cos(360 * random()) + ',' +
            cos(360 * random()) + ',0,';
            this.theta = 360 * random();
            this.dTheta = dThetaMin + dThetaMax * random();
            innerStyle.transform = this.axis + this.theta + 'deg)';

            this.x = window.innerWidth * random();
            this.y = -deviation;
            this.dx = sin(dxThetaMin + dxThetaMax * random());
            this.dy = dyMin + dyMax * random();
            outerStyle.left = this.x + 'px';
            outerStyle.top  = this.y + 'px';

            // Create the periodic spline
            this.splineX = createPoisson();
            this.splineY = [];
            for (var i = 1, l = this.splineX.length-1; i < l; ++i)
            this.splineY[i] = deviation * random();
            this.splineY[0] = this.splineY[l] = deviation * random();

            this.update = function(height, delta) {
            this.frame += delta;
            this.x += this.dx * delta;
            this.y += this.dy * delta;
            this.theta += this.dTheta * delta;

            // Compute spline and convert to polar
            var phi = this.frame % 7777 / 7777, i = 0, j = 1;
            while (phi >= this.splineX[j]) i = j++;
            var rho = interpolation(
                this.splineY[i],
                this.splineY[j],
                (phi-this.splineX[i]) / (this.splineX[j]-this.splineX[i])
            );
            phi *= PI2;

            outerStyle.left = this.x + rho * cos(phi) + 'px';
            outerStyle.top  = this.y + rho * sin(phi) + 'px';
            innerStyle.transform = this.axis + this.theta + 'deg)';
            return this.y > height+deviation;
            };
        }

        function poof() {
            if (!frame) {
            // Append the container
            document.body.appendChild(container);

            // Add confetti
            var theme = colorThemes[0]
                , count = 0;
            (function addConfetto() {
                var confetto = new Confetto(theme);
                confetti.push(confetto);
                container.appendChild(confetto.outer);
                timer = setTimeout(addConfetto, spread * random());
            })(0);

            // Start the loop
            var prev = undefined;
            requestAnimationFrame(function loop(timestamp) {
                var delta = prev ? timestamp - prev : 0;
                prev = timestamp;
                var height = window.innerHeight;

                for (var i = confetti.length-1; i >= 0; --i) {
                if (confetti[i].update(height, delta)) {
                    container.removeChild(confetti[i].outer);
                    confetti.splice(i, 1);
                }
                }

                if (timer || confetti.length)
                return frame = requestAnimationFrame(loop);

                // Cleanup
                document.body.removeChild(container);
                frame = undefined;
            });
            }
        }

        poof();
        };
    </script>
    <br>
    <h2>Well done!</h2> 
    <form class="form" action="/nextword">
        <input type="submit" autofocus="autofocus" value="Next Word" name="Next Word" class="button">
    </form>
    {% endif %}
    {% if guesses|length == (word_len + 1) and gamewon[0] != 1 %}
        <br>
        <h2>Bad luck!</h2> 
        <h4>The word was {{ daily_word }}</h4>
        <form class="form" action="/reset">
            <input type="submit" autofocus="autofocus" value="Reset" name="reset" class="button">
        </form>
    {% endif %}
    {% if guesses|length != (word_len + 1) and gamewon[0] != 1 %}
    <br>   

    {% set all_letters = [] %}
    {% for guess in guesses %}
        {% for i in guess %}
        {% if i not in all_letters %}
            {{ all_letters.append(i)|default("", True) }}
        {% endif %}
        {% endfor %}
    {% endfor %}
    
    <div class="keyboard-base" id="keyboard-base">
        {% if "Q" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}Q</div>
        {% if "W" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}W</div>
        {% if "E" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}E</div>
        {% if "R" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}R</div>
        {% if "T" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}T</div>
        {% if "Y" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}Y</div>
        {% if "U" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}U</div>
        {% if "I" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}I</div>
        {% if "O" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}O</div>
        {% if "P" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}P</div>
        <br>
        {% if "A" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}A</div>
        {% if "S" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}S</div>
        {% if "D" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}D</div>
        {% if "F" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}F</div>
        {% if "G" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}G</div>
        {% if "H" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}H</div>
        {% if "J" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}J</div>
        {% if "K" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}K</div>
        {% if "L" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}L</div>
        <br>
        <div class="key-enter" >↵</div>
        {% if "Z" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}Z</div>
        {% if "X" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}X</div>
        {% if "C" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}C</div>
        {% if "V" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}V</div>
        {% if "B" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}B</div>
        {% if "N" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}N</div>
        {% if "M" in all_letters %}<div class="key" id="missing"> {% else %} <div class="key"> {% endif %}M</div>
        <div class="key-bs">⌫</div> 
        {# ⌫ #}
    </div>
    {% endif %}
    <div id="keyboard-base" hidden></div>
    <script>
        function lightmode() {
            document.body.classList.toggle("light-mode");
            document.querySelector('h1').classList.toggle("light-mode");
            document.querySelector('h2').classList.toggle("light-mode");
            document.querySelector('h4').classList.toggle("light-mode");
            document.querySelector('h6').classList.toggle("light-mode");
            
            const nodeList = document.querySelectorAll('a');
            for (let i = 0; i < nodeList.length; i++) {
                nodeList[i].classList.toggle("light-mode");
            }
            const nodeList2 = document.querySelectorAll('td');
            for (let i = 0; i < nodeList2.length; i++) {
                nodeList2[i].classList.toggle("light-mode");
            }
            document.getElementById('keyboard-base').classList.toggle("light-mode");
        }
    </script>

    <div class="container">
        <div class="switch">
            <label for="toggle">
                <input id="toggle" class="toggle-switch" type="checkbox" onclick="lightmode()">
                <div class="sun-moon"><div class="dots"></div></div>
                <div class="background"><div class="stars1"></div><div class="stars2"></div></div>
                <div class="fill"></div>
            </label>
        </div>
    </div>
    <h2 hidden></h2>
    <h4 hidden></h4>
{% endblock %}