rust board, room frontend
This commit is contained in:
sparshg
49
app/package-lock.json
generated
49
app/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user