diff --git a/Trunk.toml b/Trunk.toml deleted file mode 100644 index 24cca3f..0000000 --- a/Trunk.toml +++ /dev/null @@ -1,6 +0,0 @@ -[build] -target = "client/index.html" -dist = "dist" - -[watch] -watch = ["client"] diff --git a/client/index.html b/client/index.html index 875d3e4..084e291 100644 --- a/client/index.html +++ b/client/index.html @@ -3,7 +3,7 @@ - + @@ -11,5 +11,5 @@ - + diff --git a/client/public/styles.css b/client/public/styles.css index 0b30a70..b5c61c9 100644 --- a/client/public/styles.css +++ b/client/public/styles.css @@ -1,52 +1,3 @@ -/* --------------------- Open Props --------------------------- */ - -/* the props */ -@import "https://unpkg.com/open-props"; - -/* optional imports that use the props */ -@import "https://unpkg.com/open-props/normalize.min.css"; -@import "https://unpkg.com/open-props/buttons.min.css"; - -/* ------------------------------------------------------------ */ - -body { - font-family: sans-serif; - text-align: center; -} - -.container { - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; -} - -.buttons { - display: flex; - justify-content: space-evenly; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - text-align: center; - margin: 0 auto; - padding: 2rem; -} - -p, -button { - margin: var(--size-6); -} - -body > picture, -button { - display: block; - margin-left: auto; - margin-right: auto; - text-align: center; - margin: 2rem; -} +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/client/src/lib.rs b/client/src/lib.rs index e72cd6a..ffc0481 100644 --- a/client/src/lib.rs +++ b/client/src/lib.rs @@ -20,17 +20,19 @@ pub fn App() -> impl IntoView { // sets the document title - + <Title text="Cards for Humanity"/> // injects metadata in the <head> of the page <Meta charset="UTF-8"/> <Meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <body class="bg-black"> <Router> <Routes> <Route path="/" view=Home/> <Route path="/*" view=NotFound/> </Routes> </Router> + </body> } } diff --git a/client/src/pages/home.rs b/client/src/pages/home.rs index 53ea5b5..38604ed 100644 --- a/client/src/pages/home.rs +++ b/client/src/pages/home.rs @@ -28,6 +28,9 @@ pub fn Home() -> impl IntoView { <h1>"Cards For Humanity"</h1> <hr/> + <p>Hello, [Name]</p> + <hr/> + <p>Connection status: Disconnected.</p> <div class="buttons"> <Button/> diff --git a/client/tailwind.config.js b/client/tailwind.config.js new file mode 100644 index 0000000..6fab1ba --- /dev/null +++ b/client/tailwind.config.js @@ -0,0 +1,11 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: { + relative: true, + files: ["*.html", "./src/**/*.rs"], + }, + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/readme.md b/readme.md index 875a1a7..ca097c2 100644 --- a/readme.md +++ b/readme.md @@ -7,8 +7,13 @@ This started as a problem trying to play games with friends who are all on diffe ## Dev stuff: -`trunk build` to build test client -`cargo run` to run server +### Client +* [Install Trunk](https://trunkrs.dev/#install) +* `trunk build` or `trunk serve --open` (hot reload on port 8080) from `client` dir to build test client + +### Server +* `cargo run` to run server + open `localhost:3030` in your browser to run test client or connect to `ws://localhost:3030/websocket` with a custom client diff --git a/src/main.rs b/src/main.rs index 32a21b9..cc0510e 100644 --- a/src/main.rs +++ b/src/main.rs @@ -139,7 +139,7 @@ async fn main() -> Result<()> { .route("/reference_client", get(reference_client)) .route("/websocket", get(websocket_handler)) .route("/css", get(css)) - .nest_service("/", ServeDir::new("dist")) + .nest_service("/", ServeDir::new("client/dist")) .with_state(app_state); // send it