[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_234":235,"_236":237},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_176":-5,"_20":177,"_22":178,"_179":180,"_181":182,"_25":183,"_24":-5,"_184":-5,"_185":-5,"_186":54,"_187":188,"_189":46,"_190":-5,"_191":-5,"_192":193},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","feb","name","spider-sol","branchName","main","version","path","","project",{"_35":123,"_13":14,"_47":124,"_125":-5,"_126":54,"_127":128,"_129":128,"_130":-5,"_131":-5,"_132":133,"_134":116,"_135":46,"_136":46,"_137":-5,"_138":62,"_139":140,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":146,"_147":146,"_148":149,"_150":149,"_151":149,"_152":146,"_153":146,"_154":155,"_156":157,"_158":159,"_160":54},"tree",[71,72,73],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":69,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_18":70},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_18":64},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","d04ca1a0-48c0-11f0-969b-76b3cceeab13","README.md","fileId","4bd43876-48bf-11f0-87d2-76b3cceeab13","parentId","branchId","c72ab906-48be-11f0-9001-76b3cceeab13","branchVersion",16,"latest",true,"createdAt",["D",1749865341395],1,"fileType","content","# Indonesian Spider Solitaire\n\nA beautiful Spider Solitaire card game with Indonesian cultural themes and imagery.\n\n## Features\n\n- Classic Spider Solitaire gameplay (4-suit deck, easy rules)\n- Indonesian-themed card designs and backgrounds\n- Traditional Indonesian colors and patterns\n- Responsive design for desktop and mobile\n- Score tracking and move counter\n- Timer functionality\n- Undo functionality\n- Hint system with visual feedback\n- Auto-complete sequence detection\n- Modal dismissal (click outside, close button, or ESC key)\n\n## Game Rules\n\nSpider Solitaire is played with two standard 52-card decks (104 cards total) arranged in 10 columns:\n- 6 cards in the first 4 columns (top 5 face down, 1 face up)\n- 5 cards in the last 6 columns (top 4 face down, 1 face up)\n- Remaining cards form the stock pile\n\n**Objective:** Build complete sequences from King to Ace in the same suit.\n\n**Gameplay:**\n- Move cards between columns in descending order (any suit on any suit)\n- Only sequences of the same suit can be moved together\n- Complete sequences (K-Q-J-10-9-8-7-6-5-4-3-2-A) of the same suit are automatically removed\n- Click the stock pile to deal new cards when no moves are available\n- All columns must have at least one card before dealing from stock\n- Game is won when all 8 complete sequences are removed\n\n## Controls\n\n- **Click cards** to select and move them\n- **New Game** - Start a fresh game\n- **Undo** - Reverse the last move\n- **Hint** - Highlight a possible move\n- **Stock Pile** - Deal new cards (10 at once)\n- **ESC key** - Close modal dialogs\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server for serving static files\n├── frontend/\n│ ├── index.html # Main game interface\n│ ├── game.js # Game logic and mechanics\n│ └── style.css # Indonesian-themed styling\n└── README.md\n```\n\n## Indonesian Theme Elements\n\n- **Colors:** Traditional Indonesian colors (red, white, gold, brown)\n- **Patterns:** Batik-inspired card backs and decorative elements\n- **Language:** Indonesian text throughout the interface\n- **Symbols:** Indonesian flag emoji and cultural motifs\n- **Typography:** Clean, readable fonts with Indonesian flair\n- **Background:** Subtle Indonesian cultural gradients\n\n## Technical Features\n\n- **Modal System:** Dismissible game over modal with multiple close methods\n- **Responsive Design:** Works on desktop, tablet, and mobile devices\n- **Error Handling:** Client-side error catching and reporting\n- **Performance:** Optimized card rendering and smooth animations\n- **Accessibility:** Keyboard navigation and screen reader friendly","deleted",false,"label",[37],"643e4672-48bf-11f0-aa3b-76b3cceeab13","frontend","06c7fe14-6830-45ac-b831-6fba656a8af3",3,["D",1749864730616],0,"directory",[58],"51e87b96-48bf-11f0-8b40-76b3cceeab13","backend","d13c113e-bd90-460e-af67-8ada38dd3632",2,["D",1749864699855],[66],{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":110,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_75":111,"_18":112},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":78,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_75":79,"_18":80},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":74,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_75":76,"_18":77},["D",1749865341395],"children",[],[37],["D",1749864730616],[81,82,83],[58],{"_35":100,"_13":101,"_38":102,"_40":59,"_41":42,"_43":103,"_45":46,"_47":104,"_17":105,"_50":106,"_51":107,"_53":54,"_55":-5,"_75":108,"_18":109},{"_35":92,"_13":93,"_38":94,"_40":59,"_41":42,"_43":95,"_45":46,"_47":96,"_17":60,"_50":24,"_51":97,"_53":54,"_55":-5,"_75":98,"_18":99},{"_35":84,"_13":85,"_38":86,"_40":59,"_41":42,"_43":87,"_45":46,"_47":88,"_17":49,"_50":24,"_51":89,"_53":54,"_55":-5,"_75":90,"_18":91},"7a0bf3f4-48c0-11f0-b6c8-76b3cceeab13","style.css","7cc702b0-48bf-11f0-abc5-76b3cceeab13",8,["D",1749865196691],"/* Indonesian Spider Solitaire Styles */\n\n:root {\n --indonesian-red: #ff0000;\n --indonesian-white: #ffffff;\n --indonesian-gold: #ffd700;\n --batik-brown: #8b4513;\n --card-width: 80px;\n --card-height: 112px;\n --card-spacing: 20px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n user-select: none;\n}\n\n/* Game Board Layout */\n.game-board {\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.stock-area {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.stock-pile {\n position: relative;\n transition: transform 0.2s ease;\n}\n\n.stock-pile:hover {\n transform: scale(1.05);\n}\n\n.stock-count {\n position: absolute;\n top: -10px;\n right: -10px;\n background: var(--indonesian-red);\n color: white;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: bold;\n border: 2px solid white;\n}\n\n/* Tableau Layout */\n.tableau {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: 8px;\n margin-bottom: 20px;\n}\n\n.column {\n min-height: 200px;\n position: relative;\n border: 2px dashed rgba(139, 69, 19, 0.3);\n border-radius: 8px;\n padding: 4px;\n transition: background-color 0.2s ease;\n}\n\n.column.drop-target {\n background-color: rgba(255, 215, 0, 0.2);\n border-color: var(--indonesian-gold);\n}\n\n.column.invalid-drop {\n background-color: rgba(255, 0, 0, 0.1);\n border-color: var(--indonesian-red);\n}\n\n/* Card Styles */\n.card {\n width: var(--card-width);\n height: var(--card-height);\n border-radius: 8px;\n position: absolute;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n border: 1px solid #ccc;\n}\n\n.card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n}\n\n.card.dragging {\n transform: rotate(5deg) scale(1.05);\n z-index: 1000;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);\n}\n\n.card.selected {\n border: 2px solid var(--indonesian-gold);\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);\n}\n\n/* Card Back Design */\n.card-back {\n background: linear-gradient(135deg, var(--indonesian-red) 0%, #cc0000 100%);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n}\n\n.batik-pattern {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: \n radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),\n radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),\n radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);\n background-size: 20px 20px, 25px 25px, 15px 15px;\n}\n\n.card-center {\n font-size: 24px;\n z-index: 1;\n position: relative;\n}\n\n/* Card Face Design */\n.card-face {\n background: white;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 6px;\n position: relative;\n}\n\n.card-face.red {\n color: var(--indonesian-red);\n}\n\n.card-face.black {\n color: #333;\n}\n\n.card-rank {\n font-size: 14px;\n font-weight: bold;\n line-height: 1;\n}\n\n.card-suit {\n font-size: 12px;\n line-height: 1;\n}\n\n.card-center-suit {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 32px;\n opacity: 0.8;\n}\n\n.card-bottom {\n transform: rotate(180deg);\n align-self: flex-end;\n}\n\n/* Foundation Area */\n.foundation {\n text-align: center;\n}\n\n#foundation-area {\n min-height: var(--card-height);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.foundation-pile {\n position: relative;\n}\n\n.foundation-pile .card {\n position: relative;\n}\n\n/* Modal Styles */\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n}\n\n.modal.hidden {\n display: none;\n}\n\n.modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n cursor: pointer;\n}\n\n.modal-content {\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n max-width: 400px;\n width: 90%;\n position: relative;\n z-index: 2001;\n}\n\n.modal-close {\n position: absolute;\n top: 10px;\n right: 15px;\n background: none;\n border: none;\n font-size: 24px;\n font-weight: bold;\n color: #666;\n cursor: pointer;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: all 0.2s ease;\n}\n\n.modal-close:hover {\n background: #f0f0f0;\n color: #333;\n}\n\n.stats {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.stat-item {\n display: flex;\n justify-content: space-between;\n padding: 8px 12px;\n background: #f5f5f5;\n border-radius: 6px;\n}\n\n.stat-item .label {\n font-weight: 500;\n color: #666;\n}\n\n.stat-item .value {\n font-weight: bold;\n color: var(--indonesian-red);\n}\n\n/* Animations */\n@keyframes cardFlip {\n 0% { transform: rotateY(0deg); }\n 50% { transform: rotateY(90deg); }\n 100% { transform: rotateY(0deg); }\n}\n\n.card.flipping {\n animation: cardFlip 0.6s ease-in-out;\n}\n\n@keyframes sequenceComplete {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n}\n\n.sequence-complete {\n animation: sequenceComplete 0.8s ease-in-out;\n}\n\n/* Responsive Design */\n@media (max-width: 1024px) {\n :root {\n --card-width: 70px;\n --card-height: 98px;\n }\n \n .tableau {\n gap: 6px;\n }\n \n .card-center-suit {\n font-size: 28px;\n }\n}\n\n@media (max-width: 768px) {\n :root {\n --card-width: 60px;\n --card-height: 84px;\n }\n \n .tableau {\n gap: 4px;\n }\n \n .card-center-suit {\n font-size: 24px;\n }\n \n .card-rank {\n font-size: 12px;\n }\n \n .card-suit {\n font-size: 10px;\n }\n \n header .container {\n padding: 12px 16px;\n }\n \n header h1 {\n font-size: 18px;\n }\n \n header .flex {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n}\n\n@media (max-width: 480px) {\n :root {\n --card-width: 50px;\n --card-height: 70px;\n }\n \n .tableau {\n gap: 2px;\n }\n \n .card-center-suit {\n font-size: 20px;\n }\n \n .container {\n padding-left: 8px;\n padding-right: 8px;\n }\n}",[],[58,85],"b4793a92-48c0-11f0-9ea1-76b3cceeab13","index.html","643e2ae8-48bf-11f0-aa3b-76b3cceeab13",14,["D",1749865294716],"\n\n\n \n \n Indonesian Spider Solitaire\n \n \n \n\n\n \n

🕷️ Spider Solitaire Indonesia

\n 🇮🇩 Permainan Kartu Tradisional\n

\n Skor:\n 500\n

\n Langkah:\n 0\n

\n Waktu:\n 00:00\n

\n\n \n

\n \n \n \n

\n Susun kartu dari Raja ke As dalam urutan yang sama\n

\n\n \n

\n \n

🇮🇩

\n\n \n

Urutan Lengkap

\n \n

\n\n \n \n\n \n\n",[],[58,93],"b8c61bce-48c0-11f0-801b-76b3cceeab13","game.js","af4bbf8c-48bf-11f0-b8ad-76b3cceeab13",15,["D",1749865301928],5,"script","// Indonesian Spider Solitaire Game Logic\n\nclass SpiderSolitaire {\n constructor() {\n this.suits = ['♠', '♣', '♥', '♦']; // Use all 4 suits but we'll play single-suit rules\n this.ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];\n this.deck = [];\n this.tableau = Array(10).fill().map(() => []);\n this.stock = [];\n this.foundation = [];\n this.score = 500;\n this.moves = 0;\n this.startTime = Date.now();\n this.gameWon = false;\n this.selectedCards = [];\n this.moveHistory = [];\n \n this.initializeGame();\n this.setupEventListeners();\n this.startTimer();\n }\n\n // Create a deck of 104 cards (2 standard decks)\n createDeck() {\n this.deck = [];\n for (let deckNum = 0; deckNum < 2; deckNum++) {\n for (let suit of this.suits) {\n for (let rank of this.ranks) {\n this.deck.push({\n suit,\n rank,\n color: suit === '♠' || suit === '♣' ? 'black' : 'red',\n faceUp: false,\n id: `${suit}${rank}${deckNum}`\n });\n }\n }\n }\n }\n\n // Shuffle the deck\n shuffleDeck() {\n for (let i = this.deck.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [this.deck[i], this.deck[j]] = [this.deck[j], this.deck[i]];\n }\n }\n\n // Initialize the game\n initializeGame() {\n this.createDeck();\n this.shuffleDeck();\n this.dealInitialCards();\n this.render();\n }\n\n // Deal initial cards to tableau\n dealInitialCards() {\n let cardIndex = 0;\n \n // Deal cards to columns\n for (let col = 0; col < 10; col++) {\n const numCards = col < 4 ? 6 : 5;\n for (let row = 0; row < numCards; row++) {\n const card = this.deck[cardIndex++];\n card.faceUp = row === numCards - 1; // Only top card face up\n this.tableau[col].push(card);\n }\n }\n \n // Remaining cards go to stock\n this.stock = this.deck.slice(cardIndex);\n }\n\n // Get rank value for comparison\n getRankValue(rank) {\n const 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 };\n return values[rank];\n }\n\n // Check if a move is valid (Spider Solitaire allows moves between different suits)\n isValidMove(fromCards, toColumn) {\n if (fromCards.length === 0) return false;\n \n const topCard = fromCards[0];\n const targetColumn = this.tableau[toColumn];\n \n // Can always move to empty column\n if (targetColumn.length === 0) return true;\n \n const targetCard = targetColumn[targetColumn.length - 1];\n \n // Must be descending order (any suit can go on any suit)\n return this.getRankValue(targetCard.rank) === this.getRankValue(topCard.rank) + 1;\n }\n\n // Check if cards form a valid sequence (same suit and descending for moving together)\n isValidSequence(cards) {\n if (cards.length === 0) return false;\n \n for (let i = 0; i < cards.length - 1; i++) {\n const current = cards[i];\n const next = cards[i + 1];\n \n // Must be same suit and descending for moving as a group\n if (current.suit !== next.suit || \n this.getRankValue(current.rank) !== this.getRankValue(next.rank) + 1) {\n return false;\n }\n }\n return true;\n }\n\n // Get moveable cards from a column\n getMoveableCards(column, cardIndex) {\n const columnCards = this.tableau[column];\n const cards = columnCards.slice(cardIndex);\n \n // Check if sequence is valid\n if (this.isValidSequence(cards)) {\n return cards;\n }\n \n // Return only the clicked card if sequence is invalid\n return [columnCards[cardIndex]];\n }\n\n // Move cards between columns\n moveCards(fromColumn, cardIndex, toColumn) {\n const cards = this.getMoveableCards(fromColumn, cardIndex);\n \n if (!this.isValidMove(cards, toColumn)) {\n return false;\n }\n \n // Save move for undo\n this.moveHistory.push({\n type: 'move',\n fromColumn,\n toColumn,\n cards: [...cards],\n fromIndex: cardIndex\n });\n \n // Remove cards from source\n this.tableau[fromColumn].splice(cardIndex);\n \n // Add cards to destination\n this.tableau[toColumn].push(...cards);\n \n // Flip top card if needed\n this.flipTopCards();\n \n // Check for complete sequences\n this.checkCompleteSequences();\n \n this.moves++;\n this.score = Math.max(0, this.score - 1);\n this.updateUI();\n \n return true;\n }\n\n // Flip top cards that should be face up\n flipTopCards() {\n for (let col = 0; col < 10; col++) {\n const column = this.tableau[col];\n if (column.length > 0) {\n const topCard = column[column.length - 1];\n if (!topCard.faceUp) {\n topCard.faceUp = true;\n }\n }\n }\n }\n\n // Check for complete sequences (K to A)\n checkCompleteSequences() {\n for (let col = 0; col < 10; col++) {\n const column = this.tableau[col];\n if (column.length >= 13) {\n // Check last 13 cards\n const last13 = column.slice(-13);\n if (this.isCompleteSequence(last13)) {\n // Remove complete sequence\n this.foundation.push(last13);\n this.tableau[col].splice(-13);\n this.score += 100;\n \n // Flip new top card\n this.flipTopCards();\n \n // Check win condition\n if (this.foundation.length === 8) {\n this.gameWon = true;\n this.showGameOver();\n }\n }\n }\n }\n }\n\n // Check if 13 cards form a complete sequence K-A\n isCompleteSequence(cards) {\n if (cards.length !== 13) return false;\n \n const expectedRanks = ['K', 'Q', 'J', '10', '9', '8', '7', '6', '5', '4', '3', '2', 'A'];\n \n for (let i = 0; i < 13; i++) {\n if (cards[i].rank !== expectedRanks[i] || !cards[i].faceUp) {\n return false;\n }\n }\n \n // All cards must be same suit\n const suit = cards[0].suit;\n return cards.every(card => card.suit === suit);\n }\n\n // Deal new cards from stock\n dealFromStock() {\n if (this.stock.length === 0) return false;\n \n // Must have at least one card in each column\n for (let col = 0; col < 10; col++) {\n if (this.tableau[col].length === 0) {\n alert('Semua kolom harus memiliki kartu sebelum membagikan kartu baru!');\n return false;\n }\n }\n \n // Save move for undo\n const dealtCards = [];\n \n // Deal one card to each column\n for (let col = 0; col < 10; col++) {\n if (this.stock.length > 0) {\n const card = this.stock.pop();\n card.faceUp = true;\n this.tableau[col].push(card);\n dealtCards.push({ column: col, card });\n }\n }\n \n this.moveHistory.push({\n type: 'deal',\n cards: dealtCards\n });\n \n this.moves++;\n this.score = Math.max(0, this.score - 1);\n this.updateUI();\n this.render();\n \n return true;\n }\n\n // Undo last move\n undo() {\n if (this.moveHistory.length === 0) return false;\n \n const lastMove = this.moveHistory.pop();\n \n if (lastMove.type === 'move') {\n // Move cards back\n const cards = this.tableau[lastMove.toColumn].splice(-lastMove.cards.length);\n this.tableau[lastMove.fromColumn].splice(lastMove.fromIndex, 0, ...cards);\n } else if (lastMove.type === 'deal') {\n // Return cards to stock\n for (const { column, card } of lastMove.cards.reverse()) {\n this.tableau[column].pop();\n this.stock.push(card);\n card.faceUp = false;\n }\n }\n \n this.moves = Math.max(0, this.moves - 1);\n this.score = Math.min(500, this.score + 1);\n this.updateUI();\n this.render();\n \n return true;\n }\n\n // Setup event listeners\n setupEventListeners() {\n // New game button\n document.getElementById('new-game').addEventListener('click', () => {\n this.newGame();\n });\n \n // Undo button\n document.getElementById('undo').addEventListener('click', () => {\n this.undo();\n });\n \n // Hint button\n document.getElementById('hint').addEventListener('click', () => {\n this.showHint();\n });\n \n // Stock pile\n document.getElementById('stock-pile').addEventListener('click', () => {\n this.dealFromStock();\n });\n \n // Play again button\n document.getElementById('play-again').addEventListener('click', () => {\n this.hideGameOver();\n this.newGame();\n });\n \n // Close modal buttons\n document.getElementById('close-modal').addEventListener('click', () => {\n this.hideGameOver();\n });\n \n document.getElementById('close-game').addEventListener('click', () => {\n this.hideGameOver();\n });\n \n // Modal backdrop click\n document.querySelector('.modal-backdrop').addEventListener('click', () => {\n this.hideGameOver();\n });\n \n // Escape key to close modal\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !document.getElementById('game-over-modal').classList.contains('hidden')) {\n this.hideGameOver();\n }\n });\n \n // Card click handlers will be added in render()\n }\n\n // Start new game\n newGame() {\n this.tableau = Array(10).fill().map(() => []);\n this.stock = [];\n this.foundation = [];\n this.score = 500;\n this.moves = 0;\n this.startTime = Date.now();\n this.gameWon = false;\n this.selectedCards = [];\n this.moveHistory = [];\n \n this.initializeGame();\n }\n\n // Show hint\n showHint() {\n // Simple hint: highlight possible moves\n let hintFound = false;\n \n for (let fromCol = 0; fromCol < 10; fromCol++) {\n const column = this.tableau[fromCol];\n if (column.length === 0) continue;\n \n for (let cardIndex = 0; cardIndex < column.length; cardIndex++) {\n const card = column[cardIndex];\n if (!card.faceUp) continue;\n \n const moveableCards = this.getMoveableCards(fromCol, cardIndex);\n \n for (let toCol = 0; toCol < 10; toCol++) {\n if (fromCol === toCol) continue;\n \n if (this.isValidMove(moveableCards, toCol)) {\n // Highlight the move\n const cardElement = document.querySelector(`[data-card-id=\"${card.id}\"]`);\n const columnElement = document.getElementById(`column-${toCol}`);\n \n if (cardElement && columnElement) {\n cardElement.classList.add('selected');\n columnElement.classList.add('drop-target');\n \n setTimeout(() => {\n cardElement.classList.remove('selected');\n columnElement.classList.remove('drop-target');\n }, 2000);\n \n hintFound = true;\n break;\n }\n }\n }\n if (hintFound) break;\n }\n if (hintFound) break;\n }\n \n if (!hintFound) {\n alert('Tidak ada langkah yang tersedia. Coba bagikan kartu baru dari tumpukan!');\n }\n }\n\n // Update UI elements\n updateUI() {\n document.getElementById('score').textContent = this.score;\n document.getElementById('moves').textContent = this.moves;\n document.getElementById('stock-count').textContent = this.stock.length;\n document.getElementById('undo').disabled = this.moveHistory.length === 0;\n }\n\n // Start timer\n startTimer() {\n setInterval(() => {\n if (!this.gameWon) {\n const elapsed = Math.floor((Date.now() - this.startTime) / 1000);\n const minutes = Math.floor(elapsed / 60);\n const seconds = elapsed % 60;\n document.getElementById('timer').textContent = \n `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n }\n }, 1000);\n }\n\n // Show game over modal\n showGameOver() {\n const elapsed = Math.floor((Date.now() - this.startTime) / 1000);\n const minutes = Math.floor(elapsed / 60);\n const seconds = elapsed % 60;\n const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n \n document.getElementById('final-score').textContent = this.score;\n document.getElementById('final-moves').textContent = this.moves;\n document.getElementById('final-time').textContent = timeString;\n document.getElementById('game-over-modal').classList.remove('hidden');\n }\n\n // Hide game over modal\n hideGameOver() {\n document.getElementById('game-over-modal').classList.add('hidden');\n }\n\n // Render the game board\n render() {\n this.renderTableau();\n this.renderFoundation();\n this.updateUI();\n }\n\n // Render tableau columns\n renderTableau() {\n for (let col = 0; col < 10; col++) {\n const columnElement = document.getElementById(`column-${col}`);\n columnElement.innerHTML = '';\n \n const cards = this.tableau[col];\n cards.forEach((card, index) => {\n const cardElement = this.createCardElement(card, col, index);\n cardElement.style.top = `${index * 20}px`;\n columnElement.appendChild(cardElement);\n });\n }\n }\n\n // Render foundation area\n renderFoundation() {\n const foundationArea = document.getElementById('foundation-area');\n foundationArea.innerHTML = '';\n \n this.foundation.forEach((sequence, index) => {\n const pileElement = document.createElement('div');\n pileElement.className = 'foundation-pile';\n \n const topCard = sequence[0]; // King is on top\n const cardElement = this.createCardElement(topCard, -1, -1);\n cardElement.classList.add('sequence-complete');\n \n pileElement.appendChild(cardElement);\n foundationArea.appendChild(pileElement);\n });\n \n // Show placeholder if no sequences completed\n if (this.foundation.length === 0) {\n foundationArea.innerHTML = '

Urutan lengkap akan muncul di sini

';\n }\n }\n\n // Create card element\n createCardElement(card, column, index) {\n const cardElement = document.createElement('div');\n cardElement.className = 'card';\n cardElement.dataset.cardId = card.id;\n cardElement.dataset.column = column;\n cardElement.dataset.index = index;\n \n if (card.faceUp) {\n cardElement.classList.add('card-face', card.color);\n cardElement.innerHTML = `\n

${card.rank}

${card.suit}

${card.rank}

${card.suit}

\n `;\n } else {\n cardElement.classList.add('card-back');\n cardElement.innerHTML = `\n

🇮🇩

\n `;\n }\n \n // Add click handler for tableau cards\n if (column >= 0 && card.faceUp) {\n cardElement.addEventListener('click', (e) => {\n e.stopPropagation();\n this.handleCardClick(column, index);\n });\n }\n \n return cardElement;\n }\n\n // Handle card clicks\n handleCardClick(column, cardIndex) {\n if (this.selectedCards.length === 0) {\n // Select cards\n this.selectedCards = this.getMoveableCards(column, cardIndex);\n this.selectedCards.forEach(card => {\n const element = document.querySelector(`[data-card-id=\"${card.id}\"]`);\n if (element) element.classList.add('selected');\n });\n } else {\n // Try to move selected cards\n const fromColumn = parseInt(document.querySelector('.card.selected').dataset.column);\n const fromIndex = parseInt(document.querySelector('.card.selected').dataset.index);\n \n if (this.moveCards(fromColumn, fromIndex, column)) {\n // Move successful\n this.clearSelection();\n this.render();\n } else {\n // Invalid move, clear selection and select new cards\n this.clearSelection();\n this.selectedCards = this.getMoveableCards(column, cardIndex);\n this.selectedCards.forEach(card => {\n const element = document.querySelector(`[data-card-id=\"${card.id}\"]`);\n if (element) element.classList.add('selected');\n });\n }\n }\n }\n\n // Clear card selection\n clearSelection() {\n document.querySelectorAll('.card.selected').forEach(card => {\n card.classList.remove('selected');\n });\n this.selectedCards = [];\n }\n}\n\n// Initialize game when page loads\ndocument.addEventListener('DOMContentLoaded', () => {\n new SpiderSolitaire();\n});",[],[58,101],["D",1749864699855],[113],[66],{"_35":114,"_13":115,"_38":116,"_40":67,"_41":42,"_43":117,"_45":46,"_47":118,"_17":49,"_50":119,"_51":120,"_53":54,"_55":-5,"_75":121,"_18":122},"b1f0ce8a-48bf-11f0-8d79-76b3cceeab13","index.ts","51e87204-48bf-11f0-8b40-76b3cceeab13",6,["D",1749864860969],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main game page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", c => {\n return c.json({ status: \"ok\", game: \"Indonesian Spider Solitaire\" });\n});\n\nexport default app.fetch;",[],[66,115],"c72a3c1a-48be-11f0-9001-76b3cceeab13",["D",1749864467088],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","12dc2dbc-b67f-44e1-a015-e97495f6121a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","eda87447-ba5f-475f-884b-57629968d6c5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_175":171},"org",{"_11":12,"_169":-5,"_170":171,"_132":133,"_172":173,"_174":54},"branch",{"_17":44,"_13":16,"_35":42,"_161":123,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":14,"_168":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://secure.gravatar.com/avatar/76d4e67d2ae663b1e5b5ca20ed36eb17&d=identicon","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":123,"_13":14,"_47":230,"_125":-5,"_126":54,"_127":128,"_129":128,"_130":-5,"_131":-5,"_132":133,"_134":116,"_135":46,"_136":46,"_137":-5,"_138":62,"_139":140,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":146,"_147":146,"_148":149,"_150":149,"_151":149,"_152":146,"_153":146,"_154":231,"_156":232,"_158":233,"_160":54},[209,211,215],"files",[209,210,211,212,213,214,215],"counts",{"_200":62,"_201":49,"_202":62,"_31":203,"_204":205},[194,195,196],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":69,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_18":199},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_18":198},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":197},[37],[58],[66],"pulls","branches","forks",{"_206":62,"_208":62},"connections",{"_206":62,"_207":62},"count","unfilledCount","emptyCount",{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":110,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_75":228,"_18":229},{"_35":114,"_13":115,"_38":116,"_40":67,"_41":42,"_43":117,"_45":46,"_47":118,"_17":49,"_50":119,"_51":120,"_53":54,"_55":-5,"_75":226,"_18":227},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":78,"_17":62,"_50":63,"_51":-5,"_53":54,"_55":-5,"_75":224,"_18":225},{"_35":100,"_13":101,"_38":102,"_40":59,"_41":42,"_43":103,"_45":46,"_47":104,"_17":105,"_50":106,"_51":107,"_53":54,"_55":-5,"_75":222,"_18":223},{"_35":92,"_13":93,"_38":94,"_40":59,"_41":42,"_43":95,"_45":46,"_47":96,"_17":60,"_50":24,"_51":97,"_53":54,"_55":-5,"_75":220,"_18":221},{"_35":84,"_13":85,"_38":86,"_40":59,"_41":42,"_43":87,"_45":46,"_47":88,"_17":49,"_50":24,"_51":89,"_53":54,"_55":-5,"_75":218,"_18":219},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":74,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_75":216,"_18":217},[],[37],[],[58,85],[],[58,93],[],[58,101],[212,213,214],[58],[],[66,115],[210],[66],["D",1749864467088],{"_11":12,"_175":171},{"_11":12,"_169":-5,"_170":171,"_132":133,"_172":173,"_174":54},{"_17":44,"_13":16,"_35":42,"_161":123,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":14,"_168":12},"ctx",{"_154":-5,"_191":267,"_268":269,"_270":271,"_272":54,"_273":54,"_274":54,"_275":46,"_276":-5,"_277":-7,"_278":-7,"_279":62,"_280":54,"_281":54,"_282":-5,"_283":54,"_284":54,"_285":54,"_286":-5},"ENV",{"_238":239,"_240":241,"_242":16,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Urutan Lengkap

Selamat!

Code