Merge pull request #18 from JollyGrin/feat/custom-redirect-404-for-on…

…line

Feat/custom redirect 404 for online

README.md

@@ -4,18 +4,6 @@ This aims to recreate unbrewed.xyz but with ~~webrtc~~ and typescript. ~~This wi
 
 Update: ditching pure p2p and now instead making the gameserver easily deployable by anyone, and be able to change gameserver in settings.
 
-- [x] setup typescript: to auto-document code
-- [x] setup jest (unit tests): to make refactoring and PRs easier
-- [x] add interactive board
-- [x] add card template
-- [x] add board state (hand, discard, deck)
-- [x] add game actions
-- [x] add backpack (to load decks/maps in localstorage)
-- [x] add optional api server for loading decks from unmatched (add fallback if url breaks and ability to load a different server url)
-- [x] add websocket for board piece movements (dragging pawns across the board)
-- [x] add ability to add your own game board svgs
-- [ ] add landing page with instructions how to use tool, even if have never touched terminal
-- [ ] improve docs
 
 ## Run Locally
 
@@ -55,9 +43,9 @@ Want to deploy a gameserver that exists 24/7? Add an issue to github or PR so we
 - [JonG](https://github.com/JonathanGuberman), creator of [ unmatched.cards](https://unmatched.cards/) (create your own unmatched deck), [created the styling for the card template](https://github.com/JonathanGuberman/unmatched_maker/blob/a7e96b69559461bfac7d3203d8d3899d4af36398/src/components/UnmatchedCard.vue)
 - [Michal Wrzosek](https://github.com/michal-wrzosek), creator of [pitu pitu chat](https://michal-wrzosek.github.io/p2p-chat/)
 
-# Goals
+---
 
-## Journal
+# Journal
 
 ### 2024-03-13
 

lib/hooks/useUnmatchedDeck.ts

@@ -1,9 +1,11 @@
 import { DeckImportType } from "@/components/DeckPool/deck-import.type";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { useState } from "react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useDebounce } from "use-debounce";
+import { useLocalDeckStorage } from "./useLocalStorage";
 
 export const useUnmatchedDeck = () => {
   const [deckId, setDeckId] = useState<string>();
@@ -41,3 +43,53 @@ export const useUnmatchedDeck = () => {
     setApiUrl,
   };
 };
+
+/**
+ * Load the deckId from router.query and star it
+ * useful for quickly loading and jumping into a game
+ * this can be dropped in without props as it pulls from the url bar
+ * and manipulates localstorage
+ * */
+export const useLoadRouterDeck = () => {
+  const { query } = useRouter();
+  const deckId = query.deckId as string | undefined;
+
+  const { data, setDeckId } = useUnmatchedDeck();
+  const { decks, pushDeck, setStar, star } = useLocalDeckStorage();
+
+  useEffect(() => {
+    if (!deckId) return;
+
+    // check if query.deckId is one of the existing local decks
+    const deckIdsInStorage = decks
+      ?.map((deck) => [deck.id, deck.version_id])
+      .flat();
+    if (deckIdsInStorage?.includes(deckId)) {
+      // if it is, check the local decks for a matching id
+      const localDeck = decks?.find(
+        (deck) => deck.version_id === deckId || deck.id === deckId,
+      );
+
+      if (localDeck?.version_id !== deckId) {
+        toast.success("Refresh the page if you do not see your new deck");
+      }
+      // star the local deck
+      if (localDeck) setStar(localDeck.id);
+      return;
+    }
+
+    // if there's no local deck, set the deckId to fetch from api
+    setDeckId(deckId);
+  }, [deckId]);
+
+  useEffect(() => {
+    if (!data) return;
+    if (!deckId) return;
+    console.log({ data, deckId });
+
+    // once api data is available, push the deck to local storage and star it
+    pushDeck(data);
+    setStar(data.id);
+    toast.success("Refresh the page if you do not see your new deck");
+  }, [data]);
+};

pages/404.tsx

@@ -0,0 +1,39 @@
+import { Grid, Text, VStack } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function Custom404() {
+  const router = useRouter();
+
+  // Handles the redirect from the old unbrewed online router
+  useEffect(() => {
+    const [_, online, lobby, user] = router.asPath.split("/");
+    if (online !== "online") return;
+    const [username, deckId] = user?.split("?deck=");
+    router.push({
+      pathname: "connect",
+      query: {
+        lobby,
+        username,
+        deckId,
+      },
+    });
+  }, [router.asPath]);
+
+  return (
+    <Grid
+      bg="brand.primary"
+      color="brand.secondary"
+      h="100vh"
+      placeItems="center"
+    >
+      <VStack>
+        <Text fontFamily="heading" fontSize="3rem" fontWeight={700}>
+          Whoops!
+        </Text>
+        <Text>This page does not exist!</Text>
+      </VStack>
+    </Grid>
+  );
+}
+// online/fds/fds?deck=B4ZIGdn

pages/connect.tsx

@@ -21,6 +21,7 @@ import {
 import Link from "next/link";
 import { SettingsModal } from "@/components/Settings/settings.modal";
 import { toast } from "react-hot-toast";
+import { useLoadRouterDeck } from "@/lib/hooks";
 
 const ConnectToGamePage = () => {
   return <ConnectPage />;
@@ -33,6 +34,8 @@ const ConnectPage = () => {
   const gidRef = useRef<HTMLInputElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  useLoadRouterDeck();
+
   // the useQuery loading props not working on repeat visits
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -124,8 +127,16 @@ const ConnectPage = () => {
         <SelectedDeckContainer />
         <VStack m={"2rem auto"}>
           <HStack>
-            <Input ref={nameRef} placeholder="Your name" />
-            <Input ref={gidRef} placeholder="room name" />
+            <Input
+              ref={nameRef}
+              defaultValue={router.query.username as string | undefined}
+              placeholder="Your name"
+            />
+            <Input
+              ref={gidRef}
+              defaultValue={router.query.lobby as string | undefined}
+              placeholder="room name"
+            />
           </HStack>
           <Button
             // If we are loading a new lobby request, freeze the input values.

pages/game.tsx

@@ -108,7 +108,7 @@ const BoardContainer = ({ self }: { self: string }) => {
   return (
     <Box h={"100%"}>
       <BoardCanvas
-        src={mapUrl ?? "jpark.svg"}
+        src={mapUrl ?? "basraport.webp"}
         move={(e: PositionType) => {
           if (e.id.includes("_")) {
             const rootId = e.id.split("_")[0];