script.js

// script.js — animated question flow + voice + results

/* ========== Configuration ========== */
const QUESTIONS = [
  {
    q: "Hi! What's your name? (say 'I am NAME' or pick 'Prefer not to say')",
    options: [
      { text: "I am Keerthana", tag: "name" },
      { text: "Prefer not to say", tag: "anon" },
      { text: "I'll type it", tag: "type" }
    ]
  },
  {
    q: "What do you enjoy most?",
    options: [
      { text: "Gardening & caring", tag: "caring" },
      { text: "Movies & gaming with family", tag: "social" },
      { text: "Reading & alone time", tag: "thoughtful" },
      { text: "Planning & organizing", tag: "organized" }
    ]
  },
  {
    q: "Which describes you best?",
    options: [
      { text: "Empathetic — help others", tag: "empathetic" },
      { text: "Energetic & outgoing", tag: "extrovert" },
      { text: "Shy sometimes", tag: "shy" },
      { text: "Quick to worry", tag: "anxious" }
    ]
  },
  {
    q: "How do you react to problems?",
    options: [
      { text: "Face them & solve", tag: "resilient" },
      { text: "Ask for help", tag: "team-player" },
      { text: "Procrastinate", tag: "procrastinate" },
      { text: "Overthink", tag: "overthink" }
    ]
  },
  {
    q: "Would you like tips to improve? ",
    options: [
      { text: "Yes — give steps", tag: "want_plan" },
      { text: "No — I'm fine", tag: "no_plan" },
      { text: "Maybe later", tag: "later" }
    ]
  }
];

let idx = 0;
let state = {
  name: null,
  tags: []
};

const avatarEl = document.getElementById('avatar');
const bubbleEl = document.getElementById('bubble');
const optionsZone = document.getElementById('optionsZone');
const qIndexEl = document.getElementById('qIndex');
const qTotalEl = document.getElementById('qTotal');
const moodEl = document.getElementById('mood');
const floatZone = document.getElementById('floatZone');
const resultPanel = document.getElementById('resultPanel');
const summaryEl = document.getElementById('summary');
const adviceEl = document.getElementById('advice');

qTotalEl.textContent = QUESTIONS.length;

/* Voice toggles */
let useVoice = true;
let useMic = false;
const synth = window.speechSynthesis;
const recognition = (window.SpeechRecognition || window.webkitSpeechRecognition) ? new (window.SpeechRecognition || window.webkitSpeechRecognition)() : null;

/* init */
function init(){
  idx = 0;
  state = { name: null, tags: [] };
  resultPanel.classList.add('hidden');
  showQuestion();
  attachControls();
}
function attachControls(){
  document.getElementById('voiceToggle').onclick = ()=>{ useVoice = !useVoice; document.getElementById('voiceToggle').textContent = useVoice ? '🔊' : '🔈'; }
  document.getElementById('micToggle').onclick = toggleMic;
  document.getElementById('restart').onclick = init;
  document.getElementById('downloadBtn').onclick = downloadSummary;
}

/* show question and build floating options */
function showQuestion(){
  qIndexEl.textContent = idx+1;
  const item = QUESTIONS[idx];
  speakAndAnimate(item.q);
  optionsZone.innerHTML = '';
  // create option bubbles positioned randomly
  const areaW = optionsZone.clientWidth;
  const areaH = optionsZone.clientHeight;
  item.options.forEach((opt,i)=>{
    const btn = document.createElement('div');
    btn.className = 'option-bubble';
    btn.textContent = opt.text;
    // random position within zone (avoid edges)
    const left = 10 + Math.random()*(areaW - 120);
    const top  = 10 + Math.random()*(areaH - 60);
    btn.style.left = left + 'px';
    btn.style.top = top + 'px';
    btn.style.transform = 'scale(0)';
    btn.style.animation = `popIn .35s ${0.05*i}s cubic-bezier(.2,.9,.3,1) forwards`;
    btn.addEventListener('click', ()=> selectOption(opt));
    optionsZone.appendChild(btn);
  });
}

/* selection handler */
function selectOption(opt){
  // show quick user reply
  speakAndAnimate("You chose: " + opt.text, true);

  // special handling: typed name
  if(opt.tag === 'type'){
    const name = prompt("Type your name:");
    if(name) { state.name = name.split(' ')[0]; state.tags.push('named'); }
  } else if(opt.tag === 'name'){
    // parse name from option text (format "I am Keerthana")
    const m = opt.text.match(/I am\s+(.+)$/i);
    if(m) state.name = m[1].split(' ')[0];
    state.tags.push('friendly');
  } else {
    state.tags.push(opt.tag);
  }

  // progress
  idx++;
  if(idx < QUESTIONS.length){
    setTimeout(()=> showQuestion(), 700);
  } else {
    setTimeout(()=> showResults(), 800);
  }
}

/* speak text and animate avatar */
function speakAndAnimate(text, user=false){
  // set bubble text for user or bot
  bubbleEl.textContent = text;
  // avatar talking animation for bot
  if(!user){
    avatarEl.classList.add('talking');
    if(useVoice && synth){
      const utter = new SpeechSynthesisUtterance(text);
      utter.rate = 1;
      synth.speak(utter);
      utter.onend = ()=> avatarEl.classList.remove('talking');
    } else {
      // stop talking after short timeout
      setTimeout(()=> avatarEl.classList.remove('talking'), 600 + Math.random()*400);
    }
  } else {
    // small nod animation for user text
    avatarEl.classList.remove('talking');
    setTimeout(()=> avatarEl.classList.add('talking'), 60);
    setTimeout(()=> avatarEl.classList.remove('talking'), 260);
  }
}

/* microphone (speech to text) */
function toggleMic(){
  if(!recognition){ alert("Speech recognition not supported in this browser."); return; }
  useMic = !useMic;
  document.getElementById('micToggle').textContent = useMic ? '🎙️' : '🎤';
  if(useMic){
    recognition.lang = 'en-US';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    recognition.onresult = (e)=>{
      const spoken = e.results[0][0].transcript;
      // try map to an option by finding a matching word
      speakAndAnimate("Heard: " + spoken, true);
      // find option with matching word
      const currentOptions = QUESTIONS[idx].options;
      const found = currentOptions.find(o => spoken.toLowerCase().includes(o.text.split(' ')[0].toLowerCase()));
      if(found) selectOption(found);
      else alert("Sorry — I couldn't match that to an option. Try saying one of the options.");
    };
    recognition.onerror = (e)=>{ console.warn(e); }
    recognition.start();
  } else {
    recognition.stop();
  }
}

/* compute results and show summary */
function showResults(){
  // summarize tags -> positives/negatives mapping
  const tags = state.tags;
  const positives = [];
  const negatives = [];
  // simple mapping rules
  const posMap = {
    caring: "Caring & compassionate",
    social: "Social & family-oriented",
    thoughtful: "Reflective & thoughtful",
    organized: "Organized & reliable",
    empathetic: "Empathetic",
    resilient: "Resilient",
    'team-player': "Good team player",
    friendly: "Friendly"
  };
  const negMap = {
    shy: "Shy at times",
    anxious: "Tends to worry",
    procrastinate: "Procrastinates sometimes",
    overthink: "Overthinks"
  };
  tags.forEach(t=>{
    if(posMap[t]) positives.push(posMap[t]);
    if(negMap[t]) negatives.push(negMap[t]);
  });

  // if no tags, neutral message
  if(positives.length === 0 && negatives.length === 0){
    positives.push("Balanced personality — you share clear preferences.");
  }

  // build summary
  const nameLine = state.name ? `<strong>${state.name}</strong>, here is what I noticed:` : `Here's what I noticed:`;
  summaryEl.innerHTML = `<p>${nameLine}</p>
    <p><strong>Positives</strong>: ${positives.join(', ')}</p>
    <p><strong>Areas to improve</strong>: ${negatives.length? negatives.join(', ') : 'None notable'}</p>`;

  // advice simple plan
  const tips = [];
  if(negatives.includes("Procrastinates sometimes") || tags.includes('procrastinate')){
    tips.push("Break tasks into 15-min chunks & use a timer (Pomodoro).");
  }
  if(tags.includes('anxious') || tags.includes('overthink')){
    tips.push("Try breathing exercises: 4-4-4 breathing for 5 minutes daily.");
  }
  if(tags.includes('shy')){
    tips.push("Start with small social goals (say hi to 1 new person/week).");
  }
  if(tags.includes('caring') || tags.includes('empathetic')){
    tips.push("Balance caring for others with 10 minutes of self-care daily.");
  }
  if(tips.length === 0) tips.push("Keep doing what feels good — small consistent habits work best.");

  adviceEl.innerHTML = `<h4>Quick plan</h4><ol>${tips.map(t=>`<li>${t}</li>`).join('')}</ol>`;

  resultPanel.classList.remove('hidden');

  // mood & celebration
  const positiveScore = positives.length;
  const negativeScore = negatives.length;
  if(positiveScore >= Math.max(1, negativeScore)){
    moodEl.textContent = '😊';
    celebrate('flower');
  } else {
    moodEl.textContent = '🤔';
    celebrate('calm');
  }

  // speak summary
  const speakText = `Here is your summary. Positives: ${positives.join(', ')}. Areas to improve: ${negatives.length? negatives.join(', '): 'none notable'}.`;
  speakAndAnimate(speakText);
}

/* celebration animations (flowers or calm dove) */
function celebrate(kind){
  if(kind === 'flower'){
    for(let i=0;i<10;i++){
      const el = document.createElement('div');
      el.className = 'float-item';
      el.style.left = (10 + Math.random()*80) + 'vw';
      el.style.top  = (60 + Math.random()*20) + 'vh';
      el.style.fontSize = (16 + Math.random()*30) + 'px';
      el.textContent = ['🌸','🌼','💐','🌷'][Math.floor(Math.random()*4)];
      floatZone.appendChild(el);
      setTimeout(()=> el.remove(), 4200 + Math.random()*800);
    }
  } else {
    const el = document.createElement('div');
    el.className = 'float-item';
    el.style.left = '50%';
    el.style.fontSize = '48px';
    el.style.top = '60vh';
    el.textContent = '🕊️';
    floatZone.appendChild(el);
    setTimeout(()=> el.remove(), 4200);
  }
}

/* allow saving summary to text file */
function downloadSummary(){
  const blob = new Blob([summaryEl.innerText + '\n\n' + adviceEl.innerText], {type:'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href = url; a.download = 'personality-summary.txt'; a.click();
  URL.revokeObjectURL(url);
}

/* init app on load */
window.addEventListener('load', init);