feat: Add 'Would Play' and 'Would Not Play' buttons to game list items and update button styling.

frontend/src/GameList.tsx

@@ -5,6 +5,7 @@ import {
   GameList as GameListProto,
   Person as PersonProto,
   Opinion,
+  AddOpinionRequest,
 } from "../items";
 import { Link } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
@@ -457,27 +458,82 @@ export function GameList() {
         <ul className="grid-container">
           {games.map((game) => {
             const opinion = opinions.find((op) => op.title === game.title);
+            function handleOpinion(title: string, wouldPlay: boolean): void {
+              apiFetch(`/api/opinion`, {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/octet-stream",
+                },
+                body: AddOpinionRequest.encode(
+                  AddOpinionRequest.create({
+                    gameTitle: title,
+                    wouldPlay,
+                  })
+                ).finish(),
+              })
+                .then((res) => res.arrayBuffer())
+                .then((resBuffer) => {
+                  const response = PersonProto.decode(
+                    new Uint8Array(resBuffer)
+                  );
+
+                  setOpinions(response.opinion);
+                })
+                .catch((err) => {
+                  console.error(err);
+                });
+            }
+
             return (
-              <Link
+              <div>
-                to={`/game/${encodeURIComponent(game.title)}`}
+                <Link
-                key={game.title}
+                  to={`/game/${encodeURIComponent(game.title)}`}
-                className="list-item"
+                  key={game.title}
-                style={{
+                  className="list-item"
-                  textDecoration: "none",
+                  style={{
-                  color: "inherit",
+                    textDecoration: "none",
-                  display: "flex",
+                    color: "inherit",
-                  justifyContent: "space-between",
+                    display: "flex",
-                  alignItems: "center",
+                    justifyContent: "space-between",
-                  borderColor: opinion
+                    alignItems: "center",
-                    ? opinion.wouldPlay
+                    borderColor: opinion
-                      ? "#4caf50" // would play (green)
+                      ? opinion.wouldPlay
-                      : "#f44336" // would not play (red)
+                        ? "#4caf50" // would play (green)
-                    : "#191f2e", // no opinion (bg-2)
+                        : "#f44336" // would not play (red)
-                }}
+                      : "#191f2e", // no opinion (bg-2)
-              >
+                  }}
-                <strong>{game.title}</strong>
+                >
-                <GameImage game={game.title} />
+                  <strong>{game.title}</strong>
-              </Link>
+                  <GameImage game={game.title} />
+                </Link>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: "1rem",
+                    marginTop: "1rem",
+                    width: "100%",
+                  }}
+                >
+                  <button
+                    onClick={() => handleOpinion(game.title, true)}
+                    style={{
+                      width: "50%",
+                      borderColor: "#4caf50",
+                    }}
+                  >
+                    Would Play
+                  </button>
+                  <button
+                    onClick={() => handleOpinion(game.title, false)}
+                    style={{
+                      width: "50%",
+                      borderColor: "#f44336",
+                    }}
+                  >
+                    Would Not Play
+                  </button>
+                </div>
+              </div>
             );
           })}
         </ul>

frontend/src/PersonDetails.tsx

@@ -167,7 +167,13 @@ export const PersonDetails = () => {
                 Would Play
               </label>
             </div>
-            <button onClick={handleAddOpinion} style={{ marginBottom: "2px" }}>
+            <button
+              onClick={handleAddOpinion}
+              style={{
+                marginBottom: "2px",
+                backgroundColor: "var(--accent-color)",
+              }}
+            >
               Add
             </button>
           </div>

frontend/src/index.css

@@ -54,14 +54,14 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: var(--accent-color);
+  background-color: var(--secondary-bg);
   color: white;
   cursor: pointer;
   transition: background-color 0.25s, transform 0.1s;
 }
 
 button:hover {
-  background-color: #0b7dda;
+  background-color: var(--tertiary-bg);
 }
 
 button:active {