Create game hooks

Selvio · Selvio · commit ce770098088a · 2024-09-10T17:55:51.000-05:00
diff --git a/package.json b/package.json
@@ -12,9 +12,13 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@noble/ed25519": "^2.1.0",
+    "@noble/hashes": "^1.5.0",
     "@tanstack/react-query": "^5.55.4",
+    "bech32-buffer": "^0.2.1",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
+    "lucid-cardano": "^0.10.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "use-custom-compare": "^1.4.0",
@@ -42,6 +46,8 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.3.0",
     "yarn": "^1.22.22"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,7 @@ import InitialView from "./components/InitialView";
 import GameView from "./components/GameView";
 import AppContextProvider from "./context/AppContextProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import GameContextProvider from "./context/GameContextProvider";
 
 const queryClient = new QueryClient();
 
@@ -13,7 +14,9 @@ export default function App() {
     <QueryClientProvider client={queryClient}>
       <AppContextProvider>
         {isGameStarted ? (
-          <GameView />
+          <GameContextProvider>
+            <GameView />
+          </GameContextProvider>
         ) : (
           <InitialView startGame={() => setIsGameStarted(true)} />
         )}
diff --git a/src/components/InitialView/InitialView.tsx b/src/components/InitialView/InitialView.tsx
@@ -7,6 +7,7 @@ import Modal from "../Modal";
 import SelectContinentDialog from "../SelectContinentDialog";
 import Layout from "../Layout";
 import GlobalTotals from "../GlobalTotals";
+import { REGION } from "../../constants";
 
 interface InitialViewProps {
   startGame: () => void;
@@ -17,18 +18,22 @@ const InitialView: FC<InitialViewProps> = ({ startGame }) => {
   const [isSelectContinentModalOpen, setIsSelectContinentModalOpen] =
     useState(false);
 
+  const handleClickPlay = () => {
+    if (REGION) {
+      startGame();
+    } else {
+      setIsSelectContinentModalOpen(true);
+    }
+  };
+
   return (
     <Layout>
       <img
         src={hydraText}
         alt="Hydra"
         className="w-full max-w-5xl relative -bottom-14 -mt-14 z-10 pointer-events-none"
       />
-      <Button
-        className="w-96 h-16"
-        onClick={() => setIsSelectContinentModalOpen(true)}
-        withDecoration
-      >
+      <Button className="w-96 h-16" onClick={handleClickPlay} withDecoration>
         Play Doom on Hydra
       </Button>
       <div className="grid grid-cols-2 max-w-6xl w-full mt-32 gap-8 py-6">
diff --git a/src/components/SelectContinentDialog/SelectContinentDialog.tsx b/src/components/SelectContinentDialog/SelectContinentDialog.tsx
@@ -1,41 +1,41 @@
-import { FC } from "react";
+import { ChangeEventHandler, FC } from "react";
 import Modal from "../Modal";
 import Button from "../Button";
+import { REGIONS } from "../../constants";
+import { useAppContext } from "../../context/useAppContext";
 
 interface SelectContinentDialogProps {
   close: () => void;
   isOpen: boolean;
   startGame: () => void;
 }
 
-const continents = [
-  { name: "Ohio, NA", value: "us-east-2" },
-  { name: "Oregon, NA", value: "us-west-2" },
-  { name: "Frankfurt, Europe", value: "eu-central-1" },
-  { name: "Cape Town, Africa", value: "af-south-1" },
-  { name: "Melbourne, Australia", value: "ap-southeast-4" },
-  { name: "Seoul, Asia", value: "ap-northeast-2" },
-  { name: "Sao Paulo, SA", value: "sa-east-1" },
-];
-
 const SelectContinentDialog: FC<SelectContinentDialogProps> = ({
   close,
   isOpen,
   startGame,
 }) => {
+  const { region, setRegion } = useAppContext();
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    setRegion(REGIONS.find((r) => r.value === event.target.value)!);
+  };
+
   return (
     <Modal isOpen={isOpen} close={close}>
       <h1 className="text-5xl mb-20 text-center">Select your continent</h1>
       <form>
         <ul className="grid grid-cols-2 gap-y-8 text-3xl gap-x-40 mb-20">
-          {continents.map((continent) => (
+          {REGIONS.map((continent) => (
             <li key={continent.value}>
-              <label className="flex gap-4 items-center">
+              <label className="flex gap-4 items-center cursor-pointer">
                 <input
-                  className="h-6 w-6"
+                  className="h-6 w-6 cursor-pointer"
                   name="continent"
                   type="radio"
                   value={continent.value}
+                  checked={continent.value === region.value}
+                  onChange={handleChange}
                 />
                 {continent.name}
               </label>
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,7 +1,17 @@
 export const CABINET_KEY = import.meta.env.VITE_CABINET_KEY;
 export const GLOBAL_MAX_SPEED = 30 * 100;
-export const HANDLE_CACHE_KEY = "playerHandleCache";
+export const HANDLE_CACHE_KEY = "player-handle-cache";
+export const HYDRA_DOOM_SESSION_KEY = "hydra-doom-session-key";
 export const MAX_SPEED = 40;
 export const REGION = import.meta.env.VITE_REGION;
+export const REGIONS = [
+  { name: "Ohio, NA", value: "us-east-2" },
+  { name: "Oregon, NA", value: "us-west-2" },
+  { name: "Frankfurt, Europe", value: "eu-central-1" },
+  { name: "Cape Town, Africa", value: "af-south-1" },
+  { name: "Melbourne, Australia", value: "ap-southeast-4" },
+  { name: "Seoul, Asia", value: "ap-northeast-2" },
+  { name: "Sao Paulo, SA", value: "sa-east-1" },
+];
 export const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 export const TIC_RATE_MAGIC = 35; // 35 is the ticrate in DOOM WASM they use to calculate time.
diff --git a/src/context/AppContextProvider.tsx b/src/context/AppContextProvider.tsx
@@ -1,20 +1,24 @@
-import { FC, PropsWithChildren, useMemo } from "react";
+import { FC, PropsWithChildren, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { AppContext } from "./useAppContext";
-import { GameStatistics } from "../types";
-import { SERVER_URL } from "../constants";
+import { GameStatistics, Region } from "../types";
+import { REGIONS, SERVER_URL } from "../constants";
 
 const AppContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [region, setRegion] = useState<Region>(REGIONS[0]);
   const globalQuery = useQuery<GameStatistics>({
     queryKey: ["global"],
     queryFn: async () => {
-      const response = await fetch(`${SERVER_URL}/global`);
+      const response = await fetch(`${SERVER_URL}global`);
       return response.json();
     },
-    // refetchInterval: 1000,
+    refetchInterval: 1000,
   });
 
-  const value = useMemo(() => ({ globalQuery }), [globalQuery]);
+  const value = useMemo(
+    () => ({ globalQuery, region, setRegion }),
+    [globalQuery, region],
+  );
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };
diff --git a/src/context/GameContextProvider.tsx b/src/context/GameContextProvider.tsx
@@ -0,0 +1,28 @@
+import { FC, PropsWithChildren, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { GameContext } from "./useGameContext";
+import { GameStatistics } from "../types";
+import { CABINET_KEY, REGION, SERVER_URL } from "../constants";
+import useAddress from "../hooks/useAddress";
+import { useAppContext } from "./useAppContext";
+
+const GameContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { region } = useAppContext();
+  const address = useAddress();
+  const newGameQuery = useQuery<GameStatistics>({
+    queryKey: ["newGame", address, region.value],
+    queryFn: async () => {
+      const response = await fetch(
+        `${SERVER_URL}new_game?address=${address}&region=${REGION ?? region.value}&reserved=${!!CABINET_KEY}`,
+      );
+      return response.json();
+    },
+    enabled: !!address,
+  });
+
+  const value = useMemo(() => ({ newGameQuery }), [newGameQuery]);
+
+  return <GameContext.Provider value={value}>{children}</GameContext.Provider>;
+};
+
+export default GameContextProvider;
diff --git a/src/context/useAppContext.ts b/src/context/useAppContext.ts
@@ -1,13 +1,18 @@
-import { createContext, useContext } from "react";
-import { GameStatistics } from "../types";
+import { createContext, Dispatch, useContext } from "react";
+import { GameStatistics, Region } from "../types";
 import { UseQueryResult } from "@tanstack/react-query";
+import { REGIONS } from "../constants";
 
 interface AppContextInterface {
   globalQuery?: UseQueryResult<GameStatistics, Error>;
+  region: Region;
+  setRegion: Dispatch<React.SetStateAction<Region>>;
 }
 
 export const AppContext = createContext<AppContextInterface>({
   globalQuery: undefined,
+  region: REGIONS[0],
+  setRegion: () => {},
 });
 
 export const useAppContext = () => {
diff --git a/src/context/useGameContext.ts b/src/context/useGameContext.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { GameStatistics } from "../types";
+import { UseQueryResult } from "@tanstack/react-query";
+
+interface GameContextInterface {
+  newGameQuery?: UseQueryResult<GameStatistics, Error>;
+}
+
+export const GameContext = createContext<GameContextInterface>({
+  newGameQuery: undefined,
+});
+
+export const useGameContext = () => {
+  const context = useContext(GameContext);
+  return context;
+};
diff --git a/src/hooks/useAddress.ts b/src/hooks/useAddress.ts
@@ -0,0 +1,28 @@
+import { Lucid } from "lucid-cardano";
+import { useCallback, useEffect, useState } from "react";
+import useKeys from "./useKeys";
+
+const useAddress = () => {
+  const [address, setAddress] = useState<string>();
+  const { sessionKey } = useKeys();
+
+  const generateAddress = useCallback(async () => {
+    if (sessionKey) {
+      const lucid = await Lucid.new(undefined, "Preprod");
+      const val = await lucid
+        .selectWalletFromPrivateKey(sessionKey)
+        .wallet.address();
+      setAddress(val);
+    }
+  }, [sessionKey]);
+
+  useEffect(() => {
+    if (!address) {
+      generateAddress();
+    }
+  }, [address, generateAddress]);
+
+  return address;
+};
+
+export default useAddress;
diff --git a/src/hooks/useKeys.ts b/src/hooks/useKeys.ts
@@ -0,0 +1,58 @@
+import { useLocalStorage } from "usehooks-ts";
+import { HYDRA_DOOM_SESSION_KEY } from "../constants";
+import { useCallback, useEffect, useState } from "react";
+import { Lucid } from "lucid-cardano";
+import * as bech32 from "bech32-buffer";
+import * as ed25519 from "@noble/ed25519";
+import { blake2b } from "@noble/hashes/blake2b";
+import { toHex } from "../utils/numbers";
+
+interface Keys {
+  privateKey?: string;
+  sessionKey?: string;
+  sessionPk?: string;
+  sessionPkh?: string;
+}
+
+const useKeys = () => {
+  const [sessionKey, setSessionKey] = useLocalStorage<string>(
+    HYDRA_DOOM_SESSION_KEY,
+    "",
+  );
+  const [keys, setKeys] = useState<Keys>({
+    privateKey: undefined,
+    sessionKey: undefined,
+    sessionPk: undefined,
+    sessionPkh: undefined,
+  });
+
+  const generateKeys = useCallback(async () => {
+    let key = sessionKey;
+    if (!sessionKey) {
+      console.log("Generating new session key");
+      const lucid = await Lucid.new(undefined, "Preprod");
+      key = lucid.utils.generatePrivateKey();
+      setSessionKey(key);
+    }
+
+    const decodedSessionKey = Array.from(bech32.decode(key).data)
+      .map(toHex)
+      .join("");
+    const sessionPk = await ed25519.getPublicKeyAsync(decodedSessionKey);
+    const sessionPkh = blake2b(sessionPk, { dkLen: 224 / 8 });
+    setKeys({
+      privateKey: decodedSessionKey,
+      sessionKey,
+      sessionPk: ed25519.etc.bytesToHex(sessionPk),
+      sessionPkh: ed25519.etc.bytesToHex(sessionPkh),
+    });
+  }, [sessionKey, setSessionKey]);
+
+  useEffect(() => {
+    generateKeys();
+  }, [generateKeys, sessionKey]);
+
+  return keys;
+};
+
+export default useKeys;
diff --git a/src/types.ts b/src/types.ts
@@ -25,3 +25,8 @@ export interface GameStatistics {
   total_secrets: number;
   transactions: number;
 }
+
+export interface Region {
+  name: string;
+  value: string;
+}
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
@@ -15,3 +15,7 @@ export const formatPlayTime = (time: number) => {
 
   return `${String(days).padStart(2, "0")}:${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(Math.trunc(playTimeSeconds)).padStart(2, "0")}`;
 };
+
+export const toHex = (i: number) => {
+  return ("0" + i.toString(16)).slice(-2);
+};
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,18 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import topLevelAwait from "vite-plugin-top-level-await";
+import wasm from "vite-plugin-wasm";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), topLevelAwait(), wasm()],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: "ES2022",
+    },
+    exclude: ["lucid-cardano"],
+  },
+  build: {
+    target: "ES2022",
+  },
 });
diff --git a/yarn.lock b/yarn.lock
