init remix app

client/.gitignore

@@ -0,0 +1,9 @@
+.cache
+.vercel
+.output
+
+/build/
+/public/build
+/api/index.js
+/api/index.js.map
+/app/styles/app.css

client/README.md

@@ -0,0 +1,34 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Deployment
+
+After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
+
+If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
+It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
+
+## Development
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

client/app/components/Footer.tsx

@@ -0,0 +1,4 @@
+const Footer = () => {
+  return <div>Footer</div>;
+};
+export default Footer;

client/app/components/Header.tsx

@@ -0,0 +1,44 @@
+import { Link } from "@remix-run/react";
+
+const Header = () => {
+  return (
+    <header className="relative flex flex-col items-start justify-between bg-slate-700 sm:flex-row sm:items-center">
+      <h1 className="z-10 m-2.5 text-2xl">chessu</h1>
+      <input className="peer" type="checkbox" id="menu" hidden />
+      <label
+        htmlFor="menu"
+        className="absolute right-0 p-5 sm:hidden peer-checked:[&_div:first-child]:translate-y-1.5 peer-checked:[&_div:first-child]:rotate-45 peer-checked:[&_div:last-child]:-translate-y-1 peer-checked:[&_div:last-child]:-rotate-45"
+      >
+        <div
+          aria-hidden="true"
+          className="m-auto h-0.5 w-6 rounded bg-blue-500 transition duration-300"
+        ></div>
+        <div
+          aria-hidden="true"
+          className="m-auto mt-2 h-0.5 w-6 rounded bg-blue-500 transition duration-300"
+        ></div>
+      </label>
+      <div className="fixed flex h-full w-[calc(100%-4rem)] translate-x-[-100%] flex-col items-center bg-inherit pt-16 shadow-lg transition duration-300 peer-checked:translate-x-0 sm:static sm:flex sm:w-auto sm:translate-x-0 sm:flex-row sm:bg-inherit sm:pt-0 [&_a]:block [&_a]:text-center hover:[&_a]:bg-blue-500">
+        <nav className="w-full sm:w-auto">
+          <ul className="flex flex-col sm:flex-row">
+            <li>
+              <Link className="p-5" to="/">
+                Play
+              </Link>
+            </li>
+            <li>
+              <Link className="p-5" to="/games">
+                Watch
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <div className="flex w-full items-center sm:w-auto">
+          <button className="w-full p-5 sm:w-auto">themebtn</button>
+          <button className="w-full p-5 sm:w-auto">Sign in</button>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;

client/app/components/game/Board.tsx

@@ -0,0 +1,10 @@
+import { Chessboard } from "react-chessboard";
+
+const Board = () => {
+  return (
+    <div>
+      <Chessboard />
+    </div>
+  );
+};
+export default Board;

client/app/entry.client.tsx

@@ -0,0 +1,22 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (typeof requestIdleCallback === "function") {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}

client/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

client/app/root.tsx

@@ -0,0 +1,34 @@
+import type { MetaFunction } from "@remix-run/node";
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+
+// Tailwind CSS
+import styles from "./styles/app.css";
+export const links = () => [{ rel: "stylesheet", href: styles }];
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "Chessu",
+  viewport: "width=device-width,initial-scale=1"
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Header />
+        <Outlet />
+        <Footer />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}

client/app/routes/index.tsx

@@ -0,0 +1,3 @@
+export default function Index() {
+  return <div>Index</div>;
+}

client/package.json

@@ -14,8 +14,12 @@
         "@remix-run/react": "^1.12.0",
         "@remix-run/vercel": "^1.12.0",
         "@vercel/node": "^2.9.0",
+        "chess.js": "^1.0.0-beta.3",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-chessboard": "^2.0.8",
+        "react-dom": "^18.2.0",
+        "remix-utils": "^6.0.0",
+        "socket.io-client": "^4.5.4"
     },
     "devDependencies": {
         "@chessu/types": "*",

client/remix.config.js

@@ -0,0 +1,13 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+    serverBuildTarget: "vercel",
+    // When running locally in development mode, we use the built in remix
+    // server. This does not understand the vercel lambda module format,
+    // so we default back to the standard build output.
+    server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
+    ignoredRouteFiles: ["**/.*"]
+    // appDirectory: "app",
+    // assetsBuildDirectory: "public/build",
+    // serverBuildPath: "api/index.js",
+    // publicPath: "/build/",
+};

client/remix.env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />

client/server.js

@@ -0,0 +1,4 @@
+import { createRequestHandler } from "@remix-run/vercel";
+import * as build from "@remix-run/dev/server-build";
+
+export default createRequestHandler({ build, mode: process.env.NODE_ENV });

client/styles/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./app/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {}
+    },
+    plugins: []
+};