Commit 7eccc4fb authored by satan's avatar satan
Browse files

nächste version

parent f78b407f
<template>
<div>
<template v-if="phase === 'setup'">
<v-grid v-model:grid="grid" @clicked="click" />
<button @click="grid.reset()">Reset</button>
<button :disabled="!valid" @click="phase = 'running'">Abschicken</button>
</template>
<div v-else>
<v-grid />
<v-grid />
<div v-if="phase === 'setup'" class="card">
<div class="card-body">
<v-grid v-model:grid="myGrid" @clicked="edit(myGrid, $event)" />
</div>
<div class="card-footer btn-group">
<button class="btn btn-danger" @click="myGrid.reset()">Reset</button>
<button
class="btn"
:disabled="!valid"
:class="{ 'btn-success': valid }"
@click="phase = 'ready'"
>
Los!
</button>
</div>
</div>
<div v-else class="card">
<div class="card-body d-flex" style="justify-content: space-between">
<v-grid v-model:grid="myGrid" />
<v-grid v-model:grid="otherGrid" />
</div>
</div>
<ul>
<template v-for="l in Math.max(grid.width, grid.height)">
<ul v-if="phase === 'setup'">
<template v-for="l in Math.max(myGrid.width, myGrid.height)">
<li
v-if="required[l] || grid.shipCount(l)"
v-if="required[l] || myGrid.shipCount(l)"
:key="l"
:style="`color:${
(required[l] || 0) === grid.shipCount(l) ? 'green' : 'red'
(required[l] || 0) === myGrid.shipCount(l) ? 'green' : 'red'
}`"
>
{{ l }}er: {{ grid.shipCount(l) }} von {{ required[l] || 0 }}
{{ l }}er: {{ myGrid.shipCount(l) }} von {{ required[l] || 0 }}
</li>
</template>
</ul>
......@@ -30,53 +42,109 @@
</template>
<script lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { reactive, ref, unref, computed, onMounted, watch } from "vue";
import { Cell, getCell, setCell, Grid } from "./gameLogic";
import VGrid from "./components/Grid.vue";
const required = {
1: 0,
2: 3,
3: 1,
4: 1,
5: 1
};
export default {
components: { VGrid },
setup() {
const grid = reactive(new Grid(12, 6));
const myGrid = reactive(new Grid(12, 6, Cell.UNKNOWN));
const otherGrid = reactive(new Grid(12, 6));
const phase = ref("setup");
//@ts-ignore
window.grid = grid;
const required = {
1: 0,
2: 3,
3: 1,
4: 1,
5: 1
};
function click(x: number, y: number) {
const old = getCell(grid, x, y);
function edit(g: Grid, [x, y]: [x: number, y: number]) {
const old = getCell(g, x, y);
if (old === Cell.UNKNOWN) {
setCell(grid, x, y, Cell.SHIP);
setCell(g, x, y, Cell.SHIP);
return;
}
if (old === Cell.SHIP) {
setCell(grid, x, y, Cell.UNKNOWN);
setCell(g, x, y, Cell.UNKNOWN);
return;
}
}
const ships = computed(() => grid.ships);
const ships = computed(() => myGrid.ships);
const valid = computed(() => grid.valid(required));
const valid = myGrid.valid(required);
const json = computed(() => {
return JSON.stringify([...ships.value.values()]);
});
setInterval(async () => {
const resp = await fetch("/api/gamephase");
const { phase: p } = await resp.json();
if (phase.value === "ready") {
return;
}
phase.value = p;
if (p !== "war") {
return;
}
const state2Cell: { [s: string]: Cell } = {
H: Cell.HIT,
S: Cell.SHIP,
W: Cell.UNKNOWN,
F: Cell.WATER
};
fetch("/api/grid/my")
.then(r => r.json())
.then(json => {
for (const { x, y, state } of json) {
setCell(myGrid, x, y, state2Cell[state]);
}
});
fetch("/api/grid/other")
.then(r => r.json())
.then(json => {
for (const { x, y, state } of json) {
setCell(otherGrid, x, y, state2Cell[state]);
}
});
}, 1000);
watch(phase, p => {
p = unref(p);
switch (p) {
case "setup":
myGrid.reset();
break;
case "ready":
fetch("/api/ready", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(myGrid)
});
break;
case "war":
otherGrid.reset();
break;
}
});
return {
phase,
grid,
myGrid,
otherGrid,
getCell,
click,
edit,
ships,
required,
valid,
......
......@@ -32,7 +32,7 @@ export default {
});
function click(x: number, y: number) {
emit("clicked", x, y);
emit("clicked", [x, y]);
}
return { getCell, grid, click };
......
......@@ -18,10 +18,11 @@ export class Grid extends Map<string, Cell> {
width: number;
height: number;
constructor(width: number, height: number) {
constructor(width: number, height: number, init?: Cell) {
super();
this.width = width;
this.height = height;
this.reset(init);
}
get ships() {
......@@ -78,12 +79,29 @@ export class Grid extends Map<string, Cell> {
});
}
reset() {
reset(init: Cell = Cell.UNKNOWN) {
for (let x = 1, X = this.width; x <= X; x++)
for (let y = 1, Y = this.height; y <= Y; y++) {
setCell(this, x, y, Cell.WATER);
setCell(this, x, y, init);
}
}
toJSON() {
const arr = [];
const cell2State: { [c in Cell]: string } = {
[Cell.HIT]: "H",
[Cell.SHIP]: "S",
[Cell.UNKNOWN]: "W",
[Cell.WATER]: "F"
};
for (const [coord, cell] of this.entries()) {
const [x, y] = coord.split(",");
arr.push({ x: +x, y: +y, state: cell2State[cell] });
}
return arr;
}
}
export function getCell(grid: Grid, x: number, y: number) {
......
......@@ -2,7 +2,7 @@
<html lang="de-de">
<head>
<meta charset="utf-8" />
<title>Switche versenken</title>
<title>Switcheversenken</title>
<link rel="canonical" href="./index.html" />
<link rel="preload" href="./bundle.css" as="style" />
<meta
......@@ -15,6 +15,11 @@
<link rel="stylesheet" type="text/css" href="bundle.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark text-center">
<span class="col navbar-brand">FeM Switcheversenken</span>
</nav>
</header>
<main></main>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment