the-grid/index.html at main · aaviator42/the-grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!--
The Grid
v0.2: 2024-01-18
by aaviator42
licence: AGPLv3
-->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow, noarchive">
    <title>The Grid</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            /* overflow: hidden; */
        }

        table {
            border-collapse: collapse;
            width: 100em; /* 100 cells * 1em */
            height: 100em; /* 100 cells * 1em */
            margin: auto;
        }

        td {
            width: 1em;
            height: 1em;
            cursor: pointer;
            border: 1px dotted #333333;
            background-color: black;
        }

        td:hover {
            border: 1px solid pink;
        }
    </style>
</head>

<body>

    <table id="gridTable">
        <tbody></tbody>
    </table>

    <script>
        // Define color sequence
        const colorSequence = ['black', 'white', 'red', 'lime', 'yellow', 'blue', 'magenta', 'cyan'];

        // Variable to track the last click time with default value one second before loading time
        let lastClick = new Date(Date.now() - 1000);

        // Function to fetch data from current.php and update the table
        function updateGrid() {
            const now = new Date();
            const timeDiffInSeconds = (now - lastClick) / 1000;

            // Check if at least one second has passed since the last click
            if (timeDiffInSeconds >= 1) {
                fetch('current.php')
                    .then(response => response.json())
                    .then(data => {
                        const gridTable = document.getElementById('gridTable');
                        const tbody = gridTable.getElementsByTagName('tbody')[0];

                        // Clear existing rows
                        tbody.innerHTML = '';

                        // Create new rows and cells based on the JSON data
                        for (let i = 0; i < data.length; i++) {
                            const row = document.createElement('tr');
                            for (let j = 0; j < data[i].length; j++) {
                                const cell = document.createElement('td');
                                cell.style.backgroundColor = getColor(data[i][j]);

                                // Add click event listener to toggle cell color and update server
                                cell.addEventListener('click', () => {
                                    lastClick = new Date(); // Update lastClick on each click
                                    toggleCellColor(cell, i, j);
                                });

                                // Add right-click event listener to set the cell color to black and update server
                                cell.addEventListener('contextmenu', (event) => {
                                    event.preventDefault();
                                    lastClick = new Date(); // Update lastClick on right-click
                                    setCellColor(cell, i, j, 'black');
                                });

                                row.appendChild(cell);
                            }
                            tbody.appendChild(row);
                        }
                    })
                    .catch(error => console.error('Error fetching data:', error));
            }
        }

        // Function to map values to corresponding colors
        function getColor(value) {
            return colorSequence[value % colorSequence.length];
        }

        // Function to toggle cell color and update server
        function toggleCellColor(cell, row, col) {
            const currentColor = cell.style.backgroundColor;
            const currentIndex = colorSequence.indexOf(currentColor);
            const nextIndex = (currentIndex + 1) % colorSequence.length;
            const nextColor = colorSequence[nextIndex];

            // Update cell color on the client side
            cell.style.backgroundColor = nextColor;

            // Send a GET request to update.php to update server state
            updateServer(row, col, nextIndex);
        }

        // Function to set cell color to black and update server
        function setCellColor(cell, row, col, color) {
            cell.style.backgroundColor = color;

            // Send a GET request to update.php to update server state
            updateServer(row, col, colorSequence.indexOf(color));
        }

        // Function to send a GET request to update.php
        function updateServer(row, col, colorIndex) {
            const url = `update.php?row=${row}&col=${col}&color=${colorIndex}`;
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                })
                .catch(error => console.error('Error updating server:', error));
        }

        // Initial load
        updateGrid();

        // Refresh the grid every 3 seconds (adjust as needed)
        setInterval(updateGrid, 3000);
    </script>

</body>

</html>