[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_228":229,"_230":231},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_172":-5,"_20":173,"_22":174,"_175":176,"_177":178,"_26":179,"_24":180,"_181":-5,"_182":-5,"_183":55,"_184":185,"_186":46,"_187":-5,"_188":-5,"_189":190},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","feb","name","spider-sol","branchName","main","version","path","backend","project",{"_34":119,"_13":14,"_47":120,"_121":-5,"_122":55,"_123":124,"_125":124,"_126":-5,"_127":-5,"_128":129,"_130":38,"_131":46,"_132":46,"_133":-5,"_134":61,"_135":136,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":142,"_143":142,"_144":145,"_146":145,"_147":145,"_148":142,"_149":142,"_150":151,"_152":153,"_154":155,"_156":55},"tree",[64,65,66],"file",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":63},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","b1f0ce8a-48bf-11f0-8d79-76b3cceeab13","index.ts","fileId","51e87204-48bf-11f0-8b40-76b3cceeab13","parentId","d13c113e-bd90-460e-af67-8ada38dd3632","branchId","c72ab906-48be-11f0-9001-76b3cceeab13","branchVersion",6,"latest",true,"createdAt",["D",1749864860969],1,"fileType","http","content","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;","deleted",false,"label",[19,36],"51e87b96-48bf-11f0-8b40-76b3cceeab13",2,["D",1749864699855],0,"directory",[19],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":112,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_73":113,"_18":114},{"_34":76,"_13":77,"_37":78,"_39":-5,"_41":42,"_43":79,"_45":46,"_47":80,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_73":81,"_18":82},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":70,"_45":46,"_47":71,"_17":49,"_50":24,"_52":72,"_54":55,"_56":-5,"_73":74,"_18":75},"d04ca1a0-48c0-11f0-969b-76b3cceeab13","README.md","4bd43876-48bf-11f0-87d2-76b3cceeab13",16,["D",1749865341395],"# 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","children",[],[68],"643e4672-48bf-11f0-aa3b-76b3cceeab13","frontend","06c7fe14-6830-45ac-b831-6fba656a8af3",3,["D",1749864730616],[83,84,85],[77],{"_34":102,"_13":103,"_37":104,"_39":78,"_41":42,"_43":105,"_45":46,"_47":106,"_17":107,"_50":108,"_52":109,"_54":55,"_56":-5,"_73":110,"_18":111},{"_34":94,"_13":95,"_37":96,"_39":78,"_41":42,"_43":97,"_45":46,"_47":98,"_17":79,"_50":24,"_52":99,"_54":55,"_56":-5,"_73":100,"_18":101},{"_34":86,"_13":87,"_37":88,"_39":78,"_41":42,"_43":89,"_45":46,"_47":90,"_17":49,"_50":24,"_52":91,"_54":55,"_56":-5,"_73":92,"_18":93},"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}",[],[77,87],"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",[],[77,95],"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});",[],[77,103],["D",1749864699855],[115],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":116,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_73":117,"_18":118},["D",1749864860969],[],[19,36],"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,"_171":167},"org",{"_11":12,"_165":-5,"_166":167,"_128":129,"_168":169,"_170":55},"branch",{"_17":70,"_13":16,"_34":42,"_157":119,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":14,"_164":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",{"_34":119,"_13":14,"_47":224,"_121":-5,"_122":55,"_123":124,"_125":124,"_126":-5,"_127":-5,"_128":129,"_130":38,"_131":46,"_132":46,"_133":-5,"_134":61,"_135":136,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":142,"_143":142,"_144":145,"_146":145,"_147":145,"_148":142,"_149":142,"_150":225,"_152":226,"_154":227,"_156":55},[203,205,209],"files",[203,204,205,206,207,208,209],"counts",{"_194":61,"_195":49,"_196":61,"_32":197,"_198":199},[192],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":191},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":193},[19,36],"pulls","branches","forks",{"_200":61,"_202":61},"connections",{"_200":61,"_201":61},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":112,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_73":222,"_18":223},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":116,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_73":220,"_18":221},{"_34":76,"_13":77,"_37":78,"_39":-5,"_41":42,"_43":79,"_45":46,"_47":80,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_73":218,"_18":219},{"_34":102,"_13":103,"_37":104,"_39":78,"_41":42,"_43":105,"_45":46,"_47":106,"_17":107,"_50":108,"_52":109,"_54":55,"_56":-5,"_73":216,"_18":217},{"_34":94,"_13":95,"_37":96,"_39":78,"_41":42,"_43":97,"_45":46,"_47":98,"_17":79,"_50":24,"_52":99,"_54":55,"_56":-5,"_73":214,"_18":215},{"_34":86,"_13":87,"_37":88,"_39":78,"_41":42,"_43":89,"_45":46,"_47":90,"_17":49,"_50":24,"_52":91,"_54":55,"_56":-5,"_73":212,"_18":213},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":70,"_45":46,"_47":71,"_17":49,"_50":24,"_52":72,"_54":55,"_56":-5,"_73":210,"_18":211},[],[68],[],[77,87],[],[77,95],[],[77,103],[206,207,208],[77],[],[19,36],[204],[19],["D",1749864467088],{"_11":12,"_171":167},{"_11":12,"_165":-5,"_166":167,"_128":129,"_168":169,"_170":55},{"_17":70,"_13":16,"_34":42,"_157":119,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":14,"_164":12},"ctx",{"_150":-5,"_188":261,"_262":263,"_264":265,"_266":55,"_267":55,"_268":55,"_269":46,"_270":-5,"_271":-7,"_272":-7,"_273":61,"_274":55,"_275":55,"_276":-5,"_277":55,"_278":55,"_279":55,"_280":-5},"ENV",{"_232":233,"_234":235,"_236":16,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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!