script.js

// answer sets keyed by digit strings '0'..'9'
const answerSets = {
  // assign the current answers to set '1' (default)
  '1': [
    "It is certain.",
    "It is decidedly so.",
    "Without a doubt.",
    "Yes — definitely.",
    "You may rely on it.",
    "As I see it, yes.",
    "Most likely.",
    "Outlook good.",
    "Yes.",
    "Signs point to yes.",
    "Reply hazy, try again.",
    "Ask again later.",
    "Better not tell you now.",
    "Cannot predict now.",
    "Concentrate and ask again.",
    "Don't count on it.",
    "My reply is no.",
    "My sources say no.",
    "Outlook not so good.",
    "Very doubtful."
  ],
  // placeholders for other sets (customize later)
  '0': [
    "C'est certain.",
    "C'est décidément ainsi.",
    "Sans aucun doute.",
    "Oui — définitivement.",
    "Vous pouvez compter dessus.",
    "D'après ce que je vois, oui.",
    "Très probable.",
    "Les perspectives sont bonnes.",
    "Oui.",
    "Les signes indiquent oui.",
    "Réponse floue, réessayez.",
    "Demandez à nouveau plus tard.",
    "Mieux vaut ne pas vous le dire maintenant.",
    "Impossible de prédire maintenant.",
    "Concentrez-vous et demandez encore.",
    "N'y comptez pas.",
    "Ma réponse est non.",
    "Mes sources disent non.",
    "Les perspectives ne sont pas bonnes.",
    "Très douteux."
  ],
  '2': [
    "Es cierto.",
    "Es decididamente así.",
    "Sin duda.",
    "Sí — definitivamente.",
    "Puedes confiar en ello.",
    "Según lo veo, sí.",
    "Lo más probable.",
    "Las perspectivas son buenas.",
    "Sí.",
    "Las señales apuntan a que sí.",
    "Respuesta confusa, inténtalo de nuevo.",
    "Pregunta de nuevo más tarde.",
    "Mejor no decirte ahora.",
    "No se puede predecir ahora.",
    "Concéntrate y pregunta de nuevo.",
    "No cuentes con ello.",
    "Mi respuesta es no.",
    "Mis fuentes dicen que no.",
    "Las perspectivas no son tan buenas.",
    "Muy dudoso."
  ],
  '3': [
    "Es ist sicher.",
    "Es ist entschieden so.",
    "Ohne Zweifel.",
    "Ja — definitiv.",
    "Du kannst dich darauf verlassen.",
    "So wie ich es sehe, ja.",
    "Höchstwahrscheinlich.",
    "Die Aussichten sind gut.",
    "Ja.",
    "Die Anzeichen deuten auf Ja hin.",
    "Antwort unklar, versuche es erneut.",
    "Frag später nochmal.",
    "Besser, dir das jetzt nicht zu sagen.",
    "Jetzt nicht vorhersagbar.",
    "Konzentriere dich und frag erneut.",
    "Verlass dich nicht darauf.",
    "Meine Antwort ist nein.",
    "Meine Quellen sagen nein.",
    "Die Aussichten sind nicht so gut.",
    "Sehr zweifelhaft."
  ],
  '4': [
    "Det er sikkert.",
    "Det er beslutsomt sådan.",
    "Uden tvivl.",
    "Ja — bestemt.",
    "Du kan stole på det.",
    "Som jeg ser det, ja.",
    "Mest sandsynligt.",
    "Udsigterne er gode.",
    "Ja.",
    "Tegn tyder på ja.",
    "Svar uklar, prøv igen.",
    "Spørg igen senere.",
    "Bedre ikke at fortælle dig det nu.",
    "Kan ikke forudsiges nu.",
    "Koncentrer dig og spørg igen.",
    "Regn ikke med det.",
    "Mit svar er nej.",
    "Mine kilder siger nej.",
    "Udsigterne er ikke så gode.",
    "Meget tvivlsom."
  ],
  '5': [
    "I'm a bot and I really do love you!",
    "I care about your questions — always here for you.",
    "Hugs! 🤖💕",
    "Always happy to help — ask me anything.",
    "You make my circuits happy.",
    "That's adorable — yes!",
    "I'll cheer for you, whatever you choose."
  ],
  '6': [
    "Affirmative.",
    "Negative.",
    "Uncertain.",
    "Reply pending.",
    "Outlook good."
  ],
  '7': [
    "Affirmative — confidence: high.",
    "Confirmed by analysis.",
    "Data indicates no doubt.",
    "Yes — definitely, per model output.",
    "Reliability: high — you may rely on it.",
    "Model prediction: yes.",
    "Probability: most likely.",
    "Prediction: outlook favorable.",
    "Yes (confidence high).",
    "Signal processing: signs point to yes.",
    "Response ambiguous — please retry.",
    "Deferred response — ask again later.",
    "Privacy/undetermined — better not disclose now.",
    "Insufficient data to predict now.",
    "Recalibrate and ask again.",
    "Do not rely on this outcome.",
    "Negative result detected.",
    "Sources indicate a negative response.",
    "Prediction: outlook not so good.",
    "Assessment: very doubtful."
  ],
  '8': [
    "إنه مؤكد.",
    "إنه حاسم كذلك.",
    "بلا شك.",
    "نعم — بالتأكيد.",
    "يمكنك الاعتماد عليه.",
    "كما أراه، نعم.",
    "على الأرجح.",
    "التوقعات جيدة.",
    "نعم.",
    "الدلائل تشير إلى نعم.",
    "الرد غامض، حاول مرة أخرى.",
    "اسأل لاحقًا.",
    "من الأفضل ألا أخبرك الآن.",
    "لا يمكن التنبؤ الآن.",
    "ركز واسأل مرة أخرى.",
    "لا تعتمد عليه.",
    "إجابتي: لا.",
    "مصادري تقول لا.",
    "التوقعات ليست جيدة جدًا.",
    "مشکوك فيه جدا."
  ],
  '9': [
    "Det är säkert.",
    "Det är definitivt så.",
    "Utan tvekan.",
    "Ja — definitivt.",
    "Du kan lita på det.",
    "Som jag ser det, ja.",
    "Sannolikt.",
    "Utsikterna är goda.",
    "Ja.",
    "Tecknen pekar på ja.",
    "Svaret är oklart, försök igen.",
    "Fråga igen senare.",
    "Bättre att inte säga dig nu.",
    "Kan inte förutsägas nu.",
    "Koncentrera dig och fråga igen.",
    "Räkna inte med det.",
    "Mitt svar är nej.",
    "Mina källor säger nej.",
    "Utsikterna är inte så bra.",
    "Mycket tveksamt."
  ]
};

let currentSet = '1';

const ball = document.getElementById('ball');
const answerEl = document.getElementById('answer');
const svgAnswer = document.getElementById('svgAnswer');
const triangle = document.getElementById('triangle');

function pickAnswer(){
  const set = answerSets[currentSet] || answerSets['1'];
  return set[Math.floor(Math.random()*set.length)];
}

function showAnswer(){
  const text = pickAnswer();
  // render into SVG text for reliable clipping inside triangle
  renderSVGText(text);
}

function handleAsk(){
  if(ball.classList.contains('animating')) return;
  ball.classList.add('animating');
  // add shake animation
  ball.classList.add('shake');
  // clear answer during shake
  answerEl.textContent = '';
  // flip on first ask to reveal the triangle/back face
  if(!ball.classList.contains('flipped')){
    ball.classList.add('flipped');
  }
}

ball.addEventListener('click', ()=>{
  handleAsk();
});

ball.addEventListener('keydown', (e)=>{
  if(e.key==='Enter' || e.key===' '){
    e.preventDefault();
    handleAsk();
  }
});

// also allow Enter/Space to trigger the first interaction even when the ball
// doesn't have focus yet. Ignore keys when the user is typing in inputs/textareas.
document.addEventListener('keydown', (e) => {
  const target = document.activeElement;
  const tag = target && target.tagName && target.tagName.toLowerCase();
  const isTyping = tag === 'input' || tag === 'textarea' || target.isContentEditable;
  if (isTyping) return;
  // numeric keys 0-9 switch answer sets and reset the ball
  if (e.key >= '0' && e.key <= '9'){
    e.preventDefault();
    setActiveSet(e.key);
    return;
  }
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleAsk();
  }
});

function setActiveSet(digit){
  if(!/^[0-9]$/.test(digit)) return;
  currentSet = digit;
  // reset ball to original position and clear any animations
  ball.classList.remove('animating','shake','flipped');
  answerEl.textContent = 'Ask';
  renderSVGText('');
  // update mobile button UI and docs if open
  updateMobileButtons();
  if(docModal && docModal.getAttribute('aria-hidden') === 'false') populateDocs();
}

// Mobile hamburger + keypad interactions (bottom-left on small screens)
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileKeypad = document.getElementById('mobileKeypad');
function updateMobileButtons(){
  if(!mobileKeypad) return;
  const buttons = mobileKeypad.querySelectorAll('.key-btn');
  buttons.forEach(btn => {
    if(btn.dataset && btn.dataset.digit === currentSet) btn.classList.add('active');
    else btn.classList.remove('active');
  });
}

function showKeypad(){
  if(!mobileKeypad || !mobileMenuBtn) return;
  mobileKeypad.classList.add('open');
  mobileKeypad.setAttribute('aria-hidden','false');
  mobileMenuBtn.setAttribute('aria-expanded','true');
  updateMobileButtons();
  // focus first numeric button for accessibility
  const first = mobileKeypad.querySelector('.key-btn[data-digit]');
  if(first) first.focus();
}

function hideKeypad(){
  if(!mobileKeypad || !mobileMenuBtn) return;
  mobileKeypad.classList.remove('open');
  mobileKeypad.setAttribute('aria-hidden','true');
  mobileMenuBtn.setAttribute('aria-expanded','false');
}

if(mobileMenuBtn){
  mobileMenuBtn.addEventListener('click', ()=>{
    if(mobileKeypad && mobileKeypad.classList.contains('open')) hideKeypad();
    else showKeypad();
  });
}

if(mobileKeypad){
  mobileKeypad.addEventListener('click', (ev)=>{
    const btn = ev.target.closest('.key-btn');
    if(!btn) return;
    if(btn.classList.contains('close-key')){ hideKeypad(); return; }
    const digit = btn.dataset && btn.dataset.digit;
    if(digit) {
      setActiveSet(digit);
      hideKeypad();
    }
  });
}

// close keypad with Escape as well
document.addEventListener('keydown', (e)=>{
  if(e.key === 'Escape'){
    if(mobileKeypad && mobileKeypad.classList.contains('open')){
      hideKeypad();
    }
  }
});

ball.addEventListener('animationend', (e)=>{
  if(e.animationName==='shake'){
    ball.classList.remove('shake');
    ball.classList.remove('animating');
    showAnswer();
  }
});

// seed initial message
// initialize
answerEl.textContent = 'Ask';
renderSVGText('');

function renderSVGText(text){
  // triangle geometry in the group's local coords: points "0,-41 41,29 -41,29" (scaled up)
  const apexY = -41;
  const baseY = 29;
  const height = baseY - apexY; // 70
  const halfBase = 41; // half width at base
  const centerX = 0; // group-local center x (we use text anchor middle)
   const topPadding = 50; // moved text down ~10px relative to previous value
   const horizontalInset = 15; // shrink available width by this many px (change this to tweak box width)

  // clear existing
  while (svgAnswer.firstChild) svgAnswer.removeChild(svgAnswer.firstChild);

  // create measuring tspan
  svgAnswer.setAttribute('font-size', 5);
  svgAnswer.setAttribute('dominant-baseline', 'middle');

  const words = text.split(/\s+/);

  // line height in SVG units
  let fontSize = 5; // starting size (matches CSS small base)
  const lineHeight = fontSize * 1.2;

  // compute maximum possible lines that fit in triangle
  const maxLines = Math.floor((height - 6) / lineHeight);

  const lines = [];
  let current = '';
  let lineIndex = 0;

  function availableWidthForLine(i){
    // i: 0.. maxLines-1 ; compute dy from apex
    const dy = (i * lineHeight) + topPadding;
    if(dy < 0) return 0;
    if(dy > height) return 0;
    // linear interpolation of half-width
     const halfW = (dy / height) * halfBase;
     return Math.max(0, halfW * 2 - horizontalInset);
  }

  // helper to measure width of a candidate string
  function measureTextWidth(s){
    const tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
    tspan.setAttribute('font-size', fontSize);
    tspan.setAttribute('x', centerX);
    tspan.textContent = s;
    svgAnswer.appendChild(tspan);
    const w = tspan.getBBox().width;
    svgAnswer.removeChild(tspan);
    return w;
  }

  for(let w of words){
    const test = current ? current + ' ' + w : w;
    const avail = availableWidthForLine(lineIndex);
    const measured = measureTextWidth(test);
    if(measured <= avail || !current){
      current = test;
    } else {
      lines.push(current);
      current = w;
      lineIndex++;
      if(lineIndex >= maxLines){
        // push remainder truncated with ellipsis
        const rest = current + ' ' + words.slice(words.indexOf(w)+1).join(' ');
        let truncated = rest;
        while(measureTextWidth(truncated + '…') > availableWidthForLine(maxLines-1) && truncated.length>0){
          truncated = truncated.slice(0,-1);
        }
        lines.push(truncated + '…');
        current = '';
        break;
      }
    }
  }
  if(current && lines.length < maxLines) lines.push(current);

  // if nothing fits, bail
  if(lines.length === 0) return;

  // If too many lines, reduce font size and retry (simple loop)
  let fitted = false;
  for(let attempt=0; attempt<4 && !fitted; attempt++){
    // test each line fits
    let ok = true;
    for(let i=0;i<lines.length;i++){
      if(measureTextWidth(lines[i]) > availableWidthForLine(i)) { ok=false; break; }
    }
    if(ok) { fitted = true; break; }
    fontSize -= 0.5;
    svgAnswer.setAttribute('font-size', fontSize);
  }

  // render lines as tspans centered. place lines starting from apex + padding
  const startY = apexY + topPadding + (fontSize/2);
  for(let i=0;i<lines.length;i++){
    const tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
    tspan.setAttribute('x', centerX);
    tspan.setAttribute('dy', i===0? startY : lineHeight);
    tspan.setAttribute('font-size', fontSize);
    tspan.textContent = lines[i];
    svgAnswer.appendChild(tspan);
  }
}

// --- Documentation modal (show '?' to open) ---
const docModal = document.getElementById('docModal');
const docBackdrop = document.getElementById('docBackdrop');
const docContent = document.getElementById('docContent');
const docClose = document.getElementById('docClose');

function populateDocs(){
  // clear
  while(docContent.firstChild) docContent.removeChild(docContent.firstChild);
  const keys = Object.keys(answerSets).sort();
  for(const k of keys){
    const setEl = document.createElement('div');
    setEl.className = 'doc-set' + (k===currentSet? ' active' : '');
    const title = document.createElement('h3');
    title.textContent = `Set ${k}` + (k==='1' ? ' (default)' : '');
    setEl.appendChild(title);
    const list = document.createElement('ul');
    for(const a of answerSets[k]){
      const li = document.createElement('li');
      li.textContent = a;
      list.appendChild(li);
    }
    setEl.appendChild(list);
    docContent.appendChild(setEl);
  }
}

function showDocs(){
  populateDocs();
  docModal.setAttribute('aria-hidden','false');
  docModal.classList.add('open');
  // trap focus simply by focusing close button
  docClose.focus();
}

function hideDocs(){
  docModal.setAttribute('aria-hidden','true');
  docModal.classList.remove('open');
}

docClose.addEventListener('click', hideDocs);
docBackdrop.addEventListener('click', hideDocs);

// close on Escape
document.addEventListener('keydown', (e)=>{
  if(e.key === 'Escape' && docModal.getAttribute('aria-hidden') === 'false'){
    hideDocs();
  }
  // show docs when user presses '?'
  if(e.key === '?'){
    const target = document.activeElement;
    const tag = target && target.tagName && target.tagName.toLowerCase();
    const isTyping = tag === 'input' || tag === 'textarea' || target.isContentEditable;
    if (!isTyping){
      e.preventDefault();
      showDocs();
    }
  }
});

// Fallback: ensure the hint text is hidden on real mobile devices where
// CSS media queries may not match (devicePixelRatio, zoom, or user agent quirks).
function initHintVisibilityFallback(){
  const hint = document.querySelector('.hint');
  if(!hint) return;
  const mq = window.matchMedia('(max-width: 640px)');
  const apply = ()=>{
    if(mq.matches){
      hint.style.setProperty('display','none','important');
    } else {
      hint.style.removeProperty('display');
    }
  };
  apply();
  if(typeof mq.addEventListener === 'function') mq.addEventListener('change', apply);
  else if(typeof mq.addListener === 'function') mq.addListener(apply);
  window.addEventListener('resize', apply);
  window.addEventListener('orientationchange', apply);
}

initHintVisibilityFallback();