[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","643e2ae8-48bf-11f0-aa3b-76b3cceeab13","name","index.html","fileType","content","\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","\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

\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","createdAt",["D",1749865229686],"branchVersion","branchId","c72ab906-48be-11f0-9001-76b3cceeab13","id","c72a3c1a-48be-11f0-9001-76b3cceeab13","spider-sol",["D",1749864467088],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","12dc2dbc-b67f-44e1-a015-e97495f6121a","pinnedFileId","51e87204-48bf-11f0-8b40-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","eda87447-ba5f-475f-884b-57629968d6c5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","feb","handle","displayName","avatar","https://secure.gravatar.com/avatar/76d4e67d2ae663b1e5b5ca20ed36eb17&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":208,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":209,"_80":210,"_82":211,"_84":25},"tree",[162,164,168],"files",[162,163,164,165,166,167,168],"counts",{"_152":62,"_153":133,"_154":62,"_155":156,"_157":158},"contents",[126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":146,"_32":147,"_30":148,"_132":-5,"_41":42,"_40":149,"_134":58,"_38":150,"_13":62,"_34":144,"_35":-5,"_24":25,"_137":-5,"_27":151},{"_43":139,"_32":140,"_30":141,"_132":-5,"_41":42,"_40":142,"_134":58,"_38":143,"_13":62,"_34":144,"_35":-5,"_24":25,"_137":-5,"_27":145},{"_43":129,"_32":130,"_30":131,"_132":-5,"_41":42,"_40":133,"_134":25,"_38":135,"_13":62,"_34":20,"_35":136,"_24":25,"_137":-5,"_27":138},"4bd437cc-48bf-11f0-87d2-76b3cceeab13","README.md","4bd43876-48bf-11f0-87d2-76b3cceeab13","parentId",1,"latest",["D",1749864689658],"# 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 (1-suit difficulty)\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- Undo functionality\n- Auto-complete when possible\n\n## Game Rules\n\nSpider Solitaire is played with a standard deck of cards 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\n- Only face-up cards can be moved\n- Complete sequences (K-Q-J-10-9-8-7-6-5-4-3-2-A) are automatically removed\n- Click the stock pile to deal new cards when no moves are available\n- Game is won when all cards are removed from the tableau\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- **Typography:** Clean, readable fonts with Indonesian flair\n- **Background:** Subtle Indonesian cultural motifs","label",[130],"643e4672-48bf-11f0-aa3b-76b3cceeab13","frontend","06c7fe14-6830-45ac-b831-6fba656a8af3",3,["D",1749864730616],"directory",[140],"51e87b96-48bf-11f0-8b40-76b3cceeab13","backend","d13c113e-bd90-460e-af67-8ada38dd3632",2,["D",1749864699855],[147],"pulls","branches","forks","envVars",{"_159":62,"_161":62},"connections",{"_159":62,"_160":62},"count","unfilledCount","emptyCount",{"_43":146,"_32":147,"_30":148,"_132":-5,"_41":42,"_40":149,"_134":58,"_38":205,"_13":62,"_34":144,"_35":-5,"_24":25,"_137":-5,"_170":206,"_27":207},{"_43":197,"_32":198,"_30":56,"_132":148,"_41":42,"_40":199,"_134":58,"_38":200,"_13":133,"_34":201,"_35":202,"_24":25,"_137":-5,"_170":203,"_27":204},{"_43":139,"_32":140,"_30":141,"_132":-5,"_41":42,"_40":142,"_134":58,"_38":194,"_13":62,"_34":144,"_35":-5,"_24":25,"_137":-5,"_170":195,"_27":196},{"_43":185,"_32":186,"_30":187,"_132":141,"_41":42,"_40":188,"_134":25,"_38":189,"_13":133,"_34":190,"_35":191,"_24":25,"_137":-5,"_170":192,"_27":193},{"_43":181,"_32":33,"_30":31,"_132":141,"_41":42,"_40":14,"_134":25,"_38":182,"_13":149,"_34":20,"_35":37,"_24":25,"_137":-5,"_170":183,"_27":184},{"_43":173,"_32":174,"_30":175,"_132":141,"_41":42,"_40":176,"_134":58,"_38":177,"_13":133,"_34":20,"_35":178,"_24":25,"_137":-5,"_170":179,"_27":180},{"_43":129,"_32":130,"_30":131,"_132":-5,"_41":42,"_40":133,"_134":25,"_38":169,"_13":62,"_34":20,"_35":136,"_24":25,"_137":-5,"_170":171,"_27":172},["D",1749864689658],"children",[],[130],"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}",[],[140,174],"8db6f0d4-48c0-11f0-bb40-76b3cceeab13",["D",1749865229686],[],[140,33],"844f0b80-48c0-11f0-a2bc-76b3cceeab13","game.js","af4bbf8c-48bf-11f0-b8ad-76b3cceeab13",9,["D",1749865213906],"script","// Indonesian Spider Solitaire Game Logic\n\nclass SpiderSolitaire {\n constructor() {\n this.suits = ['♠']; // Single suit for easier gameplay\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\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\n return this.getRankValue(targetCard.rank) === this.getRankValue(topCard.rank) + 1;\n }\n\n // Check if cards form a valid sequence\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\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});",[],[140,186],["D",1749864730616],[165,166,167],[140],"b1f0ce8a-48bf-11f0-8d79-76b3cceeab13","index.ts",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;",[],[147,198],["D",1749864699855],[163],[147],["D",1749864467088],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":245,"_246":247,"_248":249,"_250":25,"_251":25,"_252":25,"_253":58,"_254":-5,"_255":-7,"_256":-7,"_257":62,"_258":25,"_259":25,"_260":-5,"_261":25,"_262":25,"_263":25,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":86,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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!

Urutan Lengkap

Selamat!

Diff · v10