├── .prettierrc
├── src
    ├── vite-env.d.ts
    ├── Loading.tsx
    ├── hooks
    │   ├── useTypingIndicator.ts
    │   ├── useSessionStorage.ts
    │   ├── useLatestValue.ts
    │   ├── useSingleFlight.ts
    │   └── useServerSession.ts
    ├── index.css
    ├── JoinGame.tsx
    ├── main.tsx
    ├── NextButton.tsx
    ├── InputName.tsx
    ├── Submissions.tsx
    ├── ProfilePicture.tsx
    ├── Countdown.tsx
    ├── Lobby.tsx
    ├── Generate.tsx
    ├── GameRound.tsx
    ├── ProfilePicker.tsx
    ├── LabelStage.tsx
    ├── Recap.tsx
    ├── RevealStage.tsx
    ├── Game.tsx
    ├── CreateImage.tsx
    ├── App.module.scss
    ├── App.tsx
    └── GuessStage.tsx
├── .env
├── postcss.config.cjs
├── vite.config.ts
├── tsconfig.node.json
├── convex
    ├── crons.ts
    ├── lib
    │   ├── randomSlug.ts
    │   └── myFunctions.ts
    ├── _generated
    │   ├── api.js
    │   ├── api.d.ts
    │   ├── dataModel.d.ts
    │   ├── server.js
    │   └── server.d.ts
    ├── tsconfig.json
    ├── shared.ts
    ├── schema.ts
    ├── README.md
    ├── publicGame.ts
    ├── submissions.ts
    ├── openai.ts
    ├── users.ts
    ├── game.ts
    └── round.ts
├── .gitignore
├── tailwind.config.cjs
├── index.html
├── tsconfig.json
├── .eslintrc.cjs
├── LICENSE
├── package.json
├── public
    ├── vite.svg
    ├── convex.svg
    └── faces.svg
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "arrowParens": "always"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | VITE_CONVEX_URL="https://perfect-wombat-22.convex.cloud"
2 | 


--------------------------------------------------------------------------------
/src/Loading.tsx:
--------------------------------------------------------------------------------
1 | export function Loading() {
2 |   return <article aria-busy="true"></article>;
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/convex/crons.ts:
--------------------------------------------------------------------------------
 1 | import { cronJobs } from "convex/server";
 2 | import { internal } from "./_generated/api";
 3 | 
 4 | const cron = cronJobs();
 5 | 
 6 | cron.interval(
 7 |   "public game progress",
 8 |   { seconds: 10 },
 9 |   internal.publicGame.progress,
10 |   {
11 |     fromStage: "reveal",
12 |   }
13 | );
14 | 
15 | export default cron;
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 4 |   theme: {
 5 |     fontFamily: {
 6 |       display: ["Roboto Flex", "sans-serif"],
 7 |       sans: ["Inter", "sans-serif"],
 8 |     },
 9 |     extend: {
10 |       colors: {
11 |         "neutral-white": "#ffffff",
12 |         "neutral-black": "#000000",
13 |       },
14 |     },
15 |   },
16 |   plugins: [],
17 | };
18 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/convex.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Whose Prompt is it Anyways? by Convex</title>
 8 |   </head>
 9 |   <body class="bg-neutral-900 text-neutral-white">
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/hooks/useTypingIndicator.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | export default (
 4 |   text: string,
 5 |   updateMyPresence: (p: { typing?: boolean }) => void
 6 | ) => {
 7 |   useEffect(() => {
 8 |     if (text.length === 0) {
 9 |       updateMyPresence({ typing: false });
10 |       return;
11 |     }
12 |     updateMyPresence({ typing: true });
13 |     const timer = setTimeout(() => updateMyPresence({ typing: false }), 1000);
14 |     return () => clearTimeout(timer);
15 |   }, [updateMyPresence, text]);
16 | };
17 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto+Flex:wdth,wght@25..151,100..1000&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | /* These utilities are intended for use with the Roboto Flex variable font. */
 8 | .stretch-min {
 9 |   font-stretch: 25%;
10 | }
11 | .stretch-thin {
12 |   font-stretch: 75%;
13 | }
14 | .stretch-wide {
15 |   font-stretch: 125%;
16 | }
17 | .stretch-max {
18 |   font-stretch: 151%;
19 | }
20 | 


--------------------------------------------------------------------------------
/convex/lib/randomSlug.ts:
--------------------------------------------------------------------------------
 1 | const LETTERS = [
 2 |   "B",
 3 |   "C",
 4 |   "D",
 5 |   "F",
 6 |   "G",
 7 |   "H",
 8 |   "J",
 9 |   "K",
10 |   "L",
11 |   "M",
12 |   "N",
13 |   "P",
14 |   "Q",
15 |   "R",
16 |   "S",
17 |   "T",
18 |   "V",
19 |   "W",
20 |   "X",
21 |   "Z",
22 |   "2",
23 |   "5",
24 |   "6",
25 |   "9",
26 | ];
27 | export const randomSlug = (): string => {
28 |   var acc = [];
29 |   for (var i = 0; i < 4; i++) {
30 |     acc.push(LETTERS[Math.floor(Math.random() * LETTERS.length)]);
31 |   }
32 |   return acc.join("");
33 | };
34 | 


--------------------------------------------------------------------------------
/src/JoinGame.tsx:
--------------------------------------------------------------------------------
 1 | import { api } from "../convex/_generated/api";
 2 | import { useSessionMutation } from "./hooks/useServerSession";
 3 | 
 4 | export function JoinGame(props: { gameCode: string }) {
 5 |   const joinGame = useSessionMutation(api.game.join);
 6 |   return (
 7 |     <div>
 8 |       <button
 9 |         className="h-12 w-48 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400 rounded"
10 |         onClick={() => joinGame(props)}
11 |       >
12 |         Join
13 |       </button>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/convex/_generated/api.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated `api` utility.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * Generated by convex@1.7.1.
 8 |  * To regenerate, run `npx convex dev`.
 9 |  * @module
10 |  */
11 | 
12 | import { anyApi } from "convex/server";
13 | 
14 | /**
15 |  * A utility for referencing Convex functions in your app's API.
16 |  *
17 |  * Usage:
18 |  * ```js
19 |  * const myFunctionReference = api.myModule.myFunction;
20 |  * ```
21 |  */
22 | export const api = anyApi;
23 | export const internal = anyApi;
24 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { ConvexProvider, ConvexReactClient } from "convex/react";
 2 | import React from "react";
 3 | import ReactDOM from "react-dom/client";
 4 | import App from "./App";
 5 | import { SessionProvider } from "./hooks/useServerSession";
 6 | import "./index.css";
 7 | 
 8 | const client = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
 9 | 
10 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
11 |   <React.StrictMode>
12 |     <ConvexProvider client={client}>
13 |       <SessionProvider>
14 |         <App />
15 |       </SessionProvider>
16 |     </ConvexProvider>
17 |   </React.StrictMode>
18 | );
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src", ".eslintrc.cjs"],
20 |   "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 | 


--------------------------------------------------------------------------------
/src/NextButton.tsx:
--------------------------------------------------------------------------------
 1 | export const NextButton = (props: {
 2 |   onClick: () => unknown;
 3 |   title: string;
 4 |   disabled?: boolean;
 5 | }) => {
 6 |   return (
 7 |     <button
 8 |       onClick={props.onClick}
 9 |       className="mt-8 w-full h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400 disabled:border-neutral-400 disabled:text-neutral-400 disabled:cursor-not-allowed"
10 |       disabled={!!props.disabled}
11 |       title={
12 |         props.disabled
13 |           ? "Only the host can skip"
14 |           : "Skip to the next part of the game without waiting for all players to finish"
15 |       }
16 |     >
17 |       {props.title}
18 |     </button>
19 |   );
20 | };
21 | 


--------------------------------------------------------------------------------
/src/InputName.tsx:
--------------------------------------------------------------------------------
 1 | import { api } from "../convex/_generated/api";
 2 | import { useSessionMutation, useSessionQuery } from "./hooks/useServerSession";
 3 | import useSingleFlight from "./hooks/useSingleFlight";
 4 | 
 5 | export function InputName() {
 6 |   const profile = useSessionQuery(api.users.getMyProfile);
 7 |   const setName = useSingleFlight(useSessionMutation(api.users.setName));
 8 |   return profile ? (
 9 |     <input
10 |       className="bg-neutral-900 focus:outline-none"
11 |       name="name"
12 |       defaultValue={profile.name}
13 |       type="text"
14 |       onChange={(e) => setName({ name: e.target.value })}
15 |       placeholder="Enter a name"
16 |     />
17 |   ) : (
18 |     <input type="text" />
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/convex/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   /* This TypeScript project config describes the environment that
 3 |    * Convex functions run in and is used to typecheck them.
 4 |    * You can modify it, but some settings required to use Convex.
 5 |    */
 6 |   "compilerOptions": {
 7 |     /* These settings are not required by Convex and can be modified. */
 8 |     "allowJs": true,
 9 |     "strict": true,
10 | 
11 |     /* These compiler options are required by Convex */
12 |     "target": "ESNext",
13 |     "lib": ["ES2021", "dom"],
14 |     "forceConsistentCasingInFileNames": true,
15 |     "allowSyntheticDefaultImports": true,
16 |     "module": "ESNext",
17 |     "moduleResolution": "Node",
18 |     "isolatedModules": true,
19 |     "noEmit": true
20 |   },
21 |   "include": ["./**/*"],
22 |   "exclude": ["./_generated"]
23 | }
24 | 


--------------------------------------------------------------------------------
/src/Submissions.tsx:
--------------------------------------------------------------------------------
 1 | import { InputName } from "./InputName";
 2 | import { ProfilePicture } from "./ProfilePicture";
 3 | 
 4 | export function Submissions({
 5 |   submitted,
 6 |   title,
 7 | }: {
 8 |   submitted: { name: string; pictureUrl: string; me: boolean }[];
 9 |   title: string;
10 | }) {
11 |   return (
12 |     <fieldset>
13 |       <legend className="text-2xl mb-2">{title}</legend>
14 |       <ul>
15 |         {submitted.map((player) => (
16 |           <li key={player.pictureUrl} className="py-1 flex items-center gap-3">
17 |             {player.me ? "👉" : "✅"}
18 |             <ProfilePicture url={player.pictureUrl} />
19 |             <span className="text-lg">
20 |               {player.me ? <InputName /> : player.name}
21 |             </span>
22 |           </li>
23 |         ))}
24 |       </ul>
25 |     </fieldset>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | exports = {
 2 |   parser: "@typescript-eslint/parser",
 3 |   parserOptions: {
 4 |     project: true,
 5 |     tsconfigRootDir: __dirname + "/convex",
 6 |   },
 7 |   env: {
 8 |     es2020: true,
 9 |   },
10 |   plugins: ["@typescript-eslint"],
11 |   extends: [
12 |     "eslint:recommended",
13 |     "plugin:@typescript-eslint/recommended-type-checked",
14 |   ],
15 |   rules: {
16 |     // Only warn on unused variables, and ignore variables starting with `_`
17 |     "@typescript-eslint/no-unused-vars": [
18 |       "warn",
19 |       { varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
20 |     ],
21 |     "@typescript-eslint/require-await": "off",
22 |     "no-raw-importss": "error",
23 |   },
24 |   settings: {
25 |     "import/resolver": {
26 |       node: {
27 |         extensions: [".js", ".ts"],
28 |       },
29 |     },
30 |   },
31 | };
32 | 


--------------------------------------------------------------------------------
/src/ProfilePicture.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import ProfilePicker from "./ProfilePicker";
 3 | 
 4 | export function ProfilePicture({
 5 |   url,
 6 |   me,
 7 |   small,
 8 | }: {
 9 |   url: string;
10 |   me?: boolean;
11 |   small?: boolean;
12 | }) {
13 |   const [pickerOpen, setPickerOpen] = useState(false);
14 |   const size = small ? "24px" : "48px";
15 |   return (
16 |     <>
17 |       <div className="relative group">
18 |         <img src={url} width={size} height={size} className="rounded" />
19 |         {me && (
20 |           <>
21 |             <ProfilePicker open={pickerOpen} setOpen={setPickerOpen} />
22 |             <button
23 |               onClick={() => setPickerOpen(true)}
24 |               className="hidden group-hover:block absolute inset-0 bg-gray-500 bg-opacity-75 rounded"
25 |             >
26 |               ✍️
27 |             </button>
28 |           </>
29 |         )}
30 |       </div>
31 |     </>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/Countdown.tsx:
--------------------------------------------------------------------------------
 1 | import { api } from "../convex/_generated/api";
 2 | import { useMutation } from "convex/react";
 3 | import { useEffect, useState } from "react";
 4 | 
 5 | export const Countdown: React.FC<{ start: number; end: number }> = ({
 6 |   start,
 7 |   end,
 8 | }) => {
 9 |   const getServerTime = useMutation(api.round.serverNow);
10 |   const [, setNow] = useState(Date.now());
11 |   const [skew, setSkew] = useState(0);
12 |   useEffect(() => {
13 |     getServerTime().then((serverNow) => {
14 |       setSkew(serverNow - Date.now());
15 |     });
16 |     const intervalId = setInterval(() => setNow(Date.now()), 100);
17 |     return () => clearInterval(intervalId);
18 |   }, []);
19 |   const percent = (100 * (Date.now() + skew - start)) / (end - start);
20 |   if (percent >= 100) return <div className="mt-4 h-6 w-full "></div>;
21 |   return (
22 |     <div className="mt-4 h-6 w-full max-w-lg bg-blue-200 rounded-full">
23 |       <div
24 |         className="h-full bg-blue-600 rounded-full"
25 |         style={{ width: percent.toFixed(2) + "%" }}
26 |       ></div>
27 |     </div>
28 |   );
29 | };
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Convex
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "name-that-prompt",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "npm-run-all --parallel dev:backend dev:frontend",
 8 |     "build": "tsc && vite build",
 9 |     "dev:backend": "convex dev",
10 |     "dev:frontend": "vite --open --clearScreen false",
11 |     "predev": "convex dev --until-success"
12 |   },
13 |   "dependencies": {
14 |     "@headlessui/react": "^1.7.13",
15 |     "@types/node": "^18.11.18",
16 |     "classnames": "^2.3.2",
17 |     "convex": "^1.6.3",
18 |     "convex-helpers": "^0.1.12",
19 |     "md5": "^2.3.0",
20 |     "openai": "^3.1.0",
21 |     "react": "^18.2.0",
22 |     "react-dom": "^18.2.0"
23 |   },
24 |   "devDependencies": {
25 |     "@types/md5": "^2.3.2",
26 |     "@types/react": "^18.0.26",
27 |     "@types/react-dom": "^18.0.9",
28 |     "@typescript-eslint/eslint-plugin": "^6.14.0",
29 |     "@typescript-eslint/parser": "^6.14.0",
30 |     "@vitejs/plugin-react": "^3.0.0",
31 |     "autoprefixer": "^10.4.13",
32 |     "eslint": "^8.55.0",
33 |     "npm-run-all": "^4.1.5",
34 |     "postcss": "^8.4.21",
35 |     "prettier": "^2.8.4",
36 |     "prettier-plugin-tailwindcss": "^0.2.3",
37 |     "sass": "^1.58.1",
38 |     "tailwindcss": "^3.2.6",
39 |     "typescript": "^4.9.3",
40 |     "vite": "^4.0.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/hooks/useSessionStorage.ts:
--------------------------------------------------------------------------------
 1 | import { convexToJson, jsonToConvex, Value } from 'convex/values';
 2 | import { useCallback, useState } from 'react';
 3 | 
 4 | function useSessionStorage<T extends Value>(
 5 |   key: string
 6 | ): [T | undefined, (value: T) => void];
 7 | function useSessionStorage<T extends Value>( // eslint-disable-line no-redeclare
 8 |   key: string,
 9 |   defaultValue: T | (() => T)
10 | ): [T, (value: T) => void];
11 | function useSessionStorage<T extends Value>( // eslint-disable-line no-redeclare
12 |   key: string,
13 |   defaultValue?: T | (() => T)
14 | ) {
15 |   const [value, setValueInternal] = useState(() => {
16 |     if (typeof sessionStorage !== 'undefined') {
17 |       const existing = sessionStorage.getItem(key);
18 |       if (existing) {
19 |         try {
20 |           return jsonToConvex(JSON.parse(existing)) as T;
21 |         } catch (e) {
22 |           console.error(e);
23 |         }
24 |       }
25 |     }
26 |     if (typeof defaultValue === 'function') {
27 |       return defaultValue();
28 |     }
29 |     return defaultValue;
30 |   });
31 |   const setValue = useCallback(
32 |     (value: T) => {
33 |       sessionStorage.setItem(key, JSON.stringify(convexToJson(value)));
34 |       setValueInternal(value);
35 |     },
36 |     [key]
37 |   );
38 |   return [value, setValue] as const;
39 | }
40 | 
41 | export default useSessionStorage;
42 | 


--------------------------------------------------------------------------------
/src/hooks/useLatestValue.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useMemo, useRef } from 'react';
 2 | 
 3 | /**
 4 |  * Promise-based access to the latest value updated.
 5 |  * Every call to nextValue will return a promise to the next value.
 6 |  * "Next value" is defined as the latest value passed to "updateValue" that
 7 |  * hasn not been returned yet.
 8 |  * @returns a function to await for a new value, and one to update the value.
 9 |  */
10 | export default function useLatestValue<T>() {
11 |   const initial = useMemo(() => {
12 |     const [promise, resolve] = makeSignal();
13 |     // We won't access data until it has been updated.
14 |     return { data: undefined as T, promise, resolve };
15 |   }, []);
16 |   const ref = useRef(initial);
17 |   const nextValue = useCallback(async () => {
18 |     await ref.current.promise;
19 |     const [promise, resolve] = makeSignal();
20 |     ref.current.promise = promise;
21 |     ref.current.resolve = resolve;
22 |     return ref.current.data;
23 |   }, [ref]);
24 | 
25 |   const updateValue = useCallback(
26 |     (data: T) => {
27 |       ref.current.data = data;
28 |       ref.current.resolve();
29 |     },
30 |     [ref]
31 |   );
32 | 
33 |   return [nextValue, updateValue] as const;
34 | }
35 | 
36 | const makeSignal = () => {
37 |   let resolve: () => void;
38 |   const promise = new Promise<void>((r) => (resolve = r));
39 |   return [promise, resolve!] as const;
40 | };
41 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/Lobby.tsx:
--------------------------------------------------------------------------------
 1 | import { ClientGameState, MaxPlayers } from "../convex/shared";
 2 | import { InputName } from "./InputName";
 3 | import { JoinGame } from "./JoinGame";
 4 | import { Health } from "./CreateImage";
 5 | import { ProfilePicture } from "./ProfilePicture";
 6 | 
 7 | export function Lobby({ game }: { game: ClientGameState }) {
 8 |   return (
 9 |     <div className="border border-neutral-400 rounded p-4 lg:p-8 flex flex-col items-center gap-4">
10 |       <span className="font-display stretch-min text-6xl mb-4">
11 |         Invite your friends!
12 |       </span>
13 |       <p>Share this code for others to join:</p>
14 |       <div className="font-display stretch-min text-4xl font-extrabold mb-8">
15 |         {game.gameCode}
16 |       </div>
17 |       <div className="w-full mb-8">
18 |         <div className="text-2xl mb-4">Players</div>
19 |         <ol>
20 |           {game.players.map((player) => (
21 |             <li
22 |               key={player.pictureUrl}
23 |               className="flex gap-2 items-center mb-2"
24 |             >
25 |               {player.me && "👉"}
26 |               <ProfilePicture url={player.pictureUrl} me={player.me} />
27 |               {player.me ? <InputName /> : player.name}
28 |             </li>
29 |           ))}
30 |           {!game.playing && game.players.length < MaxPlayers && (
31 |             <JoinGame gameCode={game.gameCode} />
32 |           )}
33 |         </ol>
34 |       </div>
35 |       <Health />
36 |     </div>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/Generate.tsx:
--------------------------------------------------------------------------------
 1 | import { ClientGameState } from "../convex/shared";
 2 | import { Id } from "../convex/_generated/dataModel";
 3 | import { InputName } from "./InputName";
 4 | import { JoinGame } from "./JoinGame";
 5 | import { CreateImage } from "./CreateImage";
 6 | import { ProfilePicture } from "./ProfilePicture";
 7 | 
 8 | export function Generate({
 9 |   game,
10 |   addRound,
11 | }: {
12 |   game: ClientGameState;
13 |   addRound: (submissionId: Id<"submissions">) => any;
14 | }) {
15 |   return !game.playing ? (
16 |     <section>
17 |       <div className="text-5xl font-display stretch-min font-bold">
18 |         Create an image
19 |       </div>
20 |       <p>
21 |         The game has started. Other players are entering their prompts to
22 |         generate images. Want to join?
23 |       </p>
24 |       <JoinGame gameCode={game.gameCode} />
25 |     </section>
26 |   ) : game.players.find((player) => player.me && player.submitted) ? (
27 |     <section>
28 |       <div className="text-5xl font-display stretch-min font-bold">
29 |         Waiting for everyone to make an image...
30 |       </div>
31 |       <div className="text-2xl my-4">Players</div>
32 |       <ul>
33 |         {game.players.map((player) => (
34 |           <li key={player.pictureUrl} className="flex gap-2 items-center mb-2">
35 |             {player.me ? "👉" : player.submitted && "✅"}
36 |             <ProfilePicture url={player.pictureUrl} me={player.me} />
37 |             {player.me ? <InputName /> : player.name}
38 |           </li>
39 |         ))}
40 |       </ul>
41 |     </section>
42 |   ) : (
43 |     <CreateImage onSubmit={addRound} />
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated `api` utility.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * Generated by convex@1.7.1.
 8 |  * To regenerate, run `npx convex dev`.
 9 |  * @module
10 |  */
11 | 
12 | import type {
13 |   ApiFromModules,
14 |   FilterApi,
15 |   FunctionReference,
16 | } from "convex/server";
17 | import type * as crons from "../crons.js";
18 | import type * as game from "../game.js";
19 | import type * as lib_myFunctions from "../lib/myFunctions.js";
20 | import type * as lib_randomSlug from "../lib/randomSlug.js";
21 | import type * as openai from "../openai.js";
22 | import type * as publicGame from "../publicGame.js";
23 | import type * as round from "../round.js";
24 | import type * as shared from "../shared.js";
25 | import type * as submissions from "../submissions.js";
26 | import type * as users from "../users.js";
27 | 
28 | /**
29 |  * A utility for referencing Convex functions in your app's API.
30 |  *
31 |  * Usage:
32 |  * ```js
33 |  * const myFunctionReference = api.myModule.myFunction;
34 |  * ```
35 |  */
36 | declare const fullApi: ApiFromModules<{
37 |   crons: typeof crons;
38 |   game: typeof game;
39 |   "lib/myFunctions": typeof lib_myFunctions;
40 |   "lib/randomSlug": typeof lib_randomSlug;
41 |   openai: typeof openai;
42 |   publicGame: typeof publicGame;
43 |   round: typeof round;
44 |   shared: typeof shared;
45 |   submissions: typeof submissions;
46 |   users: typeof users;
47 | }>;
48 | export declare const api: FilterApi<
49 |   typeof fullApi,
50 |   FunctionReference<any, "public">
51 | >;
52 | export declare const internal: FilterApi<
53 |   typeof fullApi,
54 |   FunctionReference<any, "internal">
55 | >;
56 | 


--------------------------------------------------------------------------------
/public/convex.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 367 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 4 |     <g transform="matrix(1,0,0,1,-129.225,-127.948)">
 5 |         <g id="Layer-1" serif:id="Layer 1" transform="matrix(4.16667,0,0,4.16667,0,0)">
 6 |             <g transform="matrix(1,0,0,1,86.6099,107.074)">
 7 |                 <path d="M0,-6.544C13.098,-7.973 25.449,-14.834 32.255,-26.287C29.037,2.033 -2.48,19.936 -28.196,8.94C-30.569,7.925 -32.605,6.254 -34.008,4.088C-39.789,-4.83 -41.69,-16.18 -38.963,-26.48C-31.158,-13.247 -15.3,-5.131 0,-6.544" style="fill:rgb(245,176,26);fill-rule:nonzero;"/>
 8 |             </g>
 9 |             <g transform="matrix(1,0,0,1,47.1708,74.7779)">
10 |                 <path d="M0,-2.489C-5.312,9.568 -5.545,23.695 0.971,35.316C-21.946,18.37 -21.692,-17.876 0.689,-34.65C2.754,-36.197 5.219,-37.124 7.797,-37.257C18.41,-37.805 29.19,-33.775 36.747,-26.264C21.384,-26.121 6.427,-16.446 0,-2.489" style="fill:rgb(141,37,118);fill-rule:nonzero;"/>
11 |             </g>
12 |             <g transform="matrix(1,0,0,1,91.325,66.4152)">
13 |                 <path d="M0,-14.199C-7.749,-24.821 -19.884,-32.044 -33.173,-32.264C-7.482,-43.726 24.112,-25.143 27.557,2.322C27.877,4.876 27.458,7.469 26.305,9.769C21.503,19.345 12.602,26.776 2.203,29.527C9.838,15.64 8.889,-1.328 0,-14.199" style="fill:rgb(238,52,47);fill-rule:nonzero;"/>
14 |             </g>
15 |         </g>
16 |     </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/convex/shared.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * File shared between client & server.
 3 |  * Do not import any client-specific or server-specific code
 4 |  */
 5 | 
 6 | import { Id } from "./_generated/dataModel";
 7 | 
 8 | export const MaxPlayers = 8;
 9 | 
10 | export type ClientGameState = {
11 |   gameCode: string;
12 |   hosting: boolean;
13 |   players: {
14 |     me: boolean;
15 |     name: string;
16 |     pictureUrl: string;
17 |     submitted: boolean;
18 |     score: number;
19 |     likes: number;
20 |   }[];
21 |   playing: boolean;
22 |   state:
23 |     | {
24 |         stage: "lobby" | "generate";
25 |       }
26 |     | {
27 |         stage: "rounds";
28 |         roundId: Id<"rounds">;
29 |       }
30 |     | {
31 |         stage: "recap";
32 |       };
33 |   nextGameId: null | Id<"games">;
34 | };
35 | 
36 | export type LabelState = {
37 |   stage: "label";
38 |   mine: boolean;
39 |   imageUrl: string;
40 |   stageStart: number;
41 |   stageEnd: number;
42 |   submitted: {
43 |     me: boolean;
44 |     name: string;
45 |     pictureUrl: string;
46 |   }[];
47 | };
48 | 
49 | export type GuessState = {
50 |   stage: "guess";
51 |   mine: boolean;
52 |   imageUrl: string;
53 |   stageStart: number;
54 |   stageEnd: number;
55 |   myPrompt?: string;
56 |   myGuess?: string;
57 |   submitted: {
58 |     me: boolean;
59 |     name: string;
60 |     pictureUrl: string;
61 |   }[];
62 |   options: string[];
63 | };
64 | 
65 | export type RevealState = {
66 |   stage: "reveal";
67 |   me: Id<"users">;
68 |   authorId: Id<"users">;
69 |   imageUrl: string;
70 |   stageStart: number;
71 |   stageEnd: number;
72 |   users: {
73 |     userId: Id<"users">;
74 |     me: boolean;
75 |     name: string;
76 |     pictureUrl: string;
77 |   }[];
78 |   results: {
79 |     authorId: Id<"users">;
80 |     prompt: string;
81 |     votes: Id<"users">[];
82 |     likes: Id<"users">[];
83 |     // userid to score
84 |     scoreDeltas: { userId: Id<"users">; score: number }[];
85 |   }[];
86 | };
87 | 
88 | export const MaxPromptLength = 100;
89 | 


--------------------------------------------------------------------------------
/convex/_generated/dataModel.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated data model types.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * Generated by convex@1.7.1.
 8 |  * To regenerate, run `npx convex dev`.
 9 |  * @module
10 |  */
11 | 
12 | import type {
13 |   DataModelFromSchemaDefinition,
14 |   DocumentByName,
15 |   TableNamesInDataModel,
16 |   SystemTableNames,
17 | } from "convex/server";
18 | import type { GenericId } from "convex/values";
19 | import schema from "../schema.js";
20 | 
21 | /**
22 |  * The names of all of your Convex tables.
23 |  */
24 | export type TableNames = TableNamesInDataModel<DataModel>;
25 | 
26 | /**
27 |  * The type of a document stored in Convex.
28 |  *
29 |  * @typeParam TableName - A string literal type of the table name (like "users").
30 |  */
31 | export type Doc<TableName extends TableNames> = DocumentByName<
32 |   DataModel,
33 |   TableName
34 | >;
35 | 
36 | /**
37 |  * An identifier for a document in Convex.
38 |  *
39 |  * Convex documents are uniquely identified by their `Id`, which is accessible
40 |  * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
41 |  *
42 |  * Documents can be loaded using `db.get(id)` in query and mutation functions.
43 |  *
44 |  * IDs are just strings at runtime, but this type can be used to distinguish them from other
45 |  * strings when type checking.
46 |  *
47 |  * @typeParam TableName - A string literal type of the table name (like "users").
48 |  */
49 | export type Id<TableName extends TableNames | SystemTableNames> =
50 |   GenericId<TableName>;
51 | 
52 | /**
53 |  * A type describing your Convex data model.
54 |  *
55 |  * This type includes information about what tables you have, the type of
56 |  * documents stored in those tables, and the indexes defined on them.
57 |  *
58 |  * This type is used to parameterize methods like `queryGeneric` and
59 |  * `mutationGeneric` to make them type-safe.
60 |  */
61 | export type DataModel = DataModelFromSchemaDefinition<typeof schema>;
62 | 


--------------------------------------------------------------------------------
/src/GameRound.tsx:
--------------------------------------------------------------------------------
 1 | import { api } from "../convex/_generated/api";
 2 | import { useMutation } from "convex/react";
 3 | import { ClientGameState } from "../convex/shared";
 4 | import { Id } from "../convex/_generated/dataModel";
 5 | import { Countdown } from "./Countdown";
 6 | import { GuessStage } from "./GuessStage";
 7 | import { useSessionQuery } from "./hooks/useServerSession";
 8 | import { LabelStage } from "./LabelStage";
 9 | import { Loading } from "./Loading";
10 | import { NextButton } from "./NextButton";
11 | import { RevealStage } from "./RevealStage";
12 | 
13 | const GameRound: React.FC<{
14 |   roundId: Id<"rounds">;
15 |   game?: ClientGameState;
16 |   gameId?: Id<"games">;
17 |   nextButton?: React.ReactElement | false;
18 | }> = ({ nextButton, roundId, game, gameId }) => {
19 |   const round = useSessionQuery(api.round.getRound, { roundId });
20 |   const progress = useMutation(api.round.progress);
21 |   if (!round) return <Loading />;
22 |   const footer = (
23 |     <>
24 |       <Countdown start={round.stageStart} end={round.stageEnd} />
25 |       {
26 |         game?.hosting && (
27 |           //  !!game.players.find((p) => p.me) ? (
28 |           (<NextButton
29 |             onClick={() => progress({ roundId, fromStage: round.stage })}
30 |             title="Next"
31 |           />)
32 |         )
33 |         // ) : (
34 |         //   <JoinGame gameCode={game.gameCode} />
35 |         // ));
36 |       }
37 |     </>
38 |   );
39 | 
40 |   switch (round.stage) {
41 |     case "label":
42 |       return (
43 |         <>
44 |           <LabelStage round={round} roundId={roundId} gameId={gameId} />
45 |           {footer}
46 |         </>
47 |       );
48 |     case "guess":
49 |       return (
50 |         <>
51 |           <GuessStage round={round} roundId={roundId} gameId={gameId} />
52 |           {footer}
53 |         </>
54 |       );
55 |     case "reveal":
56 |       return (
57 |         <>
58 |           <RevealStage round={round} />
59 |           <Countdown start={round.stageStart} end={round.stageEnd} />
60 |           {nextButton}
61 |         </>
62 |       );
63 |   }
64 | };
65 | export default GameRound;
66 | 


--------------------------------------------------------------------------------
/convex/schema.ts:
--------------------------------------------------------------------------------
 1 | import { defineSchema, defineTable } from "convex/server";
 2 | import { v } from "convex/values";
 3 | 
 4 | export default defineSchema({
 5 |   users: defineTable({
 6 |     name: v.string(),
 7 |     pictureUrl: v.string(),
 8 |     tokenIdentifier: v.optional(v.string()),
 9 |     claimedByUserId: v.optional(v.id("users")),
10 |   }).index("by_token", ["tokenIdentifier"]),
11 | 
12 |   // For sessions:
13 |   sessions: defineTable({
14 |     userId: v.id("users"),
15 |     submissionIds: v.array(v.id("submissions")),
16 |     gameIds: v.array(v.id("games")),
17 |   }), // Make as specific as you want
18 |   // End sessions
19 | 
20 |   games: defineTable({
21 |     hostId: v.id("users"),
22 |     playerIds: v.array(v.id("users")),
23 |     slug: v.string(),
24 |     roundIds: v.array(v.id("rounds")),
25 |     state: v.union(
26 |       v.object({
27 |         stage: v.union(
28 |           v.literal("lobby"),
29 |           v.literal("generate"),
30 |           v.literal("recap")
31 |         ),
32 |       }),
33 |       v.object({
34 |         stage: v.literal("rounds"),
35 |         roundId: v.id("rounds"),
36 |       })
37 |     ),
38 |     nextGameId: v.optional(v.id("games")),
39 |   }).index("s", ["slug"]),
40 | 
41 |   publicGame: defineTable({
42 |     roundId: v.id("rounds"),
43 |   }),
44 | 
45 |   submissions: defineTable({
46 |     prompt: v.string(),
47 |     authorId: v.id("users"),
48 |     result: v.union(
49 |       v.object({
50 |         status: v.literal("generating"),
51 |         details: v.string(),
52 |       }),
53 |       v.object({
54 |         status: v.literal("failed"),
55 |         reason: v.string(),
56 |         elapsedMs: v.number(),
57 |       }),
58 |       v.object({
59 |         status: v.literal("saved"),
60 |         imageStorageId: v.string(),
61 |         elapsedMs: v.number(),
62 |       })
63 |     ),
64 |   }),
65 | 
66 |   rounds: defineTable({
67 |     authorId: v.id("users"),
68 |     imageStorageId: v.string(),
69 |     stageStart: v.number(),
70 |     stageEnd: v.number(),
71 |     stage: v.union(v.literal("label"), v.literal("guess"), v.literal("reveal")),
72 |     options: v.array(
73 |       v.object({
74 |         authorId: v.id("users"),
75 |         prompt: v.string(),
76 |         votes: v.array(v.id("users")),
77 |         likes: v.array(v.id("users")),
78 |       })
79 |     ),
80 |     // For public games
81 |     lastUsed: v.optional(v.number()),
82 |     publicRound: v.optional(v.boolean()),
83 |   }).index("public_game", ["publicRound", "stage", "lastUsed"]),
84 | });
85 | 


--------------------------------------------------------------------------------
/src/hooks/useSingleFlight.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useRef } from 'react';
 2 | 
 3 | /**
 4 |  * Wraps a function to single-flight invocations, using the latest args.
 5 |  *
 6 |  * Generates a function that behaves like the passed in function,
 7 |  * but only one execution runs at a time. If multiple calls are requested
 8 |  * before the current call has finished, it will use the latest arguments
 9 |  * for the next invocation.
10 |  *
11 |  * Note: some requests may never be made. If while a request is in-flight, N
12 |  * requests are made, N-1 of them will never resolve or reject the promise they
13 |  * returned. For most applications this is the desired behavior, but if you need
14 |  * all calls to eventually resolve, you can modify this code. Some behavior you
15 |  * could add, left as an exercise to the reader:
16 |  *   1. Resolve with the previous result when a request is about to be dropped.
17 |  *   2. Resolve all N requests with the result of the next request.
18 |  *   3. Do not return anything, and use this as a fire-and-forget library only.
19 |  *
20 |  * @param fn - Function to be called, with only one request in flight at a time.
21 |  * This must be a stable identifier, e.g. returned from useCallback.
22 |  * @returns Function that can be called whenever, returning a promise that will
23 |  * only resolve or throw if the underlying function gets called.
24 |  */
25 | export default function useSingleFlight<
26 |   F extends (...args: any[]) => Promise<any>
27 | >(fn: F) {
28 |   const flightStatus = useRef({
29 |     inFlight: false,
30 |     upNext: null as null | {
31 |       fn: F;
32 |       resolve: any;
33 |       reject: any;
34 |       args: Parameters<F>;
35 |     },
36 |   });
37 | 
38 |   return useCallback(
39 |     (...args: Parameters<F>): ReturnType<F> => {
40 |       if (flightStatus.current.inFlight) {
41 |         return new Promise((resolve, reject) => {
42 |           flightStatus.current.upNext = { fn, resolve, reject, args };
43 |         }) as ReturnType<F>;
44 |       }
45 |       flightStatus.current.inFlight = true;
46 |       const firstReq = fn(...args) as ReturnType<F>;
47 |       void (async () => {
48 |         try {
49 |           await firstReq;
50 |         } finally {
51 |           // If it failed, we naively just move on to the next request.
52 |         }
53 |         while (flightStatus.current.upNext) {
54 |           let cur = flightStatus.current.upNext;
55 |           flightStatus.current.upNext = null;
56 |           await cur
57 |             .fn(...cur.args)
58 |             .then(cur.resolve)
59 |             .catch(cur.reject);
60 |         }
61 |         flightStatus.current.inFlight = false;
62 |       })();
63 |       return firstReq;
64 |     },
65 |     [fn]
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/convex/lib/myFunctions.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   NoOp,
 3 |   customCtx,
 4 |   customMutation,
 5 |   customQuery,
 6 | } from "convex-helpers/server/customFunctions";
 7 | import {
 8 |   Rules,
 9 |   wrapDatabaseReader,
10 |   wrapDatabaseWriter,
11 | } from "convex-helpers/server/rowLevelSecurity";
12 | import { internalMutation, mutation, query } from "../_generated/server";
13 | import { v } from "convex/values";
14 | import { DataModel, Doc } from "../_generated/dataModel";
15 | 
16 | const rules: Rules<{ session: Doc<"sessions"> | null }, DataModel> = {
17 |   users: {
18 |     modify: async ({ session }, user) =>
19 |       user._id === session?.userId ||
20 |       !!(user.claimedByUserId === session?.userId),
21 |   },
22 |   sessions: {
23 |     read: async ({ session }, doc) => doc._id === session?._id,
24 |     modify: async ({ session }, doc) => doc._id === session?._id,
25 |   },
26 |   submissions: {
27 |     modify: async ({ session }, submission) =>
28 |       submission.authorId === session?.userId,
29 |   },
30 | };
31 | 
32 | // Placeholders in case we want to apply RLS to this or something
33 | export const myInternalMutation = customMutation(internalMutation, NoOp);
34 | export const myMutation = customMutation(
35 |   mutation,
36 |   customCtx((ctx) => ({
37 |     db: wrapDatabaseWriter({ session: null }, ctx.db, rules),
38 |   }))
39 | );
40 | 
41 | export const myQuery = customQuery(
42 |   query,
43 |   customCtx((ctx) => ({
44 |     db: wrapDatabaseReader({ session: null }, ctx.db, rules),
45 |   }))
46 | );
47 | 
48 | export const sessionMutation = customMutation(mutation, {
49 |   args: {
50 |     sessionId: v.id("sessions"),
51 |   },
52 |   input: async (ctx, args) => {
53 |     const session = await ctx.db.get(args.sessionId);
54 |     if (!session) throw new Error(`Session not found: ${args.sessionId}`);
55 |     return {
56 |       ctx: { session, db: wrapDatabaseWriter({ session }, ctx.db, rules) },
57 |       args: {},
58 |     };
59 |   },
60 | });
61 | 
62 | export const internalSessionMutation = customMutation(internalMutation, {
63 |   args: {
64 |     sessionId: v.id("sessions"),
65 |   },
66 |   input: async (ctx, args) => {
67 |     const session = await ctx.db.get(args.sessionId);
68 |     if (!session) throw new Error(`Session not found: ${args.sessionId}`);
69 |     return {
70 |       ctx: { session, db: wrapDatabaseWriter({ session }, ctx.db, rules) },
71 |       args: {},
72 |     };
73 |   },
74 | });
75 | 
76 | export const sessionQuery = customQuery(query, {
77 |   args: {
78 |     sessionId: v.id("sessions"),
79 |   },
80 |   input: async (ctx, args) => {
81 |     const session = (await ctx.db.get(args.sessionId)) ?? null;
82 |     return {
83 |       ctx: { session, db: wrapDatabaseReader({ session }, ctx.db, rules) },
84 |       args: {},
85 |     };
86 |   },
87 | });
88 | 


--------------------------------------------------------------------------------
/src/ProfilePicker.tsx:
--------------------------------------------------------------------------------
 1 | import { Fragment, useState } from "react";
 2 | 
 3 | import { Dialog, Transition } from "@headlessui/react";
 4 | import { useSessionMutation, useSessionQuery } from "./hooks/useServerSession";
 5 | import { CreateImage } from "./CreateImage";
 6 | import { ProfilePicture } from "./ProfilePicture";
 7 | import { api } from "../convex/_generated/api";
 8 | 
 9 | export default function ProfilePicker({
10 |   open,
11 |   setOpen,
12 | }: {
13 |   open: boolean;
14 |   setOpen: (open: boolean) => void;
15 | }) {
16 |   const profile = useSessionQuery(api.users.getMyProfile);
17 |   const setPicture = useSessionMutation(api.users.setPicture);
18 | 
19 |   return (
20 |     <Transition.Root show={open} as={Fragment}>
21 |       <Dialog as="div" className="relative z-10" onClose={setOpen}>
22 |         <Transition.Child
23 |           as={Fragment}
24 |           enter="ease-out duration-300"
25 |           enterFrom="opacity-0"
26 |           enterTo="opacity-100"
27 |           leave="ease-in duration-200"
28 |           leaveFrom="opacity-100"
29 |           leaveTo="opacity-0"
30 |         >
31 |           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
32 |         </Transition.Child>
33 | 
34 |         <div className="fixed inset-0 z-10 overflow-y-auto text-neutral-black">
35 |           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
36 |             <Transition.Child
37 |               as={Fragment}
38 |               enter="ease-out duration-300"
39 |               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
40 |               enterTo="opacity-100 translate-y-0 sm:scale-100"
41 |               leave="ease-in duration-200"
42 |               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
43 |               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
44 |             >
45 |               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
46 |                 <div className="flex justify-around">
47 |                   {/* important to set me to false so there isn't infinite recursion! */}
48 |                   {profile && <ProfilePicture url={profile?.pictureUrl} />}
49 |                 </div>
50 |                 <CreateImage
51 |                   title="Profile Picture"
52 |                   onSubmit={async (submissionId) => {
53 |                     await setPicture({ submissionId });
54 |                     setOpen(false);
55 |                   }}
56 |                 />
57 |               </Dialog.Panel>
58 |             </Transition.Child>
59 |           </div>
60 |         </div>
61 |       </Dialog>
62 |     </Transition.Root>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Convex functions directory!
 2 | 
 3 | Write your Convex functions here. See
 4 | https://docs.convex.dev/using/writing-convex-functions for more.
 5 | 
 6 | A query function that takes two arguments looks like:
 7 | 
 8 | ```ts
 9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 | 
13 | export const myQueryFunction = query({
14 |   // Validators for arguments.
15 |   args: {
16 |     first: v.number(),
17 |     second: v.string(),
18 |   },
19 | 
20 |   // Function implementation.
21 |   hander: async (ctx, args) => {
22 |     // Read the database as many times as you need here.
23 |     // See https://docs.convex.dev/database/reading-data.
24 |     const documents = await ctx.db.query("tablename").collect();
25 | 
26 |     // Arguments passed from the client are properties of the args object.
27 |     console.log(args.first, args.second);
28 | 
29 |     // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 |     // remove non-public properties, or create new objects.
31 |     return documents;
32 |   },
33 | });
34 | ```
35 | 
36 | Using this query function in a React component looks like:
37 | 
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 |   first: 10,
41 |   second: "hello",
42 | });
43 | ```
44 | 
45 | A mutation function looks like:
46 | 
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 | 
52 | export const myMutationFunction = mutation({
53 |   // Validators for arguments.
54 |   args: {
55 |     first: v.string(),
56 |     second: v.string(),
57 |   },
58 | 
59 |   // Function implementation.
60 |   hander: async (ctx, args) => {
61 |     // Insert or modify documents in the database here.
62 |     // Mutations can also read from the database like queries.
63 |     // See https://docs.convex.dev/database/writing-data.
64 |     const message = { body: args.first, author: args.second };
65 |     const id = await ctx.db.insert("messages", message);
66 | 
67 |     // Optionally, return a value from your mutation.
68 |     return await ctx.db.get(id);
69 |   },
70 | });
71 | ```
72 | 
73 | Using this mutation function in a React component looks like:
74 | 
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 |   // fire and forget, the most common way to use mutations
79 |   mutation({ first: "Hello!", second: "me" });
80 |   // OR
81 |   // use the result once the mutation has completed
82 |   mutation({ first: "Hello!", second: "me" }).then((result) =>
83 |     console.log(result)
84 |   );
85 | }
86 | ```
87 | 
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 | 


--------------------------------------------------------------------------------
/convex/publicGame.ts:
--------------------------------------------------------------------------------
 1 | import { v } from "convex/values";
 2 | import { internal } from "./_generated/api";
 3 | import { myInternalMutation, myQuery } from "./lib/myFunctions";
 4 | 
 5 | export const get = myQuery({
 6 |   handler: async (ctx) => {
 7 |     const publicGame = await ctx.db.query("publicGame").unique();
 8 |     if (!publicGame) {
 9 |       console.warn("No public game currently.");
10 |       return null;
11 |     }
12 |     return publicGame.roundId;
13 |   },
14 | });
15 | 
16 | const PublicGuessMs = 15000;
17 | const PublicRevealMs = 10000;
18 | 
19 | export const progress = myInternalMutation({
20 |   args: { fromStage: v.union(v.literal("guess"), v.literal("reveal")) },
21 |   handler: async (ctx, { fromStage }) => {
22 |     const publicGame = await ctx.db.query("publicGame").unique();
23 |     if (!publicGame) throw new Error("No public game");
24 |     const currentRound = await ctx.db.get(publicGame.roundId);
25 |     if (!currentRound) throw new Error("Round not found");
26 | 
27 |     if (currentRound.stageEnd! > Date.now()) {
28 |       throw new Error("Previous round not over.");
29 |     }
30 |     if (currentRound.stage !== fromStage) {
31 |       console.log("skipping progress: already in the right stage");
32 |       return "noop";
33 |     }
34 |     if (currentRound.stage === "guess") {
35 |       if (
36 |         !currentRound.options.find(
37 |           (option) => option.likes.length || option.votes.length
38 |         )
39 |       ) {
40 |         await ctx.scheduler.runAfter(
41 |           PublicGuessMs,
42 |           internal.publicGame.progress,
43 |           {
44 |             fromStage: "guess",
45 |           }
46 |         );
47 |         return "guess again";
48 |       }
49 |       await ctx.db.patch(currentRound._id, {
50 |         stage: "reveal",
51 |         stageStart: Date.now(),
52 |         stageEnd: Date.now() + PublicRevealMs,
53 |       });
54 |       return "->reveal";
55 |     }
56 |     if (currentRound.stage !== "reveal") {
57 |       throw new Error(`Invalid stage: ${currentRound.stage}`);
58 |     }
59 |     const round = await ctx.db
60 |       .query("rounds")
61 |       .withIndex("public_game", (q) =>
62 |         q.eq("publicRound", false).eq("stage", "reveal")
63 |       )
64 |       .order("asc")
65 |       .first();
66 |     if (!round) throw new Error("No public round.");
67 |     await ctx.db.patch(round._id, { lastUsed: Date.now() });
68 |     for (const option of round.options) {
69 |       option.likes = [];
70 |       option.votes = [];
71 |     }
72 |     round.stage = "guess";
73 |     round.stageStart = Date.now();
74 |     round.stageEnd = Date.now() + PublicGuessMs;
75 |     round.publicRound = true;
76 |     const { _id, _creationTime, ...rest } = round;
77 |     const roundId = await ctx.db.insert("rounds", rest);
78 |     await ctx.db.patch(publicGame._id, { roundId });
79 |     await ctx.scheduler.runAfter(PublicGuessMs, internal.publicGame.progress, {
80 |       fromStage: "guess",
81 |     });
82 |     return "->guess";
83 |   },
84 | });
85 | 


--------------------------------------------------------------------------------
/src/LabelStage.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { LabelState } from "../convex/shared";
 3 | import { Id } from "../convex/_generated/dataModel";
 4 | import { useSessionAction } from "./hooks/useServerSession";
 5 | import { Submissions } from "./Submissions";
 6 | import { api } from "../convex/_generated/api";
 7 | 
 8 | export function LabelStage({
 9 |   round,
10 |   roundId,
11 |   gameId,
12 | }: {
13 |   round: LabelState;
14 |   roundId: Id<"rounds">;
15 |   gameId?: Id<"games">;
16 | }) {
17 |   const [error, setError] = useState<string>();
18 |   const [prompt, setPrompt] = useState("");
19 |   const addPrompt = useSessionAction(api.openai.addOption);
20 |   return (
21 |     <div className="max-w-lg">
22 |       <img
23 |         src={round.imageUrl}
24 |         alt=""
25 |         className="w-full max-w-lg border border-neutral-600 rounded overflow-hidden my-4"
26 |       />
27 |       {round.mine || round.submitted.find((submission) => submission.me) ? (
28 |         <>
29 |           <Submissions
30 |             submitted={round.submitted}
31 |             title={
32 |               round.mine
33 |                 ? "This was your image. Submissions:"
34 |                 : "Waiting for everyone to finish..."
35 |             }
36 |           />
37 |         </>
38 |       ) : (
39 |         <fieldset>
40 |           <legend className="text-2xl mb-2">
41 |             {round.mine
42 |               ? "This was your image. Just relax 🏝️"
43 |               : "What prompt was responsible for this image?"}
44 |           </legend>
45 |           <span className="text-orange-300">{error}</span>
46 |           <form
47 |             aria-disabled={
48 |               !!round.submitted.find((submission) => submission.me)
49 |             }
50 |             onSubmit={async (e) => {
51 |               e.preventDefault();
52 |               const result = await addPrompt({ roundId, prompt, gameId });
53 |               if (!result.success) setError(result.reason);
54 |             }}
55 |             className="flex"
56 |             aria-errormessage={error}
57 |           >
58 |             <input
59 |               type="text"
60 |               value={prompt}
61 |               onChange={(e) => setPrompt(e.target.value)}
62 |               className="bg-transparent border border-neutral-400 p-2 focus:outline-none placeholder:text-neutral-400 text-blue-400 focus:border-blue-400 h-12 basis-0 grow"
63 |             />
64 |             <label className="basis-0">
65 |               <input
66 |                 type="submit"
67 |                 value="Submit prompt"
68 |                 aria-invalid={!!error}
69 |                 className="h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400"
70 |               />
71 |             </label>
72 |           </form>
73 |           <p className="text-lg m-2">
74 |             (You&rsquo;ll get points if someone thinks yours was the real one)
75 |           </p>
76 |         </fieldset>
77 |       )}
78 |     </div>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/src/Recap.tsx:
--------------------------------------------------------------------------------
 1 | import { ClientGameState } from "../convex/shared";
 2 | import { ProfilePicture } from "./ProfilePicture";
 3 | 
 4 | export function Recap({ game }: { game: ClientGameState }) {
 5 |   return (
 6 |     <div className="px-4">
 7 |       <h1 className="text-2xl font-semibold ">Scores</h1>
 8 |       <div className="mt-8 flow-root">
 9 |         <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
10 |           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
11 |             <table className="min-w-full divide-y divide-gray-700">
12 |               <thead>
13 |                 <tr>
14 |                   <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0">
15 |                     <span className="sr-only">Place</span>
16 |                   </th>
17 |                   <th
18 |                     scope="col"
19 |                     className="py-3.5 px-3 text-left text-sm font-semibold text-white"
20 |                   >
21 |                     Player
22 |                   </th>
23 |                   <th
24 |                     scope="col"
25 |                     className="py-3.5 px-3 text-left text-sm font-semibold text-white"
26 |                   >
27 |                     Score
28 |                   </th>
29 |                   <th
30 |                     scope="col"
31 |                     className="py-3.5 px-3 text-left text-sm font-semibold text-white"
32 |                   >
33 |                     Likes
34 |                   </th>
35 |                 </tr>
36 |               </thead>
37 |               <tbody className="divide-y divide-gray-800">
38 |                 {game.players
39 |                   .slice()
40 |                   .sort((a, b) => b.score - a.score)
41 |                   .map((player, index) => (
42 |                     <tr key={player.pictureUrl}>
43 |                       <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-sm font-medium sm:pr-0">
44 |                         #{index + 1}
45 |                         <span className="sr-only">, {player.name}</span>
46 |                       </td>
47 |                       <td className="flex items-center whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-white sm:pl-0">
48 |                         <ProfilePicture
49 |                           url={player.pictureUrl}
50 |                           me={player.me}
51 |                         />
52 |                         <span className="pl-2">{player.name}</span>
53 |                       </td>
54 |                       <td className="whitespace-nowrap py-4 px-3 text-sm text-gray-300">
55 |                         {player.score}
56 |                       </td>
57 |                       <td className="whitespace-nowrap py-4 px-3 text-sm text-gray-300">
58 |                         {player.likes}
59 |                       </td>
60 |                     </tr>
61 |                   ))}
62 |               </tbody>
63 |             </table>
64 |           </div>
65 |         </div>
66 |       </div>
67 |     </div>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/src/RevealStage.tsx:
--------------------------------------------------------------------------------
 1 | import classNames from "classnames";
 2 | import { RevealState } from "../convex/shared";
 3 | import { ProfilePicture } from "./ProfilePicture";
 4 | 
 5 | export function RevealStage({ round }: { round: RevealState }) {
 6 |   const users = new Map(round.users.map((u) => [u.userId, u]));
 7 |   return (
 8 |     <div className="flex flex-col">
 9 |       <img
10 |         src={round.imageUrl}
11 |         alt=""
12 |         className="my-4 w-full max-w-lg overflow-hidden rounded border border-neutral-600"
13 |       />
14 |       <ul className="max-w-lg">
15 |         {round.results.map((option) => {
16 |           const scoreDeltas = new Map(
17 |             option.scoreDeltas.map((d) => [d.userId, d.score])
18 |           );
19 |           const user = users.get(option.authorId);
20 |           return (
21 |             <li
22 |               key={option.authorId}
23 |               className={classNames(
24 |                 "flex flex-col items-start gap-1 border-b border-b-neutral-500 py-4",
25 |                 "w-full border border-blue-200 bg-blue-200 px-4 py-2 text-neutral-black  disabled:border-neutral-400 disabled:text-neutral-500 ",
26 |                 {
27 |                   "bg-green-400": round.authorId === option.authorId,
28 |                 }
29 |               )}
30 |             >
31 |               <label className="flex">
32 |                 <span className="mr-2 flex text-lg">{option.prompt} </span>
33 |               </label>
34 |               <div className="flex items-center gap-1 pl-2 text-sm">
35 |                 by
36 |                 <ProfilePicture url={user!.pictureUrl} me={user!.me} small />
37 |                 {user!.name}
38 |                 {!!scoreDeltas.get(option.authorId) && (
39 |                   <span className="rounded-full bg-orange-400 px-2 text-neutral-black ">
40 |                     +{scoreDeltas.get(option.authorId)}
41 |                   </span>
42 |                 )}
43 |                 {option.likes.length
44 |                   ? option.likes.map((userId) => (
45 |                       <label key={userId} className="flex">
46 |                         👍
47 |                       </label>
48 |                     ))
49 |                   : null}
50 |               </div>
51 |               {option.votes.length ? (
52 |                 <div className="pl-6">
53 |                   <span className="text-sm font-semibold">
54 |                     {option.votes.length} Vote{option.votes.length > 1 && "s"}{" "}
55 |                   </span>
56 |                   <ol>
57 |                     {option.votes.map((userId) => (
58 |                       <li key={userId} className="flex gap-1 py-1">
59 |                         <ProfilePicture
60 |                           url={users.get(userId)!.pictureUrl}
61 |                           me={users.get(userId)!.me}
62 |                           small
63 |                         />
64 |                         {users.get(userId)!.name || "(Anonymous)"}
65 | 
66 |                         {scoreDeltas.has(userId) ? (
67 |                           <span className="rounded-full bg-purple-400 px-2 text-neutral-black">
68 |                             +{scoreDeltas.get(userId)}
69 |                           </span>
70 |                         ) : null}
71 |                       </li>
72 |                     ))}
73 |                   </ol>
74 |                 </div>
75 |               ) : null}
76 |             </li>
77 |           );
78 |         })}
79 |       </ul>
80 |     </div>
81 |   );
82 | }
83 | 


--------------------------------------------------------------------------------
/src/Game.tsx:
--------------------------------------------------------------------------------
  1 | import { api } from "../convex/_generated/api";
  2 | import { useCallback } from "react";
  3 | import { Id } from "../convex/_generated/dataModel";
  4 | import GameRound from "./GameRound";
  5 | import { Generate } from "./Generate";
  6 | import { useSessionMutation, useSessionQuery } from "./hooks/useServerSession";
  7 | import { Lobby } from "./Lobby";
  8 | import { NextButton } from "./NextButton";
  9 | import { Recap } from "./Recap";
 10 | 
 11 | const Game: React.FC<{
 12 |   gameId: Id<"games">;
 13 |   done: (nextGameId: Id<"games"> | null) => void;
 14 | }> = ({ gameId, done }) => {
 15 |   const game = useSessionQuery(api.game.get, { gameId });
 16 |   const submit = useSessionMutation(api.game.submit);
 17 |   const playAgain = useSessionMutation(api.game.playAgain);
 18 |   const addRound = useCallback(
 19 |     (submissionId: Id<"submissions">) => submit({ submissionId, gameId }),
 20 |     [submit, gameId]
 21 |   );
 22 |   const progress = useSessionMutation(api.game.progress);
 23 |   if (!game) return <article aria-busy="true"></article>;
 24 |   if (game.nextGameId) done(game.nextGameId);
 25 |   const next = game.hosting && (
 26 |     <NextButton
 27 |       onClick={() => progress({ gameId, fromStage: game.state.stage })}
 28 |       title={
 29 |         game.state.stage === "lobby"
 30 |           ? "Start"
 31 |           : game.state.stage === "rounds"
 32 |           ? "Next"
 33 |           : "Skip"
 34 |       }
 35 |       disabled={!game.hosting || game.players.length <= 2}
 36 |     />
 37 |   );
 38 |   const footer = (
 39 |     <section className="mt-4">
 40 |       <p className="mb-4">
 41 |         {game.players.length > 2 || (
 42 |           <span className="mb-4">You need at least 3 players to start.</span>
 43 |         )}
 44 |         {next}
 45 |         <span className="ml-4">
 46 |           {game.state.stage === "lobby" &&
 47 |             (game.hosting
 48 |               ? "You are the host of this game."
 49 |               : "Only the host can start the game.")}
 50 |         </span>
 51 |       </p>
 52 |     </section>
 53 |   );
 54 |   switch (game.state.stage) {
 55 |     case "lobby":
 56 |       return (
 57 |         <>
 58 |           <Lobby game={game} />
 59 |           {footer}
 60 |         </>
 61 |       );
 62 |     case "generate":
 63 |       return (
 64 |         <>
 65 |           <Generate game={game} addRound={addRound} />
 66 |           {footer}
 67 |         </>
 68 |       );
 69 |     case "rounds":
 70 |       return (
 71 |         <>
 72 |           <GameRound
 73 |             roundId={game.state.roundId}
 74 |             game={game}
 75 |             gameId={gameId}
 76 |             nextButton={next}
 77 |           />
 78 |         </>
 79 |       );
 80 |     case "recap":
 81 |       return (
 82 |         <div className="flex flex-col gap-2">
 83 |           <Recap game={game} />
 84 |           <button
 85 |             type="submit"
 86 |             onClick={(e) => done(null)}
 87 |             className="h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400"
 88 |           >
 89 |             Home
 90 |           </button>
 91 |           <button
 92 |             type="submit"
 93 |             onClick={async (e) => {
 94 |               const nextGameId = await playAgain({ oldGameId: gameId });
 95 |               done(nextGameId);
 96 |             }}
 97 |             className="h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400"
 98 |           >
 99 |             Play again
100 |           </button>
101 |         </div>
102 |       );
103 |   }
104 | };
105 | export default Game;
106 | 


--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated utilities for implementing server-side Convex query and mutation functions.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * Generated by convex@1.7.1.
 8 |  * To regenerate, run `npx convex dev`.
 9 |  * @module
10 |  */
11 | 
12 | import {
13 |   actionGeneric,
14 |   httpActionGeneric,
15 |   queryGeneric,
16 |   mutationGeneric,
17 |   internalActionGeneric,
18 |   internalMutationGeneric,
19 |   internalQueryGeneric,
20 | } from "convex/server";
21 | 
22 | /**
23 |  * Define a query in this Convex app's public API.
24 |  *
25 |  * This function will be allowed to read your Convex database and will be accessible from the client.
26 |  *
27 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
28 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
29 |  */
30 | export const query = queryGeneric;
31 | 
32 | /**
33 |  * Define a query that is only accessible from other Convex functions (but not from the client).
34 |  *
35 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
36 |  *
37 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
38 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
39 |  */
40 | export const internalQuery = internalQueryGeneric;
41 | 
42 | /**
43 |  * Define a mutation in this Convex app's public API.
44 |  *
45 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
46 |  *
47 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
48 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
49 |  */
50 | export const mutation = mutationGeneric;
51 | 
52 | /**
53 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
54 |  *
55 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
56 |  *
57 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
58 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
59 |  */
60 | export const internalMutation = internalMutationGeneric;
61 | 
62 | /**
63 |  * Define an action in this Convex app's public API.
64 |  *
65 |  * An action is a function which can execute any JavaScript code, including non-deterministic
66 |  * code and code with side-effects, like calling third-party services.
67 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
68 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
69 |  *
70 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
71 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
72 |  */
73 | export const action = actionGeneric;
74 | 
75 | /**
76 |  * Define an action that is only accessible from other Convex functions (but not from the client).
77 |  *
78 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
79 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
80 |  */
81 | export const internalAction = internalActionGeneric;
82 | 
83 | /**
84 |  * Define a Convex HTTP action.
85 |  *
86 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
87 |  * as its second.
88 |  * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
89 |  */
90 | export const httpAction = httpActionGeneric;
91 | 


--------------------------------------------------------------------------------
/convex/submissions.ts:
--------------------------------------------------------------------------------
  1 | import { internal } from "./_generated/api";
  2 | import { Doc, Id } from "./_generated/dataModel";
  3 | import { MaxPromptLength } from "./shared";
  4 | import { v } from "convex/values";
  5 | import {
  6 |   myInternalMutation,
  7 |   myQuery,
  8 |   sessionMutation,
  9 |   sessionQuery,
 10 | } from "./lib/myFunctions";
 11 | 
 12 | const ImageTimeoutMs = 30000;
 13 | 
 14 | export const start = sessionMutation({
 15 |   args: { prompt: v.string() },
 16 |   handler: async (ctx, { prompt }) => {
 17 |     if (prompt.length > MaxPromptLength) throw new Error("Prompt too long");
 18 |     const submissionId = await ctx.db.insert("submissions", {
 19 |       prompt,
 20 |       authorId: ctx.session.userId,
 21 |       result: {
 22 |         status: "generating",
 23 |         details: "Starting...",
 24 |       },
 25 |     });
 26 |     // Store the current submission in the session to associate with a
 27 |     // new user if we log in.
 28 |     ctx.session.submissionIds.push(submissionId);
 29 |     await ctx.db.patch(ctx.session._id, {
 30 |       submissionIds: ctx.session.submissionIds,
 31 |     });
 32 |     await ctx.scheduler.runAfter(0, internal.openai.createImage, {
 33 |       prompt,
 34 |       submissionId,
 35 |     });
 36 |     await ctx.scheduler.runAfter(ImageTimeoutMs, internal.submissions.timeout, {
 37 |       submissionId,
 38 |     });
 39 |     return submissionId;
 40 |   },
 41 | });
 42 | 
 43 | export const timeout = myInternalMutation({
 44 |   args: { submissionId: v.id("submissions") },
 45 |   handler: async (ctx, { submissionId }) => {
 46 |     const submission = await ctx.db.get(submissionId);
 47 |     if (!submission) throw new Error("No submission found");
 48 |     if (submission.result.status === "generating") {
 49 |       submission.result = {
 50 |         status: "failed",
 51 |         reason: "Timed out",
 52 |         elapsedMs: ImageTimeoutMs,
 53 |       };
 54 |       await ctx.db.replace(submissionId, submission);
 55 |     }
 56 |   },
 57 | });
 58 | 
 59 | export const get = sessionQuery({
 60 |   args: { submissionId: v.id("submissions") },
 61 |   handler: async (ctx, { submissionId }) => {
 62 |     const submission = await ctx.db.get(submissionId);
 63 |     if (!submission) return null;
 64 |     if (submission.result.status === "saved") {
 65 |       const { imageStorageId, ...rest } = submission.result;
 66 |       const url = await ctx.storage.getUrl(imageStorageId);
 67 |       if (!url) throw new Error("Image not found");
 68 |       return { url, ...rest };
 69 |     }
 70 |     return submission.result;
 71 |   },
 72 | });
 73 | 
 74 | export const health = myQuery({
 75 |   handler: async (ctx) => {
 76 |     const latestSubmissions = await ctx.db
 77 |       .query("submissions")
 78 |       .order("desc")
 79 |       .filter((q) => q.neq(q.field("result.status"), "generating"))
 80 |       .take(5);
 81 |     let totalTime = 0;
 82 |     let successes = 0;
 83 |     for (const submission of latestSubmissions) {
 84 |       // Appease typescript
 85 |       if (submission.result.status === "generating") continue;
 86 |       totalTime += submission.result.elapsedMs;
 87 |       if (submission.result.status === "saved") successes += 1;
 88 |     }
 89 |     const n = latestSubmissions.length;
 90 |     return n ? [totalTime / n, successes / n] : [5000, 1.0];
 91 |   },
 92 | });
 93 | 
 94 | export const update = myInternalMutation({
 95 |   handler: async (
 96 |     ctx,
 97 |     {
 98 |       submissionId,
 99 |       result,
100 |     }: {
101 |       submissionId: Id<"submissions">;
102 |       result: Doc<"submissions">["result"];
103 |     }
104 |   ) => {
105 |     const submission = await ctx.db.get(submissionId);
106 |     if (!submission) throw new Error("Unknown submission");
107 |     submission.result = result;
108 |     await ctx.db.replace(submissionId, submission);
109 |   },
110 | });
111 | 


--------------------------------------------------------------------------------
/src/CreateImage.tsx:
--------------------------------------------------------------------------------
  1 | import { api } from "../convex/_generated/api";
  2 | import { useQuery } from "convex/react";
  3 | import { useState } from "react";
  4 | import { MaxPromptLength } from "../convex/shared";
  5 | import { Id } from "../convex/_generated/dataModel";
  6 | import { useSessionMutation, useSessionQuery } from "./hooks/useServerSession";
  7 | 
  8 | export const Health = () => {
  9 |   const health = useQuery(api.submissions.health) ?? null;
 10 |   return (
 11 |     health && (
 12 |       <section className="flex flex-col gap-1 w-full text-neutral-400">
 13 |         <span>
 14 |           Dall-E status:{" "}
 15 |           {health[1] > 0.8 ? "✅" : health[1] > 0.5 ? "⚠️" : "❌"}
 16 |         </span>
 17 |         <span>
 18 |           Image generation time: {(health[0] / 1000).toFixed(1)} seconds
 19 |         </span>
 20 |       </section>
 21 |     )
 22 |   );
 23 | };
 24 | 
 25 | const Submission = (props: { submissionId: Id<"submissions"> }) => {
 26 |   const result = useSessionQuery(api.submissions.get, props);
 27 |   switch (result?.status) {
 28 |     case "generating":
 29 |       return (
 30 |         <figure>
 31 |           <article aria-busy="true"></article>
 32 |           {result.details}
 33 |         </figure>
 34 |       );
 35 |     case "failed":
 36 |       return <p>❗️{result.reason}</p>;
 37 |     case "saved":
 38 |       return (
 39 |         <figure className="flex flex-col">
 40 |           <img
 41 |             src={result.url}
 42 |             className="w-full max-w-lg border border-neutral-600 rounded overflow-hidden my-4"
 43 |           />
 44 |           <span className="text-sm text-neutral-400">
 45 |             Generated in {result.elapsedMs / 1000} seconds.
 46 |           </span>
 47 |         </figure>
 48 |       );
 49 |   }
 50 |   return null;
 51 | };
 52 | 
 53 | export const CreateImage = ({
 54 |   onSubmit,
 55 |   title,
 56 | }: {
 57 |   onSubmit: (submissionId: Id<"submissions">) => any;
 58 |   title?: string;
 59 | }) => {
 60 |   const [prompt, setPrompt] = useState("");
 61 |   const startSubmission = useSessionMutation(api.submissions.start);
 62 |   const [submissionId, setSubmissionId] = useState<Id<"submissions">>();
 63 |   return (
 64 |     <div className="flex flex-col gap-4 max-w-lg">
 65 |       <div className="text-5xl font-display stretch-min font-bold">
 66 |         {title ?? "Submit an image"}
 67 |       </div>
 68 |       <form
 69 |         onSubmit={async (e) => {
 70 |           e.preventDefault();
 71 |           setSubmissionId(await startSubmission({ prompt }));
 72 |         }}
 73 |         className="flex flex-col gap-4"
 74 |       >
 75 |         <label className="flex flex-col gap-2">
 76 |           Describe an image. This text will be used to generate an image using
 77 |           OpenAI's Dall-E. For example, "A cat in space"
 78 |           <input
 79 |             type="text"
 80 |             value={prompt}
 81 |             onChange={(e) =>
 82 |               setPrompt(e.target.value.substring(0, MaxPromptLength))
 83 |             }
 84 |             placeholder="Image description"
 85 |             className="bg-transparent border border-neutral-400 p-2 focus:outline-none placeholder:text-neutral-400 text-blue-400 focus:border-blue-400"
 86 |           />
 87 |         </label>
 88 |         <input
 89 |           type="submit"
 90 |           value="Preview"
 91 |           className="h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400"
 92 |         />
 93 |       </form>
 94 |       {submissionId && (
 95 |         <>
 96 |           <Submission submissionId={submissionId} />
 97 |           <button
 98 |             type="submit"
 99 |             onClick={(e) => onSubmit(submissionId)}
100 |             className="h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400"
101 |           >
102 |             Submit
103 |           </button>
104 |         </>
105 |       )}
106 |       <Health />
107 |     </div>
108 |   );
109 | };
110 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Whose Prompt is it Anyways?
 2 | A fun multiplayer game built on Convex using Dall-E.
 3 | 
 4 | # What is Convex?
 5 | 
 6 | [Convex](https://convex.dev) is a hosted backend platform with a
 7 | built-in database that lets you write your
 8 | [database schema](https://docs.convex.dev/database/schemas) and
 9 | [server functions](https://docs.convex.dev/functions) in
10 | [TypeScript](https://docs.convex.dev/typescript). Server-side database
11 | [queries](https://docs.convex.dev/functions/query-functions) automatically
12 | [cache](https://docs.convex.dev/functions/query-functions#caching--reactivity) and
13 | [subscribe](https://docs.convex.dev/client/react#reactivity) to data, powering a
14 | [realtime `useQuery` hook](https://docs.convex.dev/client/react#fetching-data) in our
15 | [React client](https://docs.convex.dev/client/react). There are also
16 | [Python](https://docs.convex.dev/client/python),
17 | [Rust](https://docs.convex.dev/client/rust),
18 | [ReactNative](https://docs.convex.dev/client/react-native), and
19 | [Node](https://docs.convex.dev/client/javascript) clients, as well as a straightforward
20 | [HTTP API](https://github.com/get-convex/convex-js/blob/main/src/browser/http_client.ts#L40).
21 | 
22 | The database support
23 | [NoSQL-style documents](https://docs.convex.dev/database/document-storage) with
24 | [relationships](https://docs.convex.dev/database/document-ids) and
25 | [custom indexes](https://docs.convex.dev/database/indexes/)
26 | (including on fields in nested objects).
27 | 
28 | The
29 | [`query`](https://docs.convex.dev/functions/query-functions) and
30 | [`mutation`](https://docs.convex.dev/functions/mutation-functions) server functions have transactional,
31 | low latency access to the database and leverage our
32 | [`v8` runtime](https://docs.convex.dev/functions/runtimes) with
33 | [determinism guardrails](https://docs.convex.dev/functions/runtimes#using-randomness-and-time-in-queries-and-mutations)
34 | to provide the strongest ACID guarantees on the market:
35 | immediate consistency,
36 | serializable isolation, and
37 | automatic conflict resolution via
38 | [optimistic multi-version concurrency control](https://docs.convex.dev/database/advanced/occ) (OCC / MVCC).
39 | 
40 | The [`action` server functions](https://docs.convex.dev/functions/actions) have
41 | access to external APIs and enable other side-effects and non-determinism in
42 | either our
43 | [optimized `v8` runtime](https://docs.convex.dev/functions/runtimes) or a more
44 | [flexible `node` runtime](https://docs.convex.dev/functions/runtimes#nodejs-runtime).
45 | 
46 | Functions can run in the background via
47 | [scheduling](https://docs.convex.dev/scheduling/scheduled-functions) and
48 | [cron jobs](https://docs.convex.dev/scheduling/cron-jobs).
49 | 
50 | Development is cloud-first, with
51 | [hot reloads for server function](https://docs.convex.dev/cli#run-the-convex-dev-server) editing via the
52 | [CLI](https://docs.convex.dev/cli). There is a
53 | [dashbord UI](https://docs.convex.dev/dashboard) to
54 | [browse and edit data](https://docs.convex.dev/dashboard/deployments/data),
55 | [edit environment variables](https://docs.convex.dev/production/environment-variables),
56 | [view logs](https://docs.convex.dev/dashboard/deployments/logs),
57 | [run server functions](https://docs.convex.dev/dashboard/deployments/functions), and more.
58 | 
59 | There are built-in features for
60 | [reactive pagination](https://docs.convex.dev/database/pagination),
61 | [file storage](https://docs.convex.dev/file-storage),
62 | [reactive search](https://docs.convex.dev/text-search),
63 | [https endpoints](https://docs.convex.dev/functions/http-actions) (for webhooks),
64 | [streaming import/export](https://docs.convex.dev/database/import-export/), and
65 | [runtime data validation](https://docs.convex.dev/database/schemas#validators) for
66 | [function arguments](https://docs.convex.dev/functions/args-validation) and
67 | [database data](https://docs.convex.dev/database/schemas#schema-validation).
68 | 
69 | Everything scales automatically, and it’s [free to start](https://www.convex.dev/plans).
70 | 


--------------------------------------------------------------------------------
/src/App.module.scss:
--------------------------------------------------------------------------------
  1 | .root {
  2 |   padding: var(--size-xl);
  3 |   padding-top: var(--size-9xl);
  4 |   padding-bottom: 11.5rem;
  5 |   max-width: 1600px;
  6 |   margin: 0 auto;
  7 | 
  8 |   > div {
  9 |     flex-basis: 0;
 10 |     flex-grow: 1;
 11 |   }
 12 | 
 13 |   @media (min-width: 1024px) {
 14 |     padding-top: var(--size-xl);
 15 |     padding-bottom: var(--size-xl);
 16 |     display: flex;
 17 |     gap: var(--size-10xl);
 18 |   }
 19 | }
 20 | 
 21 | .username {
 22 |   background: var(--color-dark);
 23 |   border: none;
 24 |   border-bottom: 1px solid var(--color-light);
 25 |   color: var(--color-white);
 26 |   flex-grow: 1;
 27 |   font-size: var(--size-xl);
 28 |   height: var(--size-8xl);
 29 |   left: 0;
 30 |   padding: var(--size-xs);
 31 |   position: fixed;
 32 |   right: 0;
 33 |   top: 0;
 34 | 
 35 |   &:focus {
 36 |     outline: none;
 37 |     border-bottom: 1px solid var(--color-white);
 38 |   }
 39 | 
 40 |   @media (min-width: 1024px) {
 41 |     position: static;
 42 |     border: 1px solid var(--color-light);
 43 |     width: 100%;
 44 | 
 45 |     &:focus {
 46 |       border: 1px solid var(--color-white);
 47 |     }
 48 |   }
 49 | }
 50 | 
 51 | .startGame {
 52 |   padding: var(--size-lg);
 53 |   border-top: 1px solid var(--color-light);
 54 |   position: fixed;
 55 |   bottom: 0;
 56 |   left: 0;
 57 |   right: 0;
 58 |   background: var(--color-dark);
 59 | 
 60 |   @media (min-width: 1024px) {
 61 |     position: static;
 62 |     border: none;
 63 |     padding: 0;
 64 |   }
 65 | }
 66 | 
 67 | .actions {
 68 |   display: flex;
 69 |   gap: var(--size-xs);
 70 |   height: 4.5rem;
 71 |   align-items: center;
 72 | 
 73 |   @media (min-width: 1024px) {
 74 |     flex-direction: column;
 75 |     align-items: flex-start;
 76 |     height: auto;
 77 |   }
 78 | }
 79 | 
 80 | .subtitle {
 81 |   font-size: var(--size-2xl);
 82 |   font-family: var(--font-family-display);
 83 |   font-variation-settings: "wdth" 25;
 84 |   font-weight: bold;
 85 |   letter-spacing: var(--letter-spacing-tight);
 86 |   margin-bottom: var(--size-md);
 87 | }
 88 | 
 89 | .gameCodeForm {
 90 |   flex-basis: 0;
 91 |   flex-grow: 1;
 92 |   display: flex;
 93 |   height: 4rem;
 94 | 
 95 |   input {
 96 |     background: none;
 97 |     border: 1px solid var(--color-primary);
 98 |     padding: var(--size-xs);
 99 |     font-size: var(--size-md);
100 |     flex-grow: 1;
101 |     flex-basis: 0;
102 |     width: 100px;
103 |     color: var(--color-light);
104 | 
105 |     &:focus {
106 |       outline: none;
107 |       color: var(--color-white);
108 |     }
109 |   }
110 | 
111 |   button {
112 |     background: var(--color-primary);
113 |     color: var(--color-black);
114 |     border: none;
115 |     padding: var(--size-2xs);
116 |     font-size: var(--size-md);
117 |   }
118 | 
119 |   @media (min-width: 1024px) {
120 |     min-width: 25rem;
121 |   }
122 | }
123 | 
124 | .hostButton {
125 |   background: var(--color-primary);
126 |   color: var(--color-black);
127 |   flex-basis: 0;
128 |   flex-grow: 1;
129 |   font-size: var(--size-lg);
130 |   height: 4rem;
131 |   border: none;
132 | 
133 |   @media (min-width: 1024px) {
134 |     padding: var(--size-xl);
135 |     min-width: 25rem;
136 |   }
137 | }
138 | 
139 | .or {
140 |   border: 1px solid var(--color-light);
141 |   border-radius: 50%;
142 |   width: var(--size-2xl);
143 |   height: var(--size-2xl);
144 |   display: flex;
145 |   align-items: center;
146 |   justify-content: center;
147 |   font-size: var(--size-sm);
148 |   background: var(--color-dark);
149 |   flex-shrink: 0;
150 | }
151 | 
152 | .header {
153 |   margin-bottom: var(--size-5xl);
154 | 
155 |   @media (min-width: 1024px) {
156 |     margin-bottom: var(--size-10xl);
157 |   }
158 | }
159 | 
160 | .faces {
161 |   height: auto;
162 |   width: 100%;
163 | }
164 | 
165 | .title {
166 |   font-family: var(--font-family-display);
167 |   font-size: var(--size-8xl);
168 |   font-variation-settings: "wdth" 25;
169 |   font-weight: bold;
170 |   letter-spacing: var(--letter-spacing-tight);
171 |   line-height: var(--line-height-none);
172 |   text-transform: uppercase;
173 |   margin: var(--size-xl) 0;
174 | }
175 | 
176 | .convex {
177 |   font-size: var(--size-xl);
178 |   display: flex;
179 |   align-items: center;
180 |   gap: var(--size-3xs);
181 | 
182 |   a {
183 |     text-decoration: none;
184 |     color: var(--color-white);
185 | 
186 |     &:hover {
187 |       text-decoration: underline;
188 |     }
189 |   }
190 | }
191 | 


--------------------------------------------------------------------------------
/convex/openai.ts:
--------------------------------------------------------------------------------
  1 | "use node";
  2 | import { internal } from "./_generated/api";
  3 | import {
  4 |   Configuration,
  5 |   CreateModerationResponseResultsInner,
  6 |   OpenAIApi,
  7 | } from "openai";
  8 | import { action, internalAction } from "./_generated/server";
  9 | import { v } from "convex/values";
 10 | import { OptionResult } from "./round";
 11 | 
 12 | export const addOption = action({
 13 |   args: {
 14 |     gameId: v.optional(v.id("games")),
 15 |     roundId: v.id("rounds"),
 16 |     prompt: v.string(),
 17 |     sessionId: v.id("sessions"),
 18 |   },
 19 |   handler: async (
 20 |     ctx,
 21 |     { gameId, roundId, prompt, sessionId }
 22 |   ): Promise<OptionResult> => {
 23 |     const openai = makeOpenAIClient();
 24 |     // Check if the prompt is offensive.
 25 |     const modResponse = await openai.createModeration({
 26 |       input: prompt,
 27 |     });
 28 |     const modResult = modResponse.data.results[0];
 29 |     if (modResult.flagged) {
 30 |       return {
 31 |         success: false,
 32 |         retry: false,
 33 |         reason: `Your prompt was flagged: ${flaggedCategories(modResult).join(
 34 |           ", "
 35 |         )}`,
 36 |       } as const;
 37 |     }
 38 |     const status = (await ctx.runMutation(internal.round.addOption, {
 39 |       sessionId,
 40 |       gameId,
 41 |       roundId,
 42 |       prompt,
 43 |     })) as OptionResult; // Casting to avoid circular reference.
 44 |     return status;
 45 |   },
 46 | });
 47 | 
 48 | const makeOpenAIClient = () => {
 49 |   const apiKey = process.env.OPENAI_API_KEY;
 50 |   if (!apiKey) {
 51 |     throw new Error(
 52 |       "Add your OPENAI_API_KEY as an env variable in the " +
 53 |         "[dashboard](https://dasboard.convex.dev)"
 54 |     );
 55 |   }
 56 |   return new OpenAIApi(new Configuration({ apiKey }));
 57 | };
 58 | 
 59 | const flaggedCategories = (
 60 |   modResult: CreateModerationResponseResultsInner
 61 | ): string[] => {
 62 |   return Object.entries(modResult.categories)
 63 |     .filter(([, flagged]) => flagged)
 64 |     .map(([category]) => category);
 65 | };
 66 | 
 67 | export const createImage = internalAction({
 68 |   args: { prompt: v.string(), submissionId: v.id("submissions") },
 69 |   handler: async (ctx, { prompt, submissionId }) => {
 70 |     const start = Date.now();
 71 |     const elapsedMs = () => Date.now() - start;
 72 |     const openai = makeOpenAIClient();
 73 | 
 74 |     const fail = (reason: string): Promise<never> =>
 75 |       ctx
 76 |         .runMutation(internal.submissions.update, {
 77 |           submissionId,
 78 |           result: {
 79 |             status: "failed",
 80 |             elapsedMs: elapsedMs(),
 81 |             reason,
 82 |           },
 83 |         })
 84 |         .then(() => {
 85 |           throw new Error(reason);
 86 |         });
 87 | 
 88 |     await ctx.runMutation(internal.submissions.update, {
 89 |       submissionId,
 90 |       result: {
 91 |         status: "generating",
 92 |         details: "Moderating prompt...",
 93 |       },
 94 |     });
 95 |     // Check if the prompt is offensive.
 96 |     const modResponse = await openai.createModeration({
 97 |       input: prompt,
 98 |     });
 99 |     const modResult = modResponse.data.results[0];
100 |     if (modResult.flagged) {
101 |       await fail(
102 |         `Your prompt was flagged: ${flaggedCategories(modResult).join(", ")}`
103 |       );
104 |     }
105 | 
106 |     await ctx.runMutation(internal.submissions.update, {
107 |       submissionId,
108 |       result: {
109 |         status: "generating",
110 |         details: "Generating image...",
111 |       },
112 |     });
113 |     // Query OpenAI for the image.
114 |     const opanaiResponse = await openai.createImage({
115 |       prompt,
116 |       size: "512x512",
117 |     });
118 |     const dallEImageUrl = opanaiResponse.data.data[0]["url"];
119 |     if (!dallEImageUrl) return await fail("No image URL returned from OpenAI");
120 | 
121 |     await ctx.runMutation(internal.submissions.update, {
122 |       submissionId,
123 |       result: {
124 |         status: "generating",
125 |         details: "Storing image...",
126 |       },
127 |     });
128 |     // Download the image
129 |     const imageResponse = await fetch(dallEImageUrl);
130 |     if (!imageResponse.ok) {
131 |       await fail(`failed to download: ${imageResponse.statusText}`);
132 |     }
133 | 
134 |     // Store it in Convex storage
135 |     const storageId = await ctx.storage.store(await imageResponse.blob());
136 | 
137 |     // Write storageId as the body of the message to the Convex database.
138 |     await ctx.runMutation(internal.submissions.update, {
139 |       submissionId,
140 |       result: {
141 |         status: "saved",
142 |         imageStorageId: storageId,
143 |         elapsedMs: elapsedMs(),
144 |       },
145 |     });
146 |   },
147 | });
148 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import { api } from "../convex/_generated/api";
  2 | import { useQuery } from "convex/react";
  3 | import { useCallback, useEffect, useState } from "react";
  4 | import type { Id } from "../convex/_generated/dataModel";
  5 | import Game from "./Game";
  6 | import GameRound from "./GameRound";
  7 | import { useSessionMutation } from "./hooks/useServerSession";
  8 | 
  9 | const ConvexIdLength = 31;
 10 | 
 11 | function App() {
 12 |   const hostGame = useSessionMutation(api.game.create);
 13 |   const [gameId, setGameId] = useState(() => {
 14 |     if (typeof window === "undefined") return null;
 15 |     const id = window.location.hash.substring(1);
 16 |     if (!id || id.length !== ConvexIdLength) return null;
 17 |     return id as Id<"games">;
 18 |   });
 19 |   useEffect(() => {
 20 |     if (typeof window === "undefined") return;
 21 |     if (gameId) window.location.hash = gameId;
 22 |     else window.location.hash = "";
 23 |   }, [gameId]);
 24 |   const [gameCode, setGameCode] = useState("");
 25 |   const joinGame = useSessionMutation(api.game.join);
 26 |   const publicRoundId = useQuery(api.publicGame.get);
 27 |   const done = useCallback((gameId: Id<"games"> | null) => {
 28 |     setGameId(gameId);
 29 |   }, []);
 30 | 
 31 |   return (
 32 |     <div className="flex flex-col p-5 pt-20 pb-64 lg:flex-row lg:gap-28 max-w-7xl mx-auto lg:pt-5 lg:pb-5">
 33 |       <div className="grow basis-0">
 34 |         <header className="mb-20">
 35 |           <img className="w-full" src="/faces.svg" alt="Cartoon faces" />
 36 |           <h1 className="stretch-min my-4 font-display text-6xl font-extrabold uppercase tracking-tighter md:text-8xl">
 37 |             Whose Prompt is it Anyways?
 38 |           </h1>
 39 |           <div className="flex items-center gap-2 text-lg">
 40 |             by{" "}
 41 |             <a
 42 |               href="https://convex.dev"
 43 |               className="flex items-center gap-2 hover:underline"
 44 |             >
 45 |               <img src="/convex.svg" width="28" height="28" alt="Convex logo" />
 46 |               Convex
 47 |             </a>
 48 |           </div>
 49 |         </header>
 50 |         {!gameId && (
 51 |           <div className="fixed bottom-0 left-0 right-0 flex flex-col gap-4 border-t border-t-neutral-400 bg-neutral-900 p-5 lg:static lg:border-t-0 lg:p-0">
 52 |             <div className="stretch-min font-display text-4xl font-extrabold tracking-tight">
 53 |               Play with friends!
 54 |             </div>
 55 |             <div className="my-2">
 56 |               Try to guess what text prompt generated the image. Fool your
 57 |               friends to score points!
 58 |             </div>
 59 |             <div className="flex items-center lg:flex-col">
 60 |               <form
 61 |                 onSubmit={async (e) => {
 62 |                   e.preventDefault();
 63 |                   setGameId(await joinGame({ gameCode }));
 64 |                 }}
 65 |                 className="flex grow basis-0 lg:w-full"
 66 |               >
 67 |                 <input
 68 |                   type="text"
 69 |                   value={gameCode}
 70 |                   placeholder="Game code"
 71 |                   onChange={(e) => setGameCode(e.target.value.substring(0, 4))}
 72 |                   className="h-12 w-0 grow border border-blue-200 bg-transparent p-2 text-blue-200 placeholder:text-blue-200"
 73 |                 />
 74 |                 <button
 75 |                   type="submit"
 76 |                   className="h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400"
 77 |                 >
 78 |                   Join
 79 |                 </button>
 80 |               </form>
 81 |               <span className="z-10 -m-2 flex h-8 w-8 items-center justify-center rounded-full border border-neutral-300 bg-neutral-900 text-sm">
 82 |                 or
 83 |               </span>
 84 |               <button
 85 |                 onClick={async () => {
 86 |                   setGameId(await hostGame());
 87 |                 }}
 88 |                 className="h-12 grow basis-0 bg-blue-200 text-neutral-black hover:bg-blue-400 lg:w-full lg:py-3"
 89 |               >
 90 |                 Host a game
 91 |               </button>
 92 |             </div>
 93 |           </div>
 94 |         )}
 95 |       </div>
 96 |       <div className="grow basis-0">
 97 |         {gameId ? (
 98 |           <Game gameId={gameId} done={done} />
 99 |         ) : (
100 |           <>
101 |             <h2 className="text-4xl font-display stretch-min tracking-tight font-extrabold">
102 |               Try it out:
103 |             </h2>
104 |             {publicRoundId ? (
105 |               <GameRound roundId={publicRoundId} />
106 |             ) : (
107 |               <article aria-busy="true"></article>
108 |             )}
109 |           </>
110 |         )}
111 |       </div>
112 |     </div>
113 |   );
114 | }
115 | 
116 | export default App;
117 | 


--------------------------------------------------------------------------------
/src/GuessStage.tsx:
--------------------------------------------------------------------------------
  1 | import { api } from "../convex/_generated/api";
  2 | import classNames from "classnames";
  3 | import { useState } from "react";
  4 | import { GuessState } from "../convex/shared";
  5 | import { Id } from "../convex/_generated/dataModel";
  6 | import { useSessionMutation } from "./hooks/useServerSession";
  7 | import { Submissions } from "./Submissions";
  8 | 
  9 | export function GuessStage({
 10 |   round,
 11 |   roundId,
 12 |   gameId,
 13 | }: {
 14 |   round: GuessState;
 15 |   roundId: Id<"rounds">;
 16 |   gameId?: Id<"games">;
 17 | }) {
 18 |   const submitGuess = useSessionMutation(api.round.guess);
 19 |   const addLike = useSessionMutation(api.round.like);
 20 |   const [error, setError] = useState<string>();
 21 |   const [likes, setLikes] = useState<Set<string>>(new Set());
 22 |   return (
 23 |     <div>
 24 |       <img
 25 |         src={round.imageUrl}
 26 |         alt=""
 27 |         className="w-full max-w-lg border border-neutral-600 rounded overflow-hidden my-4"
 28 |       />
 29 |       <fieldset>
 30 |         <legend className="text-2xl mb-2">
 31 |           {round.mine
 32 |             ? "This was your image."
 33 |             : "What prompt was responsible for this image?"}
 34 |         </legend>
 35 |         <ul className="mb-6 max-w-lg">
 36 |           {round.options.map((option) => (
 37 |             <li key={option} className="mb-2">
 38 |               <span className="text-orange-300">
 39 |                 {option === round.myGuess && error}
 40 |               </span>
 41 |               <div className="flex gap-2 items-center text-lg">
 42 |                 <label className="flex-grow ">
 43 |                   <button
 44 |                     onClick={async () => {
 45 |                       setError(undefined);
 46 |                       const result = await submitGuess({
 47 |                         roundId,
 48 |                         gameId,
 49 |                         prompt: option,
 50 |                       });
 51 |                       if (!result.success) setError(result.reason);
 52 |                     }}
 53 |                     disabled={round.mine || option === round.myPrompt}
 54 |                     title={
 55 |                       round.mine
 56 |                         ? "You can't vote on your own image"
 57 |                         : option === round.myPrompt
 58 |                         ? "You can't vote for your own prompt"
 59 |                         : ""
 60 |                     }
 61 |                     className={classNames(
 62 |                       "w-full text-left min-h-12 border border-blue-200 bg-blue-200 py-2 px-4 text-neutral-black hover:bg-blue-400 hover:border-blue-400 disabled:border-neutral-400 disabled:text-neutral-500 disabled:cursor-not-allowed cursor-pointer",
 63 |                       {
 64 |                         "bg-blue-500": option === round.myGuess,
 65 |                       }
 66 |                     )}
 67 |                     aria-invalid={option === round.myGuess && !!error}
 68 |                   >
 69 |                     {option}
 70 |                   </button>
 71 |                 </label>
 72 |                 <button
 73 |                   onClick={async () => {
 74 |                     console.log([...likes.keys()]);
 75 |                     console.log({ option });
 76 |                     setLikes((state) => new Set(state.keys()).add(option));
 77 |                     console.log([...likes.keys()]);
 78 |                     await addLike({
 79 |                       roundId,
 80 |                       gameId,
 81 |                       prompt: option,
 82 |                     });
 83 |                   }}
 84 |                   disabled={option === round.myPrompt}
 85 |                   title={
 86 |                     option === round.myPrompt
 87 |                       ? "You can't like your own prompt"
 88 |                       : ""
 89 |                   }
 90 |                   className={classNames(
 91 |                     "w-12 h-12 text-3xl text-neutral-black rounded-full  hover:disabled:bg-none disabled:cursor-default cursor-pointer",
 92 |                     {
 93 |                       "bg-blue-200": likes.has(option),
 94 |                       "hover:bg-blue-400 hover:border-blue-400":
 95 |                         option !== round.myPrompt,
 96 |                     }
 97 |                   )}
 98 |                 >
 99 |                   {option !== round.myPrompt && (
100 |                     <>
101 |                       👍 <span className="sr-only">Like {option}.</span>
102 |                     </>
103 |                   )}
104 |                 </button>
105 |               </div>
106 |             </li>
107 |           ))}
108 |         </ul>
109 |       </fieldset>
110 |       {(round.mine || round.submitted.find((submission) => submission.me)) && (
111 |         <Submissions submitted={round.submitted} title="Submissions" />
112 |       )}
113 |     </div>
114 |   );
115 | }
116 | 


--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /**
  3 |  * Generated utilities for implementing server-side Convex query and mutation functions.
  4 |  *
  5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
  6 |  *
  7 |  * Generated by convex@1.7.1.
  8 |  * To regenerate, run `npx convex dev`.
  9 |  * @module
 10 |  */
 11 | 
 12 | import {
 13 |   ActionBuilder,
 14 |   HttpActionBuilder,
 15 |   MutationBuilder,
 16 |   QueryBuilder,
 17 |   GenericActionCtx,
 18 |   GenericMutationCtx,
 19 |   GenericQueryCtx,
 20 |   GenericDatabaseReader,
 21 |   GenericDatabaseWriter,
 22 | } from "convex/server";
 23 | import type { DataModel } from "./dataModel.js";
 24 | 
 25 | /**
 26 |  * Define a query in this Convex app's public API.
 27 |  *
 28 |  * This function will be allowed to read your Convex database and will be accessible from the client.
 29 |  *
 30 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 31 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 32 |  */
 33 | export declare const query: QueryBuilder<DataModel, "public">;
 34 | 
 35 | /**
 36 |  * Define a query that is only accessible from other Convex functions (but not from the client).
 37 |  *
 38 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 39 |  *
 40 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 41 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 42 |  */
 43 | export declare const internalQuery: QueryBuilder<DataModel, "internal">;
 44 | 
 45 | /**
 46 |  * Define a mutation in this Convex app's public API.
 47 |  *
 48 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
 49 |  *
 50 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 51 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 52 |  */
 53 | export declare const mutation: MutationBuilder<DataModel, "public">;
 54 | 
 55 | /**
 56 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
 57 |  *
 58 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 59 |  *
 60 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 61 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 62 |  */
 63 | export declare const internalMutation: MutationBuilder<DataModel, "internal">;
 64 | 
 65 | /**
 66 |  * Define an action in this Convex app's public API.
 67 |  *
 68 |  * An action is a function which can execute any JavaScript code, including non-deterministic
 69 |  * code and code with side-effects, like calling third-party services.
 70 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 71 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 72 |  *
 73 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 74 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 75 |  */
 76 | export declare const action: ActionBuilder<DataModel, "public">;
 77 | 
 78 | /**
 79 |  * Define an action that is only accessible from other Convex functions (but not from the client).
 80 |  *
 81 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 82 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 83 |  */
 84 | export declare const internalAction: ActionBuilder<DataModel, "internal">;
 85 | 
 86 | /**
 87 |  * Define an HTTP action.
 88 |  *
 89 |  * This function will be used to respond to HTTP requests received by a Convex
 90 |  * deployment if the requests matches the path and method where this action
 91 |  * is routed. Be sure to route your action in `convex/http.js`.
 92 |  *
 93 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 94 |  * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
 95 |  */
 96 | export declare const httpAction: HttpActionBuilder;
 97 | 
 98 | /**
 99 |  * A set of services for use within Convex query functions.
100 |  *
101 |  * The query context is passed as the first argument to any Convex query
102 |  * function run on the server.
103 |  *
104 |  * This differs from the {@link MutationCtx} because all of the services are
105 |  * read-only.
106 |  */
107 | export type QueryCtx = GenericQueryCtx<DataModel>;
108 | 
109 | /**
110 |  * A set of services for use within Convex mutation functions.
111 |  *
112 |  * The mutation context is passed as the first argument to any Convex mutation
113 |  * function run on the server.
114 |  */
115 | export type MutationCtx = GenericMutationCtx<DataModel>;
116 | 
117 | /**
118 |  * A set of services for use within Convex action functions.
119 |  *
120 |  * The action context is passed as the first argument to any Convex action
121 |  * function run on the server.
122 |  */
123 | export type ActionCtx = GenericActionCtx<DataModel>;
124 | 
125 | /**
126 |  * An interface to read from the database within Convex query functions.
127 |  *
128 |  * The two entry points are {@link DatabaseReader.get}, which fetches a single
129 |  * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
130 |  * building a query.
131 |  */
132 | export type DatabaseReader = GenericDatabaseReader<DataModel>;
133 | 
134 | /**
135 |  * An interface to read from and write to the database within Convex mutation
136 |  * functions.
137 |  *
138 |  * Convex guarantees that all writes within a single mutation are
139 |  * executed atomically, so you never have to worry about partial writes leaving
140 |  * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
141 |  * for the guarantees Convex provides your functions.
142 |  */
143 | export type DatabaseWriter = GenericDatabaseWriter<DataModel>;
144 | 


--------------------------------------------------------------------------------
/convex/users.ts:
--------------------------------------------------------------------------------
  1 | import { UserIdentity } from "convex/server";
  2 | import { myMutation, sessionMutation, sessionQuery } from "./lib/myFunctions";
  3 | import md5 from "md5";
  4 | import { DatabaseReader, DatabaseWriter } from "./_generated/server";
  5 | import { Doc, Id } from "./_generated/dataModel";
  6 | import { randomSlug } from "./lib/randomSlug";
  7 | import { v } from "convex/values";
  8 | 
  9 | export const loggedIn = sessionMutation({
 10 |   args: {},
 11 |   handler: async (ctx) => {
 12 |     const identity = await ctx.auth.getUserIdentity();
 13 |     if (!identity) {
 14 |       throw new Error("Trying to store a user without authentication present.");
 15 |     }
 16 |     const userId = await getOrCreateUser(ctx.db, identity);
 17 |     if (userId !== ctx.session.userId) {
 18 |       claimSessionUser(ctx.db, ctx.session, userId);
 19 |     }
 20 |   },
 21 | });
 22 | 
 23 | async function claimSessionUser(
 24 |   db: DatabaseWriter,
 25 |   session: Doc<"sessions">,
 26 |   newUserId: Id<"users">
 27 | ) {
 28 |   const userToClaim = (await db.get(session.userId))!;
 29 |   if (!userToClaim.tokenIdentifier) {
 30 |     // Point the old user to the actual logged-in user.
 31 |     await db.patch(userToClaim._id, { claimedByUserId: newUserId });
 32 |   }
 33 |   // Point the session at the new user going forward.
 34 |   await db.patch(session._id, { userId: newUserId });
 35 |   for (const submissionId of session.submissionIds) {
 36 |     const submission = await db.get(submissionId);
 37 |     if (submission && submission.authorId === userToClaim._id) {
 38 |       await db.patch(submission?._id, { authorId: newUserId });
 39 |     }
 40 |   }
 41 |   for (const gameId of session.gameIds) {
 42 |     const game = (await db.get(gameId))!;
 43 |     if (game.hostId === userToClaim._id) {
 44 |       await db.patch(game._id, { hostId: newUserId });
 45 |     }
 46 |     const playerIds = game.playerIds.map((playerId) =>
 47 |       playerId === userToClaim._id ? newUserId : playerId
 48 |     );
 49 |     await db.patch(game._id, { playerIds });
 50 |     for (const roundId of game.roundIds) {
 51 |       const round = (await db.get(roundId))!;
 52 |       if (round.authorId === userToClaim._id) {
 53 |         await db.patch(round._id, { authorId: newUserId });
 54 |       }
 55 |       const options = round.options.map((option) =>
 56 |         option.authorId === userToClaim._id
 57 |           ? { ...option, authorId: newUserId }
 58 |           : option
 59 |       );
 60 |       await db.patch(round._id, { options });
 61 |     }
 62 |   }
 63 | }
 64 | 
 65 | /**
 66 |  * Gets the name from the current session.
 67 |  */
 68 | export const getMyProfile = sessionQuery({
 69 |   args: {},
 70 |   handler: async (ctx) => {
 71 |     if (!ctx.session) return null;
 72 |     const { name, pictureUrl } = await getUserById(ctx.db, ctx.session.userId);
 73 |     return { name, pictureUrl };
 74 |   },
 75 | });
 76 | 
 77 | /**
 78 |  * Updates the name in the current session.
 79 |  */
 80 | export const setName = sessionMutation({
 81 |   args: { name: v.string() },
 82 |   handler: async (ctx, { name }) => {
 83 |     const user = await getUserById(ctx.db, ctx.session.userId);
 84 |     if (name.length > 100) throw new Error("Name too long");
 85 |     await ctx.db.patch(user._id, { name });
 86 |   },
 87 | });
 88 | 
 89 | export const setPicture = sessionMutation({
 90 |   args: { submissionId: v.id("submissions") },
 91 |   handler: async (ctx, { submissionId }) => {
 92 |     const submission = await ctx.db.get(submissionId);
 93 |     if (!submission) throw new Error("No submission found");
 94 |     if (submission.result.status !== "saved") throw new Error("Bad submission");
 95 |     const pictureUrl = await ctx.storage.getUrl(
 96 |       submission.result.imageStorageId
 97 |     );
 98 |     if (!pictureUrl) throw new Error("Picture is missing");
 99 |     await ctx.db.patch(ctx.session.userId, { pictureUrl });
100 |   },
101 | });
102 | 
103 | export const getUserById = async (db: DatabaseReader, userId: Id<"users">) => {
104 |   let user = (await db.get(userId))!;
105 |   while (user.claimedByUserId) {
106 |     user = (await db.get(user.claimedByUserId))!;
107 |   }
108 |   return user;
109 | };
110 | 
111 | async function getUser(db: DatabaseReader, tokenIdentifier: string) {
112 |   return await db
113 |     .query("users")
114 |     .withIndex("by_token", (q) => q.eq("tokenIdentifier", tokenIdentifier))
115 |     .unique();
116 | }
117 | 
118 | export const getOrCreateUser = async (
119 |   db: DatabaseWriter,
120 |   identity: UserIdentity
121 | ) => {
122 |   const existing = await getUser(db, identity.tokenIdentifier);
123 |   if (existing) return existing._id;
124 |   return await db.insert("users", {
125 |     name: identity.givenName ?? identity.name!,
126 |     pictureUrl: identity.pictureUrl ?? createGravatarUrl(identity.email!),
127 |     tokenIdentifier: identity.tokenIdentifier,
128 |   });
129 | };
130 | 
131 | export const createAnonymousUser = (db: DatabaseWriter) => {
132 |   return db.insert("users", {
133 |     // TODO: make this name fun & random
134 |     name: "",
135 |     pictureUrl: createGravatarUrl(randomSlug()),
136 |   });
137 | };
138 | 
139 | export const loggedOut = sessionMutation({
140 |   args: {},
141 |   handler: async (ctx) => {
142 |     // Wipe the slate clean
143 |     await ctx.db.replace(ctx.session._id, {
144 |       userId: await createAnonymousUser(ctx.db),
145 |       gameIds: [],
146 |       submissionIds: [],
147 |     });
148 |   },
149 | });
150 | 
151 | function createGravatarUrl(key: string): string {
152 |   key = key.trim().toLocaleLowerCase();
153 |   const hash = md5(key);
154 |   // See https://en.gravatar.com/site/implement/images/ for details.
155 |   // ?d=monsterid uses a default of a monster image when the hash isn't found.
156 |   return `https://www.gravatar.com/avatar/${hash}?d=monsterid`;
157 | }
158 | 
159 | /**
160 |  * Creates a session and returns the id. For use with the SessionProvider on the
161 |  * client.
162 |  */
163 | export const createSession = myMutation({
164 |   args: {},
165 |   handler: async (ctx) => {
166 |     const identity = await ctx.auth.getUserIdentity();
167 |     let userId = identity && (await getOrCreateUser(ctx.db, identity));
168 |     if (!userId) {
169 |       userId = await createAnonymousUser(ctx.db);
170 |     }
171 |     return ctx.db.insert("sessions", {
172 |       userId,
173 |       gameIds: [],
174 |       submissionIds: [],
175 |     });
176 |   },
177 | });
178 | 


--------------------------------------------------------------------------------
/src/hooks/useServerSession.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * React helpers for adding session data to Convex functions.
  3 |  *
  4 |  * !Important!: To use these functions, you must wrap your code with
  5 |  * ```tsx
  6 |  *  <ConvexProvider client={convex}>
  7 |  *    <SessionProvider storageLocation={"sessionStorage"}>
  8 |  *      <App />
  9 |  *    </SessionProvider>
 10 |  *  </ConvexProvider>
 11 |  * ```
 12 |  *
 13 |  * With the `SessionProvider` inside the `ConvexProvider` but outside your app.
 14 |  */
 15 | import React, { useContext, useEffect, useState } from "react";
 16 | import { Id } from "../../convex/_generated/dataModel";
 17 | import { FunctionReference, OptionalRestArgs } from "convex/server";
 18 | import { api } from "../../convex/_generated/api";
 19 | import { useQuery, useMutation, useAction } from "convex/react";
 20 | 
 21 | const StoreKey = "ConvexSessionId";
 22 | 
 23 | const SessionContext = React.createContext<Id<"sessions"> | null>(null);
 24 | 
 25 | /**
 26 |  * Context for a Convex session, creating a server session and providing the id.
 27 |  *
 28 |  * @param props - Where you want your session ID to be persisted. Roughly:
 29 |  *  - sessionStorage is saved per-tab
 30 |  *  - localStorage is shared between tabs, but not browser profiles.
 31 |  * @returns A provider to wrap your React nodes which provides the session ID.
 32 |  * To be used with useSessionQuery and useSessionMutation.
 33 |  */
 34 | export const SessionProvider: React.FC<{
 35 |   storageLocation?: "localStorage" | "sessionStorage";
 36 |   children?: React.ReactNode;
 37 | }> = ({ storageLocation, children }) => {
 38 |   const store =
 39 |     // If it's rendering in SSR or such.
 40 |     typeof window === "undefined"
 41 |       ? null
 42 |       : window[storageLocation ?? "sessionStorage"];
 43 |   const [sessionId, setSession] = useState<Id<"sessions"> | null>(() => {
 44 |     const stored = store?.getItem(StoreKey);
 45 |     if (stored) {
 46 |       return stored as Id<"sessions">;
 47 |     }
 48 |     return null;
 49 |   });
 50 |   const createSession = useMutation(api.users.createSession);
 51 | 
 52 |   // Get or set the ID from our desired storage location, whenever it changes.
 53 |   useEffect(() => {
 54 |     if (sessionId) {
 55 |       store?.setItem(StoreKey, sessionId);
 56 |     } else {
 57 |       void (async () => {
 58 |         setSession(await createSession());
 59 |       })();
 60 |     }
 61 |   }, [sessionId, createSession, store]);
 62 | 
 63 |   return React.createElement(
 64 |     SessionContext.Provider,
 65 |     { value: sessionId },
 66 |     children
 67 |   );
 68 | };
 69 | 
 70 | type SessionFunction<Args extends any> = FunctionReference<
 71 |   "query" | "mutation" | "action",
 72 |   "public",
 73 |   { sessionId: Id<"sessions"> | null } & Args,
 74 |   any
 75 | >;
 76 | 
 77 | type SessionFunctionArgsArray<Fn extends SessionFunction<any>> =
 78 |   keyof Fn["_args"] extends "sessionId"
 79 |     ? []
 80 |     : [BetterOmit<Fn["_args"], "sessionId">];
 81 | 
 82 | type SessionFunctionArgs<Fn extends SessionFunction<any>> =
 83 |   keyof Fn["_args"] extends "sessionId"
 84 |     ? EmptyObject
 85 |     : BetterOmit<Fn["_args"], "sessionId">;
 86 | 
 87 | // Like useQuery, but for a Query that takes a session ID.
 88 | export function useSessionQuery<
 89 |   Query extends FunctionReference<
 90 |     "query",
 91 |     "public",
 92 |     { sessionId: Id<"sessions"> | null },
 93 |     any
 94 |   >
 95 | >(
 96 |   query: Query,
 97 |   ...args: SessionFunctionArgsArray<Query>
 98 | ): Query["_returnType"] | undefined {
 99 |   const sessionId = useContext(SessionContext);
100 |   const originalArgs = args[0] ?? {};
101 | 
102 |   const newArgs = { ...originalArgs, sessionId };
103 | 
104 |   return useQuery(query, ...([newArgs] as OptionalRestArgs<Query>));
105 | }
106 | 
107 | // Like useMutation, but for a Mutation that takes a session ID.
108 | export const useSessionMutation = <
109 |   Mutation extends FunctionReference<
110 |     "mutation",
111 |     "public",
112 |     { sessionId: string },
113 |     any
114 |   >
115 | >(
116 |   name: Mutation
117 | ) => {
118 |   const sessionId = useContext(SessionContext);
119 |   const originalMutation = useMutation(name);
120 | 
121 |   return (
122 |     ...args: SessionFunctionArgsArray<Mutation>
123 |   ): Promise<Mutation["_returnType"]> => {
124 |     const newArgs = { ...(args[0] ?? {}), sessionId } as Mutation["_args"];
125 | 
126 |     return originalMutation(...([newArgs] as OptionalRestArgs<Mutation>));
127 |   };
128 | };
129 | 
130 | // Like useAction, but for an Action that takes a session ID.
131 | export const useSessionAction = <
132 |   Action extends FunctionReference<
133 |     "action",
134 |     "public",
135 |     { sessionId: string },
136 |     any
137 |   >
138 | >(
139 |   name: Action
140 | ) => {
141 |   const sessionId = useContext(SessionContext);
142 |   const originalAction = useAction(name);
143 | 
144 |   return (
145 |     ...args: SessionFunctionArgsArray<Action>
146 |   ): Promise<Action["_returnType"]> => {
147 |     const newArgs = { ...(args[0] ?? {}), sessionId } as Action["_args"];
148 | 
149 |     return originalAction(...([newArgs] as OptionalRestArgs<Action>));
150 |   };
151 | };
152 | 
153 | // Type utils:
154 | type EmptyObject = Record<string, never>;
155 | 
156 | /**
157 |  * An `Omit<>` type that:
158 |  * 1. Applies to each element of a union.
159 |  * 2. Preserves the index signature of the underlying type.
160 |  */
161 | declare type BetterOmit<T, K extends keyof T> = {
162 |   [Property in keyof T as Property extends K ? never : Property]: T[Property];
163 | };
164 | 
165 | /**
166 |  * TESTS
167 |  */
168 | 
169 | /**
170 |  * Tests if two types are exactly the same.
171 |  * Taken from https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650
172 |  * (Apache Version 2.0, January 2004)
173 |  */
174 | export type Equals<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
175 |   T
176 | >() => T extends Y ? 1 : 2
177 |   ? true
178 |   : false;
179 | 
180 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
181 | export function assert<T extends true>() {
182 |   // no need to do anything! we're just asserting at compile time that the type
183 |   // parameter is true.
184 | }
185 | 
186 | assert<
187 |   Equals<
188 |     SessionFunctionArgs<
189 |       FunctionReference<
190 |         "query",
191 |         "public",
192 |         { arg: string; sessionId: Id<"sessions"> | null },
193 |         any
194 |       >
195 |     >,
196 |     { arg: string }
197 |   >
198 | >();
199 | assert<
200 |   Equals<
201 |     SessionFunctionArgs<
202 |       FunctionReference<
203 |         "query",
204 |         "public",
205 |         { sessionId: Id<"sessions"> | null },
206 |         any
207 |       >
208 |     >,
209 |     EmptyObject
210 |   >
211 | >();
212 | 


--------------------------------------------------------------------------------
/convex/game.ts:
--------------------------------------------------------------------------------
  1 | import { api } from "./_generated/api";
  2 | import { calculateScoreDeltas, newRound, startRound } from "./round";
  3 | import { ClientGameState, MaxPlayers } from "./shared";
  4 | import { getUserById } from "./users";
  5 | import { Doc, Id } from "./_generated/dataModel";
  6 | import { randomSlug } from "./lib/randomSlug";
  7 | import { v } from "convex/values";
  8 | import { asyncMap, pruneNull } from "convex-helpers";
  9 | import { getAll } from "convex-helpers/server/relationships";
 10 | import { sessionMutation, sessionQuery } from "./lib/myFunctions";
 11 | 
 12 | const GenerateDurationMs = 120000;
 13 | 
 14 | export const create = sessionMutation({
 15 |   args: {},
 16 |   handler: async (ctx) => {
 17 |     const gameId = await ctx.db.insert("games", {
 18 |       hostId: ctx.session.userId,
 19 |       playerIds: [ctx.session.userId],
 20 |       roundIds: [],
 21 |       slug: randomSlug(),
 22 |       state: { stage: "lobby" },
 23 |     });
 24 |     ctx.session.gameIds.push(gameId);
 25 |     await ctx.db.patch(ctx.session._id, { gameIds: ctx.session.gameIds });
 26 |     return gameId;
 27 |   },
 28 | });
 29 | 
 30 | export const playAgain = sessionMutation({
 31 |   args: { oldGameId: v.id("games") },
 32 |   handler: async (ctx, { oldGameId }) => {
 33 |     const oldGame = await ctx.db.get(oldGameId);
 34 |     if (!oldGame) throw new Error("Old game doesn't exist");
 35 |     if (!oldGame.playerIds.find((id) => id === ctx.session.userId)) {
 36 |       throw new Error("You weren't part of that game");
 37 |     }
 38 |     const gameId = await ctx.db.insert("games", {
 39 |       hostId: ctx.session.userId,
 40 |       playerIds: oldGame.playerIds,
 41 |       roundIds: [],
 42 |       slug: oldGame.slug,
 43 |       state: { stage: "lobby" },
 44 |     });
 45 |     await ctx.db.patch(oldGame._id, { nextGameId: gameId });
 46 |     ctx.session.gameIds.push(gameId);
 47 |     await ctx.db.patch(ctx.session._id, { gameIds: ctx.session.gameIds });
 48 |     return gameId;
 49 |   },
 50 | });
 51 | 
 52 | export const get = sessionQuery({
 53 |   args: { gameId: v.id("games") },
 54 |   handler: async (ctx, { gameId }): Promise<ClientGameState> => {
 55 |     // Grab the most recent game with this code.
 56 |     const game = await ctx.db.get(gameId);
 57 |     if (!game) throw new Error("Game not found");
 58 |     const rounds = pruneNull(await getAll(ctx.db, game.roundIds));
 59 |     const playerLikes: Record<Id<"users">, number> = {};
 60 |     const playerScore: Record<Id<"users">, number> = {};
 61 |     for (const round of rounds) {
 62 |       if (round.stage === "reveal") {
 63 |         for (const option of round.options) {
 64 |           playerLikes[option.authorId] =
 65 |             option.likes.length + (playerLikes[option.authorId] ?? 0);
 66 |           for (const { userId, score: delta } of calculateScoreDeltas(
 67 |             option.authorId === round.authorId,
 68 |             option
 69 |           )) {
 70 |             playerScore[userId] = delta + (playerScore[userId] ?? 0);
 71 |           }
 72 |         }
 73 |       }
 74 |     }
 75 |     const roundPlayerIds = rounds.map((round) => round.authorId);
 76 |     const players = await asyncMap(game.playerIds, async (playerId) => {
 77 |       const player = (await getUserById(ctx.db, playerId))!;
 78 |       const { name, pictureUrl } = player;
 79 |       return {
 80 |         me: player._id === ctx.session?.userId,
 81 |         name,
 82 |         pictureUrl,
 83 |         score: playerScore[player._id] ?? 0,
 84 |         likes: playerLikes[player._id] ?? 0,
 85 |         submitted: !!roundPlayerIds.find((id) => id === playerId),
 86 |       };
 87 |     });
 88 |     return {
 89 |       gameCode: game.slug,
 90 |       hosting: game.hostId === ctx.session?.userId,
 91 |       playing: !!game.playerIds.find((id) => id === ctx.session?.userId),
 92 |       players,
 93 |       state: game.state,
 94 |       nextGameId: game.nextGameId ?? null,
 95 |     };
 96 |   },
 97 | });
 98 | 
 99 | export const join = sessionMutation({
100 |   args: { gameCode: v.string() },
101 |   handler: async (ctx, { gameCode }) => {
102 |     // Grab the most recent game with this gameCode, if it exists
103 |     const game = await ctx.db
104 |       .query("games")
105 |       .withIndex("s", (q) => q.eq("slug", gameCode))
106 |       .order("desc")
107 |       .first();
108 |     if (!game) throw new Error("Game not found");
109 |     if (game.playerIds.length >= MaxPlayers) throw new Error("Game is full");
110 |     if (game.state.stage !== "lobby") throw new Error("Game has started");
111 |     // keep session up to date, so we know what game this session's in.
112 |     ctx.session.gameIds.push(game._id);
113 |     await ctx.db.patch(ctx.session._id, { gameIds: ctx.session.gameIds });
114 |     // Already in game
115 |     if (game.playerIds.find((id) => id === ctx.session.userId) !== undefined) {
116 |       console.warn("User joining game they're already in");
117 |     } else {
118 |       const playerIds = game.playerIds;
119 |       playerIds.push(ctx.session.userId);
120 |       await ctx.db.patch(game._id, { playerIds });
121 |     }
122 | 
123 |     return game._id;
124 |   },
125 | });
126 | 
127 | export const submit = sessionMutation({
128 |   args: { submissionId: v.id("submissions"), gameId: v.id("games") },
129 |   handler: async (ctx, { submissionId, gameId }) => {
130 |     const game = await ctx.db.get(gameId);
131 |     if (!game) throw new Error("Game not found");
132 |     const submission = await ctx.db.get(submissionId);
133 |     if (submission?.result.status !== "saved") {
134 |       throw new Error(`Can't add ${submission?.result.status} submissions.`);
135 |     }
136 |     if (submission.authorId !== ctx.session.userId) {
137 |       throw new Error("This is not your submission.");
138 |     }
139 |     const { authorId, prompt, result } = submission;
140 |     for (const roundId of game.roundIds) {
141 |       const round = (await ctx.db.get(roundId))!;
142 |       if (round.authorId === authorId) {
143 |         throw new Error("You already submitted.");
144 |       }
145 |     }
146 |     const roundIds = game.roundIds;
147 |     roundIds.push(
148 |       await ctx.db.insert(
149 |         "rounds",
150 |         newRound(authorId, result.imageStorageId, prompt)
151 |       )
152 |     );
153 |     await ctx.db.patch(game._id, { roundIds });
154 |     // Start the game, everyone's submitted.
155 |     if (roundIds.length === game.playerIds.length) {
156 |       await ctx.db.patch(game._id, {
157 |         state: { stage: "rounds", roundId: game.roundIds[0] },
158 |       });
159 |       await startRound(ctx.db, game.roundIds[0]);
160 |     }
161 |   },
162 | });
163 | 
164 | export const progress = sessionMutation({
165 |   args: {
166 |     gameId: v.id("games"),
167 |     fromStage: v.union(
168 |       v.literal("lobby"),
169 |       v.literal("generate"),
170 |       v.literal("label"),
171 |       v.literal("guess"),
172 |       v.literal("reveal"),
173 |       v.literal("rounds"),
174 |       v.literal("votes"),
175 |       v.literal("recap")
176 |     ),
177 |   },
178 |   handler: async (ctx, { gameId, fromStage }) => {
179 |     const game = await ctx.db.get(gameId);
180 |     if (!game) throw new Error("Game not found");
181 |     if (game.hostId !== ctx.session.userId)
182 |       throw new Error("You are not the host");
183 |     const state = nextState(game.state, game.roundIds);
184 |     if (game.state.stage !== fromStage) {
185 |       // Just ignore requests that have already been applied.
186 |       if (fromStage === state.stage) return;
187 |       throw new Error(
188 |         `Game ${gameId}(${game.state.stage}) is no longer in stage ${fromStage}`
189 |       );
190 |     }
191 |     if (state.stage === "rounds") {
192 |       await startRound(ctx.db, state.roundId);
193 |     }
194 |     game.state = state;
195 |     await ctx.db.replace(game._id, game);
196 |     if (state.stage === "lobby") {
197 |       await ctx.scheduler.runAfter(GenerateDurationMs, api.game.progress, {
198 |         sessionId: ctx.session._id,
199 |         gameId,
200 |         fromStage: state.stage,
201 |       });
202 |     }
203 |   },
204 | });
205 | 
206 | const nextState = (
207 |   fromState: Doc<"games">["state"],
208 |   roundIds: Id<"rounds">[]
209 | ): Doc<"games">["state"] => {
210 |   let state = { ...fromState };
211 |   switch (state.stage) {
212 |     case "lobby":
213 |       state.stage = "generate";
214 |       break;
215 |     case "generate":
216 |       if (roundIds.length === 0) throw new Error("Game has no rounds");
217 |       state = {
218 |         stage: "rounds",
219 |         roundId: roundIds[0],
220 |       };
221 |       break;
222 |     case "rounds":
223 |       if (state.roundId === roundIds[roundIds.length - 1]) {
224 |         // If it was the last round, go to recap.
225 |         state = { stage: "recap" };
226 |       } else {
227 |         // Otherwise go to the next round.
228 |         const lastRoundId = state.roundId;
229 |         const prevIndex = roundIds.findIndex(
230 |           (roundId) => roundId === lastRoundId
231 |         );
232 |         if (prevIndex === -1) throw new Error("Previous round doesn't exist");
233 |         state.roundId = roundIds[prevIndex + 1];
234 |       }
235 |       break;
236 |   }
237 |   return state;
238 | };
239 | 


--------------------------------------------------------------------------------
/convex/round.ts:
--------------------------------------------------------------------------------
  1 | import { api, internal } from "./_generated/api";
  2 | import { WithoutSystemFields } from "convex/server";
  3 | import { Doc, Id } from "./_generated/dataModel";
  4 | import { DatabaseWriter } from "./_generated/server";
  5 | import { GuessState, LabelState, MaxPlayers, RevealState } from "./shared";
  6 | import { v } from "convex/values";
  7 | import { asyncMap } from "convex-helpers";
  8 | import {
  9 |   internalSessionMutation,
 10 |   myMutation,
 11 |   sessionMutation,
 12 |   sessionQuery,
 13 | } from "./lib/myFunctions";
 14 | 
 15 | const LabelDurationMs = 30000;
 16 | const GuessDurationMs = 30000;
 17 | const RevealDurationMs = 30000;
 18 | 
 19 | export const newRound = (
 20 |   authorId: Id<"users">,
 21 |   imageStorageId: string,
 22 |   prompt: string
 23 | ): WithoutSystemFields<Doc<"rounds">> => ({
 24 |   authorId,
 25 |   imageStorageId,
 26 |   stage: "label",
 27 |   stageStart: Date.now(),
 28 |   stageEnd: Date.now() + LabelDurationMs,
 29 |   options: [{ prompt, authorId, votes: [], likes: [] }],
 30 | });
 31 | 
 32 | export const startRound = async (db: DatabaseWriter, roundId: Id<"rounds">) => {
 33 |   await db.patch(roundId, {
 34 |     stageStart: Date.now(),
 35 |     stageEnd: Date.now() + LabelDurationMs,
 36 |   });
 37 | };
 38 | 
 39 | export const getRound = sessionQuery({
 40 |   args: { roundId: v.id("rounds") },
 41 |   handler: async (
 42 |     ctx,
 43 |     { roundId }
 44 |   ): Promise<LabelState | GuessState | RevealState> => {
 45 |     const round = await ctx.db.get(roundId);
 46 |     if (!round) throw new Error("Round not found");
 47 |     const { stage, stageStart, stageEnd } = round;
 48 |     const imageUrl = await ctx.storage.getUrl(round.imageStorageId);
 49 |     if (!imageUrl) throw new Error("Image not found");
 50 | 
 51 |     const userInfo = async (userId: Id<"users">) => {
 52 |       const user = (await ctx.db.get(userId))!;
 53 |       return {
 54 |         me: user._id === ctx.session?.userId,
 55 |         name: user.name,
 56 |         pictureUrl: user.pictureUrl,
 57 |       };
 58 |     };
 59 | 
 60 |     switch (stage) {
 61 |       case "label":
 62 |         const labelState: LabelState = {
 63 |           stage,
 64 |           mine: round.authorId === ctx.session?.userId,
 65 |           imageUrl,
 66 |           stageStart,
 67 |           stageEnd,
 68 |           submitted: await asyncMap(round.options, (option) =>
 69 |             userInfo(option.authorId)
 70 |           ),
 71 |         };
 72 |         return labelState;
 73 |       case "guess":
 74 |         const allGuesses = round.options.reduce(
 75 |           (all, { votes }) => all.concat(votes),
 76 |           [] as Id<"users">[]
 77 |         );
 78 |         const myGuess = round.options.find(
 79 |           (o) => !!o.votes.find((voteId) => voteId === ctx.session?.userId)
 80 |         )?.prompt;
 81 |         const myPrompt = round.options.find(
 82 |           (o) => o.authorId === ctx.session?.userId
 83 |         )?.prompt;
 84 |         const guessState: GuessState = {
 85 |           options: round.options.map((option) => option.prompt),
 86 |           stage,
 87 |           mine: round.authorId === ctx.session?.userId,
 88 |           imageUrl,
 89 |           stageStart,
 90 |           stageEnd,
 91 |           myPrompt,
 92 |           myGuess,
 93 |           submitted: await asyncMap(allGuesses, userInfo),
 94 |         };
 95 |         return guessState;
 96 |       case "reveal":
 97 |         const allUsers = new Set(
 98 |           round.options.map((option) => option.authorId)
 99 |         );
100 | 
101 |         round.options.forEach((option) => {
102 |           for (const id of option.votes) {
103 |             allUsers.add(id);
104 |           }
105 |           for (const id of option.likes) {
106 |             allUsers.add(id);
107 |           }
108 |         });
109 |         const revealState: RevealState = {
110 |           results: round.options.map((option) => ({
111 |             authorId: option.authorId,
112 |             prompt: option.prompt,
113 |             votes: option.votes.map((uId) => uId),
114 |             likes: option.likes.map((uId) => uId),
115 |             scoreDeltas: calculateScoreDeltas(
116 |               option.authorId === round.authorId,
117 |               option
118 |             ),
119 |           })),
120 |           stage,
121 |           me: ctx.session!.userId,
122 |           authorId: round.authorId,
123 |           imageUrl,
124 |           stageStart,
125 |           stageEnd,
126 |           users: await asyncMap(allUsers.keys(), async (userId) => ({
127 |             userId,
128 |             ...(await userInfo(userId)),
129 |           })),
130 |         };
131 |         return revealState;
132 |     }
133 |   },
134 | });
135 | 
136 | const CorrectAuthorScore = 1000;
137 | const AlternateAuthorScore = 500;
138 | const CorrectGuesserScore = 200;
139 | 
140 | export function calculateScoreDeltas(
141 |   isCorrect: boolean,
142 |   option: Doc<"rounds">["options"][0]
143 | ) {
144 |   const scoreDeltas = [
145 |     {
146 |       userId: option.authorId,
147 |       score:
148 |         option.votes.length *
149 |         (isCorrect ? CorrectAuthorScore : AlternateAuthorScore),
150 |     },
151 |   ];
152 |   if (isCorrect) {
153 |     for (const userId of option.votes) {
154 |       scoreDeltas.push({ userId, score: CorrectGuesserScore });
155 |     }
156 |   }
157 |   return scoreDeltas;
158 | }
159 | 
160 | // Courtesy of chat-gpt
161 | function levenshteinDistance(a: string, b: string) {
162 |   if (a.length === 0) return b.length;
163 |   if (b.length === 0) return a.length;
164 | 
165 |   const matrix = [];
166 | 
167 |   // Initialize the first row and column of the matrix
168 |   for (let i = 0; i <= b.length; i++) {
169 |     matrix[i] = [i];
170 |   }
171 | 
172 |   for (let j = 0; j <= a.length; j++) {
173 |     matrix[0][j] = j;
174 |   }
175 | 
176 |   // Calculate the matrix
177 |   for (let i = 1; i <= b.length; i++) {
178 |     for (let j = 1; j <= a.length; j++) {
179 |       if (b.charAt(i - 1) === a.charAt(j - 1)) {
180 |         matrix[i][j] = matrix[i - 1][j - 1];
181 |       } else {
182 |         matrix[i][j] = Math.min(
183 |           matrix[i - 1][j - 1] + 1, // substitution
184 |           matrix[i][j - 1] + 1, // insertion
185 |           matrix[i - 1][j] + 1 // deletion
186 |         );
187 |       }
188 |     }
189 |   }
190 | 
191 |   return matrix[b.length][a.length];
192 | }
193 | 
194 | export type OptionResult =
195 |   | { success: true }
196 |   | { success: false; retry?: boolean; reason: string };
197 | 
198 | export const addOption = internalSessionMutation({
199 |   args: {
200 |     gameId: v.optional(v.id("games")),
201 |     roundId: v.id("rounds"),
202 |     prompt: v.string(),
203 |   },
204 |   handler: async (ctx, { gameId, roundId, prompt }): Promise<OptionResult> => {
205 |     const round = await ctx.db.get(roundId);
206 |     if (!round) throw new Error("Round not found");
207 |     if (round.stage !== "label") {
208 |       return { success: false, reason: "Too late to add a prompt." };
209 |     }
210 |     if (round.authorId === ctx.session.userId) {
211 |       throw new Error("You can't submit a prompt for your own image.");
212 |     }
213 |     if (
214 |       round.options.findIndex(
215 |         (option) => option.authorId === ctx.session.userId
216 |       ) !== -1
217 |     ) {
218 |       return { success: false, reason: "You already added a prompt." };
219 |     }
220 |     if (round.options.length === MaxPlayers) {
221 |       return { success: false, reason: "This round is full." };
222 |     }
223 |     if (
224 |       round.options.findIndex(
225 |         (option) =>
226 |           levenshteinDistance(
227 |             option.prompt.toLocaleLowerCase(),
228 |             prompt.toLocaleLowerCase()
229 |           ) <
230 |           prompt.length / 2
231 |       ) !== -1
232 |     ) {
233 |       return {
234 |         success: false,
235 |         retry: true,
236 |         reason: "This prompt is too similar to existing prompt(s).",
237 |       };
238 |     }
239 | 
240 |     round.options.push({
241 |       authorId: ctx.session.userId,
242 |       prompt,
243 |       votes: [],
244 |       likes: [],
245 |     });
246 |     await ctx.db.patch(round._id, { options: round.options });
247 |     const game = gameId && (await ctx.db.get(gameId));
248 |     if (round.options.length === game?.playerIds.length) {
249 |       // All players have added options
250 |       await ctx.db.patch(round._id, beginGuessPatch(round));
251 |       await ctx.scheduler.runAfter(GuessDurationMs, api.round.progress, {
252 |         roundId: round._id,
253 |         fromStage: "guess",
254 |       });
255 |     }
256 |     return { success: true };
257 |   },
258 | });
259 | 
260 | export const progress = myMutation({
261 |   args: {
262 |     roundId: v.id("rounds"),
263 |     fromStage: v.union(
264 |       v.literal("label"),
265 |       v.literal("guess"),
266 |       v.literal("reveal")
267 |     ),
268 |   },
269 |   handler: async (ctx, { roundId, fromStage }) => {
270 |     const round = await ctx.db.get(roundId);
271 |     if (!round) throw new Error("Round not found: " + roundId);
272 |     if (round.stage === fromStage) {
273 |       const stage = fromStage === "label" ? "guess" : "reveal";
274 |       await ctx.db.patch(round._id, { stage });
275 |     }
276 |   },
277 | });
278 | 
279 | // from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
280 | function shuffle<T extends {}>(array: T[]): T[] {
281 |   let currentIndex = array.length,
282 |     randomIndex;
283 | 
284 |   // While there remain elements to shuffle.
285 |   while (currentIndex != 0) {
286 |     // Pick a remaining element.
287 |     randomIndex = Math.floor(Math.random() * currentIndex);
288 |     currentIndex--;
289 | 
290 |     // And swap it with the current element.
291 |     [array[currentIndex], array[randomIndex]] = [
292 |       array[randomIndex],
293 |       array[currentIndex],
294 |     ];
295 |   }
296 | 
297 |   return array;
298 | }
299 | 
300 | // Modifies parameter to progress to guessing
301 | const beginGuessPatch = (round: Doc<"rounds">): Partial<Doc<"rounds">> => ({
302 |   options: shuffle(round.options),
303 |   stage: "guess",
304 |   stageStart: Date.now(),
305 |   stageEnd: Date.now() + GuessDurationMs,
306 | });
307 | 
308 | export const guess = sessionMutation({
309 |   args: {
310 |     roundId: v.id("rounds"),
311 |     prompt: v.string(),
312 |     gameId: v.optional(v.id("games")),
313 |   },
314 |   handler: async (ctx, { roundId, prompt, gameId }) => {
315 |     const round = await ctx.db.get(roundId);
316 |     if (!round) throw new Error("Round not found");
317 |     if (round.stage !== "guess") {
318 |       return { success: false, reason: "Too late to vote." };
319 |     }
320 |     const optionVotedFor = round.options.find(
321 |       (option) => option.prompt === prompt
322 |     );
323 |     if (!optionVotedFor) {
324 |       return {
325 |         success: false,
326 |         retry: true,
327 |         reason: "This prompt does not exist.",
328 |       };
329 |     }
330 |     if (optionVotedFor.authorId === ctx.session.userId) {
331 |       return {
332 |         success: false,
333 |         retry: true,
334 |         reason: "You can't vote for your own prompt.",
335 |       };
336 |     }
337 |     const existingVote = round.options.find(
338 |       (option) =>
339 |         option.votes.findIndex((vote) => vote === ctx.session.userId) !== -1
340 |     );
341 |     if (prompt === existingVote?.prompt) {
342 |       return {
343 |         success: false,
344 |         retry: true,
345 |         reason: "You already voted for this option.",
346 |       };
347 |     }
348 |     if (existingVote) {
349 |       // Remove existing vote
350 |       const voteIndex = existingVote.votes.indexOf(ctx.session.userId);
351 |       existingVote.votes = existingVote.votes
352 |         .slice(0, voteIndex)
353 |         .concat(...existingVote.votes.slice(voteIndex + 1));
354 |     }
355 |     optionVotedFor.votes.push(ctx.session.userId);
356 |     await ctx.db.patch(round._id, { options: round.options });
357 | 
358 |     if (gameId) {
359 |       const game = (await ctx.db.get(gameId))!;
360 |       const noGuess = new Set(game.playerIds.map((id) => id.toString()));
361 |       noGuess.delete(round.authorId.toString());
362 |       for (const option of round.options) {
363 |         for (const vote of option.votes) {
364 |           noGuess.delete(vote.toString());
365 |         }
366 |       }
367 |       if (noGuess.size === 0) {
368 |         await ctx.db.patch(round._id, revealPatch(round));
369 |       }
370 |     }
371 |     return { success: true, retry: true };
372 |   },
373 | });
374 | 
375 | export const like = sessionMutation({
376 |   args: {
377 |     roundId: v.id("rounds"),
378 |     prompt: v.string(),
379 |     gameId: v.optional(v.id("games")),
380 |   },
381 |   handler: async (ctx, { roundId, prompt, gameId }) => {
382 |     const round = await ctx.db.get(roundId);
383 |     if (!round) throw new Error("Round not found");
384 |     if (round.stage !== "guess") {
385 |       return { success: false, reason: "Too late to like." };
386 |     }
387 |     const optionVotedFor = round.options.find(
388 |       (option) => option.prompt === prompt
389 |     );
390 |     if (!optionVotedFor) {
391 |       return {
392 |         success: false,
393 |         retry: true,
394 |         reason: "This prompt does not exist.",
395 |       };
396 |     }
397 |     if (optionVotedFor.authorId === ctx.session.userId) {
398 |       return {
399 |         success: false,
400 |         retry: true,
401 |         reason: "You can't like your own prompt.",
402 |       };
403 |     }
404 |     const existingLike = round.options.find(
405 |       (option) =>
406 |         option.likes.findIndex((like) => like === ctx.session.userId) !== -1
407 |     );
408 |     if (prompt === existingLike?.prompt) {
409 |       return {
410 |         success: false,
411 |         retry: true,
412 |         reason: "You already voted for this option.",
413 |       };
414 |     }
415 |     optionVotedFor.likes.push(ctx.session.userId);
416 |     await ctx.db.patch(round._id, { options: round.options });
417 |     [];
418 |   },
419 | });
420 | 
421 | // Modifies parameter to progress to guessing
422 | const revealPatch = (round: Doc<"rounds">) => ({
423 |   stage: "reveal" as const,
424 |   stageStart: Date.now(),
425 |   stageEnd: Date.now() + RevealDurationMs,
426 | });
427 | 
428 | // Return the server's current time so clients can calculate timestamp offsets.
429 | export const serverNow = myMutation(() => Date.now());
430 | 


--------------------------------------------------------------------------------
/public/faces.svg:
--------------------------------------------------------------------------------
 1 | <svg width="754" height="320" viewBox="0 0 754 320" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M558.963 190.784C507.582 190.784 465.966 148.689 465.966 96.8075C465.966 44.9256 507.582 2.83122 558.963 2.83122C610.344 2.83122 651.96 44.9256 651.96 96.8075C651.96 148.689 610.344 190.784 558.963 190.784Z" fill="#FBB33D" stroke="#121212" stroke-width="3.91568"/>
 3 | <path d="M631.804 52.708H560.224H488.643C494.492 112.926 560.224 126.789 560.224 52.708C560.224 126.789 625.955 112.926 631.804 52.708Z" fill="#121212"/>
 4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M632.576 52.001H487.871L487.946 52.778C490.891 83.0971 508.951 101.998 526.557 103.775C535.385 104.667 544.018 101.228 550.416 92.8629C555.251 86.5412 558.792 77.4329 560.224 65.2932C561.656 77.4329 565.197 86.5412 570.032 92.8629C576.429 101.228 585.062 104.667 593.89 103.775C611.496 101.998 629.556 83.0971 632.501 52.778L632.576 52.001ZM559.521 53.4166C559.418 71.4653 555.356 84.0891 549.308 91.9971C543.198 99.9856 535.033 103.208 526.697 102.367C510.12 100.693 492.553 82.8526 489.419 53.4166H559.521ZM560.926 53.4166C561.029 71.4653 565.092 84.0891 571.14 91.9971C577.249 99.9856 585.415 103.208 593.751 102.367C610.327 100.693 627.895 82.8526 631.028 53.4166H560.926Z" fill="#121212"/>
 5 | <path d="M637.957 119.078C569.52 140.047 534.578 131.163 477.728 82.3682C528.68 180.753 563.838 187.824 637.957 119.078Z" fill="#121212"/>
 6 | <path fill-rule="evenodd" clip-rule="evenodd" d="M635.219 120.643C617.659 136.734 602.34 148.428 588.5 155.548C574.078 162.967 561.311 165.395 549.307 162.705C537.294 160.013 525.927 152.17 514.363 138.81C503.306 126.036 492.107 108.262 480.022 85.2472C507.223 108.258 529.575 122.021 553.34 127.573C577.2 133.147 602.394 130.424 635.219 120.643ZM553.655 126.194C529.423 120.532 506.578 106.2 478.181 81.8271L477.107 82.695C489.855 107.31 501.636 126.256 513.309 139.742C524.984 153.23 536.593 161.306 549.004 164.087C561.422 166.87 574.527 164.324 589.135 156.809C603.734 149.299 619.884 136.801 638.431 119.599L637.754 118.4C603.588 128.868 577.88 131.853 553.655 126.194Z" fill="#121212"/>
 7 | <path d="M490.696 76.8364C476.07 79.5766 471.94 84.4616 470.411 97.9795C475.247 87.9317 479.728 83.3258 490.696 76.8364Z" fill="#121212"/>
 8 | <path fill-rule="evenodd" clip-rule="evenodd" d="M489.931 77.1283C484.807 80.2005 481.13 82.8814 478.154 85.9753C475.2 89.0466 472.943 92.5192 470.648 97.1731C471.433 90.8715 472.849 86.5505 475.744 83.4641C478.654 80.362 483.078 78.4854 489.931 77.1283ZM475.541 83.2693C472.456 86.5573 471.037 91.197 470.272 97.9638L470.537 98.0418C472.951 93.0262 475.273 89.3769 478.355 86.1726C481.438 82.9673 485.288 80.201 490.767 76.959L490.67 76.6976C483.35 78.0691 478.624 79.9821 475.541 83.2693Z" fill="#121212"/>
 9 | <path d="M596.581 131.922C586.89 200.027 515.904 198.682 526.867 121.633C548.761 137.907 563.957 140.317 596.581 131.922Z" fill="#F9748B"/>
10 | <path fill-rule="evenodd" clip-rule="evenodd" d="M526.762 121.38L526.729 121.613C523.985 140.895 526.366 155.459 531.649 165.39C536.934 175.325 545.122 180.621 553.968 181.352C571.661 182.815 591.869 166.033 596.72 131.943L596.75 131.733L596.546 131.786C580.24 135.982 568.307 137.473 557.721 135.89C547.138 134.307 537.887 129.65 526.951 121.52L526.762 121.38ZM596.413 132.112C591.52 165.986 571.437 182.513 553.99 181.07C545.249 180.348 537.141 175.117 531.896 165.257C526.671 155.435 524.288 141.014 526.973 121.887C537.848 129.946 547.097 134.586 557.681 136.169C568.278 137.754 580.199 136.271 596.413 132.112Z" fill="#FF0523"/>
11 | <path fill-rule="evenodd" clip-rule="evenodd" d="M555.885 167.274L560.287 136.471L558.054 136.143L553.653 166.946L555.885 167.274Z" fill="#78000E"/>
12 | <path d="M623.194 125.255C571.19 152.104 542.64 149.794 501.646 104.198C542.559 134.131 570.628 138.725 623.194 125.255Z" fill="white"/>
13 | <path fill-rule="evenodd" clip-rule="evenodd" d="M622.019 125.7C596.56 138.723 576.762 144.626 558.313 141.753C539.876 138.883 522.755 127.245 502.661 105.111C522.649 119.594 539.631 127.988 558.027 131.142C576.468 134.304 596.316 132.196 622.019 125.7ZM558.073 130.863C539.401 127.662 522.175 119.043 501.729 104.083L501.543 104.293C522.047 127.099 539.46 139.105 558.27 142.033C577.077 144.961 597.249 138.809 623.257 125.381L623.159 125.118C596.885 131.85 576.748 134.064 558.073 130.863Z" fill="white"/>
14 | <path d="M440.514 304.338C391.856 304.338 352.411 264.894 352.411 216.236C352.411 167.578 391.856 128.133 440.514 128.133C489.172 128.133 528.617 167.578 528.617 216.236C528.617 264.894 489.172 304.338 440.514 304.338Z" fill="#FBB33D" stroke="#121212" stroke-width="3.91568"/>
15 | <path d="M441.839 204.042C441.839 224.976 453.647 241.946 468.213 241.946C482.779 241.946 494.586 224.976 494.586 204.042C494.586 183.109 482.779 166.139 468.213 166.139C453.647 166.139 441.839 183.109 441.839 204.042Z" fill="white"/>
16 | <path d="M440.645 219.701C472.817 200.517 480.472 267.494 509.695 261.784C466.655 270.881 436.408 277.01 440.645 219.701Z" fill="#552983"/>
17 | <path fill-rule="evenodd" clip-rule="evenodd" d="M451.649 216.104C448.275 216.12 444.614 217.18 440.577 219.588L440.518 219.623L440.512 219.692C439.453 234.027 440.547 244.413 443.471 251.782C446.396 259.159 451.153 263.51 457.396 265.77C463.631 268.028 471.338 268.197 480.167 267.238C488.997 266.279 498.964 264.188 509.722 261.914L509.67 261.655C502.424 263.07 496.508 259.986 491.194 254.825C486.713 250.473 482.676 244.661 478.646 238.857C477.893 237.773 477.14 236.688 476.384 235.614C471.592 228.801 466.691 222.382 460.966 218.874C458.1 217.117 455.024 216.088 451.649 216.104ZM506.838 262.252C497.158 264.289 488.175 266.101 480.138 266.974C471.323 267.932 463.664 267.758 457.486 265.521C451.317 263.287 446.616 258.993 443.717 251.685C440.82 244.381 439.722 234.063 440.772 219.78C444.754 217.417 448.35 216.384 451.65 216.369C454.967 216.353 457.995 217.364 460.828 219.1C466.499 222.576 471.371 228.948 476.167 235.767C476.92 236.838 477.672 237.92 478.424 239.003C482.454 244.806 486.508 250.644 491.009 255.015C495.64 259.513 500.762 262.476 506.838 262.252Z" fill="#2F1400"/>
18 | <path d="M386.707 204.042C386.707 224.976 398.515 241.946 413.08 241.946C427.646 241.946 439.454 224.976 439.454 204.042C439.454 183.109 427.646 166.139 413.08 166.139C398.515 166.139 386.707 183.109 386.707 204.042Z" fill="white"/>
19 | <path d="M440.384 219.683C408.212 200.598 400.556 267.23 371.333 261.549C414.373 270.6 444.621 276.696 440.384 219.683Z" fill="#552983"/>
20 | <path fill-rule="evenodd" clip-rule="evenodd" d="M429.379 216.104C432.753 216.119 436.414 217.175 440.451 219.57L440.511 219.605L440.516 219.674C441.576 233.936 440.481 244.268 437.558 251.6C434.632 258.938 429.875 263.267 423.632 265.515C417.398 267.761 409.69 267.93 400.861 266.976C392.032 266.021 382.064 263.942 371.306 261.68L371.358 261.42C378.605 262.828 384.521 259.76 389.835 254.626C394.316 250.296 398.352 244.514 402.383 238.74C403.136 237.661 403.889 236.582 404.644 235.514C409.437 228.735 414.337 222.35 420.062 218.86C422.929 217.112 426.005 216.088 429.379 216.104ZM374.198 262.016C383.875 264.042 392.856 265.844 400.89 266.712C409.705 267.665 417.365 267.491 423.542 265.266C429.712 263.044 434.413 258.772 437.311 251.501C440.208 244.236 441.307 233.972 440.257 219.763C436.274 217.411 432.678 216.384 429.378 216.369C426.061 216.353 423.033 217.359 420.2 219.086C414.529 222.544 409.657 228.883 404.861 235.667C404.108 236.732 403.356 237.809 402.604 238.886C398.574 244.659 394.52 250.467 390.019 254.816C385.389 259.289 380.27 262.236 374.198 262.016Z" fill="#2F1400"/>
21 | <path d="M461.719 209.875C461.719 218.219 468.483 224.984 476.828 224.984C485.172 224.984 491.936 218.219 491.936 209.875C491.936 201.531 485.172 194.767 476.828 194.767C468.483 194.767 461.719 201.531 461.719 209.875Z" fill="#7FF2B6"/>
22 | <path d="M476.827 213.587C476.827 216.661 479.319 219.153 482.394 219.153C485.468 219.153 487.96 216.661 487.96 213.587C487.96 210.513 485.468 208.021 482.394 208.021C479.319 208.021 476.827 210.513 476.827 213.587Z" fill="#121212"/>
23 | <path d="M487.165 215.115C487.165 216.067 486.394 216.838 485.442 216.838C484.491 216.838 483.719 216.067 483.719 215.115C483.719 214.164 484.491 213.393 485.442 213.393C486.394 213.393 487.165 214.164 487.165 215.115Z" fill="white"/>
24 | <path d="M415.6 179.456C409.16 174.151 399.638 175.07 394.333 181.51C389.027 187.95 389.946 197.472 396.386 202.778C402.826 208.084 412.348 207.164 417.654 200.724C422.96 194.284 422.04 184.762 415.6 179.456Z" fill="#7FF2B6"/>
25 | <path d="M403.129 188.757C400.757 186.802 397.248 187.141 395.294 189.514C393.339 191.886 393.678 195.395 396.05 197.349C398.423 199.304 401.931 198.965 403.886 196.593C405.841 194.22 405.502 190.712 403.129 188.757Z" fill="#121212"/>
26 | <path d="M395.376 195.764C394.642 195.159 394.537 194.073 395.142 193.339C395.747 192.604 396.833 192.5 397.567 193.105C398.302 193.71 398.406 194.796 397.801 195.53C397.196 196.264 396.111 196.369 395.376 195.764Z" fill="white"/>
27 | <path d="M261.98 442.393C165.089 318.583 81.0596 299.411 -61.6195 377.264C-75.02 384.576 -66.6277 404.818 -51.565 402.338C54.0694 384.944 134.673 400.178 244.406 461.519C257.144 468.64 270.974 453.886 261.98 442.393Z" fill="#121212"/>
28 | <path d="M392.536 146.606C430.794 137.436 456.378 137.94 493.033 148.854C494.556 149.308 494.102 151.457 492.521 151.295C454.634 147.416 429.106 146.577 392.959 149.1C391.35 149.212 390.967 146.982 392.536 146.606Z" fill="#2F1400"/>
29 | <path fill-rule="evenodd" clip-rule="evenodd" d="M392.567 146.735C430.803 137.571 456.364 138.075 492.995 148.982C493.684 149.187 493.919 149.766 493.811 150.279C493.703 150.792 493.251 151.237 492.535 151.164C454.642 147.284 429.106 146.445 392.95 148.968C392.221 149.019 391.777 148.545 391.687 148.014C391.596 147.484 391.858 146.905 392.567 146.735ZM493.071 148.728C456.393 137.807 430.785 137.302 392.505 146.477C391.645 146.683 391.314 147.408 391.425 148.059C391.536 148.709 392.089 149.294 392.969 149.233C429.106 146.71 454.627 147.549 492.508 151.428C493.371 151.516 493.937 150.967 494.071 150.333C494.204 149.699 493.904 148.976 493.071 148.728Z" fill="#2F1400"/>
30 | <path d="M389.488 136.615C430.366 123.645 456.589 124.257 495.623 139.535C497.066 140.099 496.501 142.179 494.966 141.974C454.688 136.61 428.528 135.499 390.024 139.118C388.455 139.265 387.986 137.092 389.488 136.615Z" fill="#2F1400"/>
31 | <path fill-rule="evenodd" clip-rule="evenodd" d="M443.243 127.613C459.768 128.054 476.067 132.021 495.575 139.657C496.226 139.912 496.42 140.5 496.283 141.007C496.146 141.515 495.678 141.934 494.983 141.842C454.698 136.476 428.528 135.365 390.012 138.985C389.302 139.051 388.847 138.599 388.734 138.071C388.62 137.545 388.85 136.955 389.528 136.74C409.959 130.258 426.719 127.172 443.243 127.613ZM443.251 127.348C426.686 126.906 409.895 130 389.448 136.487C388.623 136.749 388.336 137.485 388.475 138.127C388.612 138.769 389.177 139.329 390.037 139.249C428.529 135.631 454.678 136.741 494.948 142.104C495.789 142.216 496.371 141.698 496.539 141.076C496.707 140.454 496.462 139.72 495.671 139.41C476.145 131.768 459.815 127.79 443.251 127.348Z" fill="#2F1400"/>
32 | <path d="M389.488 141.916C430.366 128.946 456.589 129.557 495.623 144.836C497.066 145.4 496.501 147.48 494.966 147.275C454.688 141.911 428.528 140.8 390.024 144.419C388.455 144.566 387.986 142.392 389.488 141.916Z" fill="#2F1400"/>
33 | <path fill-rule="evenodd" clip-rule="evenodd" d="M443.243 132.915C459.768 133.356 476.067 137.323 495.575 144.959C496.226 145.214 496.42 145.802 496.283 146.309C496.146 146.817 495.678 147.236 494.983 147.143C454.698 141.778 428.528 140.667 390.012 144.286C389.302 144.353 388.847 143.901 388.734 143.373C388.62 142.846 388.85 142.257 389.528 142.042C409.959 135.559 426.719 132.474 443.243 132.915ZM443.251 132.65C426.686 132.208 409.895 135.302 389.448 141.789C388.623 142.051 388.336 142.786 388.475 143.429C388.612 144.071 389.177 144.631 390.037 144.55C428.529 140.933 454.678 142.043 494.948 147.406C495.789 147.518 496.371 147 496.539 146.378C496.707 145.755 496.462 145.022 495.671 144.712C476.145 137.069 459.815 133.092 443.251 132.65Z" fill="#2F1400"/>
34 | <path d="M183.586 263.436C148.583 263.436 120.208 235.061 120.208 200.058C120.208 165.055 148.583 136.68 183.586 136.68C218.589 136.68 246.964 165.055 246.964 200.058C246.964 235.061 218.589 263.436 183.586 263.436Z" fill="#FBB33D" stroke="#121212" stroke-width="3.91568"/>
35 | <path fill-rule="evenodd" clip-rule="evenodd" d="M143.709 219.523L220.059 219.548L220.061 213.879L143.711 213.853L143.709 219.523Z" fill="#121212"/>
36 | <path d="M111.076 203.335C139.658 145.499 162.226 199.586 187.333 141.063C188.669 137.949 185.796 134.735 182.533 135.65C112.018 155.427 100.571 166.353 102.777 202.066C103.044 206.391 109.156 207.22 111.076 203.335Z" fill="#F9748B"/>
37 | <path d="M124.634 230.821C138.563 162.308 175.946 213.375 186.192 145.412C186.698 142.058 183.095 139.685 180.162 141.391C112.885 180.535 104.388 194.699 116.283 231.612C117.617 235.751 123.767 235.084 124.634 230.821Z" fill="#F9748B"/>
38 | <path d="M255.916 203.335C227.334 145.499 204.766 199.586 179.659 141.063C178.323 137.949 181.196 134.735 184.459 135.65C254.975 155.427 266.421 166.353 264.216 202.066C263.949 206.391 257.836 207.22 255.916 203.335Z" fill="#F9748B"/>
39 | <path d="M242.358 230.821C228.429 162.308 191.046 213.375 180.799 145.412C180.294 142.058 183.897 139.685 186.83 141.391C254.107 180.535 262.604 194.699 250.709 231.612C249.375 235.751 243.225 235.084 242.358 230.821Z" fill="#F9748B"/>
40 | <path d="M196.628 170.979C203.65 179.252 210.203 181.817 223.002 181.513C223.644 181.497 223.747 180.609 223.129 180.432C212.194 177.301 205.833 174.67 197.31 170.155C196.768 169.868 196.231 170.511 196.628 170.979Z" fill="#121212"/>
41 | <path fill-rule="evenodd" clip-rule="evenodd" d="M196.544 170.224C196.366 170.439 196.325 170.768 196.557 171.041C200.074 175.185 203.48 177.906 207.614 179.551C211.747 181.195 216.599 181.76 223.004 181.608C223.378 181.599 223.599 181.332 223.632 181.045C223.666 180.758 223.514 180.444 223.155 180.342C212.226 177.213 205.872 174.585 197.355 170.073C197.04 169.906 196.723 170.01 196.544 170.224ZM196.69 170.345C196.816 170.193 197.038 170.119 197.266 170.24C205.795 174.758 212.162 177.391 223.103 180.523C223.363 180.598 223.468 180.817 223.444 181.023C223.421 181.228 223.268 181.413 223 181.419C216.606 181.571 211.783 181.006 207.684 179.376C203.587 177.746 200.205 175.047 196.701 170.918C196.535 170.723 196.564 170.497 196.69 170.345Z" fill="#121212"/>
42 | <path d="M142.579 179.434C149.6 171.16 156.153 168.595 168.952 168.9C169.595 168.915 169.697 169.803 169.079 169.98C158.144 173.111 151.784 175.742 143.26 180.257C142.718 180.544 142.181 179.902 142.579 179.434Z" fill="#121212"/>
43 | <path fill-rule="evenodd" clip-rule="evenodd" d="M142.494 180.188C142.316 179.973 142.275 179.644 142.506 179.372C146.024 175.227 149.429 172.506 153.564 170.861C157.696 169.217 162.549 168.652 168.954 168.804C169.328 168.813 169.548 169.08 169.582 169.368C169.615 169.654 169.464 169.968 169.105 170.07C158.176 173.2 151.822 175.827 143.304 180.339C142.99 180.506 142.672 180.402 142.494 180.188ZM142.64 180.067C142.766 180.219 142.988 180.293 143.216 180.172C151.745 175.654 158.111 173.021 169.053 169.889C169.312 169.814 169.418 169.595 169.394 169.389C169.37 169.184 169.218 169 168.95 168.993C162.556 168.841 157.732 169.406 153.634 171.037C149.536 172.667 146.155 175.365 142.65 179.494C142.485 179.689 142.513 179.916 142.64 180.067Z" fill="#121212"/>
44 | <path d="M201.35 193.348C201.35 198.514 205.539 202.703 210.705 202.703C215.872 202.703 220.06 198.514 220.06 193.348C220.06 188.181 215.872 183.993 210.705 183.993C205.539 183.993 201.35 188.181 201.35 193.348Z" fill="#121212"/>
45 | <path d="M147.301 193.348C147.301 198.514 151.489 202.703 156.655 202.703C161.822 202.703 166.01 198.514 166.01 193.348C166.01 188.181 161.822 183.993 156.655 183.993C151.489 183.993 147.301 188.181 147.301 193.348Z" fill="#121212"/>
46 | <path d="M306.441 201.803C263.882 201.803 229.381 167.302 229.381 124.742C229.381 82.183 263.882 47.6818 306.441 47.6818C349.001 47.6818 383.502 82.183 383.502 124.742C383.502 167.302 349.001 201.803 306.441 201.803Z" fill="#FBB33D" stroke="#121212" stroke-width="3.91568"/>
47 | <path d="M312.681 121.969C312.681 134.604 322.923 144.847 335.558 144.847C348.193 144.847 358.436 134.604 358.436 121.969C358.436 109.334 348.193 99.0918 335.558 99.0918C322.923 99.0918 312.681 109.334 312.681 121.969Z" fill="white"/>
48 | <path d="M322.617 121.969C322.617 129.116 328.411 134.91 335.558 134.91C342.705 134.91 348.499 129.116 348.499 121.969C348.499 114.822 342.705 109.028 335.558 109.028C328.411 109.028 322.617 114.822 322.617 121.969Z" fill="#F9748B"/>
49 | <path d="M330.012 121.97C330.012 125.033 332.495 127.516 335.558 127.516C338.621 127.516 341.104 125.033 341.104 121.97C341.104 118.907 338.621 116.424 335.558 116.424C332.495 116.424 330.012 118.907 330.012 121.97Z" fill="#121212"/>
50 | <path d="M251.443 121.969C251.443 134.604 261.686 144.847 274.321 144.847C286.955 144.847 297.198 134.604 297.198 121.969C297.198 109.334 286.955 99.0918 274.321 99.0918C261.686 99.0918 251.443 109.334 251.443 121.969Z" fill="white"/>
51 | <path d="M261.38 121.969C261.38 129.116 267.174 134.91 274.321 134.91C281.468 134.91 287.262 129.116 287.262 121.969C287.262 114.822 281.468 109.028 274.321 109.028C267.174 109.028 261.38 114.822 261.38 121.969Z" fill="#F9748B"/>
52 | <path d="M268.775 121.97C268.775 125.033 271.258 127.516 274.321 127.516C277.384 127.516 279.867 125.033 279.867 121.97C279.867 118.907 277.384 116.424 274.321 116.424C271.258 116.424 268.775 118.907 268.775 121.97Z" fill="#121212"/>
53 | <path fill-rule="evenodd" clip-rule="evenodd" d="M306.328 149.017C322.062 148.736 338.121 154.535 344.578 168.145L340.403 170.126C335.075 158.895 321.323 153.371 306.41 153.638C291.529 153.905 276.654 159.949 269.656 170.42L265.813 167.852C273.951 155.676 290.561 149.3 306.328 149.017Z" fill="#121212"/>
54 | <path d="M376.229 97.4751C376.229 12.8835 236.538 15.697 236.538 97.4751C300.263 62.4058 317.969 62.1458 376.229 97.4751Z" fill="#5B4AA8"/>
55 | <path d="M407.426 84.1872C407.426 74.5515 399.615 66.7402 389.979 66.7402C380.343 66.7402 372.532 74.5515 372.532 84.1872V110.993C372.532 120.629 380.343 128.44 389.979 128.44C399.615 128.44 407.426 120.629 407.426 110.993V84.1872Z" fill="#5B4AA8"/>
56 | <path d="M240.119 87.4225C240.119 77.7869 232.308 69.9756 222.672 69.9756C213.037 69.9756 205.225 77.7869 205.225 87.4225V114.228C205.225 123.864 213.037 131.675 222.672 131.675C232.308 131.675 240.119 123.864 240.119 114.228V87.4225Z" fill="#5B4AA8"/>
57 | <path d="M287.872 99.1984C277.902 86.4581 269.255 84.4853 254.573 92.4964C253.194 93.2488 254.058 95.3319 255.608 95.0766C266.478 93.2868 274.772 94.8544 286.064 101.166C287.375 101.899 288.798 100.381 287.872 99.1984Z" fill="#121212"/>
58 | <path d="M325.124 99.1984C335.095 86.4581 343.741 84.4853 358.423 92.4964C359.802 93.2488 358.939 95.3319 357.389 95.0766C346.519 93.2868 338.224 94.8544 326.933 101.166C325.622 101.899 324.199 100.381 325.124 99.1984Z" fill="#121212"/>
59 | <path d="M661.749 314.55C617.318 314.55 581.286 278.645 581.286 234.338C581.286 190.031 617.318 154.126 661.749 154.126C706.181 154.126 742.213 190.031 742.213 234.338C742.213 278.645 706.181 314.55 661.749 314.55Z" fill="#FBB33D" stroke="#121212" stroke-width="4.75934"/>
60 | <path d="M603.848 245.114C603.848 258.208 614.497 268.823 627.633 268.823C640.769 268.823 651.418 258.208 651.418 245.114C651.418 232.02 640.769 221.405 627.633 221.405C614.497 221.405 603.848 232.02 603.848 245.114Z" fill="white"/>
61 | <path d="M614.178 245.114C614.178 252.521 620.202 258.525 627.633 258.525C635.063 258.525 641.087 252.521 641.087 245.114C641.087 237.707 635.063 231.703 627.633 231.703C620.202 231.703 614.178 237.707 614.178 245.114Z" fill="#7FF2B6"/>
62 | <path d="M621.867 245.114C621.867 248.288 624.448 250.861 627.633 250.861C630.818 250.861 633.399 248.288 633.399 245.114C633.399 241.939 630.818 239.366 627.633 239.366C624.448 239.366 621.867 241.939 621.867 245.114Z" fill="#121212"/>
63 | <path d="M672.321 245.352C672.321 258.446 682.97 269.061 696.106 269.061C709.242 269.061 719.892 258.446 719.892 245.352C719.892 232.258 709.242 221.644 696.106 221.644C682.97 221.644 672.321 232.258 672.321 245.352Z" fill="white"/>
64 | <path d="M682.652 245.352C682.652 252.759 688.676 258.764 696.107 258.764C703.537 258.764 709.561 252.759 709.561 245.352C709.561 237.946 703.537 231.941 696.107 231.941C688.676 231.941 682.652 237.946 682.652 245.352Z" fill="#7FF2B6"/>
65 | <path d="M690.34 245.352C690.34 248.526 692.922 251.1 696.106 251.1C699.291 251.1 701.873 248.526 701.873 245.352C701.873 242.178 699.291 239.604 696.106 239.604C692.922 239.604 690.34 242.178 690.34 245.352Z" fill="#121212"/>
66 | <path d="M630.997 291.933C630.997 301.389 644.819 309.056 661.87 309.056C678.92 309.056 692.743 301.389 692.743 291.933C692.743 282.476 678.92 274.81 661.87 274.81C644.819 274.81 630.997 282.476 630.997 291.933Z" fill="#121212"/>
67 | <path d="M603.175 207.753C595.452 207.753 589.027 201.421 590.914 193.956C593.881 182.213 600.603 171.348 610.443 162.709C624.05 150.762 642.506 144.051 661.749 144.051C680.993 144.051 699.448 150.762 713.055 162.709C722.895 171.348 729.617 182.213 732.585 193.956C734.471 201.421 728.046 207.753 720.323 207.753C712.6 207.753 706.563 201.282 703.575 194.183C701.365 188.932 697.876 184.106 693.28 180.071C684.917 172.729 673.575 168.605 661.749 168.605C649.923 168.605 638.581 172.729 630.219 180.071C625.623 184.106 622.134 188.932 619.923 194.183C616.935 201.282 610.898 207.753 603.175 207.753Z" fill="#5B4AA8"/>
68 | <path d="M694.781 164.777C692.806 157.431 685.231 153.071 677.862 155.04C670.492 157.008 666.118 164.559 668.093 171.905L677.856 208.222C679.83 215.568 687.406 219.928 694.775 217.96C702.145 215.991 706.519 208.44 704.544 201.094L694.781 164.777Z" fill="#552983"/>
69 | <path d="M655.771 171.905C657.746 164.559 653.372 157.008 646.003 155.04C638.633 153.071 631.058 157.431 629.083 164.777L619.32 201.094C617.346 208.44 621.719 215.991 629.089 217.959C636.459 219.928 644.034 215.568 646.008 208.222L655.771 171.905Z" fill="#552983"/>
70 | <path d="M639.886 144.052C639.886 156.088 649.675 165.845 661.75 165.845C673.824 165.845 683.613 156.088 683.613 144.052C683.613 132.016 673.824 122.259 661.75 122.259C649.675 122.259 639.886 132.016 639.886 144.052Z" fill="#552983"/>
71 | <path d="M675.684 172.43C675.684 164.825 669.499 158.66 661.87 158.66C654.24 158.66 648.055 164.825 648.055 172.43V210.029C648.055 217.634 654.24 223.8 661.87 223.8C669.499 223.8 675.684 217.634 675.684 210.029V172.43Z" fill="#5B4AA8"/>
72 | <path d="M727.58 238.289C727.58 231.769 728.886 225.501 731.226 220.796C733.566 216.091 736.757 213.314 740.134 213.045C743.51 212.776 746.809 215.036 749.342 219.352C751.875 223.668 753.445 229.707 753.723 236.205C754.002 242.703 752.968 249.157 750.838 254.218C748.707 259.279 745.645 262.555 742.292 263.361C738.939 264.166 735.554 262.439 732.845 258.541C730.136 254.642 728.314 248.874 727.758 242.443L731.057 241.382C731.471 246.17 732.828 250.465 734.845 253.368C736.862 256.27 739.382 257.556 741.879 256.956C744.375 256.357 746.655 253.918 748.241 250.149C749.828 246.381 750.598 241.575 750.39 236.737C750.183 231.899 749.014 227.403 747.128 224.189C745.242 220.976 742.785 219.293 740.272 219.493C737.758 219.694 735.381 221.762 733.639 225.265C731.897 228.768 730.925 233.434 730.925 238.289H727.58Z" fill="#FBB33D"/>
73 | <path d="M595.919 238.289C595.919 231.769 594.613 225.501 592.273 220.796C589.934 216.091 586.742 213.314 583.366 213.045C579.989 212.776 576.69 215.036 574.157 219.352C571.624 223.668 570.055 229.707 569.776 236.205C569.497 242.703 570.531 249.157 572.662 254.218C574.792 259.279 577.854 262.555 581.207 263.361C584.561 264.166 587.946 262.439 590.654 258.541C593.363 254.642 595.186 248.874 595.741 242.443L592.442 241.382C592.028 246.17 590.671 250.465 588.654 253.368C586.638 256.27 584.117 257.556 581.621 256.956C579.124 256.357 576.844 253.918 575.258 250.149C573.672 246.381 572.902 241.575 573.109 236.737C573.317 231.899 574.486 227.403 576.371 224.189C578.257 220.976 580.714 219.293 583.228 219.493C585.741 219.694 588.118 221.762 589.86 225.265C591.602 228.768 592.574 233.434 592.574 238.289H595.919Z" fill="#FBB33D"/>
74 | <g clip-path="url(#clip0_6_2257)">
75 | <path d="M66.8755 214.558C38.3946 214.558 15.3062 191.469 15.3062 162.988C15.3062 134.508 38.3946 111.419 66.8755 111.419C95.3565 111.419 118.445 134.508 118.445 162.988C118.445 191.469 95.3565 214.558 66.8755 214.558Z" fill="#FBB33D" stroke="#121212" stroke-width="3.91568"/>
76 | <path d="M110.874 149.64C116.166 154.913 115.091 164.572 108.472 171.214C101.854 177.857 92.1985 178.967 86.9066 173.694C81.6147 168.421 82.69 158.762 89.3084 152.12C95.9269 145.477 105.582 144.367 110.874 149.64Z" fill="#AD00FF"/>
77 | <path d="M108.854 151.082C81.3746 157.637 72.628 163.899 69.5469 179.933C95.2591 193.555 102.993 185.141 108.854 151.082Z" fill="white"/>
78 | <path fill-rule="evenodd" clip-rule="evenodd" d="M108.949 150.983L108.837 151.01C95.0961 154.288 86.0262 157.495 80.006 161.894C73.9799 166.297 71.015 171.89 69.4718 179.921L69.4612 179.977L69.511 180.003C75.942 183.41 81.2558 185.443 85.7015 186.04C90.1502 186.637 93.7325 185.795 96.6919 183.45C99.6481 181.109 101.974 177.274 103.927 171.903C105.881 166.531 107.464 159.614 108.93 151.097L108.949 150.983ZM108.759 151.186C107.3 159.647 105.724 166.516 103.784 171.851C101.835 177.211 99.5211 181.015 96.5971 183.331C93.6763 185.645 90.1379 186.481 85.7218 185.888C81.3141 185.297 76.0351 183.283 69.6324 179.894C71.1733 171.921 74.1225 166.382 80.0961 162.017C86.0731 157.649 95.0834 154.453 108.759 151.186Z" fill="white"/>
79 | <path d="M83.0564 171.998C83.0564 176.719 86.8837 180.546 91.6049 180.546C96.3261 180.546 100.153 176.719 100.153 171.998C100.153 167.276 96.3261 163.449 91.6049 163.449C86.8837 163.449 83.0564 167.276 83.0564 171.998Z" fill="#8D4400"/>
80 | <path d="M91.6049 170.47C91.6049 172.494 93.2451 174.134 95.2685 174.134C97.2919 174.134 98.9321 172.494 98.9321 170.47C98.9321 168.447 97.2919 166.807 95.2685 166.807C93.2451 166.807 91.6049 168.447 91.6049 170.47Z" fill="#121212"/>
81 | <path d="M22.7932 149.64C17.5013 154.913 18.5766 164.572 25.1951 171.214C31.8135 177.857 41.4687 178.967 46.7607 173.694C52.0526 168.421 50.9772 158.762 44.3588 152.12C37.7404 145.477 28.0851 144.367 22.7932 149.64Z" fill="#AD00FF"/>
82 | <path d="M24.9729 151.082C52.4528 157.637 61.1994 163.899 64.2805 179.933C38.5683 193.555 30.8346 185.141 24.9729 151.082Z" fill="white"/>
83 | <path fill-rule="evenodd" clip-rule="evenodd" d="M24.8779 150.983L24.9905 151.01C38.7311 154.288 47.801 157.495 53.8211 161.894C59.8473 166.297 62.8121 171.89 64.3553 179.921L64.366 179.977L64.3161 180.003C57.8851 183.41 52.5713 185.443 48.1257 186.04C43.677 186.637 40.0946 185.795 37.1353 183.45C34.1791 181.109 31.8531 177.274 29.9 171.903C27.9466 166.531 26.3632 159.614 24.8976 151.097L24.8779 150.983ZM25.0676 151.186C26.5273 159.647 28.1034 166.516 30.0434 171.851C31.9925 177.211 34.306 181.015 37.23 183.331C40.1508 185.645 43.6893 186.481 48.1054 185.888C52.5131 185.297 57.7921 183.283 64.1947 179.894C62.6539 171.921 59.7046 166.382 53.7311 162.017C47.7541 157.649 38.7438 154.453 25.0676 151.186Z" fill="white"/>
84 | <path d="M41.0777 172.76C41.0777 177.482 44.9049 181.309 49.6261 181.309C54.3473 181.309 58.1746 177.482 58.1746 172.76C58.1746 168.039 54.3473 164.212 49.6261 164.212C44.9049 164.212 41.0777 168.039 41.0777 172.76Z" fill="#8D4400"/>
85 | <path d="M49.6259 171.233C49.6259 173.256 51.2661 174.897 53.2895 174.897C55.3129 174.897 56.9531 173.256 56.9531 171.233C56.9531 169.21 55.3129 167.569 53.2895 167.569C51.2661 167.569 49.6259 169.21 49.6259 171.233Z" fill="#121212"/>
86 | <path d="M98.9321 197.688C76.3782 183.939 69.2026 184.045 65.8005 197.688H98.9321Z" fill="#F9748B"/>
87 | <path d="M34.8188 197.685C57.3727 183.936 64.5483 184.042 67.9504 197.685H34.8188Z" fill="#F9748B"/>
88 | <path d="M92.0963 197.688C71.7934 210.75 60.7459 210.552 41.5995 197.688H92.0963Z" fill="#F9748B"/>
89 | <path d="M18.1866 154.235C14.7529 146.475 13.2857 137.989 13.9151 129.528C14.5444 121.066 17.2509 112.89 21.7947 105.724C26.3386 98.5584 32.3947 99.6948 39.78 95.517C47.1652 91.3393 55.4668 89.0474 63.9494 88.8443C72.432 88.6413 80.8337 90.5333 88.4104 94.3529C95.9871 98.1725 102.69 96.7307 107.571 103.671C112.453 110.611 115.547 118.648 116.581 127.07C117.614 135.492 116.555 144.038 113.496 151.953L65.3689 133.355L18.1866 154.235Z" fill="#5B4AA8"/>
90 | </g>
91 | <defs>
92 | <clipPath id="clip0_6_2257">
93 | <rect width="127.616" height="141.813" fill="white" transform="matrix(-1 0 0 1 127.325 70.7881)"/>
94 | </clipPath>
95 | </defs>
96 | </svg>
97 | 


--------------------------------------------------------------------------------