feat: first batch of work

.eslintrc.json

@@ -1,52 +1,53 @@
 {
-  "root": true,
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["react", "@typescript-eslint", "react-hooks"],
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "rules": {
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["warn"],
-    "no-restricted-imports": [
-      "error",
+  "extends": "next"
+  // "root": true,
+  // "extends": [
+  //   "plugin:react/recommended",
+  //   "plugin:@typescript-eslint/eslint-recommended",
+  //   "prettier"
+  // ],
+  // "parser": "@typescript-eslint/parser",
+  // "plugins": ["react", "@typescript-eslint", "react-hooks"],
+  // "env": {
+  //   "browser": true,
+  //   "es6": true,
+  //   "node": true
+  // },
+  // "globals": {
+  //   "Atomics": "readonly",
+  //   "SharedArrayBuffer": "readonly"
+  // },
+  // "parserOptions": {
+  //   "ecmaFeatures": {
+  //     "jsx": true
+  //   },
+  //   "ecmaVersion": 2018,
+  //   "sourceType": "module"
+  // },
+  // "rules": {
+  //   "no-unused-vars": "off",
+  //   "@typescript-eslint/no-unused-vars": ["warn"],
+  //   "no-restricted-imports": [
+  //     "error",
 
-      { "name": "lodash", "message": "Use lodash/myFunction instead" }
-    ],
-    "react/prop-types": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "react/display-name": 0,
-    // "react-hooks/exhaustive-deps": "warn",
-    "prefer-template": "error",
-    "react/self-closing-comp": [
-      "warn",
-      {
-        "component": true,
-        "html": true
-      }
-    ]
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
+  //     { "name": "lodash", "message": "Use lodash/myFunction instead" }
+  //   ],
+  //   "react/prop-types": 0,
+  //   "react-hooks/rules-of-hooks": "error",
+  //   "react/display-name": 0,
+  //   // "react-hooks/exhaustive-deps": "warn",
+  //   "prefer-template": "error",
+  //   "react/self-closing-comp": [
+  //     "warn",
+  //     {
+  //       "component": true,
+  //       "html": true
+  //     }
+  //   ]
+  // },
+  // "settings": {
+  //   "react": {
+  //     "version": "detect"
+  //   }
+  // }
 }

app/ThemeRegistry.tsx

@@ -0,0 +1,75 @@
+"use client";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { useServerInsertedHTML } from "next/navigation";
+import React, { useContext } from "react";
+import { SettingsContext } from "../lib/contexts/SettingsContext/SettingsContext";
+import { AppDarkTheme, AppLightTheme } from "../lib/theme";
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry(props: {
+  options: Parameters<typeof createCache>[0];
+  children: React.ReactNode;
+}) {
+  const settingsManager = useContext(SettingsContext);
+
+  const { options, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(" ")}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider
+        theme={
+          settingsManager.state.themeMode === "dark"
+            ? AppDarkTheme
+            : AppLightTheme
+        }
+      >
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}

app/data/page.tsx

@@ -0,0 +1,13 @@
+import { DataRoute } from "../../lib/routes/Data/DataRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("data-route-route.title"),
+    description: t("data-route-route.description"),
+  };
+}
+
+export default function () {
+  return <DataRoute></DataRoute>;
+}

app/dice/page.tsx

@@ -0,0 +1,13 @@
+import { DiceRoute } from "../../lib/routes/DiceRoute/DiceRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("dice-route.meta.title"),
+    description: t("dice-route.meta.description"),
+  };
+}
+
+export default function () {
+  return <DiceRoute></DiceRoute>;
+}

app/i18n.tsx

@@ -0,0 +1,5 @@
+import englishTranslations from "../public/locales/en/translation.json";
+
+export function t(key: string) {
+  return (englishTranslations as any)[key];
+}

lib/index.css → app/index.css

@@ -41,3 +41,37 @@ a {
   font-family: "Pangolin";
   src: url("/fonts/Pangolin/Pangolin-Regular.ttf");
 }
+
+.full-page-loader {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.full-page-loader > img {
+  animation: 1.8s infinite heartbeat;
+}
+
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.05);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

app/layout.tsx

@@ -0,0 +1,103 @@
+import Script from "next/script";
+import { Metadata } from "next/types";
+import React from "react";
+import { AppProviders } from "../lib/App";
+export const metadata: Metadata = {
+  title: "Fari App VTT | The Free and Open-Source Virtual Tabletop",
+  description: "",
+};
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta
+          name="google-site-verification"
+          content="_SkIJRylG7gB1j0jbxxXboxdViB678DOHglRv43DNtE"
+        />
+
+        {/* <!-- Font --> */}
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700;800&display=swap"
+          rel="stylesheet"
+        />
+
+        {/* <!-- OLD Global site tag (gtag.js) - Google Analytics --> */}
+        <Script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=UA-150306816-1"
+        />
+        <Script>
+          {` window.dataLayer = window.dataLayer || [];
+          function gtag() {
+            dataLayer.push(arguments);
+          }
+          gtag("js", new Date());
+    
+          gtag("config", "UA-150306816-1"); // old`}
+        </Script>
+        {/* <!-- NEW lobal site tag (gtag.js) - Google Analytics --> */}
+        <Script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-BRZ1HL2EJG"
+        />
+        <Script>
+          {`window.dataLayer = window.dataLayer || [];
+          function gtag() {
+            dataLayer.push(arguments);
+          }
+          gtag("js", new Date());
+    
+          gtag("config", "G-BRZ1HL2EJG");`}
+        </Script>
+
+        {/* <!-- Open Graph / Facebook --> */}
+        <meta property="og:type" content="website" />
+
+        {/* <!-- Twitter --> */}
+        <meta property="twitter:card" content="summary_large_image" />
+      </head>
+
+      <body>
+        <div id="root">
+          <AppProviders>{props.children}</AppProviders>
+        </div>
+        <Script
+          type="text/javaScript"
+          src="https://ko-fi.com/widgets/widget_2.js"
+        ></Script>
+        <Script>
+          {`!(function (w, d, i, s) {
+            function l() {
+              if (!d.getElementById(i)) {
+                var f = d.getElementsByTagName(s)[0],
+                  e = d.createElement(s);
+                (e.type = "text/javaScript"),
+                  (e.async = !0),
+                  (e.src = "https://canny.io/sdk.js"),
+                  f.parentNode.insertBefore(e, f);
+              }
+            }
+            if ("function" != typeof w.Canny) {
+              var c = function () {
+                c.q.push(arguments);
+              };
+              (c.q = []),
+                (w.Canny = c),
+                "complete" === d.readyState
+                  ? l()
+                  : w.attachEvent
+                  ? w.attachEvent("onload", l)
+                  : w.addEventListener("load", l, !1);
+            }
+          })(window, document, "canny-jssdk", "Script");`}
+        </Script>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,9 @@
+import { HomeRoute } from "../lib/routes/Home/HomeRoute";
+
+export default function () {
+  return (
+    <div>
+      <HomeRoute />
+    </div>
+  );
+}

app/story-builder/page.tsx

@@ -0,0 +1,13 @@
+import { StoryBuilderRoute } from "../../lib/routes/StoryBuilder/StoryBuilderRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("story-builder-route.title"),
+    description: t("story-builder-route.description"),
+  };
+}
+
+export default function () {
+  return <StoryBuilderRoute></StoryBuilderRoute>;
+}

app/story-dice/page.tsx

@@ -0,0 +1,13 @@
+import { StoryDiceRoute } from "../../lib/routes/StoryDice/StoryDiceRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("story-dice-route.title"),
+    description: t("story-dice-route.description"),
+  };
+}
+
+export default function () {
+  return <StoryDiceRoute></StoryDiceRoute>;
+}