<!DOCTYPE html>
<html lang="en">
    <head>
        <title>roshambo</title>
        <link rel="stylesheet" href="styling.css">
        <script>
            function roshambo() {
                var options = document.getElementsByName("option");
                var chosen = 0;
                var win = 0;
                if (options[0].checked) {
                    chosen = 1;
                } else if (options[1].checked) {
                    chosen = 2;
                } else if (options[2].checked) {
                    chosen = 3;
                }
                
                if (chosen != 0) {
                    const result = Math.floor(Math.random() * 3) + 1;
                    if (result == 1) {
                        const element = document.getElementById("white");
                        element.src = "../rock.jpg";
                        if (chosen == 1) {
                            const test = document.getElementById("win");
                            test.innerHTML = "TIE!"
                        } else if (chosen == 2) {
                            const test = document.getElementById("win");
                            test.innerHTML = "WIN!"
                            win = 1;
                        } else {
                            const test = document.getElementById("win");
                            test.innerHTML = "LOSE!"
                        }
                    } else if (result == 2) {
                        const element = document.getElementById("white");
                        element.src = "../paper.jpg";
                        if (chosen == 1) {
                            const test = document.getElementById("win");
                            test.innerHTML = "LOSE!"
                        } else if (chosen == 2) {
                            const test = document.getElementById("win");
                            test.innerHTML = "TIE!"
                        } else {
                            const test = document.getElementById("win");
                            test.innerHTML = "WIN!"
                            win = 1;
                        }
                    } else {
                        const element = document.getElementById("white");
                        element.src = "../scissors.jpg";
                        if (chosen == 1) {
                            const test = document.getElementById("win");
                            test.innerHTML = "WIN!"
                            win = 1;
                        } else if (chosen == 2) {
                            const test = document.getElementById("win");
                            test.innerHTML = "LOSE!"
                        } else {
                            const test = document.getElementById("win");
                            test.innerHTML = "TIE!"
                        }
                    }
                    changePlay(win);
                }
            }

            function changePlay(win) {
                var button1 = document.getElementById("1");
                var button2 = document.getElementById("2");
                var button3 = document.getElementById("3");
                button1.style.zIndex = "-1";
                if (win == 1) {
                    button3.style.zIndex = "1";
                } else{
                    button2.style.zIndex = "1";
                }
            }

            function change(){
                var button1 = document.getElementById("1");
                var button2 = document.getElementById("2");
                var button3 = document.getElementById("3");
                button1.style.zIndex = "1";
                button3.style.zIndex = "-1";
                button2.style.zIndex = "-1";
            }
        </script>
    </head>
    <body>
        <div class="main-page-layout" style="z-index:-1">
            <h1>Rock Paper Scissors</h1>
            <form method="post" action="/gameMenu" style="text-align:center;margin:auto;width:50%;z-index:1;">
                <input type="submit" value="Return to Game Menu">
            </form>
            <form method="post" action="/databaseDisplay" style="text-align:center;margin:auto;width:50%;z-index:1;">
                <input type="submit" value="View Scoreboard">
            </form>
            <div style="text-align: left;">
                <h3 style="top:-40%">Instructions: </h3>
                <h4 style="font-weight:normal">1. A classic game of rock paper scissors shoot. </h4>
                <h4 style="font-weight:normal">2. Choose which option you would like to throw. </h4>
                <h4 style="font-weight:normal">3. Recieve a point for every match won. </h4>
                <h4 style="font-weight:normal">4. Make sure to hit play again to update total points.</h4>
            </div>
        </div>
        <div style="position:absolute;left:400px;top:120px">
            <div id='block-11' style='padding: 5px;'>
                <img src="../rock.jpg" height = "180px" width = "150px"/>
                <label for='option-11' style=' padding: 5px; font-size: 2.5;'>
                    <input type='radio' name='option' value='Rock' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                    Rock</label>
                <span id='result-11'></span>
            </div>

            <div id='block-12' style='padding: 5px;'>
                <img src="../paper.jpg" height = "180px" width = "150px"/>
                <label for='option-11' style=' padding: 5px; font-size: 2.5;'>
                    <input type='radio' name='option' value='Paper' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                    Paper</label>
                <span id='result-11'></span>
            </div>

            <div id='block-13' style='padding: 5px;'>
                <img src="../scissors.jpg" height = "180px" width = "150px"/>
                <label for='option-11' style=' padding: 5px; font-size: 2.5;'>
                    <input type='radio' name='option' value='Scissors' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                    Scissors</label>                    
                    <span id='result-11'></span>
            </div>
        </div>

        <img id="white" src="../grey.jpg" height = "180px" width = "150px" style="position: absolute;left:950px;top:315px"/>

        <input type = "submit" onclick="roshambo()" value = "     Play      " id ="1" style="position:absolute;left:750px;top:395px;z-index:1;">
        <form method="post" action="/roshambo">
            <input type = "submit" onclick="change()" value = "Play Again" id ="2" style="position:absolute;left:750px;top:395px;z-index:-1;">
        </form>
        <form method="post" action="/roshamboWin">
            <input type="submit" onclick="change()" id="3" value="Play Again" style="position:absolute;left:750px;top:395px;z-index:-1;">
        </form>

        <h1 id="win" style="position: absolute;left:1175px;top:375px"></h1>
    </body>
</html>