add basic vercel flags

package.json

@@ -29,6 +29,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@sentry/nextjs": "^8.35.0",
     "@vercel/analytics": "^1.4.1",
+    "@vercel/flags": "^3.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",

src/app/games/[id]/page.tsx

@@ -2,18 +2,18 @@ import ScoreEntry from "./scoreEntry";
 import ScoreDisplay from "./scoreDisplay";
 import { getGameById } from "@/server/queries";
 import { notFound } from "next/navigation";
-import GameOver from "./GameOver";
 import transformGameData from "@/lib/gameLogic";
+import { chartFlag } from "@/flags";
 
 export default async function GameView(props: {
   params: Promise<{ id: string }>;
 }) {
   const params = await props.params;
   const game = await getGameById(params.id);
+  const showCharts = await chartFlag();
   if (!game) {
     notFound();
   }
-  // TODO: Throw an error if the game is not found
 
   const displayScores = await transformGameData(game);
 
@@ -27,6 +27,7 @@ export default async function GameView(props: {
         numRounds={game.rounds.length}
         gameId={game.id}
         isFinished={game.isFinished}
+        showCharts={showCharts}
       />
       <ScoreEntry
         game={game}

src/app/games/[id]/scoreDisplay.tsx

@@ -40,11 +40,13 @@ function ScoreDisplay({
   numRounds,
   gameId,
   isFinished,
+  showCharts,
 }: {
   displayScores: DisplayScores[];
   numRounds: number;
   gameId: string;
   isFinished: boolean;
+  showCharts: boolean;
 }) {
   const router = useRouter();
   const [editingRound, setEditingRound] = useState<number | null>(null);
@@ -317,9 +319,11 @@ function ScoreDisplay({
           </TableRow>
         </TableFooter>
       </Table>
-      <div className="mb-4">
-        <ScoreLineGraph displayScores={displayScores} />
-      </div>
+      {showCharts && (
+        <div className="mb-4">
+          <ScoreLineGraph displayScores={displayScores} />
+        </div>
+      )}
     </div>
   );
 }
@@ -330,6 +334,7 @@ export default function ScoreDisplayWithErrorBoundary(props: {
   numRounds: number;
   gameId: string;
   isFinished: boolean;
+  showCharts: boolean;
 }) {
   return (
     <ErrorBoundary>

src/flags.ts

@@ -0,0 +1,10 @@
+import { flag } from "@vercel/flags/next";
+
+export const chartFlag = flag<boolean>({
+  key: "score-charts",
+  decide() {
+    // this flag will be on for 50% of visitors
+    // return Math.random() > 0.5;
+    return true;
+  },
+});