rust board, room frontend

Cargo.lock

@@ -143,6 +143,18 @@ version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8c3c1a368f70d6cf7302d78f8f7093da241fb8e8807c05cc9e51a125895a6d5b"
 
+[[package]]
+name = "battleship"
+version = "0.1.0"
+dependencies = [
+ "axum",
+ "dotenv",
+ "rand",
+ "serde",
+ "sqlx",
+ "tokio",
+]
+
 [[package]]
 name = "bitflags"
 version = "2.6.0"
@@ -1485,17 +1497,6 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
-[[package]]
-name = "todoos"
-version = "0.1.0"
-dependencies = [
- "axum",
- "dotenv",
- "serde",
- "sqlx",
- "tokio",
-]
-
 [[package]]
 name = "tokio"
 version = "1.40.0"

Cargo.toml

@@ -1,11 +1,12 @@
 [package]
-name = "todoos"
+name = "battleship"
 version = "0.1.0"
 edition = "2021"
 
 [dependencies]
 axum = "0.7.5"
 dotenv = "0.15.0"
+rand = "0.8.5"
 serde = { version = "1.0.210", features = ["derive"] }
 sqlx = "0.8.2"
 tokio = { version = "1.40.0", features = ["full"] }

app/package-lock.json

@@ -17,6 +17,7 @@
 				"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 				"@types/eslint": "^9.6.0",
 				"autoprefixer": "^10.4.20",
+				"daisyui": "^4.12.10",
 				"eslint": "^9.0.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.36.0",
@@ -1745,6 +1746,17 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/css-selector-tokenizer": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+			"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"fastparse": "^1.1.2"
+			}
+		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1758,6 +1770,36 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/culori": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+			"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/daisyui": {
+			"version": "4.12.10",
+			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
+			"integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"css-selector-tokenizer": "^0.8",
+				"culori": "^3",
+				"picocolors": "^1",
+				"postcss-js": "^4"
+			},
+			"engines": {
+				"node": ">=16.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/daisyui"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.7",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -2191,6 +2233,13 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/fastparse": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+			"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/fastq": {
 			"version": "1.17.1",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",

app/package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
+		"daisyui": "^4.12.10",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",

app/src/lib/board.svelte

@@ -5,11 +5,11 @@
 	let { board, callback }: { board: Board; callback: (i: number, j: number) => void } = $props();
 </script>
 
-<div class="grid grid-cols-10 gap-1 bg-blue-100 p-2 rounded-lg">
+<div class="grid grid-cols-10 gap-1 bg-blue-200 p-2 rounded-lg">
 	{#each board.board as row, i}
 		{#each row as cell, j}
 			<button
-				class="aspect-square bg-blue-200 flex items-center justify-center {!board.isOpponent
+				class="aspect-square bg-blue-300 flex items-center justify-center {!board.isOpponent
 					? 'cursor-default'
 					: ''}"
 				onclick={() => callback(i, j)}

app/src/lib/header.svelte

@@ -3,8 +3,8 @@
 </script>
 
 <header
-	class="mb-8 flex items-center w-fit rounded-full px-6 py-3 drop-shadow-md bg-gray-50 mx-auto"
+	class="mb-8 flex items-center w-fit rounded-full px-6 py-3 drop-shadow-md bg-base-100 mx-auto"
 >
 	<Anchor class="size-16 mr-8 text-blue-600" />
-	<h1 class="text-4xl font-bold text-gray-900">Battleship Online</h1>
+	<h1 class="text-4xl font-bold">Battleship Online</h1>
 </header>

app/src/lib/state.svelte.ts

@@ -5,6 +5,17 @@ export class State {
     phase: Phase = $state('placement');
     playerBoard = $state(new Board(false));
     opponentBoard = $state(new Board(true));
+    room = $state('');
+
+    createRoom() {
+        this.room = Math.random().toString(36).substring(2, 6).toUpperCase();
+    }
+
+    joinRoom(room: string) {
+        if (room.length != 4) return;
+        if (room == this.room) return;
+        this.room = room;
+    }
 }
 
 export class Board {

app/src/routes/+page.svelte

@@ -6,14 +6,14 @@
 	let gameState = new State();
 </script>
 
-<div class="min-h-screen bg-gray-100 py-8 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen bg-base-300 py-8 px-4 sm:px-6 lg:px-8">
 	<div class="max-w-7xl mx-auto">
 		<Header />
 
-		<main class="bg-white shadow-xl rounded-lg overflow-hidden">
+		<main class="bg-base-100 shadow-xl rounded-xl overflow-hidden">
 			<div class="p-6 space-y-6">
 				<div class="flex justify-between items-center">
-					<h2 class="text-2xl font-semibold text-gray-700">
+					<h2 class="text-2xl font-semibold">
 						{gameState.phase === 'placement' ? 'Place Your Ships' : 'Battle Phase'}
 					</h2>
 					<div class="flex space-x-4">
@@ -24,11 +24,11 @@
 
 				<div class="grid md:grid-cols-2 gap-8">
 					<div>
-						<h3 class="text-lg font-medium text-gray-700 mb-2">Your Board</h3>
+						<h3 class="text-lg font-medium mb-2">Your Board</h3>
 						<Board board={gameState.playerBoard} callback={() => {}} />
 					</div>
 					<div>
-						<h3 class="text-lg font-medium text-gray-700 mb-2">Opponent's Board</h3>
+						<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
 						<Board
 							board={gameState.opponentBoard}
 							callback={(i, j) => gameState.opponentBoard.set(i, j, 'h')}
@@ -44,7 +44,15 @@
 					{:else}
 						<button class="btn btn-primary">Fire!</button>
 					{/if}
-					<button class="btn btn-outline">Reset Game</button>
+					<button class="btn btn-outline" onclick={() => gameState.createRoom()}>Create Room</button
+					>
+					<input
+						type="text"
+						bind:value={gameState.room}
+						placeholder="Code"
+						class="input input-bordered w-full max-w-20"
+					/>
+					<button class="btn btn-outline">Join Room</button>
 				</div>
 			</div>
 		</main>

app/tailwind.config.js

@@ -4,6 +4,19 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('daisyui'),
+  ],
+
+  daisyui: {
+    themes: ["nord"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    darkTheme: "nord", // name of one of the included themes for dark mode
+    base: true, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    utils: true, // adds responsive and modifier utility classes
+    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    themeRoot: ":root", // The element that receives theme color CSS variables
+  },
 }
 

src/game.rs

@@ -1,8 +1,60 @@
-use serde::Deserialize;
+use axum::Json;
+use rand::Rng;
+use serde::{Deserialize, Serialize};
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize, Serialize)]
-pub struct Board([[Option<char>; 10]; 10]);
+pub struct Board(pub [[char; 10]; 10]);
 
 impl Board {
-    // pub async fn new
+    const SHIPS: [i32; 5] = [5, 4, 3, 3, 2];
+
+    pub fn randomize() -> Self {
+        let mut board = Board([['e'; 10]; 10]);
+        for &length in Self::SHIPS.iter() {
+            loop {
+                let dir = rand::thread_rng().gen_bool(0.5);
+                let x = rand::thread_rng().gen_range(0..(if dir { 10 } else { 11 - length }));
+                let y = rand::thread_rng().gen_range(0..(if dir { 11 - length } else { 10 }));
+                if board.is_overlapping(x, y, length, dir) {
+                    continue;
+                }
+                for i in 0..length {
+                    let (tx, ty) = if dir { (x, y + i) } else { (x + i, y) };
+                    board.0[tx as usize][ty as usize] = 's';
+                }
+                break;
+            }
+        }
+        board
+    }
+
+    fn is_overlapping(&self, x: i32, y: i32, length: i32, dir: bool) -> bool {
+        for i in -1..2 {
+            for j in -1..=length {
+                let (tx, ty) = if dir { (x + i, y + j) } else { (x + j, y + i) };
+                if tx < 0 || tx >= 10 || ty < 0 || ty >= 10 {
+                    continue;
+                }
+                if self.0[tx as usize][ty as usize] != 'e' {
+                    return true;
+                }
+            }
+        }
+        false
+    }
+
+    pub async fn from_json(Json(board): Json<Board>) -> Self {
+        board
+    }
+
+    fn validate_syntax(&self) -> bool {
+        self.0
+            .iter()
+            .all(|row| row.iter().all(|cell| matches!(cell, 'e' | 'h' | 'm' | 's')))
+    }
+}
+
+pub async fn create_board_route(board: Json<Board>) -> String {
+    let board = Board::from_json(board).await;
+    format!("{:?}", board)
 }

src/main.rs

@@ -1,11 +1,16 @@
 mod game;
 
-use axum::{routing::get, Json, Router};
+use axum::{
+    routing::{get, post},
+    Json, Router,
+};
+use game::Board;
+use serde::Serialize;
 use tokio::net::TcpListener;
 
 #[tokio::main]
 async fn main() {
-    let app = Router::new().route("/", get(|| async { "Hello, Rust!" }));
+    let app = Router::new().route("/", post(game::create_board_route));
 
     let listener = TcpListener::bind("127.0.0.1:3000").await.unwrap();
     println!("listening on {}", listener.local_addr().unwrap());