🕷️ 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",[],[126,168],"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});",[],[126,176],["D",1749864730616],[151,152,153],[126],"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;",[],[133,189],["D",1749864699855],[149],[133],["D",1749864467088],{"_16":17,"_82":78},{"_16":17,"_76":-5,"_77":78,"_32":33,"_79":80,"_81":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_57":-5,"_103":236,"_237":238,"_239":240,"_241":26,"_242":26,"_243":26,"_244":37,"_245":-5,"_246":-7,"_247":-7,"_248":41,"_249":26,"_250":26,"_251":-5,"_252":26,"_253":26,"_254":26,"_255":-5},"ENV",{"_207":208,"_209":210,"_211":66,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Urutan Lengkap

Selamat!

Search