Peter_Computerliebe_ORG/battleship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rust board, room frontend

Browse Source
This commit is contained in:
sparshg
2024-09-15 01:07:16 +05:30
parent 73ab2b63a8
commit 04b9a9502b
11 changed files with 170 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Cargo.lock generated
View File

@@ -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"

3
Cargo.toml
View File

@@ -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"] }

49
app/package-lock.json generated
View File

@@ -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",

1
app/package.json
View File

@@ -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",

4
app/src/lib/board.svelte
View File

@@ -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)}

4
app/src/lib/header.svelte
View File

@@ -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>

11
app/src/lib/state.svelte.ts
View File

@@ -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 {

20
app/src/routes/+page.svelte
View File

@@ -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>

15
app/tailwind.config.js
View File

@@ -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
},
}

60
src/game.rs
View File

@@ -1,8 +1,60 @@
use serde::Deserialize;
use axum::Json;
use rand::Rng;
use serde::{Deserialize, Serialize};
#[derive(Deserialize)]
pub struct Board([[Option<char>; 10]; 10]);
#[derive(Debug, Deserialize, Serialize)]
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)
}

9
src/main.rs
View File

@@ -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());