play with your food

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Initialize plate dimensions
  plateSize = min(width, height) * 0.7;
  plateX = width / 2;
  plateY = height / 2;

  // Create UI buttons
  createUI();
  updateUIVisibility(); // Set initial button visibility
}

function draw() {
  background(220); // Light grey background

  switch (gameState) {
    case 'intro':
      drawIntroScreen();
      break;
    case 'playing':
      drawPlayingScreen();
      break;
    case 'judging':
      drawJudgingScreen();
      break;
  }
}

function drawIntroScreen() {
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(48);
  text("Time to Play with Your Food!", width / 2, height / 2 - 80);

  textSize(24);
  text("Drag and drop food items onto the plate.", width / 2, height / 2 - 20);
  text("Click on the palette to change food items.", width / 2, height / 2 + 20);
  text("When you're done, your parents will rate your creativity!", width / 2, height / 2 + 60);
}

function drawPlayingScreen() {
  // Draw the plate
  noStroke();
  fill(255); // White plate
  ellipse(plateX, plateY, plateSize, plateSize);

  // Draw all food items
  for (const item of foodItems) {
    drawFoodItem(item);
  }

  // Draw the current food item at mouse position (if over plate)
  if (isMouseOverPlate() && mouseIsPressed) {
    const tempItem = {
      x: mouseX,
      y: mouseY,
      type: currentFoodType,
      size: foodSize,
      color: currentFoodColor // Current color is determined by food type's default
    };
    drawFoodItem(tempItem);
  }

  // Draw food palette (only type buttons for now as colors are tied to types)
  drawFoodPalette();
}

function drawJudgingScreen() {
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(48);
  text("Parents' Creativity Rating:", width / 2, height / 2 - 80);

  textSize(36);
  text(`Score: ${creativityScore}`, width / 2, height / 2 - 20);

  textSize(24);
  text(parentFeedback, width / 2, height / 2 + 40);

  textSize(18);
  text("Click anywhere to play again!", width / 2, height / 2 + 100);
}

function drawPea(item) {
  fill(item.color);
  noStroke();
  ellipse(item.x, item.y, item.size * 0.8, item.size * 0.8);
  fill(lerpColor(color(item.color), color(255), 0.3)); // Lighter highlight
  ellipse(item.x - item.size * 0.1, item.y - item.size * 0.1, item.size * 0.3, item.size * 0.3);
}

function drawCarrot(item) {
  fill(item.color);
  noStroke();
  rectMode(CENTER);
  let h = item.size * sqrt(3) / 2;
  triangle(item.x, item.y - h / 2,
           item.x - item.size / 2, item.y + h / 2,
           item.x + item.size / 2, item.y + h / 2);
  fill('#4CAF50'); // Green top
  noStroke();
  rect(item.x, item.y - h / 2 - item.size * 0.1, item.size * 0.3, item.size * 0.2);
}

function drawCracker(item) {
  fill(item.color);
  stroke('#333');
  strokeWeight(2);
  rectMode(CENTER);
  rect(item.x, item.y, item.size, item.size, item.size * 0.2); // Rounded square
  fill(0, 50); // Small holes
  noStroke();
  ellipse(item.x - item.size * 0.2, item.y - item.size * 0.2, item.size * 0.1, item.size * 0.1);
  ellipse(item.x + item.size * 0.2, item.y - item.size * 0.2, item.size * 0.1, item.size * 0.1);
  ellipse(item.x - item.size * 0.2, item.y + item.size * 0.2, item.size * 0.1, item.size * 0.1);
  ellipse(item.x + item.size * 0.2, item.y + item.size * 0.2, item.size * 0.1, item.size * 0.1);
}

function drawBerry(item) {
  fill(item.color);
  noStroke();
  ellipse(item.x, item.y, item.size * 0.9, item.size * 0.9);
  fill(lerpColor(color(item.color), color(255), 0.4)); // Highlight
  ellipse(item.x - item.size * 0.2, item.y - item.size * 0.2, item.size * 0.2, item.size * 0.2);
}

function drawCheese(item) {
  fill(item.color);
  noStroke();
  rectMode(CENTER);
  rect(item.x, item.y, item.size * 1.2, item.size * 0.8, item.size * 0.1); // Rectangular slice
  fill(lerpColor(color(item.color), color(255), 0.3)); // Highlight
  rect(item.x, item.y - item.size * 0.2, item.size * 1.0, item.size * 0.1);
}

function drawFoodItem(item) {
  const foodDef = foodTypes.find(f => f.name === item.type);
  if (foodDef) {
    foodDef.draw(item);
  }
}

function drawFoodPalette() {
  // Highlight current food type button
  for (const btn of foodTypeButtons) {
    if (btn.elt.textContent.toLowerCase() === currentFoodType) {
      btn.style('background-color', '#FFD700'); // Gold
    } else {
      btn.style('background-color', '#ECF0F1'); // Light grey
    }
  }
}

function mouseDragged() {
  if (gameState === 'playing' && isMouseOverPlate()) {
    // Get the definition of the current food type
    const foodDef = foodTypes.find(f => f.name === currentFoodType);

    // Add a new food item if dragging
    foodItems.push({
      x: mouseX,
      y: mouseY,
      type: currentFoodType,
      size: foodSize,
      color: foodDef ? foodDef.defaultColor : '#BDC3C7' // Use default color from definition
    });
  }
}

function isMouseOverPlate() {
  let d = dist(mouseX, mouseY, plateX, plateY);
  return d < plateSize / 2;
}

function calculateCreativityScore() {
  let score = 0;
  const typesUsed = new Set();
  const foodGroupCounts = {};
  const foodGroupDefs = {}; // Store definitions to get group names
  const positionGrid = create2DArray(10, 10, 0); // 10x10 grid for density/spread

  // NEW: Check for "Too Many Items" first
  if (foodItems.length > TOO_MANY_ITEMS_THRESHOLD) {
    return -1000; // Special score to trigger scolding feedback
  }

  if (foodItems.length === 0) return 0; // No food, no score

  for (const item of foodItems) {
    typesUsed.add(item.type);
    const foodDef = foodTypes.find(f => f.name === item.type);
    if (foodDef && foodDef.group) {
      foodGroupCounts[foodDef.group] = (foodGroupCounts[foodDef.group] || 0) + 1;
      foodGroupDefs[foodDef.group] = foodDef.group; // Store group name
    }

    // Calculate grid position for density
    let gridX = floor(map(item.x, plateX - plateSize / 2, plateX + plateSize / 2, 0, 9));
    let gridY = floor(map(item.y, plateY - plateSize / 2, plateY + plateSize / 2, 0, 9));
    gridX = constrain(gridX, 0, 9);
    gridY = constrain(gridY, 0, 9);
    positionGrid[gridY][gridX]++;
  }

  // 1. Variety of specific food items
  score += typesUsed.size * 50; // Each unique food item type adds to score

  // 2. Variety of food groups
  const uniqueFoodGroups = Object.keys(foodGroupCounts).length;
  score += uniqueFoodGroups * 80; // Reward for using different food groups

  // 3. Balanced ratios of food groups
  // Aim for a relatively even distribution across used groups
  if (uniqueFoodGroups > 1) {
    let totalItemsInGroups = Object.values(foodGroupCounts).reduce((a, b) => a + b, 0);
    let idealPerGroup = totalItemsInGroups / uniqueFoodGroups;
    let ratioPenalty = 0;
    for (const group in foodGroupCounts) {
      ratioPenalty += abs(foodGroupCounts[group] - idealPerGroup);
    }
    score += max(0, 100 - ratioPenalty * 0.5); // Max 100 points, penalty for imbalance
  }

  // 4. Number of food items (encourages more effort, but capped)
  score += min(foodItems.length, TOO_MANY_ITEMS_THRESHOLD * 0.5) * 2; // Max 200 points for 100 items

  // 5. Spread/Coverage on the plate
  let cellsCovered = 0;
  let maxDensity = 0;
  for (let r = 0; r < 10; r++) {
    for (let c = 0; c < 10; c++) {
      if (positionGrid[r][c] > 0) {
        cellsCovered++;
      }
      maxDensity = max(maxDensity, positionGrid[r][c]);
    }
  }
  score += cellsCovered * 5; // Reward for covering more area

  // 6. Symmetry (Left-Right)
  score += calculateSymmetryScore() * 100; // Symmetry score (0 to 1) * 100

  // 7. NEW: Food Pairing Bonus
  let pairingBonus = 0;
  let pairedCombinations = new Set(); // To track unique pairs like 'cracker-cheese'

  for (let i = 0; i < foodItems.length; i++) {
    const itemA = foodItems[i];
    for (let j = i + 1; j < foodItems.length; j++) { // Start from i+1 to avoid A-A and A-B vs B-A
      const itemB = foodItems[j];

      // Check if these two items form a complimentary pair
      for (const pairDef of complimentaryFoodPairs) {
        let isComplimentary = false;
        if ((itemA.type === pairDef.item1 && itemB.type === pairDef.item2) ||
            (itemA.type === pairDef.item2 && itemB.type === pairDef.item1)) {
          isComplimentary = true;
        }

        if (isComplimentary) {
          // If they are complimentary, check proximity
          const d = dist(itemA.x, itemA.y, itemB.x, itemB.y);
          if (d < PAIRING_DISTANCE_THRESHOLD) {
            // Found a complimentary pair in proximity!
            // Create a unique identifier for this pair to avoid double counting
            const pairKey = [itemA.type, itemB.type].sort().join('-');
            if (!pairedCombinations.has(pairKey)) {
              pairingBonus += pairDef.bonus;
              pairedCombinations.add(pairKey);
            }
          }
        }
      }
    }
  }
  score += pairingBonus;

  // 8. Bonus for using all food types (if applicable)
  if (typesUsed.size === foodTypes.length) score += 100;

  // 9. Penalty for extreme density in one spot (e.g., too many food items in one grid cell)
  // This encourages spreading out the food
  if (maxDensity > 20) { // If more than 20 items in one grid cell
    score -= maxDensity * 5;
    score = max(score, 0); // Score can't go below 0
  }

  return score;
}

function calculateSymmetryScore() {
  if (foodItems.length < 2) return 0; // Need at least two items for symmetry

  let symmetryMatches = 0;
  let totalSymmetryPotential = 0;
  const matchTolerance = foodSize * 0.8; // Allow some deviation for a match

  // Create a temporary set of items to check matches against,
  // preventing double-matching and ensuring each item has a chance to find its mirror.
  let unmatchedItems = [...foodItems];

  for (let i = 0; i < foodItems.length; i++) {
    const itemA = foodItems[i];
    const mirroredX = plateX + (plateX - itemA.x); // Calculate mirrored X position

    let bestMatchIndex = -1;
    let minMatchDist = Infinity;

    // Search for a matching item in the unmatched set
    for (let j = 0; j < unmatchedItems.length; j++) {
      const itemB = unmatchedItems[j];

      // Exclude matching an item with itself if it happens to be at the center line
      if (itemA === itemB) continue;

      const dx = mirroredX - itemB.x;
      const dy = itemA.y - itemB.y;
      const matchDist = sqrt(dx*dx + dy*dy);

      if (itemA.type === itemB.type && itemA.color === itemB.color && matchDist < minMatchDist) {
        minMatchDist = matchDist;
        bestMatchIndex = j;
      }
    }

    if (bestMatchIndex !== -1 && minMatchDist < matchTolerance) {
      symmetryMatches++;
      // Remove the matched item from unmatchedItems to avoid re-matching
      unmatchedItems.splice(bestMatchIndex, 1);
    }
    totalSymmetryPotential++; // Each item has the potential to find a mirror
  }

  // Symmetry score is the ratio of matched items to total items
  return totalSymmetryPotential > 0 ? symmetryMatches / totalSymmetryPotential : 0;
}

function getParentFeedback(score) {
  // NEW: Special feedback for too many items
  if (score === -1000) {
    return "Oh my goodness! You've put FAR too much food on that plate! That's just wasteful. We're going to have a talk about portion control, young man/lady.";
  }

  if (score < 400) {
    return "Oh dear, that's a bit of a chaotic mess, isn't it? Try to use more different kinds of food, balance your groups, and maybe arrange them a bit more neatly next time.";
  } else if (score < 800) {
    return "That's... interesting. You used some different foods, but maybe try arranging them a bit more thoughtfully? And don't forget your veggies!";
  } else if (score < 1200) {
    return "Not bad! You've got some good variety and coverage there. Keep practicing your food arranging skills and try some more balanced groups!";
  } else if (score < 1500) {
    return "Very creative, sweetie! We love how you've used different foods and balanced your groups. We even see a bit of symmetry and some nice pairings! You're quite the little artist!";
  } else {
    return "Absolutely brilliant! This is a masterpiece! So balanced, so symmetrical, full of delicious variety, and you've even made some lovely food pairings! We're so proud of your food art! You can have extra dessert tonight!";
  }
}

function createUI() {
  // Start Button
  startButton = createButton('Start Playing');
  startButton.position(width / 2 - startButton.width / 2, height / 2 + 140);
  startButton.mousePressed(startGame);
  styleButton(startButton);

  // Done Button
  doneButton = createButton('Done Playing');
  doneButton.position(width - doneButton.width - 20, height - doneButton.height - 20);
  doneButton.mousePressed(finishPlaying);
  styleButton(doneButton);

  // Clear Button
  clearButton = createButton('Clear Plate');
  clearButton.position(20, height - clearButton.height - 20);
  clearButton.mousePressed(clearPlate);
  styleButton(clearButton);

  // Food Type Buttons
  let typeBtnY = 20;
  for (const typeDef of foodTypes) {
    let btn = createButton(typeDef.name);
    btn.position(20, typeBtnY);
    btn.mousePressed(() => setCurrentFood(typeDef.name, typeDef.defaultColor));
    styleButton(btn);
    foodTypeButtons.push(btn);
    typeBtnY += btn.height + 10;
  }
}

function styleButton(btn) {
  btn.style('padding', '10px 20px');
  btn.style('background-color', '#ECF0F1'); // Light grey
  btn.style('color', '#333');
  btn.style('border', 'none');
  btn.style('border-radius', '5px');
  btn.style('cursor', 'pointer');
  btn.style('font-size', '18px');
  btn.style('font-family', 'sans-serif');
}

function startGame() {
  gameState = 'playing';
  foodItems = []; // Clear any previous food
  updateUIVisibility();
}

function finishPlaying() {
  gameState = 'judging';
  creativityScore = calculateCreativityScore();
  parentFeedback = getParentFeedback(creativityScore);
  updateUIVisibility();
}

function clearPlate() {
  foodItems = [];
}

function setCurrentFood(type, color) {
  currentFoodType = type;
  currentFoodColor = color;
}

function updateUIVisibility() {
  startButton.show();
  doneButton.hide();
  clearButton.hide();
  for (const btn of foodTypeButtons) btn.hide();

  if (gameState === 'playing') {
    startButton.hide();
    doneButton.show();
    clearButton.show();
    for (const btn of foodTypeButtons) btn.show();
  } else if (gameState === 'judging') {
    startButton.hide();
    doneButton.hide();
    clearButton.hide();
    for (const btn of foodTypeButtons) btn.hide();
  }
}

function mousePressed() {
  if (gameState === 'judging') {
    startGame(); // Click anywhere to restart
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recalculate plate position and size for responsiveness
  plateSize = min(width, height) * 0.7;
  plateX = width / 2;
  plateY = height / 2;

  // Adjust button positions
  startButton.position(width / 2 - startButton.width / 2, height / 2 + 140);
  doneButton.position(width - doneButton.width - 20, height - doneButton.height - 20);
  clearButton.position(20, height - clearButton.height - 20);

  // Recreate type/color buttons to reposition them correctly
  for (const btn of foodTypeButtons) btn.remove();
  foodTypeButtons = [];
  createUI(); // Recreate UI elements
  updateUIVisibility(); // Ensure correct visibility
}

function create2DArray(cols, rows, val) {
  let arr = new Array(rows);
  for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(cols).fill(val);
  }
  return arr;
}