life.html

<html>
<title>Life</title>

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>



    

    <p onload="load()">
        <table>
            <tr>
                <th class="buttonbar"><button class="button_life " onclick="plus1_1() ">+1</button></th>
                <th class="buttonbar "><button class="button_life " onclick="plus5_1() ">+5</button></th>
                <th class="buttonbar "><button class="button_life " onclick="plus10_1() ">+10</button></th>
            </tr>
            <tr>
                <td id="id1 " class="lifebar "><button id="11 " class="button_res " onclick="res20_1() "> 20</button></td>
                <td id="id2 " class="lifebar "><button id="21 " class="lifedisplay " onclick="display_2() "><span id="life1 "></span></button></td>
                <td id="id3 " class="lifebar "><button id="31 " class="button_res " onclick="res40_1() "><span id="res40inf_1 ">40</button></td>
            </tr>
            <tr>
                <td class="buttonbar "><button class="button_life " onclick="minus1_1() ">- 1</button></td>
                <td class="buttonbar "><button class="button_life " onclick="minus5_1() "> - 5</button></td>
                <td class="buttonbar "><button class="button_life " onclick="minus10_1() "> - 10</button></td>
            </tr>
            <tr>
                <td class="buttonbar "><button class="button_life " onclick="plus1_2() ">+1</button></td>
                <td class="buttonbar "><button class="button_life " onclick="plus5_2() ">+5</button></td>
                <td class="buttonbar "><button class="button_life " onclick="plus10_2() ">+10</button></td>
            </tr>
            <tr>
                <td id="id4 " class="lifebar "><button id="12 " class="button_res " onclick="res20_2() ">20</span></button></td>
                <td id="id5 " class="lifebar "><button id="22 " class="lifedisplay " onclick="display_2() "><span id="life2 "></span></button></td>
                <td id="id6 " class="lifebar "><button id="32 " class="button_res " onclick="res40_2() ">40</button></td>
            </tr>
            <tr>
                <td class="buttonbar "><button class="button_life " onclick="minus1_2() ">- 1</button></td>
                <td class="buttonbar "><button class="button_life " onclick="minus5_2() ">- 5</button></td>
                <td class="buttonbar "><button class="button_life " onclick="minus10_2() ">- 10</button></td>
            </tr>

        </table>

        <button onclick="window.location.href='start.html' ; " class="back ">Zurück</button>


    </p>
    <script>
        var temp = 0;
        var v1 = 1;
        var v5 = 5;
        var v10 = 10;
        var v20 = 20;
        var v40 = 40;
        var lifex = 20;
        var lifey = 20;
        var ähm = 1;
        document.getElementById("life1 ").textContent = lifex;
        document.getElementById("life2 ").textContent = lifey;
        document.getElementById("res20inf_1 ").textContent = " ";
        document.getElementById("res40inf_1 ").textContent = " ";
        document.getElementById("res20inf_2 ").textContent = " ";
        document.getElementById("res40inf_2 ").textContent = " ";

        //Reset Life to 20
        function res20_1() {
            if (lifex < 1) {
                document.getElementById("life1 ").textContent = "20 ";
                document.getElementById("life2 ").textContent = "20 ";
                lifex = v20;
                lifey = v20;
                resstyle();
            }
        }

        //Reset Life to 40
        function res40_1() {
            if (lifex < 1) {
                document.getElementById("life1 ").textContent = "40 ";
                document.getElementById("life2 ").textContent = "40 ";
                lifex = v40;
                lifey = v40;
                resstyle();
            }
        }

        //Reset Life to 20
        function res20_2() {
            if (lifey < 1) {
                document.getElementById("life1 ").textContent = "20 ";
                document.getElementById("life2 ").textContent = "20 ";
                lifex = v20;
                lifey = v20;
                resstyle();
            }
        }

        //Reset Life to 40
        function res40_2() {
            if (lifey < 1) {
                document.getElementById("life1 ").textContent = "40 ";
                document.getElementById("life2 ").textContent = "40 ";
                lifex = v40;
                lifey = v40;
                resstyle();
            }
        }

        //Plus 1 at Life 1
        function plus1_1() {
            temp = lifex;
            lifex = temp + v1;
            document.getElementById("life1 ").textContent = lifex;
            //Start Style
            stylefunction();
        }

        //Plus 5 at Life 1
        function plus5_1() {
            temp = lifex;
            lifex = temp + v5;
            document.getElementById("life1 ").textContent = lifex;
            //Start Style
            stylefunction();
        }

        //Plus 10 at Life 1
        function plus10_1() {
            temp = lifex;
            lifex = temp + v10;
            document.getElementById("life1 ").textContent = lifex;
            //Start Style
            stylefunction();
        }

        //Minus 1 at Life 1
        function minus1_1() {
            temp = lifex;
            lifex = temp - v1;
            document.getElementById("life1 ").textContent = lifex;
            //Start Style
            stylefunction();
        }

        //Minus 5 at Life 1
        function minus5_1() {
            temp = lifex;
            lifex = temp - v5;
            document.getElementById("life1 ").textContent = lifex;
            //Start Style
            stylefunction();
        }

        //Minus 10 at Life 1
        function minus10_1() {
            temp = lifex;
            lifex = temp - v10;
            document.getElementById("life1 ").textContent = lifex;
            //Start Style
            stylefunction();
        }

        function plus1_2() {
            temp = lifey;
            lifey = temp + v1;
            document.getElementById("life2 ").textContent = lifey;
            //Start Style
            stylefunction();
        }

        function plus5_2() {
            temp = lifey;
            lifey = temp + v5;
            document.getElementById("life2 ").textContent = lifey;
            if (lifey > 0) {
                //Start Style
                stylefunction();
            }
        }

        function plus10_2() {
            temp = lifey;
            lifey = temp + v10;
            document.getElementById("life2 ").textContent = lifey;

            //Start Style
            stylefunction();
        }

        //Minus 1 at Life 2
        function minus1_2() {
            temp = lifey;
            lifey = temp - v1;
            document.getElementById("life2 ").textContent = lifey;

            //Start Style
            stylefunction();
        }

        //Minus 5 at Life 2
        function minus5_2() {
            temp = lifey;
            lifey = temp - v5;
            document.getElementById("life2 ").textContent = lifey;

            //Start Style
            stylefunction();
        }

        //Minus 10 at Life 2
        function minus10_2() {
            temp = lifey;
            lifey = temp - v10;
            document.getElementById("life2 ").textContent = lifey;
            //Start Style
            stylefunction();
        }

        //Style update checker
        function stylefunction() {
            if (lifex > 0) {
                //Button color
                document.getElementById("11 ").style.backgroundColor = "#28EDCA "
                document.getElementById("21 ").style.backgroundColor = "#28EDCA "
                document.getElementById("31 ").style.backgroundColor = "#28EDCA "
                    //Text color
                document.getElementById("11 ").style.color = "#28EDCA "
                document.getElementById("31 ").style.color = "#28EDCA "
                    //Table color
                document.getElementById("id1 ").style.backgroundColor = "#28EDCA "
                document.getElementById("id2 ").style.backgroundColor = "#28EDCA "
                document.getElementById("id3 ").style.backgroundColor = "#28EDCA "
                document.getElementById("id3 ").style.borderColor = "#28EDCA "
                document.getElementById("id1 ").style.borderColor = "#28EDCA "
                document.getElementById("id2 ").style.borderColor = "#28EDCA "
            }

            if (lifex < 1) {
                //Button color
                document.getElementById("11 ").style.backgroundColor = "#EB0600 "
                document.getElementById("21 ").style.backgroundColor = "#EB0600 "
                document.getElementById("31 ").style.backgroundColor = "#EB0600 "
                    //Text color
                document.getElementById("11 ").style.color = "white "
                document.getElementById("31 ").style.color = "white "
                    //Table color
                document.getElementById("id1 ").style.backgroundColor = "#EB0600 "
                document.getElementById("id2 ").style.backgroundColor = "#EB0600 "
                document.getElementById("id3 ").style.backgroundColor = "#EB0600 "
                document.getElementById("id3 ").style.borderColor = "#EB0600 "
                document.getElementById("id1 ").style.borderColor = "#EB0600 "
                document.getElementById("id2 ").style.borderColor = "#EB0600 "
            }

            if (lifey > 0) {
                //Button color
                document.getElementById("12 ").style.backgroundColor = "#28EDCA "
                document.getElementById("22 ").style.backgroundColor = "#28EDCA "
                document.getElementById("32 ").style.backgroundColor = "#28EDCA "
                    //Text color
                document.getElementById("12 ").style.color = "#28EDCA "
                document.getElementById("32 ").style.color = "#28EDCA "
                    //Table color
                document.getElementById("id4 ").style.backgroundColor = "#28EDCA "
                document.getElementById("id5 ").style.backgroundColor = "#28EDCA "
                document.getElementById("id6 ").style.backgroundColor = "#28EDCA "
                document.getElementById("id4 ").style.borderColor = "#28EDCA "
                document.getElementById("id5 ").style.borderColor = "#28EDCA "
                document.getElementById("id6 ").style.borderColor = "#28EDCA "
            }

            if (lifey < 1) {
                //Button color
                document.getElementById("12 ").style.backgroundColor = "#EB0600 "
                document.getElementById("22 ").style.backgroundColor = "#EB0600 "
                document.getElementById("32 ").style.backgroundColor = "#EB0600 "
                    //Text color
                document.getElementById("12 ").style.color = "white "
                document.getElementById("32 ").style.color = "white "
                    //Table color
                document.getElementById("id4 ").style.backgroundColor = "#EB0600 "
                document.getElementById("id5 ").style.backgroundColor = "#EB0600 "
                document.getElementById("id6 ").style.backgroundColor = "#EB0600 "
                document.getElementById("id4 ").style.borderColor = "#EB0600 "
                document.getElementById("id5 ").style.borderColor = "#EB0600 "
                document.getElementById("id6 ").style.borderColor = "#EB0600 "
            }

        }

        //Reset Styler
        function resstyle() {
            //Button color
            document.getElementById("11 ").style.backgroundColor = "#28EDCA "
            document.getElementById("21 ").style.backgroundColor = "#28EDCA "
            document.getElementById("31 ").style.backgroundColor = "#28EDCA "
            document.getElementById("12 ").style.backgroundColor = "#28EDCA "
            document.getElementById("22 ").style.backgroundColor = "#28EDCA "
            document.getElementById("32 ").style.backgroundColor = "#28EDCA "
                //Text color
            document.getElementById("11 ").style.color = "#28EDCA "
            document.getElementById("31 ").style.color = "#28EDCA "
            document.getElementById("12 ").style.color = "#28EDCA "
            document.getElementById("32 ").style.color = "#28EDCA "
                //Table color
            document.getElementById("id1 ").style.backgroundColor = "#28EDCA "
            document.getElementById("id2 ").style.backgroundColor = "#28EDCA "
            document.getElementById("id3 ").style.backgroundColor = "#28EDCA "
            document.getElementById("id3 ").style.borderColor = "#28EDCA "
            document.getElementById("id1 ").style.borderColor = "#28EDCA "
            document.getElementById("id2 ").style.borderColor = "#28EDCA "
            document.getElementById("id4 ").style.backgroundColor = "#28EDCA "
            document.getElementById("id5 ").style.backgroundColor = "#28EDCA "
            document.getElementById("id6 ").style.backgroundColor = "#28EDCA "
            document.getElementById("id4 ").style.borderColor = "#28EDCA "
            document.getElementById("id5 ").style.borderColor = "#28EDCA "
            document.getElementById("id6 ").style.borderColor = "#28EDCA "
        }
    </script>
    <style>
        .button_life {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 1cm;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 0px;
            cursor: pointer;
            font-size: 30px;
            font-family: 'Roboto', sans-serif;
        }
        
        .button_res {
            background-color: #28EDCA;
            border: none;
            color: #28EDCA;
            padding: 12.5px 1.85cm;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 0px;
            cursor: pointer;
            font-size: 40px;
            font-family: 'Roboto', sans-serif;
        }
        
        .lifedisplay {
            background-color: #28EDCA;
            border: none;
            color: white;
            padding: 12.5px 1cm;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 0px;
            cursor: pointer;
            font-size: 40px;
            font-family: 'Roboto', sans-serif;
        }
        
        table {
            font-family: 'Roboto', sans-serif;
            border-collapse: collapse;
            text-align: center;
        }
        
        .buttonbar {
            border: 1px solid #4CAF50;
            background-color: #4CAF50;
            width: 201.333;
            height: 68px;
            text-align: center;
        }
        
        .lifebar {
            border: 1px solid #28EDCA;
            text-align: center;
            width: 68px;
            width: 201.333;
            background-color: #28EDCA;
        }
        
        h1 {
            font-size: 40px;
            margin: 0px;
            font-family: 'Roboto', sans-serif;
        }
        
        a {
            font-size: 25px;
            font-family: 'Roboto', sans-serif;
        }
        
        .back {
            background-color: #4CAF50;
            border: none;
            color: white;
            height: 30px;
            width: 100px;
            text-decoration: none;
            font-size: 20px;
            cursor: pointer;
            font-family: 'Roboto', sans-serif;
        }
    </style>

</body>

</html>