1 files changed, 46 insertions, 0 deletions

diff --git a/frontend/src/components/pages/game.js b/frontend/src/components/pages/game.js
new file mode 100644
index 0000000..017760b
--- /dev/null
+++ b/frontend/src/components/pages/game.js
@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation, Link } from "react-router-dom";
+
+import "./games.css"
+
+export default function GameEntry({ gameInfo }) {
+    const [gameEntry, setGameEntry] = React.useState(null);
+    const location = useLocation();
+
+    const gameInfoCats = gameInfo.category_portals;
+
+    useEffect(() => {
+        gameInfoCats.forEach(catInfo => {
+            const itemBody = document.createElement("div");
+            const itemTitle = document.createElement("span");
+            const spacing = document.createElement("br");
+            const itemNum = document.createElement("span");
+
+            itemTitle.innerText = catInfo.category.name;
+            itemNum.innerText = catInfo.portal_count;
+            itemTitle.classList.add("games-page-item-body-item-title");
+            itemNum.classList.add("games-page-item-body-item-num");
+            itemBody.appendChild(itemTitle);
+            itemBody.appendChild(spacing);
+            itemBody.appendChild(itemNum);
+            itemBody.className = "games-page-item-body-item";
+    
+            // itemBody.innerHTML = `
+            //             <span className='games-page-item-body-item-title'>${catInfo.category.name}</span><br />
+            //             <span className='games-page-item-body-item-num'>${catInfo.portal_count}</span>`
+    
+            document.getElementById(`${gameInfo.id}`).appendChild(itemBody);
+        });
+    })
+
+    return (
+        <Link to={"/games/game?game=" + gameInfo.id}><div className='games-page-item'>
+            <div className='games-page-item-header'>
+                <div style={{backgroundImage: `url(${gameInfo.image})`}} className='games-page-item-header-img'></div>
+                <span><b>{gameInfo.name}</b></span>
+            </div>
+            <div id={gameInfo.id} className='games-page-item-body'>
+            </div>
+        </div></Link>
+    )
+}