1 files changed, 49 insertions, 0 deletions

diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
new file mode 100644
index 0000000..8e58ce9
--- /dev/null
+++ b/frontend/src/components/GameEntry.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+import { Game } from '../types/Game';
+import "../css/Games.css"
+
+interface GameEntryProps {
+  game: Game;
+}
+
+const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
+
+  React.useEffect(() => {
+    game.category_portals.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 as any as string;
+      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(`${game.id}`)!.appendChild(itemBody);
+    });
+  }, []);
+
+  return (
+    <Link to={"/games/" + game.id}><div className='games-page-item'>
+      <div className='games-page-item-header'>
+        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
+        <span><b>{game.name}</b></span>
+      </div>
+      <div id={game.id as any as string} className='games-page-item-body'>
+      </div>
+    </div></Link>
+  );
+};
+
+export default GameEntry;