Upload index.html

[feat] bigger pannel

index.html

@@ -196,23 +196,81 @@
     padding:16px;
   }
   .piece-head{
-    display:flex; align-items:center; justify-content:space-between;
-    margin-bottom:10px;
+    display:flex; align-items:flex-start; justify-content:space-between;
+    gap:10px;
+    margin-bottom:14px;
   }
   .piece-label{
     font-family:'Space Grotesk',sans-serif;
     font-weight:600;
     font-size:13px;
-    display:flex; align-items:center; gap:8px;
+    display:flex; flex-direction:column; gap:3px;
+  }
+  .hint-inline{
+    font-family:'Inter',sans-serif;
+    font-weight:400;
+    font-size:11px;
+    color:var(--muted-2);
   }
-  .piece-dot{width:9px;height:9px;border-radius:50%;}
   .piece-clear{
     background:none; border:none; color:var(--muted-2);
     font-size:11px; cursor:pointer; font-family:'Inter',sans-serif;
     padding:2px 4px;
+    white-space:nowrap;
   }
   .piece-clear:hover{color:var(--ink);}
 
+  /* ---- slot row: pick which of A/B/C you're filling ---- */
+  .slot-row{
+    display:grid;
+    grid-template-columns:repeat(3, 1fr);
+    gap:8px;
+    margin-bottom:14px;
+  }
+  .slot-chip{
+    background:var(--panel-2);
+    border:1.5px solid var(--grid-line);
+    border-radius:10px;
+    padding:8px 6px;
+    cursor:pointer;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    gap:6px;
+    transition:border-color .12s, box-shadow .12s, opacity .12s;
+    opacity:0.72;
+  }
+  .slot-chip:hover{border-color:var(--muted-2);}
+  .slot-chip:focus-visible{outline:2px solid var(--clear); outline-offset:2px;}
+  .slot-chip.active{
+    opacity:1;
+    border-color:var(--piece-color);
+    box-shadow:0 0 0 1px var(--piece-color) inset, 0 0 14px -4px var(--piece-color);
+  }
+  .slot-thumb-wrap{
+    width:100%;
+    height:34px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+  }
+  .slot-empty{
+    font-family:'JetBrains Mono',monospace;
+    font-size:11px;
+    color:var(--muted-2);
+    border:1.5px dashed var(--grid-line);
+    border-radius:6px;
+    width:26px; height:26px;
+    display:flex; align-items:center; justify-content:center;
+  }
+  .slot-chip.active .slot-empty{border-color:var(--piece-color); color:var(--piece-color);}
+  .slot-label{
+    font-family:'Space Grotesk',sans-serif;
+    font-weight:700;
+    font-size:12px;
+    color:var(--piece-color);
+  }
+
   /* ---- mode tabs (preset vs draw) ---- */
   .mode-tabs{
     display:flex;
@@ -244,8 +302,12 @@
   .mode-tab:focus-visible{outline:2px solid var(--clear); outline-offset:1px;}
 
   /* ---- preset picker ---- */
+  /* Cell size is FIXED (--cell-px) across every shape, so a thumbnail's overall
+     footprint scales with the piece's real size instead of every thumbnail
+     being squeezed into an identical box. */
   .preset-panel{
-    max-height:280px;
+    --cell-px:9px;
+    max-height:340px;
     overflow-y:auto;
     padding-right:4px;
   }
@@ -255,21 +317,23 @@
     letter-spacing:0.03em;
     text-transform:uppercase;
     color:var(--muted-2);
-    margin:12px 0 6px;
+    margin:14px 0 7px;
   }
   .preset-group-label:first-child{margin-top:0;}
   .preset-group-grid{
-    display:grid;
-    grid-template-columns:repeat(4, 1fr);
-    gap:6px;
+    display:flex;
+    flex-wrap:wrap;
+    align-items:center;
+    gap:8px;
   }
   .preset-thumb-btn{
-    aspect-ratio:1/1;
+    min-width:38px;
+    min-height:38px;
     background:var(--panel-2);
     border:1.5px solid var(--grid-line);
     border-radius:8px;
     cursor:pointer;
-    display:flex;
+    display:inline-flex;
     align-items:center;
     justify-content:center;
     padding:6px;
@@ -283,12 +347,12 @@
     box-shadow:0 0 0 1px var(--piece-color, var(--clear)) inset;
   }
   .thumb-grid{
-    width:100%;
-    height:100%;
     display:grid;
-    gap:1.5px;
+    gap:2px;
   }
   .thumb-cell{
+    width:var(--cell-px);
+    height:var(--cell-px);
     background:transparent;
     border-radius:1.5px;
   }
@@ -481,39 +545,32 @@
     <aside class="pieces">
       <div class="piece-card">
         <div class="piece-head">
-          <div class="piece-label"><span class="piece-dot" style="background:var(--piece-a)"></span>조각 A</div>
-          <button class="piece-clear" data-clear="a">지우기</button>
-        </div>
-        <div class="mode-tabs" data-piece="a">
-          <button class="mode-tab active" data-mode="preset" type="button">프리셋에서 선택</button>
-          <button class="mode-tab" data-mode="draw" type="button">직접 그리기</button>
-        </div>
-        <div class="preset-panel" id="preset-a"></div>
-        <div class="piece-grid" id="piece-a" style="--piece-color:var(--piece-a); display:none;"></div>
-      </div>
-      <div class="piece-card">
-        <div class="piece-head">
-          <div class="piece-label"><span class="piece-dot" style="background:var(--piece-b)"></span>조각 B</div>
-          <button class="piece-clear" data-clear="b">지우기</button>
+          <div class="piece-label">조각 선택 <span class="hint-inline">같은 판에서 3번 클릭 → A, B, C 순서로 채워��요</span></div>
+          <button class="piece-clear" id="clearActiveBtn">지금 조각 지우기</button>
         </div>
-        <div class="mode-tabs" data-piece="b">
-          <button class="mode-tab active" data-mode="preset" type="button">프리셋에서 선택</button>
-          <button class="mode-tab" data-mode="draw" type="button">직접 그리기</button>
-        </div>
-        <div class="preset-panel" id="preset-b"></div>
-        <div class="piece-grid" id="piece-b" style="--piece-color:var(--piece-b); display:none;"></div>
-      </div>
-      <div class="piece-card">
-        <div class="piece-head">
-          <div class="piece-label"><span class="piece-dot" style="background:var(--piece-c)"></span>조각 C</div>
-          <button class="piece-clear" data-clear="c">지우기</button>
+
+        <div class="slot-row" id="slotRow">
+          <button class="slot-chip active" data-slot="a" style="--piece-color:var(--piece-a)" type="button">
+            <span class="slot-thumb-wrap" id="slotThumb-a"><span class="slot-empty">A</span></span>
+            <span class="slot-label">A</span>
+          </button>
+          <button class="slot-chip" data-slot="b" style="--piece-color:var(--piece-b)" type="button">
+            <span class="slot-thumb-wrap" id="slotThumb-b"><span class="slot-empty">B</span></span>
+            <span class="slot-label">B</span>
+          </button>
+          <button class="slot-chip" data-slot="c" style="--piece-color:var(--piece-c)" type="button">
+            <span class="slot-thumb-wrap" id="slotThumb-c"><span class="slot-empty">C</span></span>
+            <span class="slot-label">C</span>
+          </button>
         </div>
-        <div class="mode-tabs" data-piece="c">
+
+        <div class="mode-tabs" id="modeTabs">
           <button class="mode-tab active" data-mode="preset" type="button">프리셋에서 선택</button>
           <button class="mode-tab" data-mode="draw" type="button">직접 그리기</button>
         </div>
-        <div class="preset-panel" id="preset-c"></div>
-        <div class="piece-grid" id="piece-c" style="--piece-color:var(--piece-c); display:none;"></div>
+
+        <div class="preset-panel" id="presetPanel"></div>
+        <div class="piece-grid" id="pieceGridEditor" style="display:none;"></div>
       </div>
 
       <div class="solve-row">
@@ -602,6 +659,7 @@
   };
   let pieceMode = {a:'preset', b:'preset', c:'preset'}; // 'preset' | 'draw'
   let selectedPreset = {a:null, b:null, c:null};
+  let activeSlot = 'a'; // which piece (a/b/c) the shared picker is currently filling
   let lastSolution = null; // {steps:[{piece,r,c,offsets,boardBeforeClear,clearRows,clearCols,boardAfterClear}], totalLines, finalEmpty}
 
   // ---- DOM refs ----
@@ -633,27 +691,26 @@
     boardCells.push(row);
   }
 
-  // ---- build piece editors ----
-  const pieceCellEls = {a:[], b:[], c:[]};
-  pieceKeys.forEach(k=>{
-    const el = document.getElementById('piece-'+k);
+  // ---- build the single shared 5x5 piece draw grid (used by whichever slot is active) ----
+  const pieceCellEls = [];
+  {
+    const el = document.getElementById('pieceGridEditor');
     for(let r=0;r<PIECE_GRID;r++){
       const rowEls=[];
       for(let c=0;c<PIECE_GRID;c++){
         const b = document.createElement('button');
         b.type='button';
         b.className='pcell';
-        b.setAttribute('aria-label', `${pieceNameKo[k]} 조각 ${r+1},${c+1}`);
         b.dataset.role='piece';
-        b.dataset.key=k;
+        b.dataset.key='a'; // updated live to whichever slot is active
         b.dataset.r=r;
         b.dataset.c=c;
         el.appendChild(b);
         rowEls.push(b);
       }
-      pieceCellEls[k].push(rowEls);
+      pieceCellEls.push(rowEls);
     }
-  });
+  }
 
   // ---- shared cell get/set (used by both click and drag-paint) ----
   function getCellValue(role, key, r, c){
@@ -668,7 +725,7 @@
     } else {
       selectedPreset[key] = null; // manual edit no longer matches any preset
       renderPiece(key);
-      renderPresetPanel(key);
+      renderPresetSelection();
     }
     return true;
   }
@@ -748,13 +805,15 @@
     return {h:maxR+1, w:maxC+1};
   }
 
+  // Cell size is fixed (CSS var --cell-px on .preset-panel), so a shape's thumbnail
+  // grows/shrinks with its real footprint instead of every shape sharing one box size.
   function buildThumb(cells){
     const {h,w} = shapeBBox(cells);
     const filled = new Set(cells.map(([r,c])=>r+','+c));
     const grid = document.createElement('div');
     grid.className = 'thumb-grid';
-    grid.style.gridTemplateColumns = `repeat(${w}, 1fr)`;
-    grid.style.gridTemplateRows = `repeat(${h}, 1fr)`;
+    grid.style.gridTemplateColumns = `repeat(${w}, var(--cell-px))`;
+    grid.style.gridTemplateRows = `repeat(${h}, var(--cell-px))`;
     for(let r=0;r<h;r++){
       for(let c=0;c<w;c++){
         const cell = document.createElement('div');
@@ -765,24 +824,33 @@
     return grid;
   }
 
-  function applyPresetToGrid(k, shape){
-    pieceGrids[k] = Array.from({length:PIECE_GRID}, ()=>Array(PIECE_GRID).fill(0));
-    shape.cells.forEach(([r,c])=>{ pieceGrids[k][r][c] = 1; });
-    selectedPreset[k] = shape.id;
+  const SLOT_ORDER = ['a','b','c'];
+
+  // apply a chosen preset shape to whichever slot is currently active, then
+  // auto-advance to the next slot (a -> b -> c) so 3 clicks in this one panel
+  // fill all three pieces in order.
+  function applyPresetToActiveSlot(shape){
+    const key = activeSlot;
+    pieceGrids[key] = Array.from({length:PIECE_GRID}, ()=>Array(PIECE_GRID).fill(0));
+    shape.cells.forEach(([r,c])=>{ pieceGrids[key][r][c] = 1; });
+    selectedPreset[key] = shape.id;
     clearSolution();
-    renderPiece(k);
-    renderPresetPanel(k);
+    renderSlotChip(key);
+    renderPresetSelection();
+    const idx = SLOT_ORDER.indexOf(key);
+    if(idx < SLOT_ORDER.length - 1){
+      setActiveSlot(SLOT_ORDER[idx+1]);
+    }
   }
 
-  function renderPresetPanel(k){
-    const container = document.getElementById('preset-'+k);
-    container.querySelectorAll('.preset-thumb-btn').forEach(btn=>{
-      btn.classList.toggle('selected', btn.dataset.presetId === selectedPreset[k]);
+  function renderPresetSelection(){
+    document.querySelectorAll('#presetPanel .preset-thumb-btn').forEach(btn=>{
+      btn.classList.toggle('selected', btn.dataset.presetId === selectedPreset[activeSlot]);
     });
   }
 
-  function buildPresetPanel(k){
-    const container = document.getElementById('preset-'+k);
+  function buildPresetPanel(){
+    const container = document.getElementById('presetPanel');
     container.innerHTML = '';
     const groups = {};
     const groupOrder = [];
@@ -803,55 +871,88 @@
         btn.type = 'button';
         btn.className = 'preset-thumb-btn';
         btn.dataset.presetId = shape.id;
-        btn.style.setProperty('--piece-color', pieceColorVar[k]);
-        btn.setAttribute('aria-label', `${pieceNameKo[k]} 조각: ${groupName} 모양 선택`);
+        btn.setAttribute('aria-label', `${groupName} 모양 선택`);
         btn.appendChild(buildThumb(shape.cells));
-        btn.addEventListener('click', ()=> applyPresetToGrid(k, shape));
+        btn.addEventListener('click', ()=> applyPresetToActiveSlot(shape));
         row.appendChild(btn);
       });
       container.appendChild(row);
     });
   }
+  buildPresetPanel();
 
-  pieceKeys.forEach(buildPresetPanel);
-
-  // ---- mode tabs: 프리셋에서 선택 (default) vs 직접 그리기 ----
-  document.querySelectorAll('.mode-tabs').forEach(tabsEl=>{
-    const k = tabsEl.dataset.piece;
-    const tabButtons = tabsEl.querySelectorAll('.mode-tab');
-    tabButtons.forEach(tabBtn=>{
-      tabBtn.addEventListener('click', ()=>{
-        const mode = tabBtn.dataset.mode;
-        if(pieceMode[k] === mode) return;
-        pieceMode[k] = mode;
-        tabButtons.forEach(b=> b.classList.toggle('active', b===tabBtn));
-        document.getElementById('preset-'+k).style.display = mode==='preset' ? 'block' : 'none';
-        document.getElementById('piece-'+k).style.display = mode==='draw' ? 'grid' : 'none';
-      });
+  // ---- slot chip preview (small thumbnail of whatever's currently in that slot) ----
+  function renderSlotChip(key){
+    const wrap = document.getElementById('slotThumb-'+key);
+    wrap.innerHTML = '';
+    const trimmed = trimShape(pieceGrids[key]);
+    if(trimmed){
+      wrap.appendChild(buildThumb(trimmed.offsets));
+    } else {
+      const span = document.createElement('span');
+      span.className = 'slot-empty';
+      span.textContent = pieceNameKo[key];
+      wrap.appendChild(span);
+    }
+  }
+
+  // ---- switch which slot (A/B/C) the shared picker + draw grid apply to ----
+  function setActiveSlot(key){
+    activeSlot = key;
+    document.querySelectorAll('.slot-chip').forEach(chip=>{
+      chip.classList.toggle('active', chip.dataset.slot===key);
+    });
+    document.querySelectorAll('#modeTabs .mode-tab').forEach(tabBtn=>{
+      tabBtn.classList.toggle('active', tabBtn.dataset.mode===pieceMode[key]);
     });
+    document.getElementById('presetPanel').style.display = pieceMode[key]==='preset' ? 'block' : 'none';
+    const editor = document.getElementById('pieceGridEditor');
+    editor.style.display = pieceMode[key]==='draw' ? 'grid' : 'none';
+    editor.style.setProperty('--piece-color', pieceColorVar[key]);
+    document.getElementById('presetPanel').style.setProperty('--piece-color', pieceColorVar[key]);
+    renderPresetSelection();
+    renderDrawGrid();
+  }
+
+  document.querySelectorAll('.slot-chip').forEach(chip=>{
+    chip.addEventListener('click', ()=> setActiveSlot(chip.dataset.slot));
   });
 
-  document.querySelectorAll('.piece-clear').forEach(btn=>{
-    btn.addEventListener('click', ()=>{
-      const k = btn.dataset.clear;
-      pieceGrids[k] = Array.from({length:PIECE_GRID}, ()=>Array(PIECE_GRID).fill(0));
-      selectedPreset[k] = null;
-      clearSolution();
-      renderPiece(k);
-      renderPresetPanel(k);
+  // ---- mode tabs: 프리셋에서 선택 (default) vs 직접 그리기, applies to the active slot ----
+  document.querySelectorAll('#modeTabs .mode-tab').forEach(tabBtn=>{
+    tabBtn.addEventListener('click', ()=>{
+      const mode = tabBtn.dataset.mode;
+      if(pieceMode[activeSlot] === mode) return;
+      pieceMode[activeSlot] = mode;
+      document.querySelectorAll('#modeTabs .mode-tab').forEach(b=> b.classList.toggle('active', b===tabBtn));
+      document.getElementById('presetPanel').style.display = mode==='preset' ? 'block' : 'none';
+      const editor = document.getElementById('pieceGridEditor');
+      editor.style.display = mode==='draw' ? 'grid' : 'none';
+      if(mode==='draw') renderDrawGrid();
     });
   });
 
+  document.getElementById('clearActiveBtn').addEventListener('click', ()=>{
+    const key = activeSlot;
+    pieceGrids[key] = Array.from({length:PIECE_GRID}, ()=>Array(PIECE_GRID).fill(0));
+    selectedPreset[key] = null;
+    clearSolution();
+    renderSlotChip(key);
+    renderPresetSelection();
+    renderDrawGrid();
+  });
+
   document.getElementById('resetAllBtn').addEventListener('click', ()=>{
     board = Array.from({length:N}, ()=>Array(N).fill(0));
     pieceKeys.forEach(k=>{
       pieceGrids[k] = Array.from({length:PIECE_GRID}, ()=>Array(PIECE_GRID).fill(0));
       selectedPreset[k] = null;
+      pieceMode[k] = 'preset';
     });
     clearSolution();
     renderBoard();
-    pieceKeys.forEach(renderPiece);
-    pieceKeys.forEach(renderPresetPanel);
+    pieceKeys.forEach(renderSlotChip);
+    setActiveSlot('a');
     statusLine.textContent='';
   });
 
@@ -876,15 +977,24 @@
     }
   }
 
-  function renderPiece(k){
+  // refresh the single shared draw grid to show the active slot's shape
+  function renderDrawGrid(){
     for(let r=0;r<PIECE_GRID;r++){
       for(let c=0;c<PIECE_GRID;c++){
-        const el = pieceCellEls[k][r][c];
-        el.classList.toggle('on', !!pieceGrids[k][r][c]);
+        const el = pieceCellEls[r][c];
+        el.dataset.key = activeSlot;
+        el.setAttribute('aria-label', `${pieceNameKo[activeSlot]} 조각 ${r+1},${c+1}`);
+        el.classList.toggle('on', !!pieceGrids[activeSlot][r][c]);
       }
     }
   }
 
+  // called after a manual (draw-mode) edit changes pieceGrids[key]
+  function renderPiece(key){
+    renderDrawGrid();
+    renderSlotChip(key);
+  }
+
   function clearSolution(){
     lastSolution = null;
     resultsBlock.style.display='none';
@@ -893,7 +1003,8 @@
   }
 
   renderBoard();
-  pieceKeys.forEach(renderPiece);
+  pieceKeys.forEach(renderSlotChip);
+  setActiveSlot('a');
 
   // ---- shape trimming ----
   function trimShape(grid){
@@ -1153,11 +1264,12 @@
     pieceKeys.forEach(k=>{
       pieceGrids[k] = Array.from({length:PIECE_GRID}, ()=>Array(PIECE_GRID).fill(0));
       selectedPreset[k] = null;
+      pieceMode[k] = 'preset';
     });
     clearSolution();
     renderBoard();
-    pieceKeys.forEach(renderPiece);
-    pieceKeys.forEach(renderPresetPanel);
+    pieceKeys.forEach(renderSlotChip);
+    setActiveSlot('a');
     statusLine.textContent = '이어서 다음 조각 3개를 선택해주세요.';
     emptyNote.textContent = '아래에서 다음 세 조각을 고르고 해답 찾기를 누르면 여기 결과가 표시됩니다.';
   }