<head></head>
<style>
    .page-content {
        background-image: url('/BinaryWizards/images/binary1.png');
        background-color: #000000;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #78c9ae;
        margin-right: 10px;
        text-align: center;
        line-height: 100px;
        float: left;
        transition: background-color 0.3s ease;
    }
    .box:hover {
        background-color: #5a9c90;
    }
    .container {
        margin-bottom: 50px;
    }
    .numLabels {
        background-color: black;
    }
</style>
<body>
    <div class="numLabels">
        <label class="binaryNum" id="binaryNum"></label>
        <label id="lives"></label>
    </div>
    <div id="container"></div>
    <div class = "table">
    </div>
    <button id="check">Check my answer!</button>
    <label id="rightorwrong"></label>
    <script>
        var assets = {
            players: {
                mario: {
                  src: "/images/platformer/sprites/mario.png",
                  width: 256,
                  height: 256,
                  w: { row: 10, frames: 15 },
                  wa: { row: 11, frames: 15 },
                  wd: { row: 10, frames: 15 },
                  a: { row: 3, frames: 7, idleFrame: { column: 7, frames: 0 } },
                  s: {  },
                  d: { row: 2, frames: 7, idleFrame: { column: 7, frames: 0 } }
                }
            }
        };
        Object.keys(assets).forEach(category => {
            Object.keys(assets[category]).forEach(assetName => {
              assets[category][assetName]['file'] = "/CSAblog2.0" + assets[category][assetName].src;
            });
          });
        var score = 0;
        var answer = 0;
        var lives = 3;
        document.getElementById("lives").innerHTML = "Lives: " + lives;
        const container = document.getElementById("container");
        for (let i = 0; i < 8; i++) {
            const box = document.createElement("div");
            box.classList.add("box");
            box.textContent = "0";
            box.addEventListener("click", function() {
                toggleNumber(box);
            });
            container.appendChild(box);
        }
        check.addEventListener("click", function() {
             if(lives>0) {
                var boxValues = "";
                const boxes = document.querySelectorAll(".box");
                boxes.forEach(box => {
                    boxValues += box.textContent;
                });
                if (parseInt(boxValues)==answer) {
                    document.getElementById("rightorwrong").innerHTML = "Correct!"
                    newNumber();
                    score+=10;
                    console.log(score);
                } else {
                    document.getElementById("rightorwrong").innerHTML = "Incorrect. Try again."
                    lives-=1;
                    document.getElementById("lives").innerHTML = "Lives: " + lives;
                }
            }
            if (lives==0) {
                document.getElementById("rightorwrong").innerHTML = "Game over. your score is: " + score;
                if (score>sessionStorage.getItem("binaryScore")) {
                    sessionStorage.setItem("binaryScore", score);
                }
            }
        });
        function toggleNumber(box) {
            if (box.textContent === "0") {
                box.textContent = "1";
            } else {
                box.textContent = "0";
            }
        }
        function newNumber() {
            fetch("http://localhost:8098/game/binary", {method: 'GET', headers: {'Content-Type':'application/json'}})
            .then(response => { 
                if (!response.ok) {
                    return response.text().then(errorMsg => {
                        alert('Error: ' + errorMsg);
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log(JSON.stringify(data))
                answer = data.numbers[0];
                document.getElementById("binaryNum").innerHTML = "Your number is: " + data.numbers[1]
            })
        }
        newNumber();
    </script>
</body>

package com.nighthawk.spring_portfolio.mvc.binary;

import jakarta.persistence.Id;
import java.util.Random;

public class BinaryGenerate {
    @Id
    public static int[] getBinary() {
        Random rand = new Random();
        double decimal = rand.nextDouble()*255;
        decimal = Math.floor(decimal);
        String binaryString = Long.toBinaryString((long) decimal);
        while (binaryString.length() < 8) {
            binaryString = "0" + binaryString;
        }
        int[] bools = new int[2];
        bools[0] = Integer.parseInt(binaryString);
        bools[1] = (int) decimal;
        return bools;
    };
    private int number;
}


package com.nighthawk.spring_portfolio.mvc.binary;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;

import org.springframework.http.ResponseEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.function.Function;

@RestController
@RequestMapping("/game")
@CrossOrigin({"http://127.0.0.1:4100", "https://sortingminiproject.github.io"})
public class BinaryController {
    @GetMapping("/binary")
    public ResponseEntity<?> getBinary() {
        int[] binary = BinaryGenerate.getBinary();
        var response = new Object() {
            public final int[] numbers = binary;
        };
        return ResponseEntity.ok(response);
    }
}