diff --git a/client/.gitignore b/client/.gitignore new file mode 100644 index 0000000..b32d337 --- /dev/null +++ b/client/.gitignore @@ -0,0 +1,9 @@ +.cache +.vercel +.output + +/build/ +/public/build +/api/index.js +/api/index.js.map +/app/styles/app.css \ No newline at end of file diff --git a/client/README.md b/client/README.md new file mode 100644 index 0000000..944936b --- /dev/null +++ b/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. diff --git a/client/app/components/Footer.tsx b/client/app/components/Footer.tsx new file mode 100644 index 0000000..117cf79 --- /dev/null +++ b/client/app/components/Footer.tsx @@ -0,0 +1,4 @@ +const Footer = () => { + return
Footer
; +}; +export default Footer; diff --git a/client/app/components/Header.tsx b/client/app/components/Header.tsx new file mode 100644 index 0000000..342e4c2 --- /dev/null +++ b/client/app/components/Header.tsx @@ -0,0 +1,44 @@ +import { Link } from "@remix-run/react"; + +const Header = () => { + return ( +
+

chessu

+ + +
+ +
+ + +
+
+
+ ); +}; +export default Header; diff --git a/client/app/components/game/Board.tsx b/client/app/components/game/Board.tsx new file mode 100644 index 0000000..ed50e21 --- /dev/null +++ b/client/app/components/game/Board.tsx @@ -0,0 +1,10 @@ +import { Chessboard } from "react-chessboard"; + +const Board = () => { + return ( +
+ +
+ ); +}; +export default Board; diff --git a/client/app/entry.client.tsx b/client/app/entry.client.tsx new file mode 100644 index 0000000..8338545 --- /dev/null +++ b/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, + + + + ); + }); +} + +if (typeof requestIdleCallback === "function") { + requestIdleCallback(hydrate); +} else { + // Safari doesn't support requestIdleCallback + // https://caniuse.com/requestidlecallback + setTimeout(hydrate, 1); +} diff --git a/client/app/entry.server.tsx b/client/app/entry.server.tsx new file mode 100644 index 0000000..fb8ea87 --- /dev/null +++ b/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( + + ); + + responseHeaders.set("Content-Type", "text/html"); + + return new Response("" + markup, { + headers: responseHeaders, + status: responseStatusCode, + }); +} diff --git a/client/app/root.tsx b/client/app/root.tsx new file mode 100644 index 0000000..725bb2a --- /dev/null +++ b/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 ( + + + + + + +
+ +