show neutral amount

frontend/src/GameFilter.tsx

@@ -12,6 +12,9 @@ export function GameFilter() {
   const [people, setPeople] = useState<Person[]>([]);
   const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
   const [filteredGames, setFilteredGames] = useState<string[]>([]);
+  const [gameToPositive, setGameToPositive] = useState<
+    Map<string, Set<string>>
+  >(new Map());
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [metaData, _setMetaData] = useState<{ [key: string]: GameProto }>({});
 
@@ -27,6 +30,7 @@ export function GameFilter() {
 
   useEffect(() => {
     if (selectedPeople.size === 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFilteredGames([]);
       return;
     }
@@ -39,22 +43,31 @@ export function GameFilter() {
       return;
     }
 
-    // Create a map of game -> set of people who would play it
-    const gameToPlayers = new Map<string, Set<string>>();
+    // Create a map of game -> set of people who would not play it
+    const gameToNegative = new Map<string, Set<string>>();
+    const gameToPositiveOpinion = new Map<string, Set<string>>();
 
     selectedPersons.forEach((person) => {
       person.opinion.forEach((op) => {
-        if (!gameToPlayers.has(op.title)) {
-          gameToPlayers.set(op.title, new Set());
+        if (!gameToNegative.has(op.title)) {
+          gameToNegative.set(op.title, new Set());
+        }
+        if (!gameToPositiveOpinion.has(op.title)) {
+          gameToPositiveOpinion.set(op.title, new Set());
         }
         if (!op.wouldPlay) {
-          gameToPlayers.get(op.title)!.add(person.name);
+          gameToNegative.get(op.title)!.add(person.name);
+        }
+        if (op.wouldPlay) {
+          gameToPositiveOpinion.get(op.title)!.add(person.name);
         }
       });
     });
 
+    setGameToPositive(gameToPositiveOpinion);
+
     // Filter games where ALL selected people would play
-    const game_titles = Array.from(gameToPlayers.entries())
+    const game_titles = Array.from(gameToNegative.entries())
       .filter(([, players]) => players.size === 0)
       .map(([game]) => game);
 
@@ -169,8 +182,21 @@ export function GameFilter() {
                         marginTop: "0.5rem",
                       }}
                     >
-                      ✓ All {selectedPeople.size} selected would play
+                      ✓ {gameToPositive.get(game)!.size} selected would play
                     </div>
+                    {selectedPeople.size - gameToPositive.get(game)!.size >
+                      0 && (
+                      <div
+                        style={{
+                          fontSize: "0.9em",
+                          color: "#d4d400",
+                          marginTop: "0.3rem",
+                        }}
+                      >
+                        ? {selectedPeople.size - gameToPositive.get(game)!.size}{" "}
+                        {(selectedPeople.size - gameToPositive.get(game)!.size) > 1 ? "are" : "is"} neutral
+                      </div>
+                    )}
                   </div>
                   <GameImage game={game} />
                 </Link>