✨ Added games object to render on screen

EdTonatto · Jul 2, 2023 · a4382a0 · a4382a0
1 parent 3c09842
commit a4382a0
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 33 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,62 @@
+/* eslint-disable react/jsx-key */
 import { Header } from './components/Header'
 import './global.css'
 import styles from './App.module.css'
 import { Sidebar } from './components/Sidebar'
 import { Game } from './components/Game'
 
+const games = [
+  {
+    id: 1,
+    game: {
+      name: "Marvel's Spider-Man Remastered",
+      coverImg: "https://howlongtobeat.com/games/70093_Marvels_Spider-Man_Game_of_the_Year_Edition.jpg?width=250",
+      releaseDate: new Date('2022-08-12 00:00:00'),
+      publisher: 'Published by PlayStation LLC'
+    },
+    content: [
+      {order: 1, type: 'P', content: 'Played on PC.'},
+      {order: 2, type: 'P', content: 'Expected game time to complete main story is 17 hours, and 34 hours to complete all content.'},
+      {order: 3, type: 'P', content: 'My actual playtime is about 20 hours and 65% complete.'},
+      {order: 4, type: 'P', content: '10/10 game'},
+    ],
+    publishedAt: new Date('2023-07-02 19:45:00')
+  },
+  {
+    id: 2,
+    game: {
+      name: "Vampire Survivors",
+      coverImg: "https://howlongtobeat.com/games/102750_Vampire_Survivors.jpg?width=250",
+      releaseDate: new Date('2022-10-20 00:00:00'),
+      publisher: 'Published by Poncle'
+    },
+    content: [],
+    publishedAt: new Date('2023-07-02 19:00:00')
+  },
+  {
+    id: 3,
+    game: {
+      name: "Dota 2",
+      coverImg: "https://howlongtobeat.com/games/250px-DotA2.jpg?width=250",
+      releaseDate: new Date('2013-07-09 00:00:00'),
+      publisher: 'Published by Valve'
+    },
+    content: [],
+    publishedAt: new Date('2023-07-01 12:00:00')
+  },
+  {
+    id: 4,
+    game: {
+      name: "Forza Horizon 5",
+      coverImg: "https://howlongtobeat.com/games/93948_Forza_Horizon_5.jpg?width=250",
+      releaseDate: new Date('2021-11-09 00:00:00'),
+      publisher: 'Published by Xbox Game Studios'
+    },
+    content: [],
+    publishedAt: new Date('2023-06-15 00:00:00')
+  }
+]
+
 export function App() {
   return (
     <div>
@@ -12,30 +65,15 @@ export function App() {
       <div className={styles.wrapper}>
         <Sidebar />
         <main>
-          <Game 
-            gameCoverImg="https://howlongtobeat.com/games/70093_Marvels_Spider-Man_Game_of_the_Year_Edition.jpg?width=250"
-            gameName="Marvel's Spider-Man Remastered"
-            releaseDate="Released in 12 Aug, 2022"
-            publisher="Published by PlayStation LLC"
-          />
-          <Game 
-            gameCoverImg="https://howlongtobeat.com/games/102750_Vampire_Survivors.jpg?width=250"
-            gameName="Vampire Survivors"
-            releaseDate="Released in 20 Oct, 2022"
-            publisher="Published by Poncle"
-          />
-          <Game 
-            gameCoverImg="https://howlongtobeat.com/games/250px-DotA2.jpg?width=250"
-            gameName="Dota 2"
-            releaseDate="Released in 9 Jul, 2013"
-            publisher="Published by Valve"
-          />
-          <Game 
-            gameCoverImg="https://howlongtobeat.com/games/93948_Forza_Horizon_5.jpg?width=250"
-            gameName="Forza Horizon 5"
-            releaseDate="Released in 9 Nov, 2021"
-            publisher="Published by Xbox Game Studios"
-          />
+          {games.map(game => {
+            return (
+              <Game key={game.id}
+                game={game.game}
+                content={game.content}
+                publishedAt={game.publishedAt}
+              />
+            )
+          })}
         </main>
       </div>
     </div>

diff --git a/src/components/Game.jsx b/src/components/Game.jsx
@@ -1,29 +1,41 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/no-unescaped-entities */
+import { format, formatDistanceToNow } from 'date-fns';
 import styles from './Game.module.css';
 
-export function Game(props) {
+export function Game({ game, content, publishedAt }) {
+  const releaseDate = format(game.releaseDate, "dd LLL',' yyyy");
+  const publishedDate = format(publishedAt, "dd LLL");
+  const publishedDateToNow = formatDistanceToNow(publishedAt, { addSuffix: true });
+
   return (
     <article className={styles.game}>
       <header>
         <div className={styles.gameMasterInfo}>
           <img 
             className={styles.gameCover}
-            src={props.gameCoverImg}
+            src={game.coverImg}
           />
           <div className={styles.gameDetailInfo}>
-            <strong>{props.gameName}</strong>
-            <span>{props.publisher}</span>
+            <strong>{game.name}</strong>
+            <time title={releaseDate} dateTime={game.releaseDate.toISOString()}>
+              Realesed in {releaseDate}
+            </time>
+            <span>{game.publisher}</span>
           </div>
         </div>
 
-        <div className={styles.gameDetailInfo}>
-          <span>{props.releaseDate}</span>
-        </div>
+        <time title={publishedDate} dateTime={publishedAt.toISOString()}>
+          {publishedDateToNow}
+        </time>
       </header>
 
       <div className={styles.content}>
-        <p>{props.note}</p>
+        {content.map(line => {
+          if(line.type === 'P') {
+            return <p key={line.order}>{line.content}</p>
+          }
+        })}
       </div>
     </article>
   )

diff --git a/src/components/Game.module.css b/src/components/Game.module.css
@@ -29,7 +29,7 @@
   line-height: 1.6rem;
 }
 
-.gameDetailInfo span {
+.gameDetailInfo span, time {
   display: block;
   color: var(--gray);
   line-height: 1.6rem;