{% extends 'otree/WaitPage.html' %}
{% block head %}
    <style>
        ul {
            list-style-position: inside;
            padding-left: 0; /* Remove default padding */
        }
        li {
            text-indent: -1em; /* Adjusts the indent of the text */
            padding-left: 1em; /* Adds padding to align with the text above */
        }
    </style>
{% endblock %}
{% block content %}
<div class="container-fluid h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-auto text-center"> <!-- 'text-center' class added here -->
            <p>
                <ul>
                <li>
                    Please wait until all members of your organization have completed the study. <br>
                </li>
                <li>
                    This might take a while depending on the speed of the other members. <br>
                </li>
                <li>
                    For the matching to work, you unfortunately have to <b>stay on this tab.</b> <br>
                </li>
                <li>
                    If your tab has a green circle 🟢, it is active for matching.
                </li>
                <li>
                    If your tab has a yellow circle 🟡, it can not get matched.
                </li>
                <li>
                    Once all members of your organization have completed the study and are matched, you will be directed to your payoff page.<br><br>
                </li>

                </ul>
            <p id="additionalInfo" style="display: none; color: red; font-weight: bold;">
                We are sorry that it takes longer for you to get matched than expected.
                You can either stay on this site until a match is realized (however, you need to stay active on this tab),
                or you can choose to leave the study. In this case, we will still match and pay you as described,
                but you will just receive the payment associated with the outcome and
                you will not receive detailed information about the actual outcome
            </p>
            </p>
            <canvas id="gameCanvas" width="480" height="270" style="border:1px solid #d3d3d3; background-color: #f1f1f1;"></canvas>
            <br>
            <button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)" class="btn btn-primary mt-2">ACCELERATE</button> <!-- 'btn btn-primary mt-2' classes added for styling -->
            <p>Use the ACCELERATE button to stay in the air</p>
            <p>How long can you stay alive?</p>
            <p><i>Sadly your game might get interrupted because the page has to refresh periodically to match you with the other members. </i></p>
        </div>
    </div>
</div>
<script>
    var myGamePiece;
    var myObstacles = [];
    var myScore;

    function startGame() {
        myGamePiece = new component(30, 30, "red", 10, 120);
        myGamePiece.gravity = 0.05;
        myScore = new component("30px", "Consolas", "black", 280, 40, "text");
        myGameArea.start();
    }

    var myGameArea = {
        canvas : document.getElementById("gameCanvas"),
        start : function() {
            this.context = this.canvas.getContext("2d");
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 20);
            window.addEventListener('keydown', function (e) {
                myGameArea.keys = (myGameArea.keys || []);
                myGameArea.keys[e.keyCode] = (e.type == "keydown");
            })
            window.addEventListener('keyup', function (e) {
                myGameArea.keys[e.keyCode] = (e.type == "keydown");
            })
        },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    function component(width, height, color, x, y, type) {
        this.type = type;
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;
        this.x = x;
        this.y = y;
        this.gravity = 0;
        this.gravitySpeed = 0;
        this.update = function() {
            ctx = myGameArea.context;
            if (this.type == "text") {
                ctx.font = this.width + " " + this.height;
                ctx.fillStyle = color;
                ctx.fillText(this.text, this.x, this.y);
            } else {
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }
        this.newPos = function() {
            this.gravitySpeed += this.gravity;
            this.x += this.speedX;
            this.y += this.speedY + this.gravitySpeed;
            this.hitBottom();
        }
        this.hitBottom = function() {
            var rockbottom = myGameArea.canvas.height - this.height;
            if (this.y > rockbottom) {
                this.y = rockbottom;
                this.gravitySpeed = 0;
            }
        }
        this.crashWith = function(otherobj) {
            var myleft = this.x;
            var myright = this.x + (this.width);
            var mytop = this.y;
            var mybottom = this.y + (this.height);
            var otherleft = otherobj.x;
            var otherright = otherobj.x + (otherobj.width);
            var othertop = otherobj.y;
            var otherbottom = otherobj.y + (otherobj.height);
            var crash = true;
            if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
                crash = false;
            }
            return crash;
        }
    }

    function updateGameArea() {
        var x, height, gap, minHeight, maxHeight, minGap, maxGap;
        for (i = 0; i < myObstacles.length; i += 1) {
            if (myGamePiece.crashWith(myObstacles[i])) {
                return;
            }
        }
        myGameArea.clear();
        myGameArea.frameNo += 1;
        if (myGameArea.frameNo == 1 || everyinterval(150)) {
            x = myGameArea.canvas.width;
            minHeight = 20;
            maxHeight = 200;
            height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
            minGap = 50;
            maxGap = 200;
            gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
            myObstacles.push(new component(10, height, "green", x, 0));
            myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
        }
        for (i = 0; i < myObstacles.length; i += 1) {
            myObstacles[i].x += -1;
            myObstacles[i].update();
        }
        myScore.text="SCORE: " + myGameArea.frameNo;
        myScore.update();
        myGamePiece.newPos();
        myGamePiece.update();
    }

    function everyinterval(n) {
        if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
        return false;
    }

    function accelerate(n) {
        if (!myGamePiece) return; // Prevents the function from running before the game starts
        myGamePiece.gravity = n;
    }

    // Start the game when the script is loaded
    startGame();




    // Function to show the hidden text based on the initial time stored
function showAdditionalInfo() {
    var now = new Date().getTime();
    var initialTime = sessionStorage.getItem('initialTime');
    if (!initialTime) {
        sessionStorage.setItem('initialTime', now);
        initialTime = now;
    }
    var elapsedTime = now - initialTime;
    var remainingTime = 6000 - elapsedTime; // 1 minute - elapsed time
    if (remainingTime < 0) {
        // If more than 1 minute has elapsed, show the message
        document.getElementById('additionalInfo').style.display = 'block';
    } else {
        // Otherwise, set a timeout for the remaining time
        setTimeout(function() {
            document.getElementById('additionalInfo').style.display = 'block';
        }, remainingTime);
    }
}

// Run the function on page load
showAdditionalInfo();
</script>
{% endblock %}