🎲 骰子游戏

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; /** Utility functions */ function generateValidRoll(): number { return Math.floor(Math.random() * 6) + 1; } function getDiceEmoji(roll: number): string { const diceEmojis = [ '⚀', // 1 '⚁', // 2 '⚂', // 3 '⚃', // 4 '⚄', // 5 '⚅' // 6 ]; return diceEmojis[roll - 1]; } function formatTime(timestamp: number): string { const date = new Date(timestamp); return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false }); } /** Roll history item type */ interface RollHistoryItem { roll: number; timestamp: number; id: string; // Add unique identifier } function App() { const [roll, setRoll] = useState(generateValidRoll()); const [isRolling, setIsRolling] = useState(false); const [rollHistory, setRollHistory] = useState(() => { // Initialize history from localStorage or empty array const savedHistory = localStorage.getItem('diceRollHistory'); return savedHistory ? JSON.parse(savedHistory) : []; }); // Update localStorage whenever roll history changes useEffect(() => { localStorage.setItem('diceRollHistory', JSON.stringify(rollHistory)); }, [rollHistory]); const handleRoll = async () => { if (isRolling) return; setIsRolling(true); // More dynamic rolling animation const animationSteps = [ generateValidRoll(), generateValidRoll(), generateValidRoll(), generateValidRoll() ]; for (const tempRoll of animationSteps) { setRoll(tempRoll); await new Promise(resolve => setTimeout(resolve, 80)); } // Generate final roll directly const finalRoll = generateValidRoll(); setRoll(finalRoll); // Add new roll to history (limit to last 10 rolls) setRollHistory(prevHistory => { const newHistoryItem: RollHistoryItem = { roll: finalRoll, timestamp: Date.now(), id: `roll-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` // Unique ID }; const newHistory = [newHistoryItem, ...prevHistory].slice(0, 10); return newHistory; }); setIsRolling(false); }; const clearHistory = () => { setRollHistory([]); localStorage.removeItem('diceRollHistory'); }; return (

{getDiceEmoji(roll)}

{/* Roll History Section */}

{/* Fixed Header */}

历史记录

{/* Scrollable Content Area */}

{rollHistory.length === 0 ? (

暂无历史记录

) : ( rollHistory.map((historyItem, index) => (

{getDiceEmoji(historyItem.roll)} {historyItem.roll}

{formatTime(historyItem.timestamp)}

)) )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const roll = generateValidRoll(); return new Response(` 🎲 骰子游戏

查看源代码 `, { headers: { 'Content-Type': 'text/html' } }); }

liyi