nur-muslim-companion/src/lib/Tasbih.svelte

<script>
  let count = $state(0);
  let total = $state(0);
  let target = $state(33);
  let vibrate = $state(true);

  function loadSettings() {
    const savedTarget = localStorage.getItem('tasbih_target');
    if (savedTarget) target = parseInt(savedTarget, 10);
    
    const savedTotal = localStorage.getItem('tasbih_total');
    if (savedTotal) total = parseInt(savedTotal, 10);
  }

  function saveTarget() {
    localStorage.setItem('tasbih_target', String(target));
  }

  function saveTotal() {
    localStorage.setItem('tasbih_total', String(total));
  }

  function increment() {
    count = (count + 1) % target;
    total++;
    saveTotal();
    if (vibrate && navigator.vibrate) navigator.vibrate(15);
  }

  function reset() {
    count = 0;
    total = 0;
    saveTotal();
  }

  $effect(() => { loadSettings(); });
  $effect(() => { saveTarget(); });

  $effect(() => {
    function handleSpace(e) {
      if (e.code === 'Space' && e.target === document.body) {
        e.preventDefault();
        increment();
      }
    }
    window.addEventListener('keydown', handleSpace);
    return () => window.removeEventListener('keydown', handleSpace);
  });
</script>

<div class="card">
  <h2>📿 Tasbih Counter</h2>

  <div class="tasbih-display">
    <div class="counter-ring" onclick={increment} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && increment()}>
      <svg viewBox="0 0 120 120" width="180" height="180">
        <circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8" />
        <circle
          cx="60" cy="60" r="52"
          fill="none" stroke="var(--gold)" stroke-width="8"
          stroke-dasharray={2 * Math.PI * 52}
          stroke-dashoffset={2 * Math.PI * 52 * (1 - count / target)}
          stroke-linecap="round"
          transform="rotate(-90 60 60)"
          style="filter: drop-shadow(0 0 10px rgba(201,168,76,0.5));"
        />
        <text x="60" y="58" text-anchor="middle" fill="var(--gold)" font-family="Cinzel, serif" font-size="28" font-weight="700">{count}</text>
        <text x="60" y="80" text-anchor="middle" fill="var(--text-dim)" font-family="JetBrains Mono, monospace" font-size="10">{target}</text>
      </svg>
    </div>

    <div class="total-line">
      <span class="total-label">Total Today</span>
      <strong class="total-value">{total}</strong>
    </div>

    <div class="controls">
      <div class="target-select">
        <label for="bead-select">Target</label>
        <select id="bead-select" bind:value={target} onchange={() => { count = 0; }}>
          <option value={33}>33</option>
          <option value={99}>99</option>
          <option value={100}>100</option>
          <option value={500}>500</option>
        </select>
      </div>
      <button class="secondary" onclick={reset}>Reset</button>
    </div>

    <p class="hint">👆 Tap the circle or press Space to count</p>
  </div>
</div>

<style>
  .tasbih-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .counter-ring {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.1s;
  }
  
  .counter-ring:active { transform: scale(0.96); }
  .counter-ring:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }
  
  .total-line { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
  }
  
  .total-label { 
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  
  .total-value { 
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
  }
  
  .controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .target-select {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  
  .target-select select {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    background: var(--bg2);
    cursor: pointer;
  }
  
  .target-select select:focus {
    outline: none;
    border-color: var(--gold);
  }
  
  .hint { 
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }
</style>