add db
This commit is contained in:
sparshg
90
app/package-lock.json
generated
90
app/package-lock.json
generated
@@ -8,7 +8,8 @@
|
||||
"name": "app",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"lucide-svelte": "^0.441.0"
|
||||
"lucide-svelte": "^0.441.0",
|
||||
"socket.io-client": "^4.7.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
@@ -977,6 +978,12 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@socket.io/component-emitter": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
|
||||
"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-auto": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.4.tgz",
|
||||
@@ -1804,7 +1811,6 @@
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
@@ -1886,6 +1892,28 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/engine.io-client": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.4.tgz",
|
||||
"integrity": "sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.3.1",
|
||||
"engine.io-parser": "~5.2.1",
|
||||
"ws": "~8.17.1",
|
||||
"xmlhttprequest-ssl": "~2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io-parser": {
|
||||
"version": "5.2.3",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
|
||||
"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.21.5",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
|
||||
@@ -2904,7 +2932,6 @@
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mz": {
|
||||
@@ -3623,6 +3650,34 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-client": {
|
||||
"version": "4.7.5",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
|
||||
"integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.3.2",
|
||||
"engine.io-client": "~6.5.2",
|
||||
"socket.io-parser": "~4.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-parser": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
|
||||
"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
@@ -4405,6 +4460,35 @@
|
||||
"url": "https://github.com/chalk/strip-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.17.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
|
||||
"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xmlhttprequest-ssl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
|
||||
"integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"lucide-svelte": "^0.441.0"
|
||||
"lucide-svelte": "^0.441.0",
|
||||
"socket.io-client": "^4.7.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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-200 p-2 rounded-lg">
|
||||
<div class="grid grid-cols-10 gap-1 bg-primary p-2 rounded-lg">
|
||||
{#each board.board as row, i}
|
||||
{#each row as cell, j}
|
||||
<button
|
||||
class="aspect-square bg-blue-300 flex items-center justify-center {!board.isOpponent
|
||||
class="aspect-square bg-blue-950 flex items-center justify-center {!board.isOpponent
|
||||
? 'cursor-default'
|
||||
: ''}"
|
||||
onclick={() => callback(i, j)}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { io, Socket } from "socket.io-client";
|
||||
|
||||
export type Phase = 'placement' | 'battle' | 'gameover';
|
||||
export type CellType = 'e' | 's' | 'h' | 'm'; // empty, ship, hit, miss
|
||||
|
||||
@@ -6,15 +8,57 @@ export class State {
|
||||
playerBoard = $state(new Board(false));
|
||||
opponentBoard = $state(new Board(true));
|
||||
room = $state('');
|
||||
turn = $state(false);
|
||||
socket = io('ws://127.0.0.1:3000/', {
|
||||
transports: ['websocket']
|
||||
});
|
||||
|
||||
createRoom() {
|
||||
this.room = Math.random().toString(36).substring(2, 6).toUpperCase();
|
||||
constructor() {
|
||||
this.socket.on('created-room', (room: string) => {
|
||||
this.room = room;
|
||||
});
|
||||
this.socket.on('upload', (_, callback) => {
|
||||
callback(this.playerBoard.board);
|
||||
})
|
||||
this.socket.on('turn', (id) => {
|
||||
this.turn = id == this.socket.id;
|
||||
})
|
||||
}
|
||||
|
||||
joinRoom(room: string) {
|
||||
if (room.length != 4) return;
|
||||
if (room == this.room) return;
|
||||
this.room = room;
|
||||
async attack(i: number, j: number) {
|
||||
if (!this.turn) return;
|
||||
this.turn = false;
|
||||
const res = await this.socket.emitWithAck('attack', [i, j]);
|
||||
if (res) {
|
||||
this.opponentBoard.board[i][j] = 'h';
|
||||
} else {
|
||||
this.opponentBoard.board[i][j] = 'm';
|
||||
}
|
||||
}
|
||||
|
||||
async createRoom() {
|
||||
this.socket.emit('create');
|
||||
// this.socket.emit('upload', this.playerBoard.board);
|
||||
// send the board to the server
|
||||
// let api = 'http://127.0.0.1:3000/';
|
||||
// await fetch(api, {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// 'Access-Control-Allow-Origin': '*',
|
||||
// },
|
||||
// body: JSON.stringify(this.playerBoard.board),
|
||||
// }).then((response) => {
|
||||
// console.log(response);
|
||||
// response.json().then((data) => {
|
||||
// console.log(data);
|
||||
// });
|
||||
// });
|
||||
}
|
||||
|
||||
joinRoom() {
|
||||
if (this.room.length != 4) return;
|
||||
this.socket.emit('join', this.room);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,9 +72,9 @@ export class Board {
|
||||
if (!isOpponent) this.randomize();
|
||||
}
|
||||
|
||||
set(x: number, y: number, type: CellType) {
|
||||
this.board[x][y] = type;
|
||||
}
|
||||
// set(x: number, y: number, type: CellType) {
|
||||
// this.board[x][y] = type;
|
||||
// }
|
||||
|
||||
randomize() {
|
||||
this.board = Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 'e'));
|
||||
|
||||
@@ -29,10 +29,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<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')}
|
||||
/>
|
||||
<Board board={gameState.opponentBoard} callback={(i, j) => gameState.attack(i, j)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -50,9 +47,9 @@
|
||||
type="text"
|
||||
bind:value={gameState.room}
|
||||
placeholder="Code"
|
||||
class="input input-bordered w-full max-w-20"
|
||||
class="input input-bordered w-full max-w-24 text-center"
|
||||
/>
|
||||
<button class="btn btn-outline">Join Room</button>
|
||||
<button class="btn btn-outline" onclick={() => gameState.joinRoom()}>Join Room</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -9,8 +9,8 @@ export default {
|
||||
],
|
||||
|
||||
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
|
||||
themes: ["night"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
darkTheme: "night", // 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
|
||||
|
||||
Reference in New Issue
Block a user