Merge ; commit 'eb15d86a4bd9caf53ead16fa441c9d199da9174e'

rxqd · Apr 1, 2024 · 86be71e · 86be71e
2 parents f3fc4d8 + eb15d86
commit 86be71e
Show file tree

Hide file tree

Showing 21 changed files with 1,230 additions and 141 deletions.
diff --git a/bin/current.sh b/bin/current.sh
@@ -17,26 +17,20 @@ SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" &>/dev/null && pwd)"
 # Set the ROOT variable one level up from the script's location
 ROOT="$(dirname "$SCRIPT_DIR")"
 
-if [[ -L "$ROOT/current" ]]; then
-	rm -f "$ROOT/current"
-fi
 
+rm -f "$ROOT/current"
 ln -s "$1" "$ROOT/current"
 
 if [[ ! -e "$ROOT/current/.replit" ]]; then
 	echo "$1/.replit must exist"
 	exit 1
 fi
 
-if [[ -L "$ROOT/.replit" ]]; then
-	rm -f "$ROOT/.replit"
-fi
+rm -f "$ROOT/.replit"
 
 ln -s "$ROOT/current/.replit" "$ROOT/.replit"
 
-if [[ -L "$ROOT/replit.nix" ]]; then
-	rm -f "$ROOT/replit.nix"
-fi
+rm -f "$ROOT/replit.nix"
 
 if [[ -e "$ROOT/current/replit.nix" ]]; then
 	ln -s "$ROOT/current/replit.nix" "$ROOT/replit.nix"

diff --git a/src/node/react/.yarnrc.yml b/src/node/react/.yarnrc.yml
@@ -1,14 +1,4 @@
-# Yarn's manifest file. You can configure yarn here.
-# See https://yarnpkg.com/configuration/yarnrc.
-
-# For `node_modules` (see `nodeLinker` below), this is almost always the preferred option.
 compressionLevel: 0
-
 enableGlobalCache: true
-
-# Lets yarn use hardlinks inside `node_modules` to dedupe packages.
-# For a more pnpm-like experience, consider `hardlinks-global` where hardlinks point to a global store.
 nmMode: hardlinks-local
-
-# How to install Node packages.
 nodeLinker: node-modules
diff --git a/src/node/react/index.html b/src/node/react/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
+<html lang="en" data-theme="mine">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>React App</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
 </html>
diff --git a/src/node/react/package.json b/src/node/react/package.json
@@ -12,19 +12,26 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@tanstack/router-devtools": "^1.26.1",
+    "@tanstack/router-vite-plugin": "^1.25.0",
+    "@types/node": "^20.12.2",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.19",
+    "daisyui": "^4.9.0",
+    "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
-    "vite": "^5.2.6",
-     "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-  "tailwindcss": "^3.4.3"
+    "vite": "^5.2.6"
   },
   "engines": {
     "node": "=20.x"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@tanstack/react-router": "^1.26.1"
+  }
 }
diff --git a/src/node/react/src/App.tsx b/src/node/react/src/App.tsx
diff --git a/src/node/react/src/components/Card/index.tsx b/src/node/react/src/components/Card/index.tsx
diff --git a/src/node/react/src/components/Card/styles.css b/src/node/react/src/components/Card/styles.css
diff --git a/src/node/react/src/components/NavLink.tsx b/src/node/react/src/components/NavLink.tsx
@@ -0,0 +1,17 @@
+import { Link } from "@tanstack/react-router";
+
+type NavLinkProps = {
+  children: React.ReactNode,
+  to: string
+}
+
+export default function NavLink({ children, to }: NavLinkProps) {
+  return (
+    <Link
+      activeProps={{
+        className: "bg-accent"
+      }}
+      className="btn btn-ghost text-xl"
+      to={to}>{children}</Link>
+  )
+}
diff --git a/src/node/react/src/components/TicTacToe/Game.tsx b/src/node/react/src/components/TicTacToe/Game.tsx
@@ -1,41 +1,41 @@
 import Board from "./Board";
-import {useState} from "react";
-import {type SquareValue} from "./types";
+import { useState } from "react";
+import { type SquareValue } from "./types";
 
 export default function Game() {
-    const size = 3;
-    const initSquares: SquareValue[] = Array(size*size).fill(null);
-
-    const [history, setHistory] = useState([initSquares]);
-    const [currentMove, setCurrentMove] = useState(0);
+  const size = 3;
+  const initSquares: SquareValue[] = Array(size * size).fill(null);
 
-    const currentSquares = history[currentMove];
-    const xnext = currentMove % 2 === 0;
+  const [history, setHistory] = useState([initSquares]);
+  const [currentMove, setCurrentMove] = useState(0);
 
-    const handlePlay = (squares: SquareValue[]) => {
-        const nextHistory = [...history.slice(0, currentMove + 1), squares];
-        setHistory(nextHistory);
-        setCurrentMove(nextHistory.length - 1);
-};
+  const currentSquares = history[currentMove];
+  const xnext = currentMove % 2 === 0;
 
-    const jumpTo = (move: number) => {
-        setCurrentMove(move);
+  const handlePlay = (squares: SquareValue[]) => {
+    const nextHistory = [...history.slice(0, currentMove + 1), squares];
+    setHistory(nextHistory);
+    setCurrentMove(nextHistory.length - 1);
+  };
+
+  const jumpTo = (move: number) => {
+    setCurrentMove(move);
+  }
+
+  const moves = history.map((_, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
     }
+    return (
+      <li>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
 
-    const moves = history.map((_, move) => {
-        let description;
-        if (move > 0) {
-          description = 'Go to move #' + move;
-        } else {
-          description = 'Go to game start';
-        }
-        return (
-          <li>
-            <button onClick={() => jumpTo(move)}>{description}</button>
-          </li>
-        );
-      });
-
   return (
     <div className="flex">
       <div>
@@ -46,4 +46,4 @@ export default function Game() {
       </div>
     </div>
   );
-}
+}
diff --git a/src/node/react/src/App.css → src/node/react/src/index.css b/src/node/react/src/App.css → src/node/react/src/index.css
diff --git a/src/node/react/src/index.tsx b/src/node/react/src/index.tsx
@@ -1,9 +1,24 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from '@/App'
+import "@/index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+
+import { routeTree } from '@/routeTree.gen';
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
-)
+)
diff --git a/src/node/react/src/pages/HomePage.tsx b/src/node/react/src/pages/HomePage.tsx
@@ -1,9 +1,7 @@
-import Card from "@/components/Card";
 import Game from "@/components/TicTacToe/Game";
 
 const HomePage = () => {
     return <>
-        <Card title="Home"  desc="Sandbox page"/>
         <Game />
       </>
     }

diff --git a/src/node/react/src/pages/LoginPage.tsx b/src/node/react/src/pages/LoginPage.tsx
diff --git a/src/node/react/src/pages/SudokuGamePage.tsx b/src/node/react/src/pages/SudokuGamePage.tsx
@@ -0,0 +1,6 @@
+export default function SudokuGamePage() {
+  return (
+    <div className="container">
+    </div>
+  )
+}
diff --git a/src/node/react/src/routeTree.gen.ts b/src/node/react/src/routeTree.gen.ts
@@ -0,0 +1,56 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+import { createFileRoute } from '@tanstack/react-router'
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+
+// Create Virtual Routes
+
+const SudokuLazyImport = createFileRoute('/sudoku')()
+const IndexLazyImport = createFileRoute('/')()
+
+// Create/Update Routes
+
+const SudokuLazyRoute = SudokuLazyImport.update({
+  path: '/sudoku',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/sudoku.lazy').then((d) => d.Route))
+
+const IndexLazyRoute = IndexLazyImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      preLoaderRoute: typeof IndexLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/sudoku': {
+      preLoaderRoute: typeof SudokuLazyImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([
+  IndexLazyRoute,
+  SudokuLazyRoute,
+])
+
+/* prettier-ignore-end */
diff --git a/src/node/react/src/routes/__root.tsx b/src/node/react/src/routes/__root.tsx
@@ -0,0 +1,30 @@
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+import NavLink from "@/components/NavLink";
+
+export const Route = createRootRoute({
+  component: Root,
+  notFoundComponent: NotFound
+});
+
+function NotFound() {
+  return (
+    <p>Not Found (on root route)</p>
+  )
+}
+
+function Root() {
+  return (
+    <>
+      <div className="navbar bg-neutral text-blue-200">
+        <NavLink to="/">TicTacToe</NavLink>
+        <NavLink to="/sudoku">Sudoku</NavLink>
+      </div >
+
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  )
+}
diff --git a/src/node/react/src/routes/index.lazy.tsx b/src/node/react/src/routes/index.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+import HomePage from "@/pages/HomePage";
+
+export const Route = createLazyFileRoute('/')({
+  component: HomePage,
+})
diff --git a/src/node/react/src/routes/sudoku.lazy.tsx b/src/node/react/src/routes/sudoku.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+import SudokuGamePage from "@/pages/SudokuGamePage";
+
+export const Route = createLazyFileRoute('/sudoku')({
+  component: SudokuGamePage,
+})