feat: add Creative Mode for multi-character duplicate lineup and fix squashed picker cards

js/app.js

@@ -15,7 +15,8 @@ const state = {
   currentJsonMode: 'freesr',
   activeTab: 'tab-dashboard',
   selectedLineupSlot: null,
-  selectedAvatarDetail: null
+  selectedAvatarDetail: null,
+  creativeMode: localStorage.getItem('gac_srtool_creative_mode') === 'true'
 };
 
 // UI Elements Map
@@ -43,6 +44,8 @@ const el = {
   lblFloorId: document.getElementById('lbl-floor-id'),
   lblCoordinates: document.getElementById('lbl-coordinates'),
   lineupContainer: document.getElementById('lineup-container'),
+  toggleCreativeMode: document.getElementById('toggle-creative-mode'),
+  badgeCreativeMode: document.getElementById('badge-creative-mode'),
   btnQuickMaxAll: document.getElementById('btn-quick-max-all'),
   btnQuickSyncPersistent: document.getElementById('btn-quick-sync-persistent'),
 
@@ -566,6 +569,13 @@ async function refreshStatus() {
 
 // Render party lineup cards
 function renderLineup(lineups) {
+  if (el.toggleCreativeMode) {
+    el.toggleCreativeMode.checked = state.creativeMode;
+  }
+  if (el.badgeCreativeMode) {
+    el.badgeCreativeMode.style.display = state.creativeMode ? 'inline-flex' : 'none';
+  }
+
   el.lineupContainer.innerHTML = '';
   let currentLineup = lineups || state.statusData?.lineups || DEFAULT_LINEUP;
 
@@ -576,15 +586,29 @@ function renderLineup(lineups) {
     currentLineup = mapped;
   }
 
-  for (let slot = 0; slot < 4; slot++) {
+  // Determine slots to render
+  let slotKeys = [];
+  if (state.creativeMode) {
+    slotKeys = Object.keys(currentLineup).map(k => parseInt(k, 10)).sort((a, b) => a - b);
+    if (slotKeys.length === 0) slotKeys = [0];
+  } else {
+    slotKeys = [0, 1, 2, 3];
+  }
+
+  slotKeys.forEach(slot => {
     const avatarId = currentLineup[slot] || currentLineup[String(slot)] || 0;
     const slotCard = document.createElement('div');
     slotCard.className = `lineup-slot-card ${avatarId ? 'filled' : ''}`;
     slotCard.title = t('slotTooltip');
 
+    const removeSlotBtnHtml = state.creativeMode ? `
+      <button type="button" class="btn-lineup-remove-slot" title="${t('deleteItem') || 'ลบ'}" data-slot="${slot}">✕</button>
+    ` : '';
+
     if (avatarId === 0) {
       slotCard.innerHTML = `
         <div class="lineup-slot-num">Slot ${slot + 1}</div>
+        ${removeSlotBtnHtml}
         <div style="font-size: 2.2rem; color: var(--text-muted); opacity: 0.5;">➕</div>
         <div style="font-weight: 700; color: var(--text-muted); margin-top: 0.5rem;">${t('slotEmpty')}</div>
       `;
@@ -592,11 +616,12 @@ function renderLineup(lineups) {
       const info = getAvatarInfo(avatarId);
       slotCard.innerHTML = `
         <div class="lineup-slot-num">Slot ${slot + 1}</div>
+        ${removeSlotBtnHtml}
         <img class="lineup-slot-img"
              src="./assets/avatars/${avatarId}.png"
              onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${avatarId}.png';}else{this.style.display='none';}"
              alt="${info.name}">
-        <div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight); margin-top: 0.35rem;">${info.name}</div>
+        <div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight); margin-top: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">${info.name}</div>
         <div style="display: flex; gap: 0.4rem; margin-top: 0.4rem; justify-content: center; align-items: center;">
           ${getElementIconHtml(info.element, 20)}
           ${getPathIconHtml(info.path, 20)}
@@ -604,14 +629,113 @@ function renderLineup(lineups) {
       `;
     }
 
-    slotCard.addEventListener('click', () => {
+    slotCard.addEventListener('click', (e) => {
+      if (e.target.closest('.btn-lineup-remove-slot')) {
+        e.stopPropagation();
+        removeLineupSlot(slot);
+        return;
+      }
       openLineupPicker(slot);
     });
 
     el.lineupContainer.appendChild(slotCard);
+  });
+
+  // In Creative Mode: render "+ เพิ่ม Slot" button card
+  if (state.creativeMode) {
+    const addSlotCard = document.createElement('div');
+    addSlotCard.className = 'lineup-slot-card lineup-add-slot-card';
+    addSlotCard.title = t('btnAddSlot') || '+ เพิ่ม Slot';
+    addSlotCard.innerHTML = `
+      <div style="font-size: 2.2rem; color: var(--accent-green); line-height: 1;">➕</div>
+      <div style="font-weight: 700; color: var(--accent-green); margin-top: 0.5rem;">${t('btnAddSlot') || '+ เพิ่ม Slot'}</div>
+    `;
+    addSlotCard.addEventListener('click', () => {
+      addLineupSlot();
+    });
+    el.lineupContainer.appendChild(addSlotCard);
   }
 }
 
+// Add extra slot in Creative Mode
+async function addLineupSlot() {
+  state.statusData = state.statusData || {};
+  let currentLineup = { ...(state.statusData.lineups || DEFAULT_LINEUP) };
+  if (Array.isArray(currentLineup)) {
+    const mapped = {};
+    currentLineup.forEach((id, idx) => { mapped[idx] = id; });
+    currentLineup = mapped;
+  }
+  const keys = Object.keys(currentLineup).map(k => parseInt(k, 10)).sort((a, b) => a - b);
+  const nextSlot = keys.length > 0 ? Math.max(...keys) + 1 : 0;
+  currentLineup[nextSlot] = 0;
+  state.statusData.lineups = currentLineup;
+
+  if (state.fullFreesrData) {
+    state.fullFreesrData.lineups = currentLineup;
+    if (state.fullFreesrData.battle_config) {
+      state.fullFreesrData.battle_config.custom_battle_lineup = currentLineup;
+    }
+  }
+
+  if (state.isConnected) {
+    if (state.serverMode === 'gac') {
+      await apiCall('/api/persistent', 'POST', { lineups: currentLineup }).catch(() => {});
+    } else {
+      await saveFreesrChangesToServer().catch(() => {});
+    }
+  }
+
+  renderLineup(currentLineup);
+  openLineupPicker(nextSlot);
+}
+
+// Remove slot in Creative Mode
+async function removeLineupSlot(slotIndex) {
+  state.statusData = state.statusData || {};
+  let currentLineup = { ...(state.statusData.lineups || DEFAULT_LINEUP) };
+  if (Array.isArray(currentLineup)) {
+    const mapped = {};
+    currentLineup.forEach((id, idx) => { mapped[idx] = id; });
+    currentLineup = mapped;
+  }
+
+  const keys = Object.keys(currentLineup).map(k => parseInt(k, 10)).sort((a, b) => a - b);
+  const newLineup = {};
+  let newIdx = 0;
+  for (const k of keys) {
+    if (k !== slotIndex) {
+      newLineup[newIdx] = currentLineup[k];
+      newIdx++;
+    }
+  }
+
+  if (Object.keys(newLineup).length === 0) {
+    newLineup[0] = 0;
+  }
+
+  state.statusData.lineups = newLineup;
+
+  if (state.fullFreesrData) {
+    state.fullFreesrData.lineups = newLineup;
+    if (state.fullFreesrData.battle_config) {
+      state.fullFreesrData.battle_config.custom_battle_lineup = newLineup;
+    }
+  }
+
+  if (state.isConnected) {
+    if (state.serverMode === 'gac') {
+      await apiCall('/api/persistent', 'POST', { lineups: newLineup }).catch(() => {});
+    } else {
+      await saveFreesrChangesToServer().catch(() => {});
+    }
+  }
+
+  renderLineup(newLineup);
+  const toastMsg = t('toastSlotRemoved', { slot: slotIndex + 1 }) || `ลบ Slot ${slotIndex + 1} เรียบร้อยแล้ว`;
+  showToast(toastMsg, 'info');
+}
+
 // Lineup Picker Modal
 function openLineupPicker(slotIndex) {
   state.selectedLineupSlot = slotIndex;
@@ -627,13 +751,10 @@ function renderPickerGrid() {
 
   // Option to remove character from slot
   const removeCard = document.createElement('div');
-  removeCard.className = 'card';
-  removeCard.style.padding = '0.75rem';
-  removeCard.style.textAlign = 'center';
-  removeCard.style.cursor = 'pointer';
+  removeCard.className = 'picker-remove-card';
   removeCard.innerHTML = `
-    <div style="font-size: 1.5rem; color: var(--accent-red);">❌</div>
-    <div style="font-size: 0.85rem; font-weight: bold; margin-top: 0.35rem; color: var(--accent-red);">${t('removeFromTeam')}</div>
+    <span style="font-size: 1.15rem; line-height: 1;">❌</span>
+    <span>${t('removeFromTeam')}</span>
   `;
   removeCard.addEventListener('click', async () => {
     await assignAvatarToLineup(state.selectedLineupSlot, 0);
@@ -650,26 +771,21 @@ function renderPickerGrid() {
     }
 
     const card = document.createElement('div');
-    card.className = `card avatar-card card-rarity-${meta.rarity}`;
-    card.style.minHeight = 'auto';
-    card.style.padding = '0.85rem';
-    card.style.cursor = 'pointer';
+    card.className = `picker-card-item card-rarity-${meta.rarity}`;
 
     card.innerHTML = `
-      <div style="display: flex; align-items: center; gap: 0.65rem;">
-        <div class="avatar-image-container" style="width: 44px; height: 44px;">
-          <img class="avatar-img"
-               src="./assets/avatars/${item.avatar_id}.png"
-               onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${item.avatar_id}.png';}else{this.style.display='none';}"
-               alt="${meta.name}">
-        </div>
-        <div>
-          <div style="font-weight: 700; font-size: 0.9rem;">${meta.name}</div>
-          <div style="font-size: 0.725rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.35rem;">
-            ${getElementIconHtml(meta.element, 16)}
-            ${getPathIconHtml(meta.path, 16)}
-            <span style="margin-left: 0.25rem;">Lv. ${item.level} • E${item.rank}</span>
-          </div>
+      <div class="picker-avatar-img-wrap">
+        <img class="picker-avatar-img"
+             src="./assets/avatars/${item.avatar_id}.png"
+             onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${item.avatar_id}.png';}else{this.style.display='none';}"
+             alt="${meta.name}">
+      </div>
+      <div class="picker-avatar-info">
+        <div class="picker-avatar-name" title="${meta.name}">${meta.name}</div>
+        <div class="picker-avatar-subinfo">
+          ${getElementIconHtml(meta.element, 18)}
+          ${getPathIconHtml(meta.path, 18)}
+          <span style="font-weight: 600; margin-left: 0.2rem;">Lv. ${item.level} • E${item.rank}</span>
         </div>
       </div>
     `;
@@ -688,9 +804,26 @@ async function assignAvatarToLineup(slot, avatarId) {
   try {
     state.statusData = state.statusData || {};
     const lineups = { ...(state.statusData.lineups || DEFAULT_LINEUP) };
+
+    // In Normal Mode: Prevent duplicates by clearing other slots that had this avatar
+    if (!state.creativeMode && avatarId !== 0) {
+      for (const s in lineups) {
+        if (parseInt(s, 10) !== slot && lineups[s] === avatarId) {
+          lineups[s] = 0;
+        }
+      }
+    }
+
     lineups[slot] = avatarId;
     state.statusData.lineups = lineups;
 
+    if (state.fullFreesrData) {
+      state.fullFreesrData.lineups = lineups;
+      if (state.fullFreesrData.battle_config) {
+        state.fullFreesrData.battle_config.custom_battle_lineup = lineups;
+      }
+    }
+
     if (state.isConnected) {
       if (state.serverMode === 'gac') {
         await apiCall('/api/persistent', 'POST', { lineups });
@@ -1952,6 +2085,21 @@ function setupEvents() {
   el.btnClosePickerModal.addEventListener('click', () => el.modalLineupPicker.classList.remove('active'));
   el.pickerSearch.addEventListener('input', renderPickerGrid);
 
+  // Creative Mode Toggle
+  if (el.toggleCreativeMode) {
+    el.toggleCreativeMode.checked = state.creativeMode;
+    el.toggleCreativeMode.addEventListener('change', (e) => {
+      state.creativeMode = e.target.checked;
+      localStorage.setItem('gac_srtool_creative_mode', state.creativeMode);
+      if (el.badgeCreativeMode) {
+        el.badgeCreativeMode.style.display = state.creativeMode ? 'inline-flex' : 'none';
+      }
+      renderLineup(state.statusData?.lineups);
+      const title = t('lblCreativeMode') || 'โหมดสร้างสรรค์';
+      showToast(`${title}: ${state.creativeMode ? 'ON' : 'OFF'}`, 'info');
+    });
+  }
+
   // Quick Action Buttons on Dashboard
   el.btnQuickMaxAll.addEventListener('click', maxAllAvatars);
   el.btnMaxAllAvatars.addEventListener('click', maxAllAvatars);

js/i18n.js

@@ -22,6 +22,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "เปิดใช้งานฟังก์ชันพิเศษ Aeon ★ Aha ทั่วทั้งเซิร์ฟเวอร์",
     "btnAddLc": "+ เพิ่ม LC",
     "btnAddRelic": "+ เพิ่มรีลิกส์",
+    "btnAddSlot": "+ เพิ่ม Slot",
+    "lblCreativeMode": "โหมดสร้างสรรค์",
+    "badgeCreative": "โหมดสร้างสรรค์",
+    "toastSlotRemoved": "ลบ Slot {slot} เรียบร้อยแล้ว",
     "modalAddLcTitle": "🗡️ เพิ่มกรวยแสงลง FreeSR",
     "modalAddRelicTitle": "🛡️ เพิ่มรีลิกส์ลง FreeSR",
     "lblSelectLc": "เลือกกรวยแสง",
@@ -216,6 +220,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Enable server-wide Aeon ★ Aha special trait",
     "btnAddLc": "+ Add LC",
     "btnAddRelic": "+ Add Relic",
+    "btnAddSlot": "+ Add Slot",
+    "lblCreativeMode": "Creative Mode",
+    "badgeCreative": "Creative",
+    "toastSlotRemoved": "Removed Slot {slot}",
     "modalAddLcTitle": "🗡️ Add Light Cone to FreeSR",
     "modalAddRelicTitle": "🛡️ Add Relic to FreeSR",
     "lblSelectLc": "Select Light Cone",
@@ -410,6 +418,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "全服启用星神·阿哈特殊被动",
     "btnAddLc": "+ 添加光锥",
     "btnAddRelic": "+ 添加遗器",
+    "btnAddSlot": "+ 添加槽位",
+    "lblCreativeMode": "创造模式",
+    "badgeCreative": "创造模式",
+    "toastSlotRemoved": "已移除槽位 {slot}",
     "modalAddLcTitle": "🗡️ 添加光锥至 FreeSR",
     "modalAddRelicTitle": "🛡️ 添加遗器至 FreeSR",
     "lblSelectLc": "选择光锥",
@@ -604,6 +616,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "全服啟用星神·阿哈特殊被動",
     "btnAddLc": "+ 新增光錐",
     "btnAddRelic": "+ 新增遺器",
+    "btnAddSlot": "+ 新增槽位",
+    "lblCreativeMode": "創造模式",
+    "badgeCreative": "創造模式",
+    "toastSlotRemoved": "已移除槽位 {slot}",
     "modalAddLcTitle": "🗡️ 新增光錐至 FreeSR",
     "modalAddRelicTitle": "🛡️ 新增遺器至 FreeSR",
     "lblSelectLc": "選擇光錐",
@@ -798,6 +814,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "全サーバーで星神・アッハの特殊パッシブを有効化",
     "btnAddLc": "+ 光円錐を追加",
     "btnAddRelic": "+ 遺物を追加",
+    "btnAddSlot": "+ スロット追加",
+    "lblCreativeMode": "クリエイティブモード",
+    "badgeCreative": "クリエイティブ",
+    "toastSlotRemoved": "スロット {slot} を削除しました",
     "modalAddLcTitle": "🗡️ FreeSRに光円錐を追加",
     "modalAddRelicTitle": "🛡️ FreeSRに遺物を追加",
     "lblSelectLc": "光円錐を選択",
@@ -992,6 +1012,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "서버 전체 에이언즈★아하 특수 패시브 활성화",
     "btnAddLc": "+ 광추 추가",
     "btnAddRelic": "+ 유물 추가",
+    "btnAddSlot": "+ 슬롯 추가",
+    "lblCreativeMode": "크리에이티브 모드",
+    "badgeCreative": "크리에이티브",
+    "toastSlotRemoved": "슬롯 {slot}이(가) 삭제되었습니다",
     "modalAddLcTitle": "🗡️ FreeSR에 광추 추가",
     "modalAddRelicTitle": "🛡️ FreeSR에 유물 추가",
     "lblSelectLc": "광추 선택",
@@ -1186,6 +1210,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Bật cơ chế đặc biệt Aeon ★ Aha toàn máy chủ",
     "btnAddLc": "+ Thêm Nón Ánh Sáng",
     "btnAddRelic": "+ Thêm Di Vật",
+    "btnAddSlot": "+ Thêm Vị Trí",
+    "lblCreativeMode": "Chế độ sáng tạo",
+    "badgeCreative": "Sáng tạo",
+    "toastSlotRemoved": "Đã xóa vị trí {slot}",
     "modalAddLcTitle": "🗡️ Thêm Nón Ánh Sáng vào FreeSR",
     "modalAddRelicTitle": "🛡️ Thêm Di Vật vào FreeSR",
     "lblSelectLc": "Chọn Nón Ánh Sáng",
@@ -1380,6 +1408,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Aktifkan kemampuan khusus Aeon ★ Aha di seluruh server",
     "btnAddLc": "+ Tambah Light Cone",
     "btnAddRelic": "+ Tambah Relic",
+    "btnAddSlot": "+ Tambah Slot",
+    "lblCreativeMode": "Mode Kreatif",
+    "badgeCreative": "Kreatif",
+    "toastSlotRemoved": "Slot {slot} berhasil dihapus",
     "modalAddLcTitle": "🗡️ Tambah Light Cone ke FreeSR",
     "modalAddRelicTitle": "🛡️ Tambah Relic ke FreeSR",
     "lblSelectLc": "Pilih Light Cone",
@@ -1574,6 +1606,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Activar rasgo especial de Eón ★ Aha en todo el servidor",
     "btnAddLc": "+ Añadir cono de luz",
     "btnAddRelic": "+ Añadir reliquia",
+    "btnAddSlot": "+ Añadir posición",
+    "lblCreativeMode": "Modo creativo",
+    "badgeCreative": "Creativo",
+    "toastSlotRemoved": "Posición {slot} eliminada",
     "modalAddLcTitle": "🗡️ Añadir cono de luz a FreeSR",
     "modalAddRelicTitle": "🛡️ Añadir reliquia a FreeSR",
     "lblSelectLc": "Seleccionar cono de luz",
@@ -1768,6 +1804,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Activer le trait spécial d'Éon ★ Aha sur tout le serveur",
     "btnAddLc": "+ Ajouter cône de lumière",
     "btnAddRelic": "+ Ajouter relique",
+    "btnAddSlot": "+ Ajouter un emplacement",
+    "lblCreativeMode": "Mode créatif",
+    "badgeCreative": "Créatif",
+    "toastSlotRemoved": "Emplacement {slot} supprimé",
     "modalAddLcTitle": "🗡️ Ajouter cône de lumière à FreeSR",
     "modalAddRelicTitle": "🛡️ Ajouter relique à FreeSR",
     "lblSelectLc": "Sélectionner cône de lumière",
@@ -1962,6 +2002,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Serverweite Äon ★ Aha-Spezialmechanik aktivieren",
     "btnAddLc": "+ Lichtkegel hinzufügen",
     "btnAddRelic": "+ Relikt hinzufügen",
+    "btnAddSlot": "+ Platz hinzufügen",
+    "lblCreativeMode": "Kreativmodus",
+    "badgeCreative": "Kreativ",
+    "toastSlotRemoved": "Platz {slot} entfernt",
     "modalAddLcTitle": "🗡️ Lichtkegel zu FreeSR hinzufügen",
     "modalAddRelicTitle": "🛡️ Relikt zu FreeSR hinzufügen",
     "lblSelectLc": "Lichtkegel auswählen",
@@ -2156,6 +2200,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Включить особый пассивный навык Эона ★ Аха по всему серверу",
     "btnAddLc": "+ Добавить световой конус",
     "btnAddRelic": "+ Добавить реликвию",
+    "btnAddSlot": "+ Добавить слот",
+    "lblCreativeMode": "Творческий режим",
+    "badgeCreative": "Творческий",
+    "toastSlotRemoved": "Слот {slot} удален",
     "modalAddLcTitle": "🗡️ Добавить световой конус в FreeSR",
     "modalAddRelicTitle": "🛡️ Добавить реликвию в FreeSR",
     "lblSelectLc": "Выберите световой конус",
@@ -2350,6 +2398,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Ativar habilidade passiva especial de Aeon ★ Aha em todo o servidor",
     "btnAddLc": "+ Adicionar Cone de Luz",
     "btnAddRelic": "+ Adicionar Relíquia",
+    "btnAddSlot": "+ Adicionar espaço",
+    "lblCreativeMode": "Modo Criativo",
+    "badgeCreative": "Criativo",
+    "toastSlotRemoved": "Espaço {slot} removido",
     "modalAddLcTitle": "🗡️ Adicionar Cone de Luz ao FreeSR",
     "modalAddRelicTitle": "🛡️ Adicionar Relíquia ao FreeSR",
     "lblSelectLc": "Selecionar Cone de Luz",