Use ChatGPT to Continue the Conversation with High Scores

Contributed by: J. Chris Anderson

Difficulty level: Advanced

Continuing from our previous tutorial (“Use ChatGPT to Extend the Generated App”), we will now add a list of high scores to the game. This is a bit more guided because I had an idea of what I was going for, now that the app is coming together:

Prompt: Create a high scores list that takes a list of scores as a prop, where each score is an object with { score, time} and time was created with Date.now().

ChatGPT: To create a high scores list component that takes a list of scores as a prop, follow these steps:

1. Create a new file src/HighScores.js and add the following code:

   import React from 'react';
   import styled from '@emotion/styled';
   
   const HighScoresContainer = styled.div`
     margin-top: 20px;
   `;
   
   const HighScoreItem = styled.div`
     display: flex;
     justify-content: space-between;
     font-size: 18px;
     margin-bottom: 5px;
   `;
   
   const HighScores = ({ scores }) => {
     // Sort the scores array in descending order by score
     const sortedScores = scores.sort((a, b) => b.score -
       a.score);
   
     return (
       <HighScoresContainer>
         <h3>High Scores</h3>
         {sortedScores.map(({ score, time }, index) => {
           const date = new Date(time).toLocaleString();
           return (
             <HighScoreItem key={index}>
               <span>{score}</span>
               <span>{date}</span>
             </HighScoreItem>
           );
         })}
       </HighScoresContainer>
     );
   };
   
   export default HighScores;

2. Import the HighScores component in src/App.js:

   import HighScores from './HighScores';