Merge pull request #30 from readme-SVG/codex/add-percentage-filling-option/2026-03-13

Add configurable Fill % control for randomized Fill action

Author: fct-ai

css/styles.css

@@ -75,7 +75,9 @@
   .stat b { color: var(--text); font-weight: 600; }
 
   /* BUTTONS */
-  .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
+  .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
+  .fill-percent-control { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); font-size: 12px; }
+  .fill-percent-control input { width: 70px; height: 34px; }
   button { height: 34px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text); transition: background .15s, opacity .15s; white-space: nowrap; }
   button:hover { background: #30363d; }
   button:disabled { opacity: .4; cursor: not-allowed; }

index.html

@@ -129,6 +129,10 @@ <h1>GitHub Contribution Painter</h1>
     <div class="btn-row">
       <button class="danger" id="clearBtn" data-i18n="btn_clear">Clear</button>
       <button id="fillBtn" data-i18n="btn_fill">Fill all</button>
+      <label class="fill-percent-control" for="fillPercent">
+        <span>Fill %</span>
+        <input id="fillPercent" type="text" value="100%" inputmode="decimal" aria-label="Fill percentage" />
+      </label>
       <button class="primary" id="pushBtn" data-i18n="btn_push">▶ Apply to GitHub</button>
     </div>
     <div class="progress" id="progress">

js/app.js

@@ -134,6 +134,24 @@ function paint(cell){
   updateStats();
 }
 
+
+function getFillPercent(){
+  const input = document.getElementById('fillPercent');
+  const parsed = Number.parseFloat(input.value.replace(',', '.'));
+  const safe = Number.isFinite(parsed) ? Math.min(100, Math.max(0, parsed)) : 100;
+  input.value = `${safe}%`;
+  return safe;
+}
+
+function pickRandomCells(cells, count){
+  const pool = [...cells];
+  for(let i = pool.length - 1; i > 0; i--){
+    const j = Math.floor(Math.random() * (i + 1));
+    [pool[i], pool[j]] = [pool[j], pool[i]];
+  }
+  return pool.slice(0, count);
+}
+
 function updateStats(){
   const mult = +document.getElementById('multiplier').value;
   const isSpreadEnabled = document.getElementById('commitSpread').value === 'plus2';
@@ -171,11 +189,21 @@ document.getElementById('clearBtn').addEventListener('click', ()=>{
   updateStats(); setStatus('');
 });
 document.getElementById('fillBtn').addEventListener('click', ()=>{
-  document.querySelectorAll('.cell:not(.out)').forEach(c=>{
+  const fillPercent = getFillPercent();
+  const activeCells = [...document.querySelectorAll('.cell:not(.out)')];
+  const targetCount = Math.round(activeCells.length * (fillPercent / 100));
+  const picked = new Set(pickRandomCells(activeCells, targetCount));
+
+  activeCells.forEach(c=>{
     const i = +c.dataset.i;
-    const level = resolveLevel();
-    grid[i] = level;
-    c.style.background = COLORS[level];
+    if(picked.has(c)){
+      const level = resolveLevel();
+      grid[i] = level;
+      c.style.background = COLORS[level];
+      return;
+    }
+    grid[i] = 0;
+    c.style.background = COLORS[0];
   });
   updateStats();
 });