feat: add one-v-one option

JonathanWbn · Aug 14, 2022 · 0b458b7 · 0b458b7 · vercel · Aug 14, 2022
1 parent 7b0e7ac
commit 0b458b7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 42 deletions.
diff --git a/components/game-form.tsx b/components/game-form.tsx
@@ -19,7 +19,12 @@ function GameForm() {
   const [loser1, loser2] = loserTeam;
 
   const isComplete =
-    uniq([...winnerTeam, ...loserTeam].filter(Boolean)).length === 4;
+    ((winnerTeam.filter(Boolean).length === 1 &&
+      loserTeam.filter(Boolean).length === 1) ||
+      (winnerTeam.filter(Boolean).length === 2 &&
+        loserTeam.filter(Boolean).length === 2)) &&
+    uniq([...winnerTeam, ...loserTeam].filter(Boolean)).length ===
+      [...winnerTeam, ...loserTeam].filter(Boolean).length;
 
   const delta =
     isComplete &&

diff --git a/components/game-list.tsx b/components/game-list.tsx
@@ -78,39 +78,49 @@ function GameItem({
       ) : (
         <>
           <div className="flex items-center mb-2">
-            <Image
-              src={`/animals/${winner1.animal}.png`}
-              alt={winner1.animal}
-              width={24}
-              height={24}
-            />
-            <Image
-              src={`/animals/${winner2.animal}.png`}
-              alt={winner2.animal}
-              width={24}
-              height={24}
-            />
+            <div className="h-6 w-12 flex justify-center">
+              <Image
+                src={`/animals/${winner1.animal}.png`}
+                alt={winner1.animal}
+                width={24}
+                height={24}
+              />
+              {winner2.id !== "placeholder" && (
+                <Image
+                  src={`/animals/${winner2.animal}.png`}
+                  alt={winner2.animal}
+                  width={24}
+                  height={24}
+                />
+              )}
+            </div>
             <p className="font-bold ml-2">
-              {winner1.name}, {winner2.name}
+              {winner1.name}
+              {winner2.name ? `, ${winner2.name}` : ""}
             </p>
             <div className="grow"></div>
             <p className="text-green-400">+{delta}</p>
           </div>
           <div className="flex items-center">
-            <Image
-              src={`/animals/${loser1.animal}.png`}
-              alt={loser1.animal}
-              width={24}
-              height={24}
-            />
-            <Image
-              src={`/animals/${loser2.animal}.png`}
-              alt={loser2.animal}
-              width={24}
-              height={24}
-            />
+            <div className="h-6 w-12 flex justify-center">
+              <Image
+                src={`/animals/${loser1.animal}.png`}
+                alt={loser1.animal}
+                width={24}
+                height={24}
+              />
+              {loser2.id !== "placeholder" && (
+                <Image
+                  src={`/animals/${loser2.animal}.png`}
+                  alt={loser2.animal}
+                  width={24}
+                  height={24}
+                />
+              )}
+            </div>
             <p className="ml-2">
-              {loser1.name}, {loser2.name}
+              {loser1.name}
+              {loser2.name ? `, ${loser2.name}` : ""}
             </p>
             <div className="grow"></div>
             <p className="text-red-400">-{delta}</p>

diff --git a/domain/Game.ts b/domain/Game.ts
@@ -1,6 +1,6 @@
 import { PlayerId } from "./Player";
 
-export type Team = [PlayerId, PlayerId];
+export type Team = [PlayerId, PlayerId | undefined];
 export type GameId = string;
 type Timestamp = number;
 

diff --git a/domain/Leaderboard.ts b/domain/Leaderboard.ts
@@ -76,24 +76,34 @@ export class Leaderboard {
   }
 
   public getGameDelta(game: Game, ratedPlayers: RatedPlayer[]): number {
-    const ratingWinner1 = ratedPlayers.find(
+    const winner1 = ratedPlayers.find(
       (player) => game.winnerTeam[0] === player.id
-    )!.rating;
-    const ratingWinner2 = ratedPlayers.find(
+    );
+    const winner2 = ratedPlayers.find(
       (player) => game.winnerTeam[1] === player.id
-    )!.rating;
-    const ratingLoser1 = ratedPlayers.find(
+    );
+    const loser1 = ratedPlayers.find(
       (player) => game.loserTeam[0] === player.id
-    )!.rating;
-    const ratingLoser2 = ratedPlayers.find(
+    );
+    const loser2 = ratedPlayers.find(
       (player) => game.loserTeam[1] === player.id
-    )!.rating;
+    );
 
-    const avgRatingWinner = (ratingWinner1 + ratingWinner2) / 2;
-    const avgRatingLoser = (ratingLoser1 + ratingLoser2) / 2;
+    const ratingWinnerTeam =
+      winner1 && winner2
+        ? (winner1.rating + winner2.rating) / 2
+        : winner1
+        ? winner1.rating
+        : 1500;
+    const ratingLoserTeam =
+      loser1 && loser2
+        ? (loser1.rating + loser2.rating) / 2
+        : loser1
+        ? loser1.rating
+        : 1500;
 
     const winnerChanceToWin =
-      1 / (1 + Math.pow(10, (avgRatingLoser - avgRatingWinner) / 400));
+      1 / (1 + Math.pow(10, (ratingLoserTeam - ratingWinnerTeam) / 400));
     const delta = Math.round(32 * (1 - winnerChanceToWin));
 
     return delta;

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -39,9 +39,11 @@ const Home: NextPage = () => {
     setGames(games);
   }
 
-  function getPlayer(id: PlayerId) {
+  function getPlayer(id: PlayerId | undefined) {
     const player = players?.find((el) => el.id === id);
-    return player || { id: "", name: "", animal: "bat", isRetired: false };
+    return (
+      player || { id: "placeholder", name: "", animal: "bat", isRetired: false }
+    );
   }
 
   return (
@@ -118,7 +120,7 @@ const Home: NextPage = () => {
 export const DataContext = createContext<{
   players: Player[];
   games: Game[];
-  getPlayer: (id: PlayerId) => Player;
+  getPlayer: (id: PlayerId | undefined) => Player;
   refresh: VoidFunction;
   leaderboard: Leaderboard;
   isLoading: boolean;