feat(sandbox): sandbox v2

rivet-gg · Aug 8, 2024 · 122094f · 122094f
1 parent aebbb0b
commit 122094f
Show file tree

Hide file tree

Showing 20 changed files with 5,212 additions and 39 deletions.
diff --git a/sandbox/client/.env.yarn b/sandbox/client/.env.yarn
@@ -0,0 +1 @@
+FONTAWESOME_PACKAGE_TOKEN=E7A94808-3467-4150-B90D-EABDAEB9E0B4
diff --git a/sandbox/client/.env.yarn.example b/sandbox/client/.env.yarn.example
@@ -0,0 +1 @@
+FONTAWESOME_PACKAGE_TOKEN=
diff --git a/sandbox/client/.gitignore b/sandbox/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/sandbox/client/.yarn/install-state.gz b/sandbox/client/.yarn/install-state.gz
diff --git a/sandbox/client/.yarnrc.yml b/sandbox/client/.yarnrc.yml
@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+npmScopes:
+  fortawesome:
+    npmAlwaysAuth: true
+    npmRegistryServer: 'https://npm.fontawesome.com/'
+    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
diff --git a/sandbox/client/index.html b/sandbox/client/index.html
@@ -1,40 +1,20 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>OpenGB E2E Test</title>
-	</head>
-	<body>
-		<h1>OpenGB E2E Test</h1>
-
-		<div>
-			<label for="environmentToggle">Environment:</label>
-			<select id="environmentToggle" onchange="updateEnvironment()">
-				<option value="local">Local</option>
-				<option value="remote">Remote</option>
-			</select>
-		</div>
-
-		<script type="module" src="./index.js"></script>
-
-		<button onclick="findOrCreateLobby()">Find Or Create Lobby</button>
-
-		<script>
-			window.addEventListener('load', function() {
-				const urlParams = new URLSearchParams(window.location.search);
-				const environment = urlParams.get('env');
-				if (environment === 'local' || environment === 'remote') {
-					document.getElementById('environmentToggle').value = environment;
-				}
-			});
-
-			function updateEnvironment() {
-				const environment = document.getElementById('environmentToggle').value;
-				const url = new URL(window.location);
-				url.searchParams.set('env', environment);
-				window.location.href = url.toString();
-			}
-		</script>
-	</body>
-</html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenGB · Sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="application/json" id="RIVET_CONFIG">
+      {
+        "assetsUrl": "%VITE_APP_ASSETS_URL%",
+        "apiUrl": "%VITE_APP_API_URL%",
+        "identityToken": "%VITE_APP_IDENTITY_TOKEN%"
+      }
+    </script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/sandbox/client/index.old.html b/sandbox/client/index.old.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>OpenGB E2E Test</title>
+	</head>
+	<body>
+		<h1>OpenGB E2E Test</h1>
+
+		<div>
+			<label for="environmentToggle">Environment:</label>
+			<select id="environmentToggle" onchange="updateEnvironment()">
+				<option value="local">Local</option>
+				<option value="remote">Remote</option>
+			</select>
+		</div>
+
+		<script type="module" src="./index.js"></script>
+
+		<button onclick="findOrCreateLobby()">Find Or Create Lobby</button>
+
+		<script>
+			window.addEventListener('load', function() {
+				const urlParams = new URLSearchParams(window.location.search);
+				const environment = urlParams.get('env');
+				if (environment === 'local' || environment === 'remote') {
+					document.getElementById('environmentToggle').value = environment;
+				}
+			});
+
+			function updateEnvironment() {
+				const environment = document.getElementById('environmentToggle').value;
+				const url = new URL(window.location);
+				url.searchParams.set('env', environment);
+				window.location.href = url.toString();
+			}
+		</script>
+	</body>
+</html>
diff --git a/sandbox/client/package copy.json b/sandbox/client/package copy.json
@@ -0,0 +1,33 @@
+{
+  "name": "@rivet-gg/sandbox",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lint": "^6.8.0",
+    "@codemirror/view": "^6.28.4",
+    "@rivet-gg/api": "^24.1.2",
+    "@rivet-gg/components": "workspace:^",
+    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-query-devtools": "^5.32.0",
+    "@uiw/codemirror-extensions-basic-setup": "^4.22.1",
+    "@uiw/codemirror-theme-github": "^4.22.1",
+    "@uiw/react-codemirror": "^4.22.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "simple-statistics": "^7.8.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/sandbox/client/package.json b/sandbox/client/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@rivet-gg/opengb-sandbox",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lint": "^6.8.0",
+    "@codemirror/view": "^6.28.4",
+    "@rivet-gg/api": "^24.1.2",
+    "@rivet-gg/components": "https://github.com/rivet-gg/hub#workspace=@rivet-gg/components&head=08-08-feat_opengb_components_module_adjustments",
+    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-query-devtools": "^5.32.0",
+    "@uiw/codemirror-extensions-basic-setup": "^4.22.1",
+    "@uiw/codemirror-theme-github": "^4.22.1",
+    "@uiw/react-codemirror": "^4.22.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "simple-statistics": "^7.8.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "packageManager": "yarn@4.4.0"
+}
diff --git a/sandbox/client/postcss.config.js b/sandbox/client/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/sandbox/client/src/index.css b/sandbox/client/src/index.css
@@ -0,0 +1,17 @@
+@import "@rivet-gg/components/theme.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground min-h-screen;
+  }
+  #root {
+    @apply min-h-screen;
+  }
+}
diff --git a/sandbox/client/src/main.tsx b/sandbox/client/src/main.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import Root from "./root.tsx";
+import "./index.css";
+
+// biome-ignore lint/style/noNonNullAssertion: it should always be present
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <Root />
+  </React.StrictMode>,
+);
diff --git a/sandbox/client/src/root.tsx b/sandbox/client/src/root.tsx
@@ -0,0 +1,40 @@
+import { ConfigProvider, getConfig } from "@rivet-gg/components";
+import { Header } from "@rivet-gg/components/header";
+import { PageLayout, RootLayout } from "@rivet-gg/components/layout";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+export const queryClient = new QueryClient();
+
+declare global {
+  namespace RivetApp {
+    interface Config {
+      identityToken: string;
+    }
+  }
+}
+
+function Root() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ConfigProvider value={getConfig()}>
+        <RootLayout.Root>
+          <Header
+            breadcrumbs={<Header.NavItem data-active>Sandbox</Header.NavItem>}
+          />
+          <RootLayout.Main>
+            <PageLayout.Root>hello</PageLayout.Root>
+          </RootLayout.Main>
+          <RootLayout.Footer>
+            &copy; {new Date().getFullYear()} Rivet Gaming, Inc. All rights
+            reserved
+          </RootLayout.Footer>
+        </RootLayout.Root>
+      </ConfigProvider>
+
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  );
+}
+
+export default Root;
diff --git a/sandbox/client/src/vite-env.d.ts b/sandbox/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/sandbox/client/tailwind.config.js b/sandbox/client/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "../../node_modules/@rivet-gg/components/**/*.{ts,tsx}",
+  ],
+  presets: [require("@rivet-gg/components/tailwind-base")],
+};
diff --git a/sandbox/client/tsconfig.json b/sandbox/client/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/sandbox/client/tsconfig.node.json b/sandbox/client/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/sandbox/client/turbo.json b/sandbox/client/turbo.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": ["dist/**"]
+    }
+  }
+}
diff --git a/sandbox/client/vite.config.ts b/sandbox/client/vite.config.ts
@@ -0,0 +1,10 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 1337,
+  },
+});