From 197b8edef0a1b8b390a4c25a3b9e79a835e22b3a Mon Sep 17 00:00:00 2001
From: Chris Rybicki <chrisr@monada.co>
Date: Thu, 10 Aug 2023 23:07:06 -0400
Subject: [PATCH 1/6] try some fonts

---
 website/public/index.html             |  3 +++
 website/src/App.css                   |  1 -
 website/src/App.tsx                   |  9 +++++----
 website/src/components/VoteItem.tsx   |  4 ++--
 website/src/index.css                 | 13 +++++--------
 website/src/views/LeaderboardView.tsx | 12 ++++++------
 6 files changed, 21 insertions(+), 21 deletions(-)
 delete mode 100644 website/src/App.css

diff --git a/website/public/index.html b/website/public/index.html
index aa069f2..b22b71d 100644
--- a/website/public/index.html
+++ b/website/public/index.html
@@ -15,6 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/website/src/App.css b/website/src/App.css
deleted file mode 100644
index 8b13789..0000000
--- a/website/src/App.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/website/src/App.tsx b/website/src/App.tsx
index 8e0f40f..b463473 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -13,10 +13,11 @@ function App() {
   };
 
   return (
-    <div className="App font-mono absolute inset-0">
+    <div className="App absolute inset-0">
       <div className="w-full h-full flex flex-col items-center justify-center">
-        <div className="w-[30rem] min-h-[35rem] px-10 pt-10 pb-4 bg-sky-200 rounded-lg shadow-xl flex flex-col">
-          <div className="text-slate-700 font-bold text-3xl text-center">
+        <h1 className="title text-7xl pb-7 font-medium">Battle of the Bites!</h1>
+        <div className="text-2xl w-[30rem] min-h-[35rem] px-10 pt-10 pb-4 bg-sky-200 rounded-lg shadow-xl flex flex-col">
+          <div className="text-slate-700 text-4xl text-center">
             {view === "voting" ? "Which is better?" : "Leaderboard"}
           </div>
 
@@ -25,7 +26,7 @@ function App() {
             {view === "leaderboard" && <LeaderboardView />}
           </div>
 
-          <div className="w-full h-px bg-slate-300 my-4" />
+          <div className="w-full h-px bg-slate-400 my-4" />
 
           <div className="w-full flex justify-center truncate">
             {view === "voting" && (
diff --git a/website/src/components/VoteItem.tsx b/website/src/components/VoteItem.tsx
index dc2a55e..13d5e3a 100644
--- a/website/src/components/VoteItem.tsx
+++ b/website/src/components/VoteItem.tsx
@@ -23,7 +23,7 @@ export const VoteItem = ({
 }: VoteItemProps) => {
   return (
     <div className="text-center">
-      <h3 className="text-lg truncate h-8 text-slate-700">{name}</h3>
+      <h3 className="text-3xl truncate h-8 mb-5 text-slate-700">{name}</h3>
       <div className="relative w-32 h-32 mx-auto rounded-lg truncate">
         <div className="w-full h-full bg-sky-100 animate-pulse absolute shadow items-center justify-center flex opacity-50">
           <SpinnerLoader />
@@ -36,7 +36,7 @@ export const VoteItem = ({
           />
         )}
       </div>
-      <div className="pt-3">
+      <div className="pt-6">
         {!winner && (
           <Button
             onClick={onClick}
diff --git a/website/src/index.css b/website/src/index.css
index 17df0e7..85d8dea 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -2,16 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+.title {
+  font-family: 'Nanum Pen Script', cursive;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Gamja Flower', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/website/src/views/LeaderboardView.tsx b/website/src/views/LeaderboardView.tsx
index 112127a..84cb2f2 100644
--- a/website/src/views/LeaderboardView.tsx
+++ b/website/src/views/LeaderboardView.tsx
@@ -15,24 +15,24 @@ export const LeaderboardView = () => {
 
   return (
     <div className="max-h-[23rem] overflow-y-auto h-full">
-      <table className="divide-y divide-slate-300 min-w-[20rem] h-full">
+      <table className="divide-y divide-slate-400 min-w-[20rem] h-full">
         <thead>
           <tr>
             <th
               scope="col"
-              className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-0 w-full"
+              className="py-3.5 pl-4 pr-3 text-left text-xl font-semibold text-slate-900 sm:pl-0 w-full"
             >
               Name
             </th>
             <th
               scope="col"
-              className="px-3 py-3.5 text-right text-sm font-semibold text-slate-900 w-32"
+              className="px-3 py-3.5 text-right text-xl font-semibold text-slate-900 w-32"
             >
               Score
             </th>
           </tr>
         </thead>
-        <tbody className="divide-y divide-slate-300">
+        <tbody className="divide-y divide-slate-400">
           {loading && (
             <tr>
               <td
@@ -50,10 +50,10 @@ export const LeaderboardView = () => {
             .sort((a, b) => b.score - a.score)
             .map((item, index) => (
               <tr key={item.name}>
-                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-0">
+                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-lg font-medium text-slate-900 sm:pl-0">
                   {item.name}
                 </td>
-                <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500 ">
+                <td className="whitespace-nowrap px-3 py-4 text-xl text-slate-500 ">
                   <div className="flex justify-end gap-x-2 leading-7">
                     <div className="text-xl">
                       {index === 0 && "🥇"}

From 81f7aa9427d6c36cd03b9efc1a6be3a6ede5c006 Mon Sep 17 00:00:00 2001
From: Chris Rybicki <chrisr@monada.co>
Date: Thu, 10 Aug 2023 23:10:06 -0400
Subject: [PATCH 2/6] wip

---
 website/src/views/LeaderboardView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/views/LeaderboardView.tsx b/website/src/views/LeaderboardView.tsx
index 84cb2f2..0662216 100644
--- a/website/src/views/LeaderboardView.tsx
+++ b/website/src/views/LeaderboardView.tsx
@@ -50,12 +50,12 @@ export const LeaderboardView = () => {
             .sort((a, b) => b.score - a.score)
             .map((item, index) => (
               <tr key={item.name}>
-                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-lg font-medium text-slate-900 sm:pl-0">
+                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-xl text-slate-900 sm:pl-0">
                   {item.name}
                 </td>
                 <td className="whitespace-nowrap px-3 py-4 text-xl text-slate-500 ">
                   <div className="flex justify-end gap-x-2 leading-7">
-                    <div className="text-xl">
+                    <div>
                       {index === 0 && "🥇"}
                       {index === 1 && "🥈"}
                       {index === 2 && "🥉"}

From a76e6db5a55df206ea1b3eb5a9be6fc6ace85f16 Mon Sep 17 00:00:00 2001
From: polamoros <info@polamoros.com>
Date: Fri, 11 Aug 2023 10:01:21 +0200
Subject: [PATCH 3/6] wip

---
 website/src/App.tsx                   |  6 ++-
 website/src/components/VoteItem.tsx   | 74 ++++++++++++++++++---------
 website/src/services/fetchChoices.ts  | 30 ++++++++++-
 website/src/views/LeaderboardView.tsx |  2 +-
 website/src/views/VotingView.tsx      | 37 +++++++-------
 5 files changed, 103 insertions(+), 46 deletions(-)

diff --git a/website/src/App.tsx b/website/src/App.tsx
index b463473..049d730 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -15,8 +15,10 @@ function App() {
   return (
     <div className="App absolute inset-0">
       <div className="w-full h-full flex flex-col items-center justify-center">
-        <h1 className="title text-7xl pb-7 font-medium">Battle of the Bites!</h1>
-        <div className="text-2xl w-[30rem] min-h-[35rem] px-10 pt-10 pb-4 bg-sky-200 rounded-lg shadow-xl flex flex-col">
+        <h1 className="title text-7xl pb-7 font-medium">
+          Battle of the Bites!
+        </h1>
+        <div className="text-2xl w-[30rem] min-h-[35rem] px-8 pt-8 pb-4 bg-sky-200 rounded-lg shadow-xl flex flex-col">
           <div className="text-slate-700 text-4xl text-center">
             {view === "voting" ? "Which is better?" : "Leaderboard"}
           </div>
diff --git a/website/src/components/VoteItem.tsx b/website/src/components/VoteItem.tsx
index 13d5e3a..fb5ab93 100644
--- a/website/src/components/VoteItem.tsx
+++ b/website/src/components/VoteItem.tsx
@@ -1,10 +1,11 @@
 import { Button } from "./Button";
 import classnames from "classnames";
 import { SpinnerLoader } from "./SpinnerLoader";
+import { useMemo } from "react";
 
 export interface VoteItemProps {
   name: string;
-  imageUrl: string;
+  image?: string;
   onClick: () => void;
   disabled?: boolean;
   loading?: boolean;
@@ -15,27 +16,64 @@ export interface VoteItemProps {
 export const VoteItem = ({
   name,
   onClick,
-  imageUrl,
+  image,
   disabled,
   loading,
   winner,
   score,
 }: VoteItemProps) => {
+  const rotateStyle = useMemo(() => {
+    return {
+      transform: winner && "rotateY(180deg)",
+    };
+  }, [winner]);
+
   return (
     <div className="text-center">
-      <h3 className="text-3xl truncate h-8 mb-5 text-slate-700">{name}</h3>
-      <div className="relative w-32 h-32 mx-auto rounded-lg truncate">
-        <div className="w-full h-full bg-sky-100 animate-pulse absolute shadow items-center justify-center flex opacity-50">
-          <SpinnerLoader />
-        </div>
-        {imageUrl !== "" && (
-          <img
-            className="w-full h-full object-fill absolute z-10"
-            src={imageUrl}
-            alt={name}
-          />
+      <div
+        className={classnames(
+          "rounded-lg bg-white",
+          "transition-transform duration-300 w-full h-full transform"
         )}
+        style={rotateStyle}
+      >
+        <h3
+          className="text-3xl truncate py-2 text-slate-700 px-2 h-12"
+          style={rotateStyle}
+        >
+          {winner && (winner === name ? "🥇" : "🥈")}
+          {!winner && name}
+        </h3>
+
+        <div
+          className="relative h-36 mx-auto rounded-b-lg truncate border-t-2 border-slate-500 bg-sky-100"
+          style={rotateStyle}
+        >
+          <div className="absolute inset-0 flex items-center justify-center opacity-50">
+            <SpinnerLoader />
+          </div>
+
+          {winner && (
+            <div
+              className={classnames(
+                "w-full h-full absolute z-10",
+                winner === name ? "bg-green-100" : "bg-red-100"
+              )}
+            >
+              Score: {Math.max(score!, 0)}
+            </div>
+          )}
+
+          {!winner && image && (
+            <img
+              className="w-full h-full object-cover absolute z-10"
+              src={`${image}`}
+              alt={name}
+            />
+          )}
+        </div>
       </div>
+
       <div className="pt-6">
         {!winner && (
           <Button
@@ -45,16 +83,6 @@ export const VoteItem = ({
             disabled={disabled}
           />
         )}
-        {winner && (
-          <div
-            className={classnames(
-              "h-8",
-              winner === name ? "text-green-600" : "text-red-600"
-            )}
-          >
-            {winner === name ? "🥇" : "👎"} (Score: {Math.max(score!, 0)})
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/website/src/services/fetchChoices.ts b/website/src/services/fetchChoices.ts
index bb2020f..89f830f 100644
--- a/website/src/services/fetchChoices.ts
+++ b/website/src/services/fetchChoices.ts
@@ -1,5 +1,24 @@
 import { fetchConfig } from "./fetchConfig";
 
+export interface Choice {
+  label: string;
+  imageSvg?: string;
+}
+
+const getImageSvg = async (label: string): Promise<string> => {
+  const url = `https://source.unsplash.com/featured/128x128/?${label}&category=food`;
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
+
 export const fetchChoices = async () => {
   const apiUrl = (await fetchConfig()).apiUrl;
   const response = await fetch(apiUrl + "/requestChoices", {
@@ -8,6 +27,13 @@ export const fetchChoices = async () => {
   if (!response.ok) {
     throw new Error("Failed to request choices");
   }
-  const jsonData: string[] = await response.json();
-  return jsonData;
+  const labels: string[] = await response.json();
+
+  const choices = await Promise.all(
+    labels.map(async (label) => {
+      const imageSvg = await getImageSvg(label);
+      return { label, imageSvg };
+    })
+  );
+  return choices;
 };
diff --git a/website/src/views/LeaderboardView.tsx b/website/src/views/LeaderboardView.tsx
index 0662216..fb70137 100644
--- a/website/src/views/LeaderboardView.tsx
+++ b/website/src/views/LeaderboardView.tsx
@@ -14,7 +14,7 @@ export const LeaderboardView = () => {
   }, []);
 
   return (
-    <div className="max-h-[23rem] overflow-y-auto h-full">
+    <div className="max-h-[22rem] overflow-y-auto h-full">
       <table className="divide-y divide-slate-400 min-w-[20rem] h-full">
         <thead>
           <tr>
diff --git a/website/src/views/VotingView.tsx b/website/src/views/VotingView.tsx
index 468bdb2..8d91112 100644
--- a/website/src/views/VotingView.tsx
+++ b/website/src/views/VotingView.tsx
@@ -1,16 +1,18 @@
 import { useEffect, useState } from "react";
 import { Button } from "../components/Button";
-import { fetchChoices } from "../services/fetchChoices";
+import { Choice, fetchChoices } from "../services/fetchChoices";
 import { submitVote } from "../services/submitVote";
 import { VoteItem } from "../components/VoteItem";
 
 export const VotingView = () => {
-  const [choices, setChoices] = useState<string[]>(["", ""]);
+  const [choices, setChoices] = useState<Choice[]>([
+    { label: "" },
+    { label: "" },
+  ]);
   const [scores, setScores] = useState<number[]>([]);
 
   const [loading, setLoading] = useState(true);
 
-  const [selectedWinnerIdx, setSelectedWinnerIdx] = useState<number>();
   const [loadingScores, setLoadingScores] = useState(false);
 
   useEffect(() => {
@@ -21,21 +23,23 @@ export const VotingView = () => {
   }, []);
 
   const [winner, setWinner] = useState<string>();
-  const selectWinner = async (winner: string) => {
-    const loser = choices.find((choice) => choice !== winner)!;
+  const [selectedChoice, setSelectedChoice] = useState<Choice>();
+
+  const selectWinner = async (winner: Choice) => {
+    setSelectedChoice(winner);
+    const loser = choices.find((choice) => choice.label !== winner.label)!;
 
     setLoadingScores(true);
-    setSelectedWinnerIdx(choices.indexOf(winner));
     const { winner: winnerScore, loser: loserScore } = await submitVote(
-      winner,
-      loser
+      winner.label,
+      loser.label
     );
     if (winner === choices[0]) {
       setScores([winnerScore, loserScore]);
     } else {
       setScores([loserScore, winnerScore]);
     }
-    setWinner(winner);
+    setWinner(winner.label);
     setLoadingScores(false);
   };
 
@@ -43,6 +47,7 @@ export const VotingView = () => {
     setWinner(undefined);
     setLoading(true);
     setScores([]);
+    setChoices([{ label: "" }, { label: "" }]);
     const choices = await fetchChoices();
     setChoices(choices);
     setLoading(false);
@@ -50,20 +55,16 @@ export const VotingView = () => {
 
   return (
     <div className="choices space-y-4">
-      <div className="flex gap-x-8">
+      <div className="flex">
         {choices.map((choice, index) => (
-          <div className="w-1/2">
+          <div className="w-1/2 shrink-0 px-4">
             <VoteItem
               key={index}
-              name={choice}
-              imageUrl={
-                loading
-                  ? ""
-                  : `https://source.unsplash.com/featured/128x128/?${choice}&category=food`
-              }
+              name={choice.label}
+              image={loading ? undefined : choice.imageSvg}
               onClick={() => selectWinner(choice)}
               disabled={loading || loadingScores}
-              loading={loadingScores && selectedWinnerIdx === index}
+              loading={loadingScores && selectedChoice?.label === choice.label}
               winner={winner}
               score={Math.floor(scores[index])}
             />

From f51ec36ba2b6f5190846e2d9953d4323e807afd7 Mon Sep 17 00:00:00 2001
From: polamoros <info@polamoros.com>
Date: Fri, 11 Aug 2023 10:02:10 +0200
Subject: [PATCH 4/6] wip

---
 website/src/components/VoteItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/VoteItem.tsx b/website/src/components/VoteItem.tsx
index fb5ab93..c604a93 100644
--- a/website/src/components/VoteItem.tsx
+++ b/website/src/components/VoteItem.tsx
@@ -46,7 +46,7 @@ export const VoteItem = ({
         </h3>
 
         <div
-          className="relative h-36 mx-auto rounded-b-lg truncate border-t-2 border-slate-500 bg-sky-100"
+          className="relative h-40 mx-auto rounded-b-lg truncate border-t-2 border-slate-500 bg-sky-100"
           style={rotateStyle}
         >
           <div className="absolute inset-0 flex items-center justify-center opacity-50">

From a25ae0afba1ceaeb6903530da1c680a614de10ad Mon Sep 17 00:00:00 2001
From: polamoros <info@polamoros.com>
Date: Fri, 11 Aug 2023 10:17:36 +0200
Subject: [PATCH 5/6] wip

---
 website/src/components/VoteItem.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/website/src/components/VoteItem.tsx b/website/src/components/VoteItem.tsx
index c604a93..8eacb57 100644
--- a/website/src/components/VoteItem.tsx
+++ b/website/src/components/VoteItem.tsx
@@ -75,14 +75,12 @@ export const VoteItem = ({
       </div>
 
       <div className="pt-6">
-        {!winner && (
-          <Button
-            onClick={onClick}
-            label="Vote"
-            loading={loading}
-            disabled={disabled}
-          />
-        )}
+        <Button
+          onClick={onClick}
+          label="Vote"
+          loading={loading}
+          disabled={disabled || winner !== undefined}
+        />
       </div>
     </div>
   );

From 8eb42c90afc032653f086d7f1964e025497a4649 Mon Sep 17 00:00:00 2001
From: Chris Rybicki <chrisr@monada.co>
Date: Fri, 11 Aug 2023 15:29:34 -0400
Subject: [PATCH 6/6] very ugly animation code

---
 website/src/components/VoteItem.tsx | 34 +++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/website/src/components/VoteItem.tsx b/website/src/components/VoteItem.tsx
index 8eacb57..d711944 100644
--- a/website/src/components/VoteItem.tsx
+++ b/website/src/components/VoteItem.tsx
@@ -28,6 +28,10 @@ export const VoteItem = ({
     };
   }, [winner]);
 
+  const safeName = name.replace(/[^a-z0-9]/gi, "");
+  const safeScore = score ?? 1500;
+  const isWinner = winner === name ? -1 : 1;
+
   return (
     <div className="text-center">
       <div
@@ -56,11 +60,37 @@ export const VoteItem = ({
           {winner && (
             <div
               className={classnames(
-                "w-full h-full absolute z-10",
+                "w-full h-full absolute z-10 pt-5",
                 winner === name ? "bg-green-100" : "bg-red-100"
               )}
             >
-              Score: {Math.max(score!, 0)}
+              <style>
+                {`#${safeName}::after {
+  content: counter(${safeName});
+  animation: ${safeName}-anim 1.5s linear;
+  counter-reset: ${safeName} ${score};
+}
+
+@keyframes ${safeName}-anim {
+  0% { counter-reset: ${safeName} ${safeScore + 15 * isWinner}; }
+  3% { counter-reset: ${safeName} ${safeScore + 14 * isWinner}; }
+  6% { counter-reset: ${safeName} ${safeScore + 13 * isWinner}; }
+  9% { counter-reset: ${safeName} ${safeScore + 12 * isWinner}; }
+  12% { counter-reset: ${safeName} ${safeScore + 11 * isWinner}; }
+  15% { counter-reset: ${safeName} ${safeScore + 10 * isWinner}; }
+  18% { counter-reset: ${safeName} ${safeScore + 9 * isWinner}; }
+  21% { counter-reset: ${safeName} ${safeScore + 8 * isWinner}; }
+  24% { counter-reset: ${safeName} ${safeScore + 7 * isWinner}; }
+  27% { counter-reset: ${safeName} ${safeScore + 6 * isWinner}; }
+  30% { counter-reset: ${safeName} ${safeScore + 5 * isWinner}; }
+  33% { counter-reset: ${safeName} ${safeScore + 4 * isWinner}; }
+  36% { counter-reset: ${safeName} ${safeScore + 3 * isWinner}; }
+  43% { counter-reset: ${safeName} ${safeScore + 2 * isWinner}; }
+  66% { counter-reset: ${safeName} ${safeScore + 1 * isWinner}; }
+  100% { counter-reset: ${safeName} ${safeScore}; }
+}`}
+              </style>
+              Score: <span id={safeName}></span>
             </div>
           )}