Spaces:
Sleeping
Sleeping
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Machine Learning RPG</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="text-white"> | |
| <div class="background-grid"></div> | |
| <div class="background-glow"></div> | |
| <!-- ★★★ タイトル画面を追加 ★★★ --> | |
| <div id="title-screen" class="fixed inset-0 z-50 flex flex-col justify-center items-center"> | |
| <div class="title-logo"> | |
| <h1 class="text-7xl font-bold tracking-widest">MACHINE LEARNING</h1><br> | |
| <h2 class="text-8xl font-bold tracking-wider text-glow-yellow">RPG</h2> | |
| </div> | |
| <button id="start-game-btn" class="btn btn-primary mt-12 text-2xl px-12 py-4">ゲームを始める</button> | |
| <p class="mt-8 text-cyan-300/60 font-mono">ニューラルネットワークを構築・訓練し、MNISTモンスターを倒せ！</p> | |
| </div> | |
| <!-- ★★★ ゲームコンテナを追加 ★★★ --> | |
| <div id="game-container" class="container mx-auto p-4 h-screen flex-col hidden"> | |
| <header class="text-center mb-4 flex-shrink-0"> | |
| <h1 class="text-5xl font-bold tracking-widest text-glow">Machine Learning RPG</h1> | |
| <p class="text-cyan-300/80 font-mono tracking-wider">ニューラルネットワークを構築・訓練し、MNISTモンスターを倒せ！</p> | |
| </header> | |
| <div class="flex-grow flex gap-4 min-h-0"> | |
| <!-- 左: モデル構築エリア --> | |
| <aside class="w-1/4 glass-pane flex flex-col"> | |
| <h2 class="section-title"><i class="fas fa-microchip mr-3"></i>あなたのモデル</h2> | |
| <div id="player-model-layers" class="flex-grow bg-black/20 rounded-lg p-2 space-y-2 overflow-y-auto min-h-0 relative"> | |
| <canvas id="layer-connections" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas> | |
| <p class="text-gray-400 text-center p-4">インベントリからレイヤー（層）をここにドラッグ＆ドロップしてください。</p> | |
| </div> | |
| <div class="mt-4 text-center p-4"> | |
| <button id="battle-btn" class="btn btn-primary w-full" disabled> | |
| <i class="fas fa-fist-raised"></i> バトル開始！ | |
| </button> | |
| <button id="restart-btn" class="btn btn-secondary w-full mt-2 hidden"> | |
| <i class="fas fa-redo"></i> タイトルへ戻る | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- 中央: バトルエリア --> | |
| <main class="w-1/2 glass-pane p-4 flex flex-col items-center justify-between relative"> | |
| <div class="w-full"> | |
| <h2 class="character-name text-red-400">ENEMY: MNIST_MONSTER</h2> | |
| <div class="hp-bar-container"> | |
| <div id="enemy-hp-bar" class="hp-bar" style="width: 100%">100%</div> | |
| </div> | |
| </div> | |
| <div id="enemy-area" class="text-center relative"> | |
| <div class="enemy-scanline"></div> | |
| <div class="enemy-glitch-overlay"></div> | |
| <p id="enemy-message" class="text-lg text-cyan-200">挑戦者を待っている...</p> | |
| <img id="enemy-image" src="" alt="MNIST Monster" class="hidden w-48 h-48 rounded-lg mt-4 enemy-image-style"> | |
| </div> | |
| <div class="w-full"> | |
| <h2 class="character-name text-green-400">PLAYER: AI_AGENT</h2> | |
| <div class="hp-bar-container"> | |
| <div id="player-hp-bar" class="hp-bar" style="width: 100%">100%</div> | |
| </div> | |
| </div> | |
| <div id="battle-log" class="absolute bottom-24 left-1/2 -translate-x-1/2 text-2xl font-bold text-center w-full text-glow-yellow"></div> | |
| </main> | |
| <!-- 右: アイテム（層）エリア --> | |
| <aside class="w-1/4 glass-pane flex flex-col"> | |
| <h2 class="section-title"><i class="fas fa-cubes mr-3"></i>インベントリ</h2> | |
| <div id="layer-inventory" class="p-2 min-h-0 flex-grow overflow-y-auto"></div> | |
| <div id="item-info-area" class="mt-4 h-64 glass-pane-inner flex-shrink-0 flex flex-col"> | |
| <div id="layer-description" class="text-sm text-gray-300 h-16 overflow-y-auto mb-2 p-2"> | |
| <p>アイテムをクリックまたはホバーすると、ここに説明が表示されます。</p> | |
| </div> | |
| <div id="preview-animation-area" class="flex-grow bg-black/30 rounded-lg relative overflow-hidden"> | |
| <div class="idle-particles"></div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- 下: メッセージログエリア --> | |
| <footer id="message-log-area" class="flex-shrink-0 h-24 glass-pane mt-4 p-3 overflow-y-auto font-mono text-sm"></footer> | |
| </div> | |
| <!-- モーダル (変更なし) --> | |
| <div id="item-selection-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm flex-col justify-center items-center z-50 hidden"> | |
| <h2 class="text-4xl font-bold mb-8 text-glow-yellow tracking-widest">報酬を選択せよ</h2> | |
| <div id="item-choices" class="flex gap-8"></div> | |
| <div id="choice-info-area" class="mt-8 w-3/4 h-64 glass-pane flex gap-4 p-4"> | |
| <div id="choice-description" class="w-1/2 text-lg text-gray-300"> | |
| <p>アイテムにカーソルを合わせるかタップすると、ここに説明が表示されます。</p> | |
| </div> | |
| <div id="choice-preview-area" class="w-1/2 bg-black/30 rounded-lg relative overflow-hidden"> | |
| <div class="idle-particles"></div> | |
| </div> | |
| </div> | |
| <!-- ★★★ ここから追加 ★★★ --> | |
| <div id="choice-selection-footer" class="mt-4 text-center opacity-0 transition-opacity duration-300"> | |
| <button id="confirm-choice-btn" class="btn btn-primary text-xl px-10 py-3" disabled> | |
| <i class="fas fa-check-circle mr-2"></i> このアイテムにする | |
| </button> | |
| <!-- 選択されたアイテムのIDを保持するための非表示要素 --> | |
| <input type="hidden" id="selected-choice-id"> | |
| </div> | |
| </div> | |
| <div id="animation-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm flex justify-center items-center z-50 hidden"> | |
| <div id="visualization-area" class="w-[95%] h-[90%] glass-pane relative p-4 overflow-hidden"> | |
| <div id="labels-container" class="absolute inset-x-0 top-0 h-24 pointer-events-none flex items-center"></div> | |
| <div id="prediction-result" class="absolute text-2xl font-bold right-8 top-8 opacity-0 transition-opacity duration-500"></div> | |
| <button id="close-modal-btn" class="absolute top-4 left-4 text-3xl text-gray-400 hover:text-white transition-colors">×</button> | |
| </div> | |
| </div> | |
| <!-- eel.jsの読み込みを削除 --> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> | |
| </html> |