Val Town Greeting Example

\n \n

\n Enter your name:\n \n

\n \n \n \n

\n\n

\n \n View Source\n \n

\n\n \n\n",[],[216],"a0e760a2-0744-11f0-a0f9-569c3dd06744","README.md","2b0ddb40-0587-11f0-9e73-569c3dd06744",["D",1742665178704],7,"",[],[224],"01176cae-0585-11f0-b475-569c3dd06744","index.tsx","f62d2c17-3fb0-4482-9f4d-439a47e092e8","2341b96e-ed73-4a82-9840-3694c6a8a0c0",["D",1742472925516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nif (typeof document !== \"undefined\") {\n const root = document.getElementById(\"root\");\n if (!root) {\n throw new Error(\"No root element found\");\n }\n createRoot(root).render();\n}",[],[239,232],"frontend","34bd5868-0646-11f0-9e21-569c3dd06744","index.html","4ea2d98a-0586-11f0-bbae-569c3dd06744",21,["D",1742555905068],3,"\n\n \n \n Blackjack with React + Hono\n \n \n \n \n

\n \n \n \n",[],[239,241],"01176826-0585-11f0-b475-569c3dd06744","Scoreboard.tsx","e1ff416d-9ceb-46fb-8c5f-b5bcba3f5896","0d2a22cb-feb4-476e-a6b8-f4bf51b0aeba",["D",1742472925516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface ScoreboardProps {\n bet: number;\n profit: number;\n bank: number;\n}\n\nconst Scoreboard: React.FC = ({ bet, profit, bank }) => {\n return (\n

Scoreboard

Bet: ${bet}

Profit: ${profit}

Bank: ${bank}

\n );\n};\n\nexport default Scoreboard;",[],[239,257,250],"components","7ae4785a-0586-11f0-a2b9-569c3dd06744","BoozeMeter.tsx","9c7126bc-76ca-471b-8604-3bca47553c96",10,["D",1742473559395],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface BoozeMeterProps {\n level: number;\n}\n\nconst BoozeMeter: React.FC = ({ level }) => {\n const meterWidth = Math.min(level * 10, 100);\n return (\n

Booze Meter

\n \n

Level: {level}

\n \n );\n};\n\nexport default BoozeMeter;",[],[239,257,259],"dad31ad6-0645-11f0-b22e-569c3dd06744","BoozeButton.tsx","96343ff7-cf69-44f7-ae0f-977cdfd1b3e4",18,["D",1742555754218],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface BoozeButtonProps {\n onBooze: () => void;\n disabled: boolean;\n}\n\nconst BoozeButton: React.FC = ({ onBooze, disabled }) => {\n return (\n

\n \n

\n Warning: Boozing may cause unexpected play decisions!\n

\n );\n};\n\nexport default BoozeButton;",[],[239,257,267],"2aea58e0-0646-11f0-9dfc-569c3dd06744","BlackjackTable.tsx","1504c234-38ce-48f2-9d03-9a7a0fa3c6f2",20,["D",1742555888585],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface Card {\n suit: string;\n value: string;\n}\n\ninterface BlackjackTableProps {\n playerHand: Card[];\n dealerHand: Card[];\n playerScore: number;\n dealerScore: number;\n gameOver: boolean;\n loading: boolean;\n onStart: () => void;\n onHit: () => void;\n onStand: () => void;\n}\n\n// Helper function to get card color\nconst getCardColor = (suit: string): string => {\n return ['Hearts', 'Diamonds'].includes(suit) ? 'red' : 'black';\n};\n\n// Helper function to get suit symbol\nconst getSuitSymbol = (suit: string): string => {\n switch (suit) {\n case 'Hearts': return '♥';\n case 'Diamonds': return '♦';\n case 'Clubs': return '♣';\n case 'Spades': return '♠';\n default: return '';\n }\n};\n\n// Component to display a single card\nconst Card: React.FC<{ card: Card, hidden?: boolean }> = ({ card, hidden = false }) => {\n if (hidden) {\n return (\n

\n ?\n

\n );\n }\n\n const color = getCardColor(card.suit);\n const symbol = getSuitSymbol(card.suit);\n\n return (\n

\n {card.value}\n

\n {symbol}\n

\n {card.value}\n

\n );\n};\n\nconst BlackjackTable: React.FC = ({\n playerHand,\n dealerHand,\n playerScore,\n dealerScore,\n gameOver,\n loading,\n onStart,\n onHit,\n onStand,\n}) => {\n return (\n

Blackjack Table

\n \n

Dealer's Hand {gameOver && `(Score: ${dealerScore})`}

\n {dealerHand.length > 0 ? (\n

\n {dealerHand.map((card, index) => (\n

\n ) : (\n

No cards dealt yet

\n )}\n

\n\n

Your Hand (Score: {playerScore})

\n {playerHand.length > 0 ? (\n

\n {playerHand.map((card, index) => (\n \n ))}\n

\n ) : (\n

No cards dealt yet

\n )}\n

\n\n

\n \n \n \n \n \n

\n );\n};\n\nexport default BlackjackTable;",[],[239,257,275],"e0873dcc-0645-11f0-8f5e-569c3dd06744","App.tsx","0959f2d6-d897-4aad-9bab-5ade576048e5",19,["D",1742555763784],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport BlackjackTable from \"./BlackjackTable.tsx\";\nimport BoozeButton from \"./BoozeButton.tsx\";\nimport BoozeMeter from \"./BoozeMeter.tsx\";\nimport Scoreboard from \"./Scoreboard.tsx\";\n\n// Define types for our game state\ninterface Card {\n suit: string;\n value: string;\n}\n\ninterface Player {\n id: number;\n name: string;\n hand: Card[];\n score: number;\n isBusted: boolean;\n}\n\ninterface GameState {\n deck: Card[];\n player: Player;\n dealer: Player;\n boozeLevel: number;\n bet: number;\n bank: number;\n profit: number;\n}\n\nconst App: React.FC = () => {\n const [gameState, setGameState] = useState(null);\n const [message, setMessage] = useState(\"No game in progress yet. Click Start!\");\n const [loading, setLoading] = useState(false);\n const [gameOver, setGameOver] = useState(false);\n const [result, setResult] = useState(\"\");\n\n // Fetch the current game state\n const fetchGameState = async () => {\n try {\n const res = await fetch(\"/api/state\");\n const data = await res.json();\n \n if (data.error) {\n setGameState(null);\n setMessage(\"No game in progress yet. Click Start!\");\n setGameOver(false);\n } else {\n setGameState(data);\n setMessage(\"Game in progress...\");\n \n // Check if the game is over\n if (data.player.isBusted) {\n setGameOver(true);\n setResult(\"You busted! Dealer wins.\");\n } else if (data.dealer.isBusted) {\n setGameOver(true);\n setResult(\"Dealer busted! You win!\");\n } else if (data.dealer.score >= 17 && data.player.score > data.dealer.score) {\n setGameOver(true);\n setResult(\"You win!\");\n } else if (data.dealer.score >= 17 && data.player.score < data.dealer.score) {\n setGameOver(true);\n setResult(\"Dealer wins.\");\n } else if (data.dealer.score >= 17 && data.player.score === data.dealer.score) {\n setGameOver(true);\n setResult(\"Push! It's a tie.\");\n }\n }\n } catch (error) {\n setMessage(\"Error contacting the server.\");\n }\n };\n\n // Start a new game\n const startGame = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/start\", { method: \"POST\" });\n const data = await res.json();\n setGameState(data);\n setMessage(\"Game started! Your move.\");\n setGameOver(false);\n setResult(\"\");\n } catch (error) {\n setMessage(\"Error starting the game.\");\n } finally {\n setLoading(false);\n }\n };\n\n // Player hits\n const hit = async () => {\n if (gameOver) return;\n \n setLoading(true);\n try {\n const res = await fetch(\"/api/hit\", { method: \"POST\" });\n const data = await res.json();\n setGameState(data);\n \n if (data.player.isBusted) {\n setGameOver(true);\n setResult(\"You busted! Dealer wins.\");\n }\n } catch (error) {\n setMessage(\"Error hitting.\");\n } finally {\n setLoading(false);\n }\n };\n\n // Player stands\n const stand = async () => {\n if (gameOver) return;\n \n setLoading(true);\n try {\n const res = await fetch(\"/api/stand\", { method: \"POST\" });\n const data = await res.json();\n setGameState(data);\n \n // Determine result\n if (data.dealer.isBusted) {\n setResult(\"Dealer busted! You win!\");\n } else if (data.player.score > data.dealer.score) {\n setResult(\"You win!\");\n } else if (data.player.score < data.dealer.score) {\n setResult(\"Dealer wins.\");\n } else {\n setResult(\"Push! It's a tie.\");\n }\n \n setGameOver(true);\n } catch (error) {\n setMessage(\"Error standing.\");\n } finally {\n setLoading(false);\n }\n };\n\n // Booze up function\n const boozeUp = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/booze\", { method: \"POST\" });\n const data = await res.json();\n setGameState(data);\n \n // If game state changed significantly (like an auto-hit due to booze), check status\n if (data.player.isBusted) {\n setGameOver(true);\n setResult(\"You booze'd too much and busted! Dealer wins.\");\n }\n } catch (error) {\n setMessage(\"Error boozing up.\");\n } finally {\n setLoading(false);\n }\n };\n\n // Initial load\n useEffect(() => {\n fetchGameState();\n }, []);\n\n return (\n

Blackjack with React + Hono

{message}

\n {result &&

{result}

}\n \n \n \n \n \n \n \n \n \n

Booze level increases your bet and risk-taking. Be careful!

\n \n View source\n \n

\n );\n};\n\nexport default App;",[],[239,257,283],"01176a2e-0585-11f0-b475-569c3dd06744",["D",1742472925516],[196,197,198,199,200],[239,257],"01176e7a-0585-11f0-b475-569c3dd06744",["D",1742472925516],[195,201,202],[239],"2b98821e-0586-11f0-88b6-569c3dd06744",5,["D",1742473426356],4,"http","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport gameRouter from \"./controllers/gameController.ts\";\n\nconst app = new Hono();\n\n// Serve static files from frontend/\napp.get(\"/\", async c => {\n return serveFile(\"../frontend/index.html\", import.meta.url);\n});\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.onError((err, c) => {\n throw err;\n});\n\n// Attach Blackjack routes under /api\napp.route(\"/api\", gameRouter);\n\n// Fire up the server. By default, \"hono run\" listens on port 8787\napp.fire();\n\nexport default app.fetch;",[],[166,207],"c6712286-0645-11f0-8fb3-569c3dd06744","gameEngine.ts","0e2c6b5a-069f-43f7-a430-bf360f23e7c1",16,["D",1742555720017],"import { GameState } from \"./models/GameState.ts\";\nimport { Card } from \"./models/Card.ts\";\nimport { createDeck, shuffleDeck } from \"./utils/deckUtils.ts\";\n\nlet currentGame: GameState | null = null;\n\n// Calculate the score of a hand, handling Aces appropriately\nconst calculateScore = (hand: Card[]): number => {\n let score = 0;\n let aces = 0;\n\n for (const card of hand) {\n if (card.value === \"A\") {\n aces++;\n score += 11;\n } else if ([\"K\", \"Q\", \"J\"].includes(card.value)) {\n score += 10;\n } else {\n score += parseInt(card.value);\n }\n }\n\n // Adjust aces from 11 to 1 as needed to avoid busting\n while (score > 21 && aces > 0) {\n score -= 10;\n aces--;\n }\n\n return score;\n};\n\n// Draw a card from the deck\nconst drawCard = (deck: Card[]): Card => {\n if (deck.length === 0) {\n throw new Error(\"Deck is empty!\");\n }\n return deck.pop()!;\n};\n\nexport const startGame = (): GameState => {\n const deck = shuffleDeck(createDeck());\n \n // Initialize game state\n currentGame = {\n deck,\n player: {\n id: 1,\n name: \"Player\",\n hand: [],\n score: 0,\n isBusted: false,\n },\n dealer: {\n id: 0,\n name: \"Dealer\",\n hand: [],\n score: 0,\n isBusted: false,\n },\n boozeLevel: 0,\n bet: 10,\n bank: 1000,\n profit: 0,\n };\n\n // Deal two cards each\n currentGame.player.hand.push(drawCard(deck));\n currentGame.dealer.hand.push(drawCard(deck));\n currentGame.player.hand.push(drawCard(deck));\n currentGame.dealer.hand.push(drawCard(deck));\n\n // Calculate initial scores\n currentGame.player.score = calculateScore(currentGame.player.hand);\n currentGame.dealer.score = calculateScore(currentGame.dealer.hand);\n\n return currentGame;\n};\n\nexport const hit = (): GameState | null => {\n if (!currentGame) return null;\n \n // Draw card for player\n const card = drawCard(currentGame.deck);\n currentGame.player.hand.push(card);\n \n // Recalculate score\n currentGame.player.score = calculateScore(currentGame.player.hand);\n \n // Check if player busted\n if (currentGame.player.score > 21) {\n currentGame.player.isBusted = true;\n \n // Player loses bet\n currentGame.bank -= currentGame.bet;\n currentGame.profit -= currentGame.bet;\n }\n \n return currentGame;\n};\n\nexport const stand = (): GameState | null => {\n if (!currentGame) return null;\n \n // Dealer draws until score is 17 or higher\n while (currentGame.dealer.score < 17) {\n const card = drawCard(currentGame.deck);\n currentGame.dealer.hand.push(card);\n currentGame.dealer.score = calculateScore(currentGame.dealer.hand);\n }\n \n // Check if dealer busted\n if (currentGame.dealer.score > 21) {\n currentGame.dealer.isBusted = true;\n }\n \n // Determine winner and update bank/profit\n if (currentGame.player.isBusted) {\n // Player already lost (handled in hit)\n } else if (currentGame.dealer.isBusted) {\n // Dealer busted, player wins\n currentGame.bank += currentGame.bet;\n currentGame.profit += currentGame.bet;\n } else if (currentGame.player.score > currentGame.dealer.score) {\n // Player wins with higher score\n currentGame.bank += currentGame.bet;\n currentGame.profit += currentGame.bet;\n } else if (currentGame.player.score < currentGame.dealer.score) {\n // Dealer wins with higher score\n currentGame.bank -= currentGame.bet;\n currentGame.profit -= currentGame.bet;\n }\n // Else it's a tie, no money changes hands\n \n return currentGame;\n};\n\n// Get a card's probability of busting (affected by booze level)\nconst getBustProbability = (score: number, boozeLevel: number): number => {\n // Basic probability calculation based on score\n const baseProbability = Math.max(0, (score - 11) / 10);\n \n // Booze increases the probability\n return Math.min(1, baseProbability + (boozeLevel * 0.05));\n};\n\n// Booze up\nexport const boozeUp = (): GameState | null => {\n if (!currentGame) return null;\n \n // Increase booze level\n currentGame.boozeLevel++;\n \n // When booze level increases, there's a chance of a random move\n // Like automatically hitting regardless of the score\n const bustProb = getBustProbability(currentGame.player.score, currentGame.boozeLevel);\n \n // If booze level is high and we have a risky score, maybe auto-hit\n if (currentGame.boozeLevel > 3 && Math.random() < bustProb && currentGame.player.score >= 15) {\n return hit();\n }\n \n return currentGame;\n};\n\n// Return current state\nexport const getState = (): GameState | null => currentGame;",[],[166,307],["D",1742472925516],[],[166,76,68],["D",1742472925516],[191],[166,76],"01175674-0585-11f0-b475-569c3dd06744","Player.ts","5b3924f8-8b12-42d9-8165-eea88056c1d4","bcaede63-165d-4ccc-b3b7-adc5ff2fc47a",["D",1742472925516],"import { Card } from \"./Card.ts\";\n\nexport interface Player {\n id: number;\n name: string;\n hand: Card[];\n score: number;\n isBusted: boolean;\n}",[],[166,328,321],"models","01175462-0585-11f0-b475-569c3dd06744","GameState.ts","c5132542-7f44-4a18-9dd2-72ad0abbb11f",["D",1742472925516],"import { Card } from \"./Card.ts\";\nimport { Player } from \"./Player.ts\";\n\nexport interface GameState {\n deck: Card[];\n player: Player;\n dealer: Player;\n boozeLevel: number;\n bet: number;\n bank: number;\n profit: number;\n}",[],[166,328,330],"011751ce-0585-11f0-b475-569c3dd06744","Card.ts","ab007678-fb60-4114-8a06-d2125c13cd49",["D",1742472925516],"export interface Card {\n suit: string;\n value: string;\n}",[],[166,328,337],"01175854-0585-11f0-b475-569c3dd06744",["D",1742472925516],[187,188,189],[166,328],"0117474c-0585-11f0-b475-569c3dd06744","gameController.ts","204a3bc3-521d-4013-aceb-906fb2391e69","a613cbb3-059a-4d18-9fc5-7b464fa1572d",["D",1742472925516],"import { Hono } from \"npm:hono\";\nimport { boozeUp, getState, hit, stand, startGame } from \"../gameEngine.ts\";\n\nconst gameRouter = new Hono();\n\ngameRouter.post(\"/start\", (c) => {\n const state = startGame();\n return c.json(state);\n});\n\ngameRouter.post(\"/hit\", (c) => {\n const state = hit();\n if (state) return c.json(state);\n return c.json({ error: \"No game in progress\" }, 400);\n});\n\ngameRouter.post(\"/stand\", (c) => {\n const state = stand();\n if (state) return c.json(state);\n return c.json({ error: \"No game in progress\" }, 400);\n});\n\ngameRouter.post(\"/booze\", (c) => {\n const state = boozeUp();\n if (state) return c.json(state);\n return c.json({ error: \"No game in progress\" }, 400);\n});\n\ngameRouter.get(\"/state\", (c) => {\n const state = getState();\n if (state) return c.json(state);\n return c.json({ error: \"No game in progress\" }, 400);\n});\n\nexport default gameRouter;",[],[166,355,348],"controllers","01174fa8-0585-11f0-b475-569c3dd06744",["D",1742472925516],[185],[166,355],"01175f7a-0585-11f0-b475-569c3dd06744",["D",1742472925516],[184,186,190,192,193],[166],["D",1742472925516],{"_11":12,"_129":74},{"_11":12,"_125":-5,"_73":74,"_31":72,"_126":127,"_128":30},{"_39":112,"_13":16,"_33":36,"_113":79,"_114":63,"_115":116,"_117":118,"_119":120,"_121":122,"_123":14,"_124":12},"ctx",{"_52":-5,"_149":401,"_402":403,"_404":405,"_406":30,"_407":30,"_408":30,"_409":24,"_410":-5,"_411":-7,"_412":-7,"_413":26,"_414":30,"_415":30,"_416":-5,"_417":30,"_418":30,"_419":30,"_420":-5},"ENV",{"_372":373,"_374":375,"_376":16,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5a709144666c9e69e88140f015c586412f0fd8d3","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · utils