You Win!

\n \n

\n\n \n

No More Moves

No valid moves remain. Start a new game?

\n \n

\n\n \n\n\n",["D",1784049163896],"branchVersion","label",[18],"pulls","branches",1,"forks","envVars",{"_186":26,"_188":26},"connections",{"_186":26,"_187":26},"count","unfilledCount","emptyCount",{"_35":224,"_13":225,"_65":226,"_45":-5,"_37":38,"_175":180,"_198":109,"_39":227,"_41":26,"_67":21,"_172":228,"_68":24,"_176":-5,"_201":229,"_17":230},{"_35":216,"_13":217,"_65":218,"_45":-5,"_37":38,"_175":135,"_198":109,"_39":219,"_41":89,"_67":220,"_172":221,"_68":24,"_176":-5,"_201":222,"_17":223},{"_35":171,"_13":18,"_65":66,"_45":-5,"_37":38,"_175":89,"_198":109,"_39":213,"_41":42,"_67":21,"_172":173,"_68":24,"_176":-5,"_201":214,"_17":215},{"_35":204,"_13":205,"_65":107,"_45":-5,"_37":38,"_175":206,"_198":109,"_39":207,"_41":180,"_67":208,"_172":209,"_68":24,"_176":210,"_201":211,"_17":212},{"_35":194,"_13":195,"_65":196,"_45":-5,"_37":38,"_175":197,"_198":109,"_39":199,"_41":180,"_67":21,"_172":200,"_68":24,"_176":-5,"_201":202,"_17":203},"dbe1624d-5f12-457d-8ad5-4bf77d184e58","style.css","e8f9d0d4-7fa5-11f1-b0bb-1607ee4eb77e",16,"latest",["D",1784049166938],"/* ===== Classic Windows Solitaire Styles ===== */\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n font-family: \"Segoe UI\", Tahoma, sans-serif;\n background: #008001;\n overflow: hidden;\n user-select: none;\n -webkit-user-select: none;\n}\n\n#game-container {\n display: flex;\n flex-direction: column;\n height: 100vh;\n}\n\n/* Top bar */\n#top-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #c0c0c0;\n border-bottom: 2px solid #808080;\n padding: 4px 8px;\n gap: 12px;\n flex-shrink: 0;\n}\n\n#menu, #stats {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n#game-select {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n#game-select label { font-size: 13px; }\n\n#game-select select {\n font-size: 13px;\n padding: 2px 4px;\n border: 1px solid #808080;\n background: #fff;\n}\n\n.menu-btn {\n padding: 3px 12px;\n font-size: 13px;\n border: 1px solid #808080;\n background: #c0c0c0;\n cursor: pointer;\n}\n\n.menu-btn:hover:not(:disabled) { background: #d0d0d0; }\n.menu-btn:active:not(:disabled) { background: #a0a0a0; }\n.menu-btn:disabled { color: #808080; cursor: default; }\n\n#stats span { font-size: 13px; white-space: nowrap; }\n\n/* Board */\n#board {\n flex: 1;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n overflow: auto;\n}\n\n/* Card dimensions */\n:root {\n --card-w: 78px;\n --card-h: 108px;\n --card-radius: 6px;\n --tab-offset-up: 24px;\n --tab-offset-down: 12px;\n --pile-gap: 14px;\n}\n\n/* Pile row */\n.pile-row {\n display: flex;\n gap: var(--pile-gap);\n align-items: flex-start;\n}\n\n/* Spacer to align tableau columns */\n.spacer {\n width: var(--card-w);\n flex-shrink: 0;\n}\n\n/* Pile (drop zone) */\n.pile {\n width: var(--card-w);\n flex-shrink: 0;\n position: relative;\n min-height: var(--card-h);\n}\n\n.pile-slot {\n width: var(--card-w);\n height: var(--card-h);\n border: 2px dashed rgba(255,255,255,0.25);\n border-radius: var(--card-radius);\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n color: rgba(255,255,255,0.15);\n}\n\n.pile.drop-target .pile-slot,\n.pile.drop-target .card:last-child {\n box-shadow: 0 0 0 3px #ffd700, 0 0 12px rgba(255,215,0,0.6);\n border-radius: var(--card-radius);\n}\n\n/* Foundation slot icons */\n.foundation-slot { font-size: 32px; }\n\n/* Cards */\n.card {\n width: var(--card-w);\n height: var(--card-h);\n border-radius: var(--card-radius);\n position: absolute;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n box-shadow: 0 1px 3px rgba(0,0,0,0.35);\n display: flex;\n flex-direction: column;\n padding: 4px 6px;\n font-size: 16px;\n line-height: 1;\n}\n\n.card.dragging { opacity: 0.4; }\n\n.card.face-down {\n background: repeating-linear-gradient(\n 45deg, #1a3a8a, #1a3a8a 4px, #1e4296 4px, #1e4296 8px\n );\n border: 1px solid #0d2868;\n cursor: pointer;\n}\n\n.card.face-down::after {\n content: \"\";\n position: absolute;\n top: 4px; left: 4px; right: 4px; bottom: 4px;\n border: 2px solid rgba(255,255,255,0.3);\n border-radius: 3px;\n background: repeating-linear-gradient(\n -45deg, transparent, transparent 6px,\n rgba(255,255,255,0.08) 6px, rgba(255,255,255,0.08) 12px\n );\n}\n\n.card.face-up {\n background: #fff;\n border: 1px solid #333;\n}\n\n.card.red { color: #d40000; }\n.card.black { color: #000; }\n\n.card .corner {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-weight: bold;\n}\n\n.card .corner-top { align-self: flex-start; }\n.card .corner-bottom {\n align-self: flex-end;\n transform: rotate(180deg);\n position: absolute;\n bottom: 4px;\n right: 6px;\n}\n\n.card .suit-large {\n font-size: 36px;\n align-self: center;\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.card .rank-text { font-size: 14px; }\n.card .suit-text { font-size: 12px; }\n\n/* Highlight selected card */\n.card.selected {\n box-shadow: 0 0 0 3px #ffd700, 0 0 12px rgba(255,215,0,0.6);\n transform: translateY(-4px);\n}\n\n.card.hint-glow {\n animation: hintPulse 0.8s ease-in-out 3;\n}\n\n@keyframes hintPulse {\n 0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.35); }\n 50% { box-shadow: 0 0 0 3px #ff6600, 0 0 16px rgba(255,102,0,0.7); }\n}\n\n/* Win overlay */\n#win-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.6);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n\n#win-overlay.hidden { display: none; }\n\n#win-message {\n background: #c0c0c0;\n border: 2px outset #fff;\n padding: 24px 40px;\n text-align: center;\n box-shadow: 4px 4px 16px rgba(0,0,0,0.5);\n}\n\n#win-message h1 { font-size: 28px; margin-bottom: 8px; }\n#win-message p { font-size: 16px; margin-bottom: 16px; }\n\n/* Game over overlay */\n#gameover-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.6);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n\n#gameover-overlay.hidden { display: none; }\n\n#gameover-message {\n background: #c0c0c0;\n border: 2px outset #fff;\n padding: 24px 40px;\n text-align: center;\n box-shadow: 4px 4px 16px rgba(0,0,0,0.5);\n}\n\n#gameover-message h1 { font-size: 28px; margin-bottom: 8px; }\n#gameover-message p { font-size: 16px; margin-bottom: 4px; }\n\n/* Confetti card animations on win */\n@keyframes flyCard {\n 0% { transform: translate(0,0) rotate(0deg); }\n 100% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }\n}\n\n.confetti-card {\n position: fixed;\n z-index: 99;\n pointer-events: none;\n animation: flyCard 2s ease-out forwards;\n}\n","children",[],[195],"23019e07-0c5e-406d-a87a-0c5ee3f62f97","main.ts",12,["D",1784048747193],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer();\n","solitaire-game",[],[205],["D",1784049163896],[],[18],"9c826add-2664-4fe9-8841-fcad98a2e773","game.js","1b34902a-7fa6-11f1-af65-1607ee4eb77e",["D",1784049289369],"script","// ===== Solitaire Game Engine =====\n// Supports Klondike and Freecell\n\nconst SUITS = [\"♠\", \"♥\", \"♦\", \"♣\"];\nconst RANKS = [\"A\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\", \"J\", \"Q\", \"K\"];\nconst RANK_VALUES = { A: 1, \"2\": 2, \"3\": 3, \"4\": 4, \"5\": 5, \"6\": 6, \"7\": 7, \"8\": 8, \"9\": 9, \"10\": 10, J: 11, Q: 12, K: 13 };\nconst RED_SUITS = new Set([\"♥\", \"♦\"]);\n\nlet mode = \"klondike\";\nlet state = null;\nlet history = [];\nlet selected = null;\nlet moves = 0;\nlet score = 0;\nlet startTime = null;\nlet timerInterval = null;\nlet won = false;\nlet gameOver = false;\n\nfunction makeCard(suit, rank) {\n return {\n suit, rank,\n value: RANK_VALUES[rank],\n color: RED_SUITS.has(suit) ? \"red\" : \"black\",\n faceUp: false,\n id: `${rank}${suit}-${Math.random().toString(36).slice(2, 8)}`,\n };\n}\n\nfunction makeDeck() {\n const deck = [];\n for (const s of SUITS) for (const r of RANKS) deck.push(makeCard(s, r));\n for (let i = deck.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [deck[i], deck[j]] = [deck[j], deck[i]];\n }\n return deck;\n}\n\nfunction newGame(gameMode) {\n mode = gameMode || mode;\n history = [];\n selected = null;\n moves = 0;\n score = 0;\n won = false;\n gameOver = false;\n hideWin();\n hideGameOver();\n\n const deck = makeDeck();\n\n if (mode === \"klondike\") {\n state = {\n tableau: [[], [], [], [], [], [], []],\n foundations: [[], [], [], []],\n stock: [],\n waste: [],\n };\n for (let col = 0; col < 7; col++) {\n for (let i = 0; i <= col; i++) {\n const card = deck.pop();\n card.faceUp = i === col;\n state.tableau[col].push(card);\n }\n }\n state.stock = deck;\n } else if (mode === \"freecell\") {\n state = {\n tableau: [[], [], [], [], [], [], [], []],\n foundations: [[], [], [], []],\n freecells: [null, null, null, null],\n };\n for (let i = 0; i < deck.length; i++) {\n const col = i % 8;\n deck[i].faceUp = true;\n state.tableau[col].push(deck[i]);\n }\n }\n\n startTimer();\n render();\n}\n\nfunction startTimer() {\n startTime = Date.now();\n if (timerInterval) clearInterval(timerInterval);\n timerInterval = setInterval(updateTimer, 1000);\n}\n\nfunction stopTimer() {\n if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }\n}\n\nfunction updateTimer() {\n if (!startTime || won) return;\n const sec = Math.floor((Date.now() - startTime) / 1000);\n const m = Math.floor(sec / 60);\n const s = sec % 60;\n document.getElementById(\"timer\").textContent = `Time: ${m}:${s.toString().padStart(2, \"0\")}`;\n}\n\nfunction saveState() {\n history.push(JSON.parse(JSON.stringify({ state, moves, score })));\n if (history.length > 100) history.shift();\n}\n\nfunction undo() {\n if (!history.length) return;\n const prev = history.pop();\n state = prev.state;\n moves = prev.moves;\n score = prev.score;\n selected = null;\n if (gameOver) {\n gameOver = false;\n hideGameOver();\n startTimer();\n }\n render();\n}\n\n// --- Move validation ---\nfunction canMoveToFoundation(cards, fIdx) {\n if (cards.length !== 1) return false;\n const card = cards[0];\n const f = state.foundations[fIdx];\n if (f.length === 0) return card.rank === \"A\";\n const top = f[f.length - 1];\n return card.suit === top.suit && card.value === top.value + 1;\n}\n\nfunction canMoveToTableau(cards, destCol) {\n if (cards.length === 0) return false;\n const card = cards[0];\n const col = state.tableau[destCol];\n\n if (mode === \"klondike\") {\n if (col.length === 0) return card.rank === \"K\";\n const top = col[col.length - 1];\n return top.faceUp && card.color !== top.color && card.value === top.value - 1;\n } else {\n if (col.length === 0) return canSupermove(cards.length, -1, destCol);\n const top = col[col.length - 1];\n if (card.color !== top.color || card.value !== top.value - 1) return false;\n return canSupermove(cards.length, -1, destCol);\n }\n}\n\nfunction canSupermove(numCards, sourceCol, destCol) {\n let freeCells = state.freecells.filter(c => c === null).length;\n let emptyCols = 0;\n for (let i = 0; i < state.tableau.length; i++) {\n if (state.tableau[i].length === 0 && i !== sourceCol && i !== destCol) emptyCols++;\n }\n const maxMove = (freeCells + 1) * Math.pow(2, emptyCols);\n return numCards <= maxMove;\n}\n\nfunction canMoveToFreecell(cards, cellIdx) {\n return cards.length === 1 && state.freecells[cellIdx] === null;\n}\n\nfunction getMovableCards(source, index) {\n if (source.type === \"tableau\") {\n const col = state.tableau[source.col];\n const cards = col.slice(index);\n if (cards.length === 0 || !cards[0].faceUp) return [];\n for (let i = 1; i < cards.length; i++) {\n if (cards[i].color === cards[i-1].color || cards[i].value !== cards[i-1].value - 1) return [];\n }\n return cards;\n } else if (source.type === \"waste\") {\n return state.waste.length > 0 ? [state.waste[state.waste.length - 1]] : [];\n } else if (source.type === \"freecell\") {\n return state.freecells[source.cell] ? [state.freecells[source.cell]] : [];\n } else if (source.type === \"foundation\") {\n const f = state.foundations[source.col];\n return f.length > 0 ? [f[f.length - 1]] : [];\n }\n return [];\n}\n\nfunction executeMove(source, cardIndex, dest) {\n saveState();\n let cards;\n if (source.type === \"tableau\") {\n cards = state.tableau[source.col].splice(cardIndex);\n } else if (source.type === \"waste\") {\n cards = [state.waste.pop()];\n } else if (source.type === \"freecell\") {\n cards = [state.freecells[source.cell]];\n state.freecells[source.cell] = null;\n } else if (source.type === \"foundation\") {\n cards = [state.foundations[source.col].pop()];\n }\n\n if (dest.type === \"tableau\") {\n state.tableau[dest.col].push(...cards);\n } else if (dest.type === \"foundation\") {\n state.foundations[dest.col].push(...cards);\n score += 10;\n } else if (dest.type === \"freecell\") {\n state.freecells[dest.cell] = cards[0];\n }\n\n if (source.type === \"tableau\" && mode === \"klondike\") {\n const col = state.tableau[source.col];\n if (col.length > 0 && !col[col.length - 1].faceUp) {\n col[col.length - 1].faceUp = true;\n score += 5;\n }\n }\n\n moves++;\n selected = null;\n checkWin();\n if (!won) autoMoveToFoundations();\n if (!won) checkGameOver();\n render();\n}\n\nfunction drawFromStock() {\n saveState();\n if (state.stock.length > 0) {\n const card = state.stock.pop();\n card.faceUp = true;\n state.waste.push(card);\n } else if (state.waste.length > 0) {\n while (state.waste.length > 0) {\n const card = state.waste.pop();\n card.faceUp = false;\n state.stock.push(card);\n }\n score = Math.max(0, score - 20);\n }\n moves++;\n selected = null;\n render();\n checkGameOver();\n}\n\nfunction tryAutoToFoundation(source, cardIndex) {\n const cards = getMovableCards(source, cardIndex || 0);\n if (cards.length !== 1) return false;\n for (let i = 0; i < 4; i++) {\n if (canMoveToFoundation(cards, i)) {\n executeMove(source, cardIndex || (source.type === \"tableau\" ? state.tableau[source.col].length - 1 : 0), { type: \"foundation\", col: i });\n return true;\n }\n }\n return false;\n}\n\n// --- Auto-move to foundations ---\nfunction autoMoveToFoundations() {\n let moved = false;\n let attempts = 0;\n do {\n moved = false;\n attempts++;\n const sources = [];\n\n for (let c = 0; c < state.tableau.length; c++) {\n const col = state.tableau[c];\n if (col.length > 0 && col[col.length - 1].faceUp) {\n sources.push({ type: \"tableau\", col: c, index: col.length - 1 });\n }\n }\n if (mode === \"klondike\" && state.waste.length > 0) {\n sources.push({ type: \"waste\", index: 0 });\n }\n if (mode === \"freecell\") {\n for (let i = 0; i < 4; i++) {\n if (state.freecells[i]) sources.push({ type: \"freecell\", cell: i, index: 0 });\n }\n }\n\n for (const src of sources) {\n const cards = getMovableCards(src, src.index);\n if (cards.length !== 1) continue;\n if (isSafeAutoMove(cards[0])) {\n for (let f = 0; f < 4; f++) {\n if (canMoveToFoundation(cards, f)) {\n if (src.type === \"tableau\") state.tableau[src.col].pop();\n else if (src.type === \"waste\") state.waste.pop();\n else if (src.type === \"freecell\") state.freecells[src.cell] = null;\n state.foundations[f].push(cards[0]);\n score += 10;\n moves++;\n if (src.type === \"tableau\" && mode === \"klondike\") {\n const col = state.tableau[src.col];\n if (col.length > 0 && !col[col.length - 1].faceUp) {\n col[col.length - 1].faceUp = true;\n score += 5;\n }\n }\n moved = true;\n break;\n }\n }\n }\n if (moved) break;\n }\n } while (moved && attempts < 60);\n}\n\nfunction isSafeAutoMove(card) {\n if (card.value <= 2) return true;\n const oppositeColor = card.color === \"red\" ? \"black\" : \"red\";\n let minOpposite = 99;\n for (let i = 0; i < 4; i++) {\n const f = state.foundations[i];\n if (f.length > 0) {\n const topCard = f[f.length - 1];\n const isOpp = (RED_SUITS.has(topCard.suit) ? \"red\" : \"black\") === oppositeColor;\n if (isOpp) minOpposite = Math.min(minOpposite, topCard.value);\n }\n }\n minOpposite = minOpposite === 99 ? 0 : minOpposite;\n return card.value - 1 <= minOpposite;\n}\n\n// --- Win detection ---\nfunction checkWin() {\n const total = state.foundations.reduce((s, f) => s + f.length, 0);\n if (total === 52) {\n won = true;\n stopTimer();\n showWin();\n }\n}\n\nfunction showWin() {\n const sec = Math.floor((Date.now() - startTime) / 1000);\n const m = Math.floor(sec / 60);\n const s = sec % 60;\n document.getElementById(\"win-stats\").textContent =\n `${moves} moves in ${m}:${s.toString().padStart(2, \"0\")} — Score: ${score}`;\n document.getElementById(\"win-overlay\").classList.remove(\"hidden\");\n launchConfetti();\n}\n\nfunction hideWin() {\n document.getElementById(\"win-overlay\").classList.add(\"hidden\");\n}\n\nfunction launchConfetti() {\n const cards = document.querySelectorAll(\"#board .card\");\n cards.forEach((el, i) => {\n setTimeout(() => {\n const clone = el.cloneNode(true);\n clone.classList.add(\"confetti-card\");\n const rect = el.getBoundingClientRect();\n clone.style.left = rect.left + \"px\";\n clone.style.top = rect.top + \"px\";\n clone.style.setProperty(\"--fx\", (Math.random() * 800 - 400) + \"px\");\n clone.style.setProperty(\"--fy\", (Math.random() * 600 + 100) + \"px\");\n clone.style.setProperty(\"--fr\", (Math.random() * 720 - 360) + \"deg\");\n document.body.appendChild(clone);\n setTimeout(() => clone.remove(), 2000);\n }, i * 15);\n });\n}\n\n// --- Game over detection ---\nfunction checkGameOver() {\n if (won || gameOver) return;\n\n // In Klondike, if stock has cards the player can always draw\n if (mode === \"klondike\" && state.stock.length > 0) return;\n\n // Check standard moves (tableau + waste top)\n if (findHint() !== null) return;\n\n // In Klondike with empty stock, also check deeper waste cards:\n // recycling the waste re-exposes them in the same order, so any\n // card that could land on the current tableau/foundation means\n // the game is not yet stuck.\n if (mode === \"klondike\") {\n for (let i = 0; i < state.waste.length; i++) {\n const card = state.waste[i];\n // Skip the top card — already checked by findHint\n if (i === state.waste.length - 1) continue;\n // Could this card go to a foundation?\n for (let f = 0; f < 4; f++) {\n if (canMoveToFoundation([card], f)) return;\n }\n // Could this card go to a tableau column?\n for (let c = 0; c < state.tableau.length; c++) {\n const col = state.tableau[c];\n if (col.length === 0) {\n if (card.rank === \"K\") return;\n } else {\n const top = col[col.length - 1];\n if (top.faceUp && card.color !== top.color && card.value === top.value - 1) return;\n }\n }\n }\n }\n\n // No valid moves remain\n gameOver = true;\n stopTimer();\n showGameOver();\n}\n\nfunction showGameOver() {\n const sec = Math.floor((Date.now() - startTime) / 1000);\n const m = Math.floor(sec / 60);\n const s = sec % 60;\n const foundations = state.foundations.reduce((sum, f) => sum + f.length, 0);\n document.getElementById(\"gameover-stats\").textContent =\n `${moves} moves in ${m}:${s.toString().padStart(2, \"0\")} — ${foundations}/52 cards completed — Score: ${score}`;\n document.getElementById(\"gameover-overlay\").classList.remove(\"hidden\");\n}\n\nfunction hideGameOver() {\n document.getElementById(\"gameover-overlay\").classList.add(\"hidden\");\n}\n\n// --- Hint ---\nfunction findHint() {\n const sources = [];\n for (let c = 0; c < state.tableau.length; c++) {\n const col = state.tableau[c];\n for (let i = 0; i < col.length; i++) {\n if (col[i].faceUp) sources.push({ type: \"tableau\", col: c, index: i });\n }\n }\n if (mode === \"klondike\" && state.waste.length > 0) {\n sources.push({ type: \"waste\", index: 0 });\n }\n if (mode === \"freecell\") {\n for (let i = 0; i < 4; i++) {\n if (state.freecells[i]) sources.push({ type: \"freecell\", cell: i, index: 0 });\n }\n }\n\n for (const src of sources) {\n const cards = getMovableCards(src, src.index);\n if (cards.length === 1) {\n for (let f = 0; f < 4; f++) {\n if (canMoveToFoundation(cards, f))\n return { src, dest: { type: \"foundation\", col: f }, cards };\n }\n }\n }\n\n for (const src of sources) {\n const cards = getMovableCards(src, src.index);\n if (cards.length === 0) continue;\n for (let c = 0; c < state.tableau.length; c++) {\n if (src.type === \"tableau\" && src.col === c) continue;\n if (canMoveToTableau(cards, c)) {\n if (state.tableau[c].length === 0 && src.type === \"tableau\" && src.index === 0) continue;\n return { src, dest: { type: \"tableau\", col: c }, cards };\n }\n }\n }\n\n if (mode === \"freecell\") {\n for (const src of sources) {\n const cards = getMovableCards(src, src.index);\n if (cards.length === 1) {\n for (let i = 0; i < 4; i++) {\n if (canMoveToFreecell(cards, i))\n return { src, dest: { type: \"freecell\", cell: i }, cards };\n }\n }\n }\n }\n return null;\n}\n\nfunction showHint() {\n const hint = findHint();\n if (!hint) {\n const btn = document.getElementById(\"hint-btn\");\n btn.textContent = \"No moves!\";\n setTimeout(() => { btn.textContent = \"Hint\"; }, 1500);\n return;\n }\n const cardEls = document.querySelectorAll(\".card\");\n for (const el of cardEls) {\n if (el.dataset.id === hint.cards[0].id) {\n el.classList.add(\"hint-glow\");\n setTimeout(() => el.classList.remove(\"hint-glow\"), 2400);\n break;\n }\n }\n const destEls = document.querySelectorAll(\".pile\");\n for (const el of destEls) {\n const destCol = hint.dest.col !== undefined ? hint.dest.col : hint.dest.cell;\n if (el.dataset.type === hint.dest.type && el.dataset.col == destCol) {\n el.classList.add(\"drop-target\");\n setTimeout(() => el.classList.remove(\"drop-target\"), 2400);\n break;\n }\n }\n}\n\n// --- Rendering ---\nfunction render() {\n const board = document.getElementById(\"board\");\n board.innerHTML = \"\";\n document.getElementById(\"moves-count\").textContent = `Moves: ${moves}`;\n document.getElementById(\"score\").textContent = `Score: ${score}`;\n document.getElementById(\"undo-btn\").disabled = history.length === 0;\n\n if (mode === \"klondike\") renderKlondike(board);\n else renderFreecell(board);\n if (won) showWin();\n}\n\nfunction renderKlondike(board) {\n const topRow = document.createElement(\"div\");\n topRow.className = \"pile-row\";\n\n topRow.appendChild(makePile(\"stock\", 0,\n state.stock.length > 0 ? [state.stock[state.stock.length - 1]] : [],\n { showSlot: true, slotText: \"↻\" }));\n\n topRow.appendChild(makePile(\"waste\", 0,\n state.waste.length > 0 ? [state.waste[state.waste.length - 1]] : [],\n { showSlot: true }));\n\n const spacer = document.createElement(\"div\");\n spacer.className = \"spacer\";\n topRow.appendChild(spacer);\n\n const fIcons = [\"♠\", \"♥\", \"♦\", \"♣\"];\n for (let i = 0; i < 4; i++) {\n topRow.appendChild(makePile(\"foundation\", i, state.foundations[i],\n { showSlot: true, slotText: fIcons[i], slotClass: \"foundation-slot\" }));\n }\n board.appendChild(topRow);\n\n const tabRow = document.createElement(\"div\");\n tabRow.className = \"pile-row\";\n for (let i = 0; i < 7; i++) {\n tabRow.appendChild(makePile(\"tableau\", i, state.tableau[i], { stacked: true }));\n }\n board.appendChild(tabRow);\n}\n\nfunction renderFreecell(board) {\n const topRow = document.createElement(\"div\");\n topRow.className = \"pile-row\";\n\n for (let i = 0; i < 4; i++) {\n const cards = state.freecells[i] ? [state.freecells[i]] : [];\n topRow.appendChild(makePile(\"freecell\", i, cards, { showSlot: true, slotText: \"○\" }));\n }\n\n const spacer = document.createElement(\"div\");\n spacer.className = \"spacer\";\n topRow.appendChild(spacer);\n\n const fIcons = [\"♠\", \"♥\", \"♦\", \"♣\"];\n for (let i = 0; i < 4; i++) {\n topRow.appendChild(makePile(\"foundation\", i, state.foundations[i],\n { showSlot: true, slotText: fIcons[i], slotClass: \"foundation-slot\" }));\n }\n board.appendChild(topRow);\n\n const tabRow = document.createElement(\"div\");\n tabRow.className = \"pile-row\";\n for (let i = 0; i < 8; i++) {\n tabRow.appendChild(makePile(\"tableau\", i, state.tableau[i], { stacked: true }));\n }\n board.appendChild(tabRow);\n}\n\nfunction makePile(type, col, cards, opts = {}) {\n const pile = document.createElement(\"div\");\n pile.className = \"pile\";\n pile.dataset.type = type;\n pile.dataset.col = col;\n\n if (opts.showSlot || cards.length === 0) {\n const slot = document.createElement(\"div\");\n slot.className = \"pile-slot\" + (opts.slotClass ? \" \" + opts.slotClass : \"\");\n slot.textContent = opts.slotText || \"\";\n pile.appendChild(slot);\n }\n\n for (let i = 0; i < cards.length; i++) {\n const cardEl = makeCardEl(cards[i]);\n if (opts.stacked) {\n cardEl.style.top = (i * (cards[i].faceUp ? 24 : 12)) + \"px\";\n }\n cardEl.dataset.pileType = type;\n cardEl.dataset.pileCol = col;\n cardEl.dataset.cardIndex = i;\n pile.appendChild(cardEl);\n }\n\n if (opts.stacked && cards.length > 0) {\n const offset = cards.reduce((sum, c, idx) => idx === 0 ? 0 : sum + (c.faceUp ? 24 : 12), 0);\n pile.style.minHeight = (108 + offset) + \"px\";\n }\n return pile;\n}\n\nfunction makeCardEl(card) {\n const el = document.createElement(\"div\");\n el.className = \"card \" + (card.faceUp ? \"face-up \" + card.color : \"face-down\");\n el.dataset.id = card.id;\n\n if (card.faceUp) {\n const ct = document.createElement(\"div\");\n ct.className = \"corner corner-top\";\n ct.innerHTML = `${card.rank}${card.suit}`;\n el.appendChild(ct);\n\n const center = document.createElement(\"div\");\n center.className = \"suit-large\";\n center.textContent = card.suit;\n el.appendChild(center);\n\n const cb = document.createElement(\"div\");\n cb.className = \"corner corner-bottom\";\n cb.innerHTML = `${card.rank}${card.suit}`;\n el.appendChild(cb);\n }\n return el;\n}\n\n// --- Interaction ---\nfunction handleClick(e) {\n if (won || gameOver) return;\n const cardEl = e.target.closest(\".card\");\n const pileEl = e.target.closest(\".pile\");\n\n if (pileEl && pileEl.dataset.type === \"stock\") {\n drawFromStock();\n return;\n }\n\n if (cardEl) {\n const pileType = cardEl.dataset.pileType;\n const pileCol = parseInt(cardEl.dataset.pileCol);\n const cardIndex = parseInt(cardEl.dataset.cardIndex);\n const source = { type: pileType, col: pileCol, cell: pileCol, index: cardIndex };\n\n if (selected) {\n if (selected.source.type === source.type && selected.source.col === source.col && selected.source.index === cardIndex) {\n if (tryAutoToFoundation(selected.source, selected.index)) return;\n selected = null;\n render();\n return;\n }\n tryMoveTo(source);\n return;\n }\n\n const cards = getMovableCards(source, cardIndex);\n if (cards.length > 0) {\n selected = { source, index: cardIndex };\n render();\n highlightSelected();\n }\n return;\n }\n\n if (pileEl) {\n const dest = {\n type: pileEl.dataset.type,\n col: parseInt(pileEl.dataset.col),\n cell: parseInt(pileEl.dataset.col),\n };\n if (selected) tryMoveTo(dest);\n return;\n }\n\n if (selected) { selected = null; render(); }\n}\n\nfunction highlightSelected() {\n if (!selected) return;\n const cards = getMovableCards(selected.source, selected.index);\n for (const card of cards) {\n const els = document.querySelectorAll(`.card[data-id=\"${card.id}\"]`);\n els.forEach(el => el.classList.add(\"selected\"));\n }\n}\n\nfunction tryMoveTo(dest) {\n if (!selected) return;\n const cards = getMovableCards(selected.source, selected.index);\n if (cards.length === 0) { selected = null; render(); return; }\n\n if (selected.source.type === dest.type && selected.source.col === dest.col) {\n selected = null; render(); return;\n }\n\n let canMove = false;\n if (dest.type === \"foundation\") canMove = canMoveToFoundation(cards, dest.col);\n else if (dest.type === \"tableau\") canMove = canMoveToTableau(cards, dest.col);\n else if (dest.type === \"freecell\") canMove = canMoveToFreecell(cards, dest.cell);\n\n if (canMove) {\n executeMove(selected.source, selected.index, dest);\n } else {\n selected = null;\n render();\n }\n}\n\nfunction handleDoubleClick(e) {\n if (won || gameOver) return;\n const cardEl = e.target.closest(\".card\");\n if (!cardEl) return;\n const pileType = cardEl.dataset.pileType;\n const pileCol = parseInt(cardEl.dataset.pileCol);\n const cardIndex = parseInt(cardEl.dataset.cardIndex);\n const source = { type: pileType, col: pileCol, cell: pileCol, index: cardIndex };\n\n let topIndex = cardIndex;\n if (pileType === \"tableau\") topIndex = state.tableau[pileCol].length - 1;\n\n if (tryAutoToFoundation(source, topIndex)) return;\n\n const cards = getMovableCards(source, cardIndex);\n if (cards.length > 0) {\n selected = { source, index: cardIndex };\n render();\n highlightSelected();\n }\n}\n\n// --- Init ---\nfunction init() {\n document.getElementById(\"new-game-btn\").addEventListener(\"click\", () => newGame(mode));\n document.getElementById(\"game-mode\").addEventListener(\"change\", (e) => newGame(e.target.value));\n document.getElementById(\"undo-btn\").addEventListener(\"click\", undo);\n document.getElementById(\"hint-btn\").addEventListener(\"click\", showHint);\n document.getElementById(\"play-again-btn\").addEventListener(\"click\", () => newGame(mode));\n document.getElementById(\"gameover-new-btn\").addEventListener(\"click\", () => newGame(mode));\n\n const board = document.getElementById(\"board\");\n board.addEventListener(\"click\", handleClick);\n board.addEventListener(\"dblclick\", handleDoubleClick);\n\n newGame(\"klondike\");\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", init);\n",[],[217],"189e3c8d-40f9-42db-8411-59a4c29bfe2c","README.md","94a90306-7fa5-11f1-875d-1607ee4eb77e",["D",1784048456547],"# solitaire",[],[225],["D",1784048302368],["D",1789472446807],{"_11":12,"_149":71},{"_11":12,"_144":145,"_70":71,"_30":69,"_146":147,"_148":24},{"_41":135,"_13":16,"_35":38,"_136":96,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":14,"_143":12},"ctx",{"_55":-5,"_168":269,"_270":271,"_272":273,"_274":24,"_275":24,"_276":24,"_277":109,"_278":-5,"_279":-7,"_280":-7,"_281":26,"_282":24,"_283":24,"_284":-5,"_285":24,"_286":24,"_287":24,"_288":-5},"ENV",{"_240":241,"_242":243,"_244":16,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html