README.md

@@ -1,6 +1,6 @@
-# Tomecraft Web
+# Tomecraft
 
-This is a client for a tactical card game server. It is made using [my Deno-React-Web-Starter template repository](https://github.com/snendev/deno-react-web-starter).
+This is a client for a tactical card game server. It is made using [my Deno-React-Web-Starter template repository](https://github.com/sullivansean27/deno-react-web-starter).
 
 Deployed server is at http://www.tomecraft.xyz/. Code for the websocket server was written by @stryan.
 

client/api/auth.ts

@@ -1,14 +1,7 @@
-import {initializeApp} from 'firebase/app'
-import {
-  getAuth,
-  onAuthStateChanged,
-  createUserWithEmailAndPassword,
-  signInWithEmailAndPassword,
-  GoogleAuthProvider,
-  signInWithPopup,
-} from 'firebase/auth'
+import firebase from 'firebase'
+import 'firebase/auth'
 
-const app = initializeApp({
+const app = firebase.initializeApp({
   apiKey: "AIzaSyBICkyQIt-9lTsxHvRS1MOlZ-UdFVj8rsA",
   authDomain: "tomecraft-87ce5.firebaseapp.com",
   projectId: "tomecraft-87ce5",
@@ -17,11 +10,11 @@ const app = initializeApp({
   appId: "1:1021868917316:web:6c58534dd0ed491beab211",
 })
 
-const auth = getAuth(app)
+const auth = app.auth()
 
 // auto-login
 export function subscribeToAuthState(handleUser: (user: {uid: string; displayName: string} | null) => void) {
-  return onAuthStateChanged(auth, handleUser)
+  return auth.onAuthStateChanged(handleUser)
 }
 
 ///
@@ -29,11 +22,11 @@ export function subscribeToAuthState(handleUser: (user: {uid: string; displayNam
 ///
 
 export async function registerBasic(email: string, password: string) {
-  const user = await createUserWithEmailAndPassword(auth, email, password)
+  const user = await auth.createUserWithEmailAndPassword(email, password)
 }
 
 export async function loginBasic(email: string, password: string): Promise<string | null> {
-  const credentials = await signInWithEmailAndPassword(auth, email, password)
+  const credentials = await auth.signInWithEmailAndPassword(email, password)
   return credentials.user?.uid ?? null
 }
 
@@ -43,7 +36,7 @@ export async function loginBasic(email: string, password: string): Promise<strin
 
 export async function loginGoogle(): Promise<string> {
   // @ts-ignore deno does not recognize firebase.auth the way it is imported, but it exists
-  const provider = new GoogleAuthProvider(auth);
-  const {accessToken, credential, user} = await signInWithPopup(auth, provider)
+  const provider = new firebase.auth.GoogleAuthProvider();
+  const {accessToken, credential, user} = await auth.signInWithPopup(provider)
   return user.uid
 }

client/components/IntroPage.tsx

@@ -18,7 +18,7 @@ export default function Page({children}: PageProps): JSX.Element {
               Tomecraft
             </h1>
             <a
-              href="https://github.com/snendev/tomecraft"
+              href="https://github.com/sullivansean27/tomecraft"
               target="_blank"
             >
               <GithubIcon size={80} />

client/components/Page.tsx

@@ -14,7 +14,7 @@ export default function Page({children}: PageProps): JSX.Element {
           Tomecraft
         </h2>
         <a
-          href="https://github.com/snendev/tomecraft"
+          href="https://github.com/sullivansean27/deno-react-web-starter"
           target="_blank"
         >
           <GithubIcon size={60} />

client/game/Game.tsx

@@ -90,7 +90,7 @@ export default function Game(props: GameProps): JSX.Element {
           </div>
         ) : (
           <div>
-            {maybeIsGameWinner ? "You Win!" : "You Lose!"}
+            {maybeIsGameWinner ? "You Lose!" : "You Win!"}
           </div>
         )}
         <div className="player-info">

client/game/useServerSocket.ts

@@ -244,12 +244,7 @@ export default function useServerSocket(
 
   React.useEffect(() => {
     if (state.status !== 'pre-game') return
-    const intervalId = setInterval(() => {
     sendJson({command: 'ready', player_id: state.playerId, match_id: state.matchId})
-    }, 200)
-    return () => {
-      clearInterval(intervalId)
-    }
   }, [sendJson, state])
 
   React.useEffect(() => {

import_map.json

@@ -2,7 +2,9 @@
   "imports": {
     "~/": "./",
 
-    "firebase/": "https://cdn.skypack.dev/firebase@9.3.0/",
+    "firebase": "https://cdn.skypack.dev/firebase@8.7.0/app",
+    "firebase/auth": "https://cdn.skypack.dev/firebase@8.7.0/auth",
+    "firebase/firestore": "https://cdn.skypack.dev/firebase@8.7.0/firestore",
     "http": "https://deno.land/std@0.105.0/http/mod.ts",
     "media-types": "https://deno.land/x/media_types@v2.10.0/mod.ts",
     "oak": "https://deno.land/x/oak@v9.0.1/mod.ts",