2508181817

web/index.html

@@ -100,12 +100,20 @@
         <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>
+                <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">

web/script.js

@@ -30,12 +30,14 @@ let playerLayers = []; // 現在モデルに配置されているレイヤー
 let playerHP = 100;
 let enemyHP = 100;
 let currentStage = 1;
-let isBattleInProgress = false; // ★★★ バトルループ中のフラグを追加
-let draggedItem = null; // { type, layer, index }
+let isBattleInProgress = false;
+let draggedItem = null;
 let dragOverIndex = null; // 並び替え先のインデックス
 let wasDroppedSuccessfully = false; // ★★★ このフラグを追加
 let currentEnemy = { image_b64: null, label: null }; // ★★★ クライアント側で敵の状態を保持
 let ENEMY_MAX_HP = 100;
+let selectedLayerForMove = null; // タップで移動対象として選択されたレイヤーのインデックス
+
 const PLAYER_MAX_HP = 100;
 
 const allAvailableLayers = [
@@ -184,30 +186,53 @@ function updatePlayerModelUI() {
         }
     });
 
+    const createDropZone = (index) => {
+        const zone = document.createElement('div');
+        zone.className = 'player-layer-drop-zone h-4'; // スマホで見えるように少し高さを付ける
+        zone.dataset.index = index;
+        zone.addEventListener('click', () => handleLayerMove(index));
+        modelArea.appendChild(zone);
+    };
+
+
     if (playerLayers.length === 0) {
         const p = document.createElement('p');
         p.className = 'text-gray-400 text-center p-4';
-        p.textContent = 'インベントリからレイヤー（層）をここにドラッグ＆ドロップしてください。';
+        p.textContent = 'インベントリからレイヤー（層）をここにドラッグ＆ドロップ or タップしてください。';
         modelArea.appendChild(p);
     } else {
+        createDropZone(0); // 最初のレイヤーの上にドロップゾーンを作成
         playerLayers.forEach((layer, index) => {
             const div = document.createElement('div');
             div.className = `player-layer ${layer.rarity === 'gold' ? 'gold-rare' : ''}`;
             div.draggable = true;
             div.dataset.index = index;
+
+            // ★★★ 選択状態のスタイルを適用 ★★★
+            if (selectedLayerForMove === index) {
+                div.classList.add('border-cyan-400', 'scale-105');
+            }
+
             div.innerHTML = `<span><i class="fas ${layer.icon} mr-2"></i>${layer.name}</span><button class="text-red-400 hover:text-red-200 text-lg">&times;</button>`;
-            div.querySelector('button').onclick = () => removeLayer(index);
+            div.querySelector('button').onclick = (e) => {
+                e.stopPropagation(); // 親要素のクリックイベントを発火させない
+                removeLayer(index);
+            };
 
+            // ドラッグ＆ドロップイベント (PC用)
             div.addEventListener('dragstart', (e) => handleDragStart(e, index, layer));
             div.addEventListener('dragend', handleDragEnd);
             div.addEventListener('dragenter', (e) => handleDragEnterModelItem(e, index));
             div.addEventListener('dragleave', (e) => e.currentTarget.classList.remove('is-dragged-over'));
 
+            // ★★★ タップイベント (スマホ用) ★★★
+            div.addEventListener('click', () => handleLayerSelectForMove(index));
+
             modelArea.appendChild(div);
+            createDropZone(index + 1); // 各レイヤーの下にドロップゾーンを作成
         });
     }
     battleBtn.disabled = playerLayers.length === 0;
-    // UI更新後に接続線を描画
     requestAnimationFrame(drawLayerConnections);
 }
 
@@ -231,8 +256,11 @@ function updatePlayerInventoryUI() {
 
             // イベントリスナー
             item.addEventListener('click', () => {
+                // PCでの説明表示機能は維持
                 showDescription(layer, document.getElementById('layer-description'));
                 runPreviewAnimation(layer, previewAnimationArea);
+                // スマホ用の追加機能
+                addLayerFromInventory(layer);
             });
             item.addEventListener('dragstart', (e) => handleInventoryDragStart(e, layer));
             item.addEventListener('dragend', handleDragEnd);
@@ -288,7 +316,7 @@ function updateHpBars() {
 async function fetchNewEnemy() {
     const response = await fetch('/api/get_enemy');
     const enemyData = await response.json();
-    
+
     // ★★★ グローバル変数に保存
     currentEnemy = {
         image_b64: enemyData.image_b64,
@@ -376,7 +404,7 @@ function dropOnModelArea(ev) {
         } else {
             logMessage(`レイヤー追加: ${draggedItem.layer.name}`, 'action');
         }
-    } else { 
+    } else {
         logMessage('モデルの順序を変更しました。', 'info');
     }
 
@@ -550,6 +578,13 @@ function showItemSelection() {
     itemSelectionModal.classList.add('flex');
     itemChoices.innerHTML = '';
 
+    const confirmBtn = document.getElementById('confirm-choice-btn');
+    const choiceFooter = document.getElementById('choice-selection-footer');
+    const selectedChoiceInput = document.getElementById('selected-choice-id');
+    confirmBtn.disabled = true;
+    choiceFooter.classList.add('opacity-0');
+    selectedChoiceInput.value = '';
+
     // ★★★ ステージに応じたゴールドレア出現確率を計算
     // ステージ1: 10%, ステージ2: 20%, ステージ3: 30%, ステージ4: 40%, ステージ5: 50%
     const goldChance = Math.min(0.1 * currentStage, 0.5);
@@ -595,9 +630,9 @@ function showItemSelection() {
     // 選択肢のUIを生成
     finalChoices.forEach(layer => {
         const item = document.createElement('div');
-        // ★★★ レアリティクラスを追加
         item.className = `layer-item w-48 h-48 flex flex-col justify-center ${layer.rarity === 'gold' ? 'gold-rare' : ''}`;
         item.innerHTML = `<i class="fas ${layer.icon} layer-icon text-5xl"></i><p class="text-lg mt-2">${layer.name}</p>`;
+        item.dataset.id = layer.id; // ★★★ IDをデータ属性として保持
 
         // ★★★ ゴールドレアの場合、キラキラエフェクトを追加
         if (layer.rarity === 'gold') {
@@ -614,11 +649,25 @@ function showItemSelection() {
             item.appendChild(sparkleContainer);
         }
 
-        item.onclick = () => selectItem(layer);
-        item.addEventListener('mouseenter', () => {
+                // ★★★ クリック/タップ時の動作を変更 ★★★
+        item.addEventListener('click', () => {
+            // 他のアイテムの選択状態を解除
+            document.querySelectorAll('#item-choices .layer-item').forEach(el => {
+                el.classList.remove('border-cyan-400', 'scale-105');
+            });
+            // このアイテムを選択状態にする
+            item.classList.add('border-cyan-400', 'scale-105');
+
+            // 説明とプレビューを表示
             showDescription(layer, choiceDescription);
             runPreviewAnimation(layer, choicePreviewArea);
+
+            // 決定ボタンを有効化し、選択したIDを保持
+            selectedChoiceInput.value = layer.id;
+            confirmBtn.disabled = false;
+            choiceFooter.classList.remove('opacity-0');
         });
+
         itemChoices.appendChild(item);
     });
 }
@@ -788,6 +837,54 @@ async function runPreviewAnimation(layer, previewArea) {
     }
 }
 
+// ★★★ インベントリからのタップでレイヤーを追加する関数 ★★★
+function addLayerFromInventory(layer) {
+    // 新しい一意なインスタンスを作成して追加
+    const layerInstance = {
+        ...layer,
+        instanceId: `inst_${Date.now()}_${Math.random()}`
+    };
+    if (useInventoryItem(layerInstance)) {
+        playerLayers.push(layerInstance);
+        logMessage(`レイヤー追加: ${layerInstance.name}`, 'action');
+        updatePlayerModelUI();
+        updatePlayerInventoryUI();
+    } else {
+        logMessage(`インベントリに ${layer.name} がありません`, 'error');
+    }
+}
+
+// ★★★ モデル内のレイヤーを移動のために「選択」する関数 ★★★
+function handleLayerSelectForMove(index) {
+    if (selectedLayerForMove === index) {
+        // 同じレイヤーを再度タップしたら選択解除
+        selectedLayerForMove = null;
+        logMessage('レイヤーの移動をキャンセルしました。', 'info');
+    } else {
+        selectedLayerForMove = index;
+        logMessage(`レイヤー '${playerLayers[index].name}' を選択しました。移動先の青いエリアをタップしてください。`, 'action');
+    }
+    updatePlayerModelUI(); // UIを再描画して選択状態を反映
+}
+
+// ★★★ 選択したレイヤーをドロップゾーンに「移動」する関数 ★★★
+function handleLayerMove(targetIndex) {
+    if (selectedLayerForMove === null) return; // 何も選択されていなければ何もしない
+
+    // 移動するレイヤーを取得
+    const [movedLayer] = playerLayers.splice(selectedLayerForMove, 1);
+
+    // 削除によってインデックスがずれるのを補正
+    const adjustedTargetIndex = selectedLayerForMove < targetIndex ? targetIndex - 1 : targetIndex;
+
+    // 新しい場所にレイヤーを挿入
+    playerLayers.splice(adjustedTargetIndex, 0, movedLayer);
+
+    logMessage('レイヤーを移動しました。', 'success');
+    selectedLayerForMove = null; // 移動が終わったら選択状態を解除
+    updatePlayerModelUI();
+}
+
 // --- Main Game Logic ---
 function addInventoryItem(layer) {
     playerInventory[layer.id] = (playerInventory[layer.id] || 0) + 1;
@@ -1580,4 +1677,14 @@ document.addEventListener('drop', (e) => {
 document.addEventListener('DOMContentLoaded', () => {
     gameContainer.style.opacity = 0;
     gameContainer.style.transition = 'opacity 0.5s ease-in-out';
+});
+
+document.getElementById('confirm-choice-btn').addEventListener('click', () => {
+    const selectedId = document.getElementById('selected-choice-id').value;
+    if (selectedId) {
+        const selectedLayer = allAvailableLayers.find(l => l.id == selectedId);
+        if (selectedLayer) {
+            selectItem(selectedLayer);
+        }
+    }
 });