Update index.html

index.html

@@ -184,7 +184,7 @@
                         class="w-full py-3 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold rounded-lg shadow-md hover:shadow-lg active:scale-95 transition-all flex items-center justify-center gap-2"
                     >
                         <span class="text-xl leading-none">🍀</span>
-                        <span class="text-sm">套用：幸運遇見你<br><span class="text-xs opacity-90">(如皓老師分享)</span></span>
+                        <span class="text-sm">套用：[幸運草與一句話]</span>
                     </button>
                     <p class="text-xs text-slate-400 mt-2">提示：套用後會自動切換為 6x8 網格並填入內容。</p>
                 </div>
@@ -314,14 +314,14 @@
                                 ref="batchInputRef"
                                 type="text" 
                                 v-model="batchInputBuffer" 
-                                placeholder="輸入句子依序填入..."
+                                placeholder="輸入文字將循環填入選取格子..."
                                 class="flex-1 min-w-0 border-2 border-indigo-200 rounded-lg p-2 text-sm focus:border-indigo-500 focus:outline-none"
                             >
                             <button 
                                 @click="applyBatchText"
                                 class="px-3 py-2 bg-indigo-600 text-white font-bold rounded-lg text-sm hover:bg-indigo-700 transition-all whitespace-nowrap"
                             >
-                                依序填入
+                                填入
                             </button>
                         </div>
                         <input 
@@ -338,7 +338,7 @@
                             :style="{ color: selectedCellIndices.size > 0 ? selectedColor : '' }"
                         >
                         <p class="text-xs text-slate-400 mt-1" v-if="selectedCellIndices.size <= 1">提示：輸入 2~3 個字或數字時，字體會自動縮小。</p>
-                        <p class="text-xs text-indigo-500 mt-1 font-bold" v-else>批次模式：按照點選順序（1→{{selectedCellIndices.size}}）依序填入文字。</p>
+                        <p class="text-xs text-indigo-500 mt-1 font-bold" v-else>批次模式：文字將依序循環填入選取格子。</p>
                     </div>
 
                     <!-- Icon Picker -->
@@ -581,6 +581,12 @@
                                 :class="{ 'ring-4 ring-indigo-500 ring-inset z-20': selectedCellIndices.has(index) }"
                                 :style="{ backgroundColor: cell.bgColor }"
                             >
+                                <!-- Selection Order Badge (Only visible in Multi-Select Mode when selected) -->
+                                <div v-if="isMultiSelectMode && selectedCellIndices.has(index)" 
+                                     class="absolute top-1 right-1 w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold z-30 shadow-sm border-2 border-white">
+                                    {{ getSelectionOrder(index) }}
+                                </div>
+
                                 <div class="rotation-wrapper pointer-events-none" :style="{ transform: `rotate(${cell.rotation}deg)` }">
                                     <span v-if="cell.type === 'text'" class="font-bold cell-text block" :class="getFontSizeClass(cell.content)" :style="{ color: cell.color }">
                                         {{ cell.content }}
@@ -661,7 +667,13 @@
                 '飛機': '✈️',
                 '花朵': '🌸',
                 '樹木': '🌳',
-                '禮物': '🎁'
+                '禮物': '🎁',
+                '猴子臉': '🐵',
+                '猴子': '🐒',
+                '馬臉': '🐴',
+                '馬': '🐎',
+                '白圓': '⚪',
+                '白方': '⬜'
             };
 
             // --- State Initialization ---
@@ -724,6 +736,9 @@
                 return !gridOptions.some(opt => opt.label === currentGrid.value.label);
             });
 
+            // NEW: Computed array to track selection order
+            const selectedIndicesArray = computed(() => Array.from(selectedCellIndices.value));
+
             // --- Helper: Dynamic Font Size ---
             const getFontSizeClass = (content) => {
                 const len = content ? content.length : 0;
@@ -746,6 +761,12 @@
                 return "60";
             };
 
+            // NEW: Helper to get order for UI Badge
+            const getSelectionOrder = (index) => {
+                const order = selectedIndicesArray.value.indexOf(index);
+                return order !== -1 ? order + 1 : '';
+            };
+
             // --- Actions ---
 
             const changeGridSize = (conf) => {
@@ -1127,7 +1148,7 @@
                 });
             };
 
-            // Batch Text Update (Sequential)
+            // Batch Text Update (Sequential with Modulo)
             const applyBatchText = () => {
                 const text = batchInputBuffer.value;
                 if (!text || selectedCellIndices.value.size === 0) return;
@@ -1136,18 +1157,15 @@
                 // However, Set iteration order is insertion order in JS.
                 // So [...Set] preserves click order.
                 const indices = [...selectedCellIndices.value];
-                const chars = text.split(''); // Split string into chars. 
-                // Note: Complex emojis or surrogate pairs might need better splitting if advanced usage, 
-                // but for general text split('') is okay-ish, or use [...text] for better unicode support.
-                const charArray = [...text]; 
+                const charArray = [...text]; // Use spread for unicode safety
 
                 indices.forEach((cellIndex, i) => {
-                    if (i < charArray.length) {
-                        const cell = activePageCells.value[cellIndex];
-                        cell.type = 'text';
-                        cell.content = charArray[i];
-                        cell.color = selectedColor.value;
-                    }
+                    // Use modulo to cycle through input text
+                    const char = charArray[i % charArray.length];
+                    const cell = activePageCells.value[cellIndex];
+                    cell.type = 'text';
+                    cell.content = char;
+                    cell.color = selectedColor.value;
                 });
                 
                 // Clear buffers after apply
@@ -1438,7 +1456,9 @@
                 // Multi-select
                 isMultiSelectMode,
                 toggleMultiSelectMode,
-                clearSelection
+                clearSelection,
+                getSelectionOrder,
+                selectedIndicesArray
             };
         }
     }).mount('#app');