|
4 | 4 | <head> |
5 | 5 | <title></title> |
6 | 6 | <style> |
7 | | - body { |
8 | | - display: grid; |
9 | | - grid-template-columns: auto auto; |
10 | | - gap: 1px; |
11 | | - } |
12 | | - |
13 | 7 | #grid-container { |
14 | 8 | display: grid; |
15 | 9 | grid-template-columns: repeat(29, 32px); |
|
60 | 54 | .inactive { |
61 | 55 | opacity: 0.4; |
62 | 56 | } |
63 | | - |
64 | | - .active { |
65 | | - /* margin: 4px; */ |
66 | | - /* outline: 4px green */ |
67 | | - } |
68 | | - |
69 | | - .palette-item { |
70 | | - display: inline-block; |
71 | | - vertical-align: top; |
72 | | - margin: 5px; |
73 | | - } |
74 | | - |
75 | | - .palette-item p { |
76 | | - display: inline-block; |
77 | | - vertical-align: top; |
78 | | - margin: 0 0 0 10px; |
79 | | - /* Add some space between the div and the text */ |
80 | | - font-size: 12px; |
81 | | - font-weight: bold; |
82 | | - color: black; |
83 | | - } |
84 | 57 | </style> |
85 | 58 | </head> |
86 | 59 |
|
87 | 60 | <body> |
88 | 61 | <div id="grid-container"> |
89 | 62 | <!-- Grid will be generated here --> |
90 | 63 | </div> |
91 | | - <div id="palette-container"></div> |
92 | 64 |
|
93 | 65 | <script> |
94 | | - function createPalette(colorData) { |
95 | | - const container = document.getElementById('palette-container'); |
96 | | - |
97 | | - const allColors = colorData.flat() |
98 | | - |
99 | | - const allUniqueColors = [...new Set(allColors.map(pixel => pixel.color))]; |
100 | | - const allUniquePixels = allUniqueColors.map(color => allColors.find(pixel => pixel.color === color)); |
101 | | - |
102 | | - allUniquePixels |
103 | | - .sort((a, b) => a.number - b.number) |
104 | | - .forEach(({ name, number, color }) => { |
105 | | - const colorContainer = document.createElement('div'); |
106 | | - colorContainer.style.display = 'flex' |
107 | | - const colorDiv = document.createElement('div'); |
108 | | - colorDiv.style.backgroundColor = color; |
109 | | - colorDiv.style.width = '32px'; |
110 | | - colorDiv.style.height = '32px'; |
111 | | - colorDiv.style.border = '1px solid black'; |
112 | | - colorDiv.className = 'palette-item'; |
113 | | - const colorDivP = document.createElement('p'); |
114 | | - colorDiv.append(colorDivP); |
115 | | - colorDivP.textContent = number; |
116 | | - |
117 | | - const p = document.createElement('p'); |
118 | | - p.textContent = `${number} ${name}`; |
119 | | - |
120 | | - colorContainer.appendChild(colorDiv); |
121 | | - colorContainer.appendChild(p); |
122 | | - container.appendChild(colorContainer); |
123 | | - }); |
124 | | - } |
125 | | - |
126 | 66 | function createGrid(colorData) { |
127 | 67 | const container = document.getElementById('grid-container'); |
128 | 68 | container.innerHTML = ''; // Clear existing grid |
|
131 | 71 | for (let col = 0; col < 29; col++) { |
132 | 72 | const div = document.createElement('div'); |
133 | 73 |
|
134 | | - const pixel = colorData[row][col]; |
| 74 | + const pixel = colorData[row][col] |
135 | 75 | div.style.backgroundColor = pixel.color; |
136 | 76 |
|
137 | 77 | const p = document.createElement('p'); |
138 | | - p.style.display = 'none'; |
139 | 78 | p.textContent = pixel?.number; |
140 | 79 | div.appendChild(p); |
141 | 80 | container.appendChild(div); |
|
146 | 85 | } |
147 | 86 | } |
148 | 87 | } |
149 | | - |
150 | 88 | // Function to move the selected class |
151 | 89 | function moveSelected(direction) { |
152 | 90 | const grid = document.getElementById('grid-container'); |
|
193 | 131 | } |
194 | 132 |
|
195 | 133 | // Function to read JSON file |
196 | | - async function readJSON(filename) { } |
| 134 | + async function readJSON(filename) { |
| 135 | + } |
| 136 | + |
197 | 137 |
|
198 | 138 | let selectedPValue = ''; |
199 | 139 | function handleSpacebarPress() { |
|
203 | 143 | const selectedColor = selectedDiv.style.backgroundColor; |
204 | 144 |
|
205 | 145 | // First make all divs active |
206 | | - Array.from(grid.children).forEach(div => div.classList.remove('inactive', 'active')); |
| 146 | + Array.from(grid.children).forEach(div => div.classList.remove('inactive')); |
207 | 147 |
|
208 | 148 | if (newSelectedPValue !== selectedPValue) { |
209 | 149 | // Add 'inactive' class to divs not matching the color |
210 | 150 | Array.from(grid.children).forEach(div => { |
211 | 151 | if (div.style.backgroundColor !== selectedColor) { |
212 | 152 | div.classList.add('inactive'); |
213 | | - } else { |
214 | | - div.classList.add('active'); |
215 | | - |
216 | 153 | } |
217 | 154 | }); |
218 | 155 | selectedPValue = newSelectedPValue; |
219 | 156 | } else { |
220 | | - |
221 | | - selectedPValue = ''; |
| 157 | + selectedPValue = '' |
222 | 158 | } |
223 | 159 | } |
224 | 160 |
|
| 161 | + |
225 | 162 | // Event listener for arrow keys |
226 | 163 | document.addEventListener('keydown', function (event) { |
227 | 164 | if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) { |
|
238 | 175 | const load = urlParams.get('t'); |
239 | 176 | url = `https://tinyurl.com/${load.replaceAll("_", "ZZ")}`; |
240 | 177 | } |
241 | | - |
| 178 | + |
242 | 179 | const imageData = await (await fetch(url)).json(); |
243 | 180 | createGrid(imageData); |
244 | | - createPalette(imageData); |
245 | 181 | }); |
246 | 182 |
|
247 | 183 | document.addEventListener('keydown', function (event) { |
248 | 184 | if (event.key === ' ') { |
249 | 185 | handleSpacebarPress(); |
250 | 186 | } |
251 | 187 | }); |
| 188 | + |
252 | 189 | </script> |
253 | 190 | </body> |
254 | 191 |
|
|
0 commit comments