// ==UserScript== // @name Strands Solver with Letter Details Sidebar // @namespace web.nextbyte.ai // @version 2.7 // @description Extract and display Strands crossword letter details with integrated word solver using DFS algorithm. // @author NextByte // @match https://www.nytimes.com/games/strands* // @match https://*.nytimes.com/games/strands* // @grant GM_xmlhttpRequest // @connect raw.githubusercontent.com // @run-at document-idle // ==/UserScript== (function () { "use strict"; // ======================================== // TRIE (PREFIX TREE) IMPLEMENTATION // ======================================== class TrieNode { constructor() { this.children = new Map(); this.isWord = false; this.word = null; } } class Trie { constructor() { this.root = new TrieNode(); } insert(word) { let node = this.root; for (const char of word) { if (!node.children.has(char)) { node.children.set(char, new TrieNode()); } node = node.children.get(char); } node.isWord = true; node.word = word; } hasPrefix(prefix) { let node = this.root; for (const char of prefix) { if (!node.children.has(char)) { return false; } node = node.children.get(char); } return true; } isWord(word) { let node = this.root; for (const char of word) { if (!node.children.has(char)) { return false; } node = node.children.get(char); } return node.isWord; } bulkInsert(words) { words.forEach((word) => this.insert(word)); } } // ======================================== // DICTIONARY SERVICE // ======================================== class Dictionary { constructor() { this.trie = new Trie(); this.words = []; this.loaded = false; this.loading = false; } async load() { if (this.loaded) return; if (this.loading) { // Wait for existing load to complete while (this.loading) { await new Promise((resolve) => setTimeout(resolve, 100)); } return; } this.loading = true; console.log("Loading dictionary..."); try { const response = await new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: "GET", url: "https://raw.githubusercontent.com/dwyl/english-words/master/words_alpha.txt", onload: resolve, onerror: reject, ontimeout: reject, }); }); const text = response.responseText; const allWords = text.split("\n").map((w) => w.trim().toUpperCase()); // Filter words: 4-20 characters, only alphabetic this.words = allWords.filter( (word) => word.length >= 4 && word.length <= 20 && /^[A-Z]+$/.test(word), ); console.log(`Filtered to ${this.words.length} valid words`); // Build trie const startTime = Date.now(); this.trie.bulkInsert(this.words); const loadTime = Date.now() - startTime; console.log(`Dictionary loaded in ${loadTime}ms`); this.loaded = true; this.loading = false; } catch (error) { console.error("Failed to load dictionary:", error); this.loading = false; throw error; } } hasPrefix(prefix) { return this.trie.hasPrefix(prefix); } isWord(word) { return this.trie.isWord(word); } } // ======================================== // GRID GRAPH // ======================================== class GridGraph { constructor(cells, rows, cols) { this.cells = cells; this.rows = rows; this.cols = cols; this.adjacencyMap = new Map(); this.buildGraph(); } buildGraph() { // 8 directions: N, NE, E, SE, S, SW, W, NW const directions = [ [-1, 0], [-1, 1], [0, 1], [1, 1], [1, 0], [1, -1], [0, -1], [-1, -1], ]; for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { const index = row * this.cols + col; const adjacent = []; for (const [dRow, dCol] of directions) { const newRow = row + dRow; const newCol = col + dCol; if ( newRow >= 0 && newRow < this.rows && newCol >= 0 && newCol < this.cols ) { const adjIndex = newRow * this.cols + newCol; adjacent.push(adjIndex); } } this.adjacencyMap.set(index, adjacent); } } } getAdjacent(index) { return this.adjacencyMap.get(index) || []; } getLetter(index) { return this.cells[index] ? this.cells[index].toUpperCase() : ""; } getPosition(index) { return { row: Math.floor(index / this.cols), col: index % this.cols, }; } } // ======================================== // WORD FINDER (DFS ALGORITHM) // ======================================== class WordFinder { constructor(dictionary, graph, unavailableIndices = new Set()) { this.dictionary = dictionary; this.graph = graph; this.unavailableIndices = unavailableIndices; } findWords(maxWords = 5000, timeoutMs = 30000) { const foundWords = new Map(); const startTime = Date.now(); // Try starting from every available cell for ( let startIndex = 0; startIndex < this.graph.cells.length; startIndex++ ) { if (this.unavailableIndices.has(startIndex)) continue; // Check timeout if (Date.now() - startTime > timeoutMs) { console.warn("Word finder timeout reached"); break; } // Check word limit if (foundWords.size >= maxWords) { console.warn("Max word limit reached"); break; } const visited = new Set(); this.dfs( startIndex, "", [], visited, foundWords, startTime, timeoutMs, maxWords, ); } // Convert to sorted array const results = Array.from(foundWords.values()).sort((a, b) => { if (b.word.length !== a.word.length) { return b.word.length - a.word.length; } return a.word.localeCompare(b.word); }); return results; } dfs( currentIndex, currentWord, currentPath, visited, foundWords, startTime, timeoutMs, maxWords, ) { // Check limits if (Date.now() - startTime > timeoutMs) return; if (foundWords.size >= maxWords) return; // Mark as visited visited.add(currentIndex); // Extend current word const letter = this.graph.getLetter(currentIndex); const newWord = currentWord + letter; const newPath = [...currentPath, currentIndex]; // PRUNING: Early termination if no dictionary words start with this prefix if (!this.dictionary.hasPrefix(newWord)) { visited.delete(currentIndex); return; } // Check if it's a valid word (min length 4) if (newWord.length >= 4 && this.dictionary.isWord(newWord)) { if (!foundWords.has(newWord)) { foundWords.set(newWord, { word: newWord, path: newPath, length: newWord.length, direction: this.classifyDirection(newPath), }); } } // Stop if max length reached if (newWord.length >= 20) { visited.delete(currentIndex); return; } // Explore all adjacent cells const adjacentIndices = this.graph.getAdjacent(currentIndex); for (const adjIndex of adjacentIndices) { if (!visited.has(adjIndex) && !this.unavailableIndices.has(adjIndex)) { this.dfs( adjIndex, newWord, newPath, visited, foundWords, startTime, timeoutMs, maxWords, ); } } // BACKTRACK visited.delete(currentIndex); } classifyDirection(path) { if (path.length < 2) return "single"; const positions = path.map((idx) => this.graph.getPosition(idx)); // Check horizontal (same row) if (positions.every((pos) => pos.row === positions[0].row)) { return "horizontal"; } // Check vertical (same column) if (positions.every((pos) => pos.col === positions[0].col)) { return "vertical"; } // Check diagonal patterns const rowDiff = positions[positions.length - 1].row - positions[0].row; const colDiff = positions[positions.length - 1].col - positions[0].col; if (Math.abs(rowDiff) === Math.abs(colDiff)) { if (rowDiff < 0 && colDiff > 0) return "diagonal-ne"; if (rowDiff > 0 && colDiff > 0) return "diagonal-se"; if (rowDiff > 0 && colDiff < 0) return "diagonal-sw"; if (rowDiff < 0 && colDiff < 0) return "diagonal-nw"; } return "zigzag"; } } // ======================================== // GAME BOARD PARSER // ======================================== class BoardParser { parseBoard() { const board = document.querySelector('[data-testid="strands-board"]'); if (!board) return null; const boardContainer = board.querySelector(".styles-module_board__D_Xt6"); if (!boardContainer) return null; const allElements = boardContainer.querySelectorAll( 'div[id^="letter-"], button[id^="button-"]', ); const cells = []; const unavailable = new Set(); const colorStates = { unused: 0, selected: 0, standard: 0, spangram: 0, }; allElements.forEach((el, idx) => { const letter = el.textContent.trim(); if (!letter) return; cells.push(letter); const style = el.getAttribute("style") || ""; // Determine state if ( style.includes("var(--text-spangram)") || style.includes("var(--bg-spangram)") || style.includes("var(--strands-yellow)") || style.includes("#f8cd05") ) { colorStates.spangram++; unavailable.add(cells.length - 1); // Use cells index, not DOM index } else if ( style.includes("var(--strands-blue)") || style.includes("#aedfee") ) { colorStates.standard++; unavailable.add(cells.length - 1); // Use cells index, not DOM index } else { const parent = el.parentElement; if ( parent && (parent.classList.contains("Pulser-module_selected__b7XsF") || el.classList.contains("styles-module_selected__")) ) { colorStates.selected++; } else { colorStates.unused++; } } }); // Determine grid dimensions // FIXED: Changed multiplier from 0.75 to 1.33 to create taller grid (8 rows x 6 cols typical for Strands) // This fixes the bug where words like "POND" were not being found due to incorrect adjacency mapping const rows = Math.ceil(Math.sqrt(cells.length * 1.33)); const cols = Math.ceil(cells.length / rows); console.log( `Board parsed: ${cells.length} cells, ${rows} rows x ${cols} cols`, ); console.log(`Grid layout: ${rows}x${cols}`); return { cells, rows, cols, unavailable, colorStates, }; } } // ======================================== // SIDEBAR UI // ======================================== class SidebarUI { constructor() { this.dictionary = new Dictionary(); this.parser = new BoardParser(); this.currentWords = []; // Original unfiltered words this.displayedWords = []; // Currently displayed words (may be filtered) this.highlightedPath = null; this.previousUnavailableCount = 0; // Track the count of unavailable letters this.isProcessing = false; // Prevent simultaneous refreshes // Drag state this.isDragging = false; this.dragStartX = 0; this.dragStartY = 0; this.sidebarStartX = 0; this.sidebarStartY = 0; } async init() { this.createSidebar(); await this.dictionary.load(); this.extractAndSolve(); this.setupObserver(); this.setupHighlightPersistence(); // Setup persistence tracking } startDrag(e) { this.isDragging = true; const sidebar = document.getElementById("strands-sidebar"); const rect = sidebar.getBoundingClientRect(); this.dragStartX = e.clientX; this.dragStartY = e.clientY; this.sidebarStartX = rect.left; this.sidebarStartY = rect.top; document.body.style.userSelect = "none"; // Prevent text selection while dragging document.addEventListener("mousemove", this.drag.bind(this)); document.addEventListener("mouseup", this.stopDrag.bind(this)); } drag(e) { if (!this.isDragging) return; const deltaX = e.clientX - this.dragStartX; const deltaY = e.clientY - this.dragStartY; const newX = this.sidebarStartX + deltaX; const newY = this.sidebarStartY + deltaY; const sidebar = document.getElementById("strands-sidebar"); sidebar.style.left = `${newX}px`; sidebar.style.top = `${newY}px`; sidebar.style.right = "auto"; // Remove right positioning when dragging } stopDrag() { this.isDragging = false; document.body.style.userSelect = ""; // Re-enable text selection document.removeEventListener("mousemove", this.drag.bind(this)); document.removeEventListener("mouseup", this.stopDrag.bind(this)); } createSidebar() { const sidebar = document.createElement("div"); sidebar.id = "strands-sidebar"; sidebar.innerHTML = `

Letter Counts

Unused: 0

Selected: 0

Standard: 0

Spangram: 0

Word Solver

Loading dictionary...

Found Words (0)

`; const style = document.createElement("style"); style.textContent = ` #strands-sidebar { position: fixed; top: 20px; left: calc(100vw - 370px); width: 350px; max-height: 90vh; background: white; border: 2px solid #121212; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 10000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; display: flex; flex-direction: column; } #strands-sidebar-header { background: #121212; color: white; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; cursor: move; user-select: none; } #strands-sidebar-header h3 { margin: 0; font-size: 16px; font-weight: 600; } #strands-sidebar-close { background: transparent; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } #strands-sidebar-close:hover { background: rgba(255,255,255,0.1); } #strands-sidebar-content { padding: 16px; overflow-y: auto; flex: 1; } #strands-sidebar-content.collapsed { display: none; } .strands-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e0e0e0; } .strands-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .strands-section h4 { margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #121212; } .count-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .count-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: #f8f8f8; border-radius: 4px; } .count-label { font-size: 12px; color: #666; } .count-value { font-size: 16px; font-weight: 600; color: #121212; } .solver-status { padding: 8px; background: #f0f7ff; border-left: 3px solid #2196F3; border-radius: 4px; font-size: 13px; color: #1976D2; } .solver-status.ready { background: #f1f8f4; border-color: #4CAF50; color: #2E7D32; } .solver-status.error { background: #fff3f3; border-color: #f44336; color: #c62828; } .solver-stats { margin-top: 8px; font-size: 12px; color: #666; } .solver-controls { display: flex; gap: 8px; } .btn-primary, .btn-secondary { flex: 1; padding: 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.2s; } .btn-primary { background: #121212; color: white; } .btn-primary:hover:not(:disabled) { background: #2a2a2a; } .btn-primary:disabled { background: #ccc; cursor: not-allowed; } .btn-secondary { background: #e0e0e0; color: #121212; } .btn-secondary:hover { background: #d0d0d0; } .filter-controls { display: flex; gap: 8px; margin-bottom: 10px; } #word-filter { flex: 1; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; } #length-filter { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; background: white; } .words-display { max-height: 300px; overflow-y: auto; } .word-item { padding: 8px 10px; margin-bottom: 4px; background: #f8f8f8; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s, transform 0.1s; } .word-item:hover { background: #e8e8e8; transform: translateX(-2px); } .word-item.active { background: #d0e8ff; border-left: 3px solid #2196F3; } .word-text { font-weight: 500; color: #121212; } .word-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #666; } .direction-badge { display: inline-block; padding: 2px 6px; background: #e3f2fd; color: #1976d2; border-radius: 3px; font-size: 10px; margin-left: 4px; } /* UPDATED: More subtle highlight styles for grid letters */ .strands-highlight-letter { position: relative; } .strands-highlight-letter::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; border: 2px solid rgba(33, 150, 243, 0.6); border-radius: 50%; pointer-events: none; z-index: 1; background: rgba(33, 150, 243, 0.08); box-shadow: 0 0 8px rgba(33, 150, 243, 0.25); /* Removed animation for more subtle effect */ } `; document.head.appendChild(style); document.body.appendChild(sidebar); // Event listeners const header = document.getElementById("strands-sidebar-header"); header.addEventListener("mousedown", (e) => { // Don't start drag if clicking the close button if (e.target.id === "strands-sidebar-close" || e.target.closest("#strands-sidebar-close")) { return; } this.startDrag(e); }); document .getElementById("strands-sidebar-close") .addEventListener("click", () => this.toggleSidebar()); document .getElementById("solve-button") .addEventListener("click", () => this.extractAndSolve()); document .getElementById("clear-button") .addEventListener("click", () => this.clearWords()); document .getElementById("word-filter") .addEventListener("input", (e) => this.filterWords(e.target.value)); document .getElementById("length-filter") .addEventListener("change", (e) => this.filterByLength(e.target.value)); // Update status when dictionary loads this.dictionary .load() .then(() => { const status = document.getElementById("solver-status"); status.textContent = "Ready to solve!"; status.className = "solver-status ready"; document.getElementById("solve-button").disabled = false; }) .catch((err) => { const status = document.getElementById("solver-status"); status.textContent = "Failed to load dictionary"; status.className = "solver-status error"; }); } toggleSidebar() { const content = document.getElementById("strands-sidebar-content"); const button = document.getElementById("strands-sidebar-close"); if (content.classList.contains("collapsed")) { content.classList.remove("collapsed"); button.textContent = "−"; } else { content.classList.add("collapsed"); button.textContent = "+"; } } // NEW: Update counts only without triggering a solve updateCounts() { const boardData = this.parser.parseBoard(); if (boardData) { document.getElementById("unused-count").textContent = boardData.colorStates.unused; document.getElementById("selected-count").textContent = boardData.colorStates.selected; document.getElementById("standard-count").textContent = boardData.colorStates.standard; document.getElementById("spangram-count").textContent = boardData.colorStates.spangram; } } extractAndSolve() { const boardData = this.parser.parseBoard(); if (!boardData) { console.warn("Could not parse board"); return; } // Update counts document.getElementById("unused-count").textContent = boardData.colorStates.unused; document.getElementById("selected-count").textContent = boardData.colorStates.selected; document.getElementById("standard-count").textContent = boardData.colorStates.standard; document.getElementById("spangram-count").textContent = boardData.colorStates.spangram; // Solve if (!this.dictionary.loaded) { alert("Dictionary still loading, please wait..."); return; } const status = document.getElementById("solver-status"); status.textContent = "Finding words..."; status.className = "solver-status"; setTimeout(() => { try { const startTime = Date.now(); const graph = new GridGraph( boardData.cells, boardData.rows, boardData.cols, ); const finder = new WordFinder( this.dictionary, graph, boardData.unavailable, ); const words = finder.findWords(); const elapsed = Date.now() - startTime; this.currentWords = words; this.displayedWords = words; // Initially, displayed = all words this.displayWords(words); status.textContent = `Found ${words.length} words`; status.className = "solver-status ready"; document.getElementById( "solver-stats", ).textContent = `Computed in ${elapsed}ms (${boardData.rows}x${boardData.cols} grid)`; } catch (error) { console.error("Error finding words:", error); status.textContent = "Error finding words"; status.className = "solver-status error"; } }, 100); } displayWords(words) { const container = document.getElementById("words-display"); const section = document.getElementById("words-section"); const count = document.getElementById("word-count"); // Store the currently displayed words this.displayedWords = words; section.style.display = "block"; count.textContent = words.length; container.innerHTML = words .map( (w, idx) => `

${w.word} ${w.length}L ${w.direction}

`, ) .join(""); // Add click listeners to word items container.querySelectorAll(".word-item").forEach((item) => { item.addEventListener("click", (e) => { const wordIndex = parseInt(item.getAttribute("data-word-index")); this.highlightWord(wordIndex); }); }); } highlightWord(wordIndex) { // FIXED: Use displayedWords instead of currentWords const word = this.displayedWords[wordIndex]; if (!word || !word.path) return; // Clear previous highlights this.clearHighlights(); // Find the board const board = document.querySelector('[data-testid="strands-board"]'); if (!board) return; const boardContainer = board.querySelector(".styles-module_board__D_Xt6"); if (!boardContainer) return; // Get all letter buttons const allButtons = boardContainer.querySelectorAll( 'button[id^="button-"]', ); // Highlight each letter in the path word.path.forEach((cellIndex, pathIndex) => { const button = allButtons[cellIndex]; if (button) { // Add highlight class button.classList.add("strands-highlight-letter"); } }); // Mark this word item as active const container = document.getElementById("words-display"); container.querySelectorAll(".word-item").forEach((item, idx) => { if (idx === wordIndex) { item.classList.add("active"); } else { item.classList.remove("active"); } }); this.highlightedPath = word.path; // Auto-scroll the word item into view const activeItem = container.querySelector(".word-item.active"); if (activeItem) { activeItem.scrollIntoView({ behavior: "smooth", block: "nearest" }); } console.log(`Highlighted word: ${word.word} at indices:`, word.path); } clearHighlights() { // Remove all highlight classes from buttons const board = document.querySelector('[data-testid="strands-board"]'); if (board) { const boardContainer = board.querySelector( ".styles-module_board__D_Xt6", ); if (boardContainer) { const allButtons = boardContainer.querySelectorAll( 'button[id^="button-"]', ); allButtons.forEach((button) => { button.classList.remove("strands-highlight-letter"); }); } } // Remove active state from word items const container = document.getElementById("words-display"); if (container) { container.querySelectorAll(".word-item").forEach((item) => { item.classList.remove("active"); }); } this.highlightedPath = null; } // Setup highlight persistence monitoring setupHighlightPersistence() { // Monitor board changes to check if all highlighted letters have been selected const checkBoard = setInterval(() => { const board = document.querySelector('[data-testid="strands-board"]'); if (board) { clearInterval(checkBoard); const observer = new MutationObserver(() => { // Only check if we have an active highlight if (this.highlightedPath && this.highlightedPath.length > 0) { this.checkHighlightCompletion(); } }); observer.observe(board, { childList: true, subtree: true, attributes: true, attributeFilter: ["style", "class"], }); } }, 500); setTimeout(() => clearInterval(checkBoard), 10000); } // Check if all highlighted letters have been selected/used checkHighlightCompletion() { if (!this.highlightedPath) return; const board = document.querySelector('[data-testid="strands-board"]'); if (!board) return; const boardContainer = board.querySelector(".styles-module_board__D_Xt6"); if (!boardContainer) return; const allButtons = boardContainer.querySelectorAll( 'button[id^="button-"]', ); // Check if all letters in the highlighted path are now "used" (blue or yellow) let allSelected = true; for (const cellIndex of this.highlightedPath) { const button = allButtons[cellIndex]; if (button) { const style = button.getAttribute("style") || ""; const parent = button.parentElement; // Check if this letter has been marked as theme word (blue or yellow) const isThemeWord = style.includes("var(--strands-blue)") || style.includes("#aedfee") || style.includes("var(--text-spangram)") || style.includes("var(--bg-spangram)") || style.includes("var(--strands-yellow)") || style.includes("#f8cd05"); if (!isThemeWord) { allSelected = false; break; } } } // If all letters are selected, clear the highlights if (allSelected) { console.log( "All highlighted letters have been selected - clearing highlights", ); this.clearHighlights(); } } filterWords(query) { const filtered = this.currentWords.filter((w) => w.word.toLowerCase().includes(query.toLowerCase()), ); this.displayWords(filtered); } filterByLength(length) { if (!length) { this.displayWords(this.currentWords); return; } let filtered; if (length === "8+") { filtered = this.currentWords.filter((w) => w.length >= 8); } else { const len = parseInt(length); filtered = this.currentWords.filter((w) => w.length === len); } this.displayWords(filtered); } clearWords() { this.currentWords = []; this.displayedWords = []; this.clearHighlights(); document.getElementById("words-section").style.display = "none"; document.getElementById("word-filter").value = ""; document.getElementById("length-filter").value = ""; } setupObserver() { const checkBoard = setInterval(() => { const board = document.querySelector('[data-testid="strands-board"]'); if (board) { clearInterval(checkBoard); // UPDATED: More responsive observer configuration for real-time updates const observer = new MutationObserver((mutations) => { // Update counts on any board change (this includes selection changes) this.updateCounts(); // Check for theme word completion (blue/yellow) for auto-refresh const boardData = this.parser.parseBoard(); if (boardData) { // Calculate total unavailable (theme words: standard + spangram) const currentUnavailableCount = boardData.colorStates.standard + boardData.colorStates.spangram; // Auto-refresh if a new theme word was found (blue or yellow) // Only trigger if there are words displayed and count increased if ( this.currentWords.length > 0 && currentUnavailableCount > this.previousUnavailableCount && !this.isProcessing ) { console.log( `Theme word detected! Unavailable count: ${this.previousUnavailableCount} -> ${currentUnavailableCount}`, ); // Set processing flag to prevent rapid-fire refreshes this.isProcessing = true; // Wait a moment for the animation to complete, then refresh setTimeout(() => { this.extractAndSolve(); this.isProcessing = false; }, 500); } // Update the tracked count this.previousUnavailableCount = currentUnavailableCount; } }); // UPDATED: Enhanced observer configuration for better real-time tracking observer.observe(board, { childList: true, subtree: true, attributes: true, attributeFilter: ["style", "class"], characterData: false, }); // Initialize the previous unavailable count const initialBoardData = this.parser.parseBoard(); if (initialBoardData) { this.previousUnavailableCount = initialBoardData.colorStates.standard + initialBoardData.colorStates.spangram; } } }, 500); setTimeout(() => clearInterval(checkBoard), 10000); } } // ======================================== // INITIALIZATION // ======================================== function init() { const ui = new SidebarUI(); ui.init(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();