From d4b7e323078e20e36734f1389ceef5ab4d2e26a0 Mon Sep 17 00:00:00 2001
From: rpdeshaies <rpdeshaies@gmail.com>
Date: Mon, 11 Sep 2023 15:29:24 -0400
Subject: [PATCH] fix: build + lint + progress for liveblocks

---
 .github/workflows/ci.yml                      |   4 +-
 .vscode/extensions.json                       |   1 -
 app/bugs/page.tsx                             |  20 ++++
 app/data/page.tsx                             |   4 +-
 app/i18n.tsx                                  |   4 +
 app/layout.tsx                                |   8 +-
 app/oracle/page.tsx                           |  13 +++
 app/play-offline/page.tsx                     |  13 +++
 app/play/(components)/play.tsx                |  56 +++++++++++
 app/play/[id]/page.tsx                        |  13 +++
 app/play/join/[id]/page.tsx                   |  13 +++
 app/play/page.tsx                             |   5 +
 bun.lockb                                     | Bin 896507 -> 896507 bytes
 lib/App.tsx                                   |  44 +++++----
 lib/components/MyBinder/MyBinder.tsx          |   2 +-
 lib/components/NoSSR/NoSSR.tsx                |  10 ++
 lib/components/Page/Page.tsx                  |   9 +-
 lib/constants/env.ts                          |   8 +-
 .../AppI18nContext/AppI18nContext.tsx         |  79 +++++++++++++++
 lib/domains/character/CharacterType.tsx       |   8 +-
 lib/hooks/useQuery/useQuery.ts                |  11 +--
 lib/hooks/useTranslate/useTranslate.ts        |  12 ++-
 lib/index.tsx                                 |  14 ---
 lib/routes/Bugs/BugsRoute.tsx                 |   5 -
 lib/routes/Oracle/OracleRoute.tsx             |   6 +-
 lib/routes/Play/JoinAGameRoute.tsx            |  14 +--
 lib/routes/Play/PlayOfflineRoute.tsx          |  16 +---
 lib/routes/Play/PlayRoute.tsx                 |  90 +++++++++---------
 .../Play/components/Session/Session.tsx       |   2 +
 lib/services/injections.ts                    |   3 -
 .../InternationalizationService.ts            |  63 ------------
 .../locales/devTranslations.ts                |  12 ---
 next.config.mjs                               |   1 -
 package.json                                  |   2 +-
 stories/StoryProvider.tsx                     |  14 +--
 35 files changed, 349 insertions(+), 230 deletions(-)
 create mode 100644 app/bugs/page.tsx
 create mode 100644 app/oracle/page.tsx
 create mode 100644 app/play-offline/page.tsx
 create mode 100644 app/play/(components)/play.tsx
 create mode 100644 app/play/[id]/page.tsx
 create mode 100644 app/play/join/[id]/page.tsx
 create mode 100644 app/play/page.tsx
 create mode 100644 lib/components/NoSSR/NoSSR.tsx
 create mode 100644 lib/contexts/AppI18nContext/AppI18nContext.tsx
 delete mode 100644 lib/index.tsx
 delete mode 100644 lib/services/internationalization/InternationalizationService.ts
 delete mode 100644 lib/services/internationalization/locales/devTranslations.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2494d8c87..1da13cf8c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -28,8 +28,8 @@ jobs:
         run: |
           CONTEXT=production bun run build
         env:
-          VITE_GITHUB_RUN_NUMBER: ${{github.run_number}}
-          VITE_GITHUB_SHA: ${{github.sha}}
+          NEXT_PUBLIC__GITHUB_RUN_NUMBER: ${{github.run_number}}
+          NEXT_PUBLIC__GITHUB_SHA: ${{github.sha}}
       # Validate
       - name: Validate
         run: bun run validate
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 29a36db4b..4b8c7d0e2 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,7 +4,6 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
-    "bierner.comment-tagged-templates",
     "dbaeumer.vscode-eslint",
     "eamodio.gitlens",
     "yzhang.markdown-all-in-one",
diff --git a/app/bugs/page.tsx b/app/bugs/page.tsx
new file mode 100644
index 000000000..b33d1d8a6
--- /dev/null
+++ b/app/bugs/page.tsx
@@ -0,0 +1,20 @@
+{
+  /* <PageMeta
+title={pageTitle}
+description={t("bugs-route.meta.description")}
+/> */
+}
+
+import { BugsRoute } from "../../lib/routes/Bugs/BugsRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("bugs-route.title"),
+    description: t("bugs-route.description"),
+  };
+}
+
+export default function BugsPage() {
+  return <BugsRoute></BugsRoute>;
+}
diff --git a/app/data/page.tsx b/app/data/page.tsx
index 5c43fe939..f02451129 100644
--- a/app/data/page.tsx
+++ b/app/data/page.tsx
@@ -3,8 +3,8 @@ import { t } from "../i18n";
 
 export async function generateMetadata() {
   return {
-    title: t("data-route-route.title"),
-    description: t("data-route-route.description"),
+    title: t("data-route.title"),
+    description: t("data-route.description"),
   };
 }
 
diff --git a/app/i18n.tsx b/app/i18n.tsx
index f8a0e77eb..29ac5679e 100644
--- a/app/i18n.tsx
+++ b/app/i18n.tsx
@@ -3,3 +3,7 @@ import englishTranslations from "../public/locales/en/translation.json";
 export function t(key: string) {
   return (englishTranslations as any)[key];
 }
+
+export function serverSideTranslations(key: string) {
+  return t(key);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index bf610bf63..08d1f4d41 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,11 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+
 import Script from "next/script";
 import { Metadata } from "next/types";
 import React from "react";
 import { AppProviders } from "../lib/App";
+import NoSSR from "../lib/components/NoSSR/NoSSR";
 export const metadata: Metadata = {
   title: "Fari App VTT | The Free and Open-Source Virtual Tabletop",
   description: "",
@@ -65,7 +69,9 @@ export default function RootLayout(props: { children: React.ReactNode }) {
 
       <body>
         <div id="root">
-          <AppProviders>{props.children}</AppProviders>
+          <NoSSR>
+            <AppProviders>{props.children}</AppProviders>
+          </NoSSR>
         </div>
         <Script
           type="text/javaScript"
diff --git a/app/oracle/page.tsx b/app/oracle/page.tsx
new file mode 100644
index 000000000..6d9839dd7
--- /dev/null
+++ b/app/oracle/page.tsx
@@ -0,0 +1,13 @@
+import { OracleRoute } from "../../lib/routes/Oracle/OracleRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("oracle-route.play-offline.title"),
+    description: t("oracle-route.play-offline.description"),
+  };
+}
+
+export default function OraclePage() {
+  return <OracleRoute></OracleRoute>;
+}
diff --git a/app/play-offline/page.tsx b/app/play-offline/page.tsx
new file mode 100644
index 000000000..df617cbac
--- /dev/null
+++ b/app/play-offline/page.tsx
@@ -0,0 +1,13 @@
+import { PlayOfflineRoute } from "../../lib/routes/Play/PlayOfflineRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("home-route.play-offline.title"),
+    description: t("home-route.play-offline.description"),
+  };
+}
+
+export default function PlayOfflinePage() {
+  return <PlayOfflineRoute></PlayOfflineRoute>;
+}
diff --git a/app/play/(components)/play.tsx b/app/play/(components)/play.tsx
new file mode 100644
index 000000000..32ef1874c
--- /dev/null
+++ b/app/play/(components)/play.tsx
@@ -0,0 +1,56 @@
+"use client";
+import { useParams } from "next/navigation";
+
+import { useContext } from "react";
+import { SettingsContext } from "../../../lib/contexts/SettingsContext/SettingsContext";
+import { JoinAGameRoute } from "../../../lib/routes/Play/JoinAGameRoute";
+import { PlayRoute } from "../../../lib/routes/Play/PlayRoute";
+import { RoomProvider } from "../../../lib/services/liveblocks/liveblocks.config";
+
+export function Play() {
+  const params = useParams();
+
+  const settingsManager = useContext(SettingsContext);
+  const idFromParams = params.id as string;
+  const userId = settingsManager.state.userId;
+
+  return (
+    <RoomProvider
+      id={idFromParams || userId}
+      initialPresence={{
+        rollOutput: null,
+        characterName: null,
+        color: null,
+        cursor: null,
+        message: null,
+        playerName: null,
+      }}
+    >
+      <PlayRoute></PlayRoute>
+    </RoomProvider>
+  );
+}
+
+export function Join() {
+  const params = useParams();
+
+  const settingsManager = useContext(SettingsContext);
+  const idFromParams = params.id as string;
+  const userId = settingsManager.state.userId;
+
+  return (
+    <RoomProvider
+      id={idFromParams || userId}
+      initialPresence={{
+        rollOutput: null,
+        characterName: null,
+        color: null,
+        cursor: null,
+        message: null,
+        playerName: null,
+      }}
+    >
+      <JoinAGameRoute></JoinAGameRoute>
+    </RoomProvider>
+  );
+}
diff --git a/app/play/[id]/page.tsx b/app/play/[id]/page.tsx
new file mode 100644
index 000000000..6fa134b6a
--- /dev/null
+++ b/app/play/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { Play } from "../(components)/play";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("home-route.play-online.title"),
+    description: t("home-route.play-online.description"),
+  };
+}
+
+export default function PlayOnlinePage() {
+  return <Play></Play>;
+}
diff --git a/app/play/join/[id]/page.tsx b/app/play/join/[id]/page.tsx
new file mode 100644
index 000000000..3b0788f22
--- /dev/null
+++ b/app/play/join/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { Join } from "../../(components)/play";
+import { t } from "../../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("home-route.play-online.title"),
+    description: t("home-route.play-online.description"),
+  };
+}
+
+export default function PlayOnlinePage() {
+  return <Join></Join>;
+}
diff --git a/app/play/page.tsx b/app/play/page.tsx
new file mode 100644
index 000000000..1af2d418b
--- /dev/null
+++ b/app/play/page.tsx
@@ -0,0 +1,5 @@
+import { Play } from "./(components)/play";
+
+export default function PlayPage() {
+  return <Play></Play>;
+}
diff --git a/bun.lockb b/bun.lockb
index 3df752e1fdc1edc2b3c658acdf2c9c9decc88cf8..0f542382a8d13805168ad610b92a8e186a006a45 100755
GIT binary patch
delta 142
zcmex;+wAvkvk7_%g)evyOic+2`c&3#os`A+%6n^a%&U1ZNA91$A|P$krLfUYxQ##Y
zY!)K}1H+ZsBHfG(VbYTW+a%aeXV3Yk&BE5)-`3vW#t6hrK+FupEI`Z(#B4y!zP-PV
jgC&=fG0xCf&qUAAvVG2H4j|?PVlE)&-ah9uPy8+bCvZE@

delta 150
zcmex;+wAvkvk7_%x4E2mech5WgTd8j`#OcFw_aRn?5>=OTEBkRG8C>^s=U!pxNY)*
zK7RSB=R}zq84v)C-`wBU-rvRu#7scU48$xz%nHP8K+L|qzm0<>my-#mzkSYU4j|?P
PVlE)&-ah9uPy8+b!tXR(

diff --git a/lib/App.tsx b/lib/App.tsx
index 957fd7c20..f574d7909 100644
--- a/lib/App.tsx
+++ b/lib/App.tsx
@@ -10,6 +10,7 @@ import ThemeRegistry from "../app/ThemeRegistry";
 import { previewContentEditable } from "./components/ContentEditable/ContentEditable";
 import { ErrorReport } from "./components/ErrorBoundary/ErrorReport";
 import { IManagerViewModel, MyBinder } from "./components/MyBinder/MyBinder";
+import { AppI18nProvider } from "./contexts/AppI18nContext/AppI18nContext";
 import {
   CharactersContext,
   useCharacters,
@@ -51,28 +52,30 @@ export function AppProviders(props: { children: ReactNode }) {
   const charactersManager = useCharacters();
   const scenesManager = useScenes();
   const indexCardCollectionsManager = useIndexCardCollections();
-  const diceManager = useDice({});
+  const diceManager = useDice();
   const myBinderManager = useMyBinder();
 
   return (
     <InjectionsContext.Provider value={injections}>
-      <DndProvider backend={HTML5Backend}>
-        <SettingsContext.Provider value={settingsManager}>
-          <CharactersContext.Provider value={charactersManager}>
-            <ScenesContext.Provider value={scenesManager}>
-              <IndexCardCollectionsContext.Provider
-                value={indexCardCollectionsManager}
-              >
-                <DiceContext.Provider value={diceManager}>
-                  <MyBinderContext.Provider value={myBinderManager}>
-                    <InternalProviders>{props.children}</InternalProviders>
-                  </MyBinderContext.Provider>
-                </DiceContext.Provider>
-              </IndexCardCollectionsContext.Provider>
-            </ScenesContext.Provider>
-          </CharactersContext.Provider>
-        </SettingsContext.Provider>
-      </DndProvider>
+      <AppI18nProvider>
+        <DndProvider backend={HTML5Backend}>
+          <SettingsContext.Provider value={settingsManager}>
+            <CharactersContext.Provider value={charactersManager}>
+              <ScenesContext.Provider value={scenesManager}>
+                <IndexCardCollectionsContext.Provider
+                  value={indexCardCollectionsManager}
+                >
+                  <DiceContext.Provider value={diceManager}>
+                    <MyBinderContext.Provider value={myBinderManager}>
+                      <InternalProviders>{props.children}</InternalProviders>
+                    </MyBinderContext.Provider>
+                  </DiceContext.Provider>
+                </IndexCardCollectionsContext.Provider>
+              </ScenesContext.Provider>
+            </CharactersContext.Provider>
+          </SettingsContext.Provider>
+        </DndProvider>
+      </AppI18nProvider>
     </InjectionsContext.Provider>
   );
 }
@@ -91,9 +94,7 @@ function MyBinderManager() {
     onDelete(element: IManagerViewModel): void;
     onDuplicate(element: IManagerViewModel): void;
     onUndo(element: IManagerViewModel): void;
-    onImport(
-      importPaths: FileList | null,
-    ): Promise<{ entity: any | undefined }>;
+    onImport(importPaths: any | null): Promise<{ entity: any | undefined }>;
     onImportAddAsNew(entity: any): void;
     onImportUpdateExisting(entity: any): void;
     onExport(element: IManagerViewModel): void;
@@ -214,6 +215,7 @@ function MyBinderManager() {
         myBinderManager.actions.close();
       },
       onSelectOnNewTab(element) {
+        if (typeof window === "undefined") return;
         window.open(`/scenes/${element.id}`);
       },
       onDelete(element) {
diff --git a/lib/components/MyBinder/MyBinder.tsx b/lib/components/MyBinder/MyBinder.tsx
index df4591e1c..2dae71fe6 100644
--- a/lib/components/MyBinder/MyBinder.tsx
+++ b/lib/components/MyBinder/MyBinder.tsx
@@ -397,8 +397,8 @@ export function MyBinder<TFolders extends string>(props: {
             <Grid item>
               <AppLink
                 color="secondary"
+                href="/data"
                 onClick={() => {
-                  router.push("/data");
                   props.onClose();
                 }}
               >
diff --git a/lib/components/NoSSR/NoSSR.tsx b/lib/components/NoSSR/NoSSR.tsx
new file mode 100644
index 000000000..8caf2d482
--- /dev/null
+++ b/lib/components/NoSSR/NoSSR.tsx
@@ -0,0 +1,10 @@
+import dynamic from "next/dynamic";
+import React from "react";
+
+const NoSSR = (props: { children: React.ReactNode }) => (
+  <React.Fragment>{props.children}</React.Fragment>
+);
+
+export default dynamic(() => Promise.resolve(NoSSR), {
+  ssr: false,
+});
diff --git a/lib/components/Page/Page.tsx b/lib/components/Page/Page.tsx
index dd0eed543..2324593b1 100644
--- a/lib/components/Page/Page.tsx
+++ b/lib/components/Page/Page.tsx
@@ -48,11 +48,12 @@ import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext"
 import { SettingsContext } from "../../contexts/SettingsContext/SettingsContext";
 import { Icons } from "../../domains/Icons/Icons";
 import { useHighlight } from "../../hooks/useHighlight/useHighlight";
-import { useTranslate } from "../../hooks/useTranslate/useTranslate";
+
 import {
   IPossibleLanguages,
   PossibleLanguagesNames,
-} from "../../services/internationalization/InternationalizationService";
+} from "../../contexts/AppI18nContext/AppI18nContext";
+import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 import { AppButtonLink, AppLink } from "../AppLink/AppLink";
 import { CannyChangelog } from "../CannyChangelog/CannyChangelog";
 import { CookieConsent } from "../CookieConsent/CookieConsent";
@@ -104,12 +105,12 @@ export const Page: React.FC<{
   }, [props.gameId]);
 
   return (
-    <>
+    <React.Fragment>
       <ScrollToTop />
 
       {renderHeader()}
       {renderContent()}
-    </>
+    </React.Fragment>
   );
 
   function renderContent() {
diff --git a/lib/constants/env.ts b/lib/constants/env.ts
index 9082ef23b..290b1163f 100644
--- a/lib/constants/env.ts
+++ b/lib/constants/env.ts
@@ -1,7 +1,7 @@
-const context = import.meta.env?.MODE ?? "development";
-const isDev = import.meta.env?.DEV;
-const buildNumber = import.meta.env?.VITE_GITHUB_RUN_NUMBER ?? "0";
-const hash = import.meta.env?.VITE_GITHUB_SHA ?? "0";
+const context = process.env.NODE_ENV ?? "development";
+const isDev = process.env.NODE_ENV !== "production";
+const buildNumber = process.env.NEXT_PUBLIC_GITHUB_RUN_NUMBER ?? "0";
+const hash = process.env.NEXT_PUBLIC_GITHUB_SHA ?? "0";
 const version = process.env.npm_package_version;
 const isTest = process.env.JEST_WORKER_ID;
 
diff --git a/lib/contexts/AppI18nContext/AppI18nContext.tsx b/lib/contexts/AppI18nContext/AppI18nContext.tsx
new file mode 100644
index 000000000..38cd01f0a
--- /dev/null
+++ b/lib/contexts/AppI18nContext/AppI18nContext.tsx
@@ -0,0 +1,79 @@
+"use client";
+import i18next from "i18next";
+import I18nLanguageDetector from "i18next-browser-languagedetector";
+import I18nHttpApi from "i18next-http-backend";
+import { createContext } from "react";
+import { initReactI18next } from "react-i18next";
+
+export const PossibleLanguages = [
+  "en",
+  "es",
+  "eo",
+  "pt-BR",
+  "zh_CN",
+  "zh_TW",
+  "fr",
+  "gl",
+  "ru",
+  "de",
+  "it",
+  "pl",
+  "tr",
+  "dev",
+] as const;
+
+export type IPossibleLanguages = (typeof PossibleLanguages)[number];
+
+export const PossibleLanguagesNames: Record<IPossibleLanguages, string> = {
+  "en": "English",
+  "es": "Español",
+  "eo": "Esperanto",
+  "pt-BR": "Português Brasileiro",
+  "zh_CN": "简体中文",
+  "zh_TW": "臺灣國語",
+  "fr": "Français",
+  "gl": "Galego",
+  "ru": "Русский",
+  "de": "Deutsch",
+  "it": "Italiano",
+  "pl": "Polski",
+  "tr": "Türk",
+  "dev": "Development",
+};
+
+const i18n = i18next;
+if (typeof window !== "undefined") {
+  loadI18n();
+  async function loadI18n() {
+    await i18n
+      .use(I18nLanguageDetector)
+      .use(initReactI18next)
+      .use(I18nHttpApi)
+      .init({
+        supportedLngs: [...PossibleLanguages],
+        fallbackLng: "en",
+        debug: false,
+        keySeparator: false,
+        interpolation: {
+          escapeValue: false,
+        },
+      });
+  }
+}
+function useAppI18n() {
+  return {};
+}
+
+export const AppI18nContext = createContext<ReturnType<typeof useAppI18n>>(
+  undefined as any,
+);
+
+export function AppI18nProvider(props: { children: React.ReactNode }) {
+  const contextValue = useAppI18n();
+
+  return (
+    <AppI18nContext.Provider value={contextValue}>
+      {props.children}
+    </AppI18nContext.Provider>
+  );
+}
diff --git a/lib/domains/character/CharacterType.tsx b/lib/domains/character/CharacterType.tsx
index b8217fcee..48ca94848 100644
--- a/lib/domains/character/CharacterType.tsx
+++ b/lib/domains/character/CharacterType.tsx
@@ -5,9 +5,9 @@ let allCharactersTemplatesFiles: Record<
   }>
 > = {};
 try {
-  allCharactersTemplatesFiles = import.meta.glob(
-    "./character-templates/*/*.json"
-  );
+  // allCharactersTemplatesFiles = import.meta.glob(
+  //   "./character-templates/*/*.json"
+  // );
 } catch (error) {}
 
 export type ICharacterTemplate = {
@@ -35,7 +35,7 @@ export const allTemplates = Object.keys(allCharactersTemplatesFiles).reduce(
       },
     ];
   },
-  []
+  [],
 );
 
 export const CharacterTemplates = [...allTemplates].sort((a, b) => {
diff --git a/lib/hooks/useQuery/useQuery.ts b/lib/hooks/useQuery/useQuery.ts
index 91a3b4652..bc2a24db3 100644
--- a/lib/hooks/useQuery/useQuery.ts
+++ b/lib/hooks/useQuery/useQuery.ts
@@ -1,12 +1,7 @@
-import { useLocation } from "react-router";
+import { useSearchParams } from "next/navigation";
 
 export function useQuery<TKeys extends string>() {
-  const routeLocation = useLocation();
-  const urlSearchParams = new URLSearchParams(routeLocation.search);
+  const searchParams = useSearchParams();
 
-  return {
-    get(key: TKeys) {
-      return urlSearchParams.get(key);
-    },
-  };
+  return searchParams;
 }
diff --git a/lib/hooks/useTranslate/useTranslate.ts b/lib/hooks/useTranslate/useTranslate.ts
index 6a455b6b5..67d64bf25 100644
--- a/lib/hooks/useTranslate/useTranslate.ts
+++ b/lib/hooks/useTranslate/useTranslate.ts
@@ -1,12 +1,15 @@
 import { useTranslation, UseTranslationOptions } from "react-i18next";
 import { ITranslationKeys } from "../../locale";
+
+import { serverSideTranslations } from "../../../app/i18n";
 import {
   IPossibleLanguages,
   PossibleLanguages,
-} from "../../services/internationalization/InternationalizationService";
+} from "../../contexts/AppI18nContext/AppI18nContext";
 
 export function useTranslate() {
   const { t, i18n } = useTranslation();
+
   const currentLanguage = getCurrentLanguage();
 
   return {
@@ -16,6 +19,10 @@ export function useTranslate() {
       options?: UseTranslationOptions<""> & Record<string, string>,
       noFallback: boolean = false,
     ): string => {
+      if (currentLanguage === "en") {
+        return serverSideTranslations(key);
+      }
+
       const value = t(key, options);
       const englishValue = i18n.t(key, {
         ...options,
@@ -41,6 +48,9 @@ export function useTranslate() {
   };
 
   function getCurrentLanguage() {
+    if (!i18n.language) {
+      return "en";
+    }
     const [sanitizedLanguage] = i18n.language.split("-");
 
     return PossibleLanguages.includes(i18n.language as IPossibleLanguages)
diff --git a/lib/index.tsx b/lib/index.tsx
deleted file mode 100644
index 234e3a6fe..000000000
--- a/lib/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-
-import { setAutoFreeze } from "immer";
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App";
-import "./index.css";
-
-setAutoFreeze(false);
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-root.render(<App />);
diff --git a/lib/routes/Bugs/BugsRoute.tsx b/lib/routes/Bugs/BugsRoute.tsx
index 851d4cd12..487b06221 100644
--- a/lib/routes/Bugs/BugsRoute.tsx
+++ b/lib/routes/Bugs/BugsRoute.tsx
@@ -2,7 +2,6 @@ import BugReportIcon from "@mui/icons-material/BugReport";
 import { Box, Container, useTheme } from "@mui/material";
 import { Heading } from "../../components/Heading/Heading";
 import { Page } from "../../components/Page/Page";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { useCanny } from "../../hooks/useCanny/useCanny";
 import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 
@@ -20,10 +19,6 @@ export function BugsRoute() {
 
   return (
     <Page sx={{ paddingTop: "2rem" }}>
-      <PageMeta
-        title={pageTitle}
-        description={t("bugs-route.meta.description")}
-      />
       <Heading
         icon={BugReportIcon}
         title={t("bugs-route.meta.title")}
diff --git a/lib/routes/Oracle/OracleRoute.tsx b/lib/routes/Oracle/OracleRoute.tsx
index 82812e54c..8b6c511b4 100644
--- a/lib/routes/Oracle/OracleRoute.tsx
+++ b/lib/routes/Oracle/OracleRoute.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Box, Button, Container, Paper, useTheme } from "@mui/material";
 
 import {
@@ -13,7 +14,6 @@ import {
 import { useEffect, useState } from "react";
 import { FateLabel } from "../../components/FateLabel/FateLabel";
 import { Page } from "../../components/Page/Page";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
 import { Dice, ICommandResult } from "../../domains/dice/Dice";
 import { useEvent } from "../../hooks/useEvent/useEvent";
@@ -55,10 +55,6 @@ export const OracleRoute = () => {
 
   return (
     <Page sx={{ paddingTop: "2rem" }}>
-      <PageMeta
-        title={t("oracle-route.meta.title")}
-        description={t("oracle-route.meta.description")}
-      />
       <Oracle />
     </Page>
   );
diff --git a/lib/routes/Play/JoinAGameRoute.tsx b/lib/routes/Play/JoinAGameRoute.tsx
index 08efe66ce..448b9e7c8 100644
--- a/lib/routes/Play/JoinAGameRoute.tsx
+++ b/lib/routes/Play/JoinAGameRoute.tsx
@@ -1,3 +1,4 @@
+"use client";
 import {
   Box,
   Button,
@@ -12,8 +13,8 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
+import { useParams, useRouter } from "next/navigation";
 import { useContext, useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router";
 import { AppLink } from "../../components/AppLink/AppLink";
 import { Page } from "../../components/Page/Page";
 import { Images } from "../../constants/Images";
@@ -30,16 +31,17 @@ import {
   PlayerInteractionFactory,
 } from "./types/IPlayerInteraction";
 
-function JoinAGameRoute() {
+export function JoinAGameRoute() {
   const { t } = useTranslate();
   const theme = useTheme();
   const settingsManager = useContext(SettingsContext);
-  const params = useParams<{ id: string }>();
+  const params = useParams();
+  const idFromParams = params.id as string;
   const [playerName, setPlayerName] = useState(settingsManager.state.userName);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const isGameLinkValid = useRef(false);
-  const navigate = useNavigate();
+  const router = useRouter();
 
   const broadcast = useBroadcastEvent();
 
@@ -47,7 +49,7 @@ function JoinAGameRoute() {
     const event = props.event as IPlayerInteraction;
     if (event.type === "pong") {
       isGameLinkValid.current = true;
-      navigate(`/play/${params.id}?name=${playerName}`);
+      router.push(`/play/${idFromParams}?name=${playerName}`);
     }
   });
 
@@ -194,7 +196,7 @@ function JoinAGameRoute() {
                 {t("play-route.join-error")}
               </Typography>
               <Typography color="error">
-                <AppLink to="/fari-wiki/connection-issues">
+                <AppLink href="/fari-wiki/connection-issues">
                   {t("play-route.join-error.connection-issues")}
                 </AppLink>
               </Typography>
diff --git a/lib/routes/Play/PlayOfflineRoute.tsx b/lib/routes/Play/PlayOfflineRoute.tsx
index 5a19c05e2..da8789806 100644
--- a/lib/routes/Play/PlayOfflineRoute.tsx
+++ b/lib/routes/Play/PlayOfflineRoute.tsx
@@ -1,13 +1,13 @@
+"use client";
+
 import React, { useContext, useEffect } from "react";
-import { previewContentEditable } from "../../components/ContentEditable/ContentEditable";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { CharactersContext } from "../../contexts/CharactersContext/CharactersContext";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
 import { SettingsContext } from "../../contexts/SettingsContext/SettingsContext";
 import { useScene } from "../../hooks/useScene/useScene";
-import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 import { useChat } from "./components/Chat/useChat";
-import { Session } from "./components/Session/Session";
+
+import Session from "./components/Session/Session";
 import {
   useSession,
   useSessionCharacterSheets,
@@ -26,8 +26,6 @@ export const PlayOfflineRoute: React.FC<{}> = () => {
     userId: settingsManager.state.userId,
     charactersManager: charactersManager,
   });
-  const sceneName = sceneManager.state.scene?.name ?? "";
-  const pageTitle = previewContentEditable({ value: sceneName });
 
   const logger = useLogger();
 
@@ -35,14 +33,8 @@ export const PlayOfflineRoute: React.FC<{}> = () => {
     logger.track("play_offline_game");
   }, []);
 
-  const { t } = useTranslate();
-
   return (
     <>
-      <PageMeta
-        title={pageTitle || t("home-route.play-offline.title")}
-        description={t("home-route.play-offline.description")}
-      />
       <Session
         userId={settingsManager.state.userId}
         sessionManager={sessionManager}
diff --git a/lib/routes/Play/PlayRoute.tsx b/lib/routes/Play/PlayRoute.tsx
index 5acaa9fff..2747e5e2b 100644
--- a/lib/routes/Play/PlayRoute.tsx
+++ b/lib/routes/Play/PlayRoute.tsx
@@ -1,18 +1,20 @@
+"use client";
+
 import { Alert, Snackbar } from "@mui/material";
+
+import { useParams } from "next/navigation";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { useLocation, useParams } from "react-router-dom";
 import { previewContentEditable } from "../../components/ContentEditable/ContentEditable";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { CharactersContext } from "../../contexts/CharactersContext/CharactersContext";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
 import { SettingsContext } from "../../contexts/SettingsContext/SettingsContext";
+import { useQuery } from "../../hooks/useQuery/useQuery";
 import { useScene } from "../../hooks/useScene/useScene";
-import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 import {
   useBroadcastEvent,
   useEventListener,
-  useObject,
-  useRoom,
+  useMutation,
+  useStorage,
 } from "../../services/liveblocks/liveblocks.config";
 import { IMessage, useChat } from "./components/Chat/useChat";
 import {
@@ -48,62 +50,62 @@ export function useLiveObject<T>(props: {
   canBeEmpty?: boolean;
   onChange(newValue: T): void;
 }) {
-  const liveObject = useObject(props.key);
-  // const root = useStorage((root) => {
-  //   return root;
-  // });
-
-  const room = useRoom();
+  const object = useStorage((root) => {
+    return root[props.key];
+  });
 
   // TODO: clear data on load
   // useEffect(() => {
   //   if (props.isOwner) {
-  //     root?.set(props.key, new LiveObject({}));
+  //     update()
   //   }
-  // }, [root]);
+  // }, []);
+
+  const update = useMutation(
+    (context) => {
+      if (props.isOwner) {
+        context.storage.set(props.key, props.value as any);
+      }
+    },
+    [props.isOwner, props.value],
+  );
 
   useEffect(() => {
     if (props.isOwner) {
-      liveObject?.update(props.value as any);
+      update();
     }
   }, [props.value]);
 
   useEffect(() => {
-    function onLiveObjectChange() {
-      const isSubscriber = !props.isOwner;
-      const object = liveObject?.toObject();
-      const objectKeys = Object.keys(object ?? {});
-      if (isSubscriber && object) {
-        if (props.canBeEmpty || objectKeys.length > 0) {
-          props.onChange(object as unknown as T);
-        }
-      }
-    }
+    const isSubscriber = !props.isOwner;
 
-    onLiveObjectChange();
+    const objectKeys = Object.keys(object ?? {});
 
-    if (liveObject == null) {
-      return;
+    console.log("CALLING PARENT FOR", {
+      key: props.key,
+      isSubscriber,
+      objectKeys,
+    });
+    if (isSubscriber && object) {
+      if (props.canBeEmpty || objectKeys.length > 0) {
+        props.onChange(object as unknown as T);
+      }
     }
+  }, [object]);
 
-    return room.subscribe(liveObject, onLiveObjectChange);
-  }, [liveObject]);
-
-  return liveObject;
+  return object;
 }
 
-function PlayRoute() {
-  const params = useParams<{ id: string }>();
+export function PlayRoute() {
+  const params = useParams();
   const logger = useLogger();
-  const { t } = useTranslate();
-  const room = useRoom();
   const settingsManager = useContext(SettingsContext);
   const charactersManager = useContext(CharactersContext);
-  const location = useLocation();
-  const query = new URLSearchParams(location.search);
-  const idFromParams = params.id;
+  const query = useQuery();
+  const idFromParams = params.id as string;
   const playerName = query.get("name");
   const isGM = !idFromParams;
+  console.log("isGM", isGM);
   const isPlayer = !isGM;
   const userId = settingsManager.state.userId;
   const sessionId = isPlayer ? idFromParams : userId;
@@ -248,10 +250,10 @@ function PlayRoute() {
   }, [playerName]);
 
   useEffect(() => {
-    const unsubscribe = room.subscribe("connection", (status) => {
-      setConnectionState(status);
-    });
-    return unsubscribe;
+    // const unsubscribe = room.subscribe("connection", (status) => {
+    //   setConnectionState(status);
+    // });
+    // return unsubscribe;
   }, []);
 
   useEffect(() => {
@@ -303,10 +305,6 @@ function PlayRoute() {
 
   return (
     <>
-      <PageMeta
-        title={pageTitle || t("home-route.play-online.title")}
-        description={t("home-route.play-online.description")}
-      />
       <>
         <Snackbar
           open={connectionStateSnackBarOpen && !!connectionState}
diff --git a/lib/routes/Play/components/Session/Session.tsx b/lib/routes/Play/components/Session/Session.tsx
index 95b9ee431..0e69c251e 100644
--- a/lib/routes/Play/components/Session/Session.tsx
+++ b/lib/routes/Play/components/Session/Session.tsx
@@ -1217,3 +1217,5 @@ export function Session(props: {
     );
   }
 }
+
+export default Session;
diff --git a/lib/services/injections.ts b/lib/services/injections.ts
index 4ed31a577..e7587116e 100644
--- a/lib/services/injections.ts
+++ b/lib/services/injections.ts
@@ -1,14 +1,11 @@
-import { InternationalizationService } from "./internationalization/InternationalizationService";
 import { makeLogger } from "./logger/makeLogger";
 import { makeSentryService } from "./sentry/SentryService";
 
 export function getDefaultInjections() {
   const sentryService = makeSentryService();
   const logger = makeLogger(sentryService);
-  const internationalizationService = InternationalizationService(logger);
 
   return {
-    internationalizationService,
     logger,
     sentryService,
   };
diff --git a/lib/services/internationalization/InternationalizationService.ts b/lib/services/internationalization/InternationalizationService.ts
deleted file mode 100644
index 4982ced5c..000000000
--- a/lib/services/internationalization/InternationalizationService.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import i18next from "i18next";
-import I18nLanguageDetector from "i18next-browser-languagedetector";
-import I18nHttpApi from "i18next-http-backend";
-import { initReactI18next } from "react-i18next";
-import { ILogger } from "../logger/makeLogger";
-
-export const PossibleLanguages = [
-  "en",
-  "es",
-  "eo",
-  "pt-BR",
-  "zh_CN",
-  "zh_TW",
-  "fr",
-  "gl",
-  "ru",
-  "de",
-  "it",
-  "pl",
-  "tr",
-  "dev",
-] as const;
-
-export type IPossibleLanguages = typeof PossibleLanguages[number];
-
-export const PossibleLanguagesNames: Record<IPossibleLanguages, string> = {
-  "en": "English",
-  "es": "Español",
-  "eo": "Esperanto",
-  "pt-BR": "Português Brasileiro",
-  "zh_CN": "简体中文",
-  "zh_TW": "臺灣國語",
-  "fr": "Français",
-  "gl": "Galego",
-  "ru": "Русский",
-  "de": "Deutsch",
-  "it": "Italiano",
-  "pl": "Polski",
-  "tr": "Türk",
-  "dev": "Development",
-};
-
-export async function InternationalizationService(logger: ILogger) {
-  const i18n = i18next;
-
-  await i18n
-    .use(I18nLanguageDetector)
-    .use(initReactI18next)
-    .use(I18nHttpApi)
-    .init({
-      supportedLngs: [...PossibleLanguages],
-      fallbackLng: "en",
-      debug: false,
-      keySeparator: false,
-      interpolation: {
-        escapeValue: false,
-      },
-    });
-  logger.setTag("language", i18n.language);
-  logger.track(`detect_language`, {
-    language: i18n.language,
-  });
-}
diff --git a/lib/services/internationalization/locales/devTranslations.ts b/lib/services/internationalization/locales/devTranslations.ts
deleted file mode 100644
index 83e1f3d8e..000000000
--- a/lib/services/internationalization/locales/devTranslations.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import enTranslation from "../../../../locales/en.json";
-import { ITranslationKeys } from "../../../locale";
-
-export const devTranslation = Object.keys(enTranslation ?? {}).reduce(
-  (acc, curr) => {
-    return {
-      ...acc,
-      [curr]: `{.${curr}.}`,
-    };
-  },
-  {} as Record<ITranslationKeys, string>
-);
diff --git a/next.config.mjs b/next.config.mjs
index 95281d2cc..d564f36a7 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,7 +2,6 @@
 const nextConfig = {
   output: "export", // Outputs a Single-Page Application (SPA).
   // distDir: "./dist", // Changes the build output directory to `./dist/`.
-  reactStrictMode: false,
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
index 09cb1da22..a4ffbac45 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "scripts": {
     "ci": "npm install --force && bun run build && bun run validate",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "bun run next build",
     "serve:build": "bun run vite preview --port 1234",
     "i18n": "bun i18n.js",
diff --git a/stories/StoryProvider.tsx b/stories/StoryProvider.tsx
index b5365e077..e81a1d345 100644
--- a/stories/StoryProvider.tsx
+++ b/stories/StoryProvider.tsx
@@ -37,19 +37,7 @@ export function StoryProvider(props: {
   const settingsManager = useSettings();
   const charactersManager = useCharacters();
   const scenesManager = useScenes();
-  const diceManager = useDice({
-    // defaultCommands: settingsManager.state.diceCommandIds,
-    // defaultOptions: {
-    //   listResults: false,
-    // },
-    // onCommandSetsChange(commandSetOptions) {
-    //   const commandSetIds = commandSetOptions.map((l) => l.id);
-    //   settingsManager.actions.setDiceCommandsIds(commandSetIds);
-    // },
-    // onOptionsChange: (options) => {
-    //   settingsManager.actions.setDiceOptions(options);
-    // },
-  });
+  const diceManager = useDice();
 
   useEffect(() => {
     settingsManager.actions.setThemeMode(props.theme);