v1.1.2

Cargo.lock

@@ -154,7 +154,7 @@ checksum = "8c3c1a368f70d6cf7302d78f8f7093da241fb8e8807c05cc9e51a125895a6d5b"
 
 [[package]]
 name = "battleship"
-version = "1.1.1"
+version = "1.1.2"
 dependencies = [
  "axum",
  "dotenv",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "battleship"
-version = "1.1.1"
+version = "1.1.2"
 edition = "2021"
 
 [dependencies]

README.md

@@ -12,7 +12,13 @@ The client is built using SvelteKit (static site) and the server uses Axum frame
 
 The client can be started using `npm run dev` inside `app` directory.
 
-The server and the database services are containarized. Just run `docker compose up` to start the server and database services if you are working on the frontend.
+The server and the database services are containerized. Just run `docker compose up` to start the server and database services if you are working on the frontend.
+Make sure to make a `.env` file with these parameters:
+```
+DATABASE_PASSWORD=db_password
+DATABASE_NAME=db_name
+DATABASE_URL=postgres://postgres:db_password@localhost:5432/db_name
+```
 
 If you are working on the server, you can run `cargo watch -i app -x run` to automatically restart the server when the source code changes, and `docker compose up -d db` to start the database service in the background.
 

app/src/lib/join.svelte

@@ -7,11 +7,13 @@
 		class: className = '',
 		roomCode,
 		createRoom,
-		joinRoom
+		joinRoom,
+		leaveRoom
 	}: {
 		roomCode: string;
 		createRoom: () => void;
 		joinRoom: (code: string) => void;
+		leaveRoom: () => void;
 		class: string;
 	} = $props();
 </script>
@@ -21,6 +23,7 @@
 >
 	<div class="space-y-4 max-w-[70%]">
 		{#if roomCode}
+			<div class="text-center text-lg text-primary-content">Share this room code</div>
 			<div class="space-x-2 flex flex-row justify-center items-center">
 				<div
 					class="text-3xl font-bold tracking-widest text-secondary-content font-mono bg-secondary py-3 rounded-full px-12"
@@ -41,20 +44,31 @@
 			</button>
 		{/if}
 		<div class="text-center text-lg text-primary-content">OR</div>
-		<div class="space-y-2">
-			<input
-				type="text"
-				placeholder="Enter code"
-				maxlength="4"
-				bind:value={joinCode}
-				class="input input-bordered input-primary uppercase tracking-widest placeholder-primary text-neutral text-center font-bold text-xl lg:text-3xl w-full glass"
-			/>
-			<button
-				onclick={() => joinRoom(joinCode)}
-				class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
-			>
-				Join Room
-			</button>
-		</div>
+		{#if !roomCode}
+			<div class="space-y-2">
+				<input
+					type="text"
+					placeholder="Enter code"
+					maxlength="4"
+					bind:value={joinCode}
+					class="input input-bordered input-primary uppercase tracking-widest placeholder-primary text-neutral text-center font-bold text-xl lg:text-3xl w-full glass"
+				/>
+				<button
+					onclick={() => joinRoom(joinCode)}
+					class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
+				>
+					Join Room
+				</button>
+			</div>
+		{:else}
+			<div class="space-x-2 flex flex-row justify-center items-center">
+				<button
+					class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
+					onclick={leaveRoom}
+				>
+					Leave room
+				</button>
+			</div>
+		{/if}
 	</div>
 </div>

app/src/routes/+page.svelte

@@ -6,6 +6,11 @@
 	import { Users } from 'lucide-svelte';
 
 	let gameState = new State();
+
+	function leaveRoom() {
+		gameState.socket.emit('leave');
+		gameState = new State();
+	}
 </script>
 
 <div class="min-h-screen bg-base-300 py-8 px-4 sm:px-6 lg:px-8">
@@ -40,10 +45,7 @@
 							</div>
 							<button
 								class="btn btn-error text-xl"
-								onclick={() => {
-									gameState.socket.emit('leave');
-									gameState = new State();
-								}}>Leave</button
+								onclick={leaveRoom}>Leave</button
 							>
 						</div>
 					{/if}
@@ -73,6 +75,7 @@
 									roomCode={gameState.room}
 									createRoom={() => gameState.createRoom()}
 									joinRoom={(code) => gameState.joinRoom(code)}
+									leaveRoom={leaveRoom}
 								/>
 							{/if}
 						</div>

src/main.rs

@@ -1,5 +1,6 @@
 mod board;
 mod game;
+
 use axum::Router;
 use board::Board;
 use dotenv::dotenv;
@@ -16,7 +17,6 @@ use socketioxide::{
 };
 use sqlx::PgPool;
 use tokio::net::TcpListener;
-use tower_http::cors::CorsLayer;
 use tracing_subscriber::FmtSubscriber;
 
 #[tokio::main]
@@ -34,9 +34,8 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
     let (layer, io) = SocketIo::builder().with_state(pool).build_layer();
 
     io.ns("/", on_connect);
-    let app = Router::new()
-        .layer(layer)
-        .layer(CorsLayer::very_permissive());
+
+    let app = Router::new().layer(layer);
 
     let listener = TcpListener::bind("0.0.0.0:3000").await?;
     println!("listening on {}", listener.local_addr()?);