<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <title>TPOT Vote Count</title>

    <meta name="description" content="Transcript vote count in TPOT 7">

    <meta name="keywords" content="TPOT, The Power of Two, vote count">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <!-- Built-In Functions for Apps -->

    <script type="text/javascript">

        var localStoragePrefix = "tpot-vote-count-7";

        var lastSave = 0;

        // save to localstorage

        function saveLocal(data) {

            if (Date.now() - lastSave < 1000) {

                return;

            }

            // save to cookie

            let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict";

            cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();

            document.cookie = cookie;

            lastSave = Date.now();

        }



        // load from localstorage

        function loadLocal() {

            var cookiePrefix = localStoragePrefix + "=";

            var cookieStart = document.cookie.indexOf(cookiePrefix);

            if (cookieStart > -1) {

                let cookieEnd = document.cookie.indexOf(";", cookieStart);

                if (cookieEnd == -1) {

                    cookieEnd = document.cookie.length;

                }

                var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);

                return JSON.parse(cookieData);

            }

        }

    </script>



    <script type="text/javascript">

        // App Javascript Goes Here

        $(document).ready(function() {

            // Initialize vote count

            var characters = {

                "Bottle": 0,

                "Marker": 0,

                "Cake": 0,

                "Book": 0,

                "Winner": 0,

                "Ice Cube": 0,

                "Snowball": 0,

                "Bell": 0,

                "Basketball": 0

            };



            // Function to update vote count

            function updateVoteCount(character) {

                characters[character]++;

                saveLocal(characters);

                drawVoteCountChart();

            }



            // Function to draw vote count chart

            function drawVoteCountChart() {

                var canvas = document.getElementById("voteCountChart");

                var ctx = canvas.getContext("2d");

                ctx.clearRect(0, 0, canvas.width, canvas.height);



                var maxVotes = Math.max(...Object.values(characters));

                var barWidth = canvas.width / Object.keys(characters).length;



                for (var i = 0; i < Object.keys(characters).length; i++) {

                    var character = Object.keys(characters)[i];

                    var votes = characters[character];



                    var barHeight = (votes / maxVotes) * canvas.height;

                    var x = i * barWidth;

                    var y = canvas.height - barHeight;



                    ctx.fillStyle = getRandomColor();

                    ctx.fillRect(x, y, barWidth, barHeight);

                }

            }



            // Function to get random color

            function getRandomColor() {

                var letters = "0123456789ABCDEF";

                var color = "#";

                for (var i = 0; i < 6; i++) {

                    color += letters[Math.floor(Math.random() * 16)];

                }

                return color;

            }



            // Load vote count from local storage

            var savedVoteCount = loadLocal();

            if (savedVoteCount) {

                characters = savedVoteCount;

            }



            // Attach click event to vote buttons

            $(".vote-button").on("click", function() {

                var character = $(this).data("character");

                updateVoteCount(character);

            });



            // Draw vote count chart

            drawVoteCountChart();

        });

    </script>

    

    <style>

        /* App CSS Goes Here */

        #voteCountChart {

            width: 100%;

            height: 300px;

            margin-bottom: 20px;

            border: 1px solid #ccc;

        }

    </style>

</head>

<body>

    <div id="main-container" class="container">

        <h1>TPOT 7 Vote Count</h1>

        <canvas id="voteCountChart"></canvas>

        <div>

            <button class="btn btn-primary vote-button" data-character="Bottle">Vote for Bottle</button>

            <button class="btn btn-primary vote-button" data-character="Marker">Vote for Marker</button>

            <button class="btn btn-primary vote-button" data-character="Cake">Vote for Cake</button>

            <button class="btn btn-primary vote-button" data-character="Book">Vote for Book</button>

            <button class="btn btn-primary vote-button" data-character="Winner">Vote for Winner</button>

            <button class="btn btn-primary vote-button" data-character="Ice Cube">Vote for Ice Cube</button>

            <button class="btn btn-primary vote-button" data-character="Snowball">Vote for Snowball</button>

            <button class="btn btn-primary vote-button" data-character="Bell">Vote for Bell</button>

            <button class="btn btn-primary vote-button" data-character="Basketball">Vote for Basketball</button>

        </div>

    </div>

</body>

</html>