.teams {
  display: flex;
  .team {
    width: 100px;
    hieght: 100px;
    background: lightgray;
    padding: 1rem;
    margin: 1rem;
    text-align: center;
    font-weight: bold;
    .score {
      font-size: 3rem;
      margin-top: 1rem;
    }
  }
}

const thanksgivingGameScores = {
  teamMonica: 0,
  teamRoss: 0
};

function updateScoreboard(scores) {
  teamRossScore.textContent = scores.teamRoss;
  teamMonicaScore.textContent = scores.teamMonica;
};

const scoreHandler = {
  set(target, team, newScore) {
    console.log(`${team} scores! New score: ${newScore}`);
    target[team] = newScore; // Update the team's score
    
    // Call to update the scoreboard UI
    updateScoreboard(target);
    
    return true; // Indicate successful score update
  }
};

const reactiveScores = new Proxy(thanksgivingGameScores, scoreHandler);

const start = () => {
  setInterval(() => {
  // Decide randomly which team scores
  if (Math.random() < 0.5) {
    reactiveScores.teamMonica += 1;
    console.log("Team Monica scores a point!");
  } else {
    reactiveScores.teamRoss += 1;
    console.log("Team Ross scores a point!");
  }
}, 1000); // Update scores every 1 second

}