Commit 7916f81f authored by satan's avatar satan
Browse files

Initial webinterface

parent c581c416
<template>
<div>
<h1>Hi</h1>
<table>
<tr v-for="y in height" :key="y">
<td
v-for="x in width"
:key="x"
@click="click(x, y)"
:class="getCell(x, y)"
></td>
</tr>
</table>
<!-- <ul>
<li v-for="(ship, i) of ships" :key="i">
{{ Math.max(ship.sizeX, ship.sizeY) }}
</li>
</ul> -->
<ul>
<template v-for="l in Math.max(width, height)">
<li
v-if="required[l] || lengths[l]"
:key="l"
:style="`color:${
(required[l] || 0) === (lengths[l] || 0) ? 'green' : 'red'
}`"
>
{{ l }}er: {{ lengths[l] || 0 }} von {{ required[l] || 0 }}
</li>
</template>
</ul>
<button @click="reset">Reset</button>
<button :disabled="!valid">Abschicken</button>
<br />
<textarea readonly v-text="json" />
</div>
</template>
<script lang="ts">
export default { setup() {} };
import { reactive, ref, computed } from "vue";
enum Cell {
UNKNOWN = "unknown",
WATER = "water",
SHIP = "ship",
DESTROYED = "destroyed"
}
interface Ship {
x: number;
y: number;
sizeX: number;
sizeY: number;
}
export default {
setup() {
const grid = reactive(new Map<string, Cell>());
//@ts-ignore
window.grid = grid;
const width = ref(13);
const height = ref(6);
const required = {
1: 0,
2: 3,
3: 1,
4: 1,
5: 1
};
function getCell(x: number, y: number) {
let cell = grid.get(`${x | 0},${y | 0}`);
if (cell === undefined) cell = Cell.UNKNOWN;
return cell;
}
function setCell(x: number, y: number, cell: Cell) {
if (getCell(x - 1, y - 1) === Cell.SHIP) return;
if (getCell(x + 1, y - 1) === Cell.SHIP) return;
if (getCell(x + 1, y + 1) === Cell.SHIP) return;
if (getCell(x - 1, y + 1) === Cell.SHIP) return;
grid.set(`${x | 0},${y | 0}`, cell);
return true;
}
function reset() {
for (let x = 1, X = width.value; x <= X; x++)
for (let y = 1, Y = height.value; y <= Y; y++) {
setCell(x, y, Cell.WATER);
}
}
function click(x: number, y: number) {
const old = getCell(x, y);
if (old === Cell.UNKNOWN || old === Cell.WATER) {
setCell(x, y, Cell.SHIP);
return;
}
if (old === Cell.SHIP) {
setCell(x, y, Cell.WATER);
return;
}
}
const ships = computed(() => {
const found = new Set<Ship>();
const visited = new Set<string>();
function visit(x: number, y: number, lookup = true): Cell {
const coords = `${x | 0},${y | 0}`;
if (visited.has(coords)) return;
visited.add(coords);
const cell = getCell(x, y);
if (lookup) return cell;
if (cell !== Cell.SHIP) return;
let sizeX: number = 1;
while (visit(x + sizeX, y) === Cell.SHIP) sizeX++;
let sizeY: number = 1;
while (visit(x, y + sizeY) === Cell.SHIP) sizeY++;
if (sizeX > 1 && sizeY > 1) {
alert("Invalid ships");
}
found.add({ x, y, sizeX, sizeY });
}
for (let x = 1, X = width.value; x <= X; x++)
for (let y = 1, Y = height.value; y <= Y; y++) {
visit(x, y, false);
}
return found;
});
const lengths = computed(() => {
const lengths = {};
for (let s of ships.value) {
const l = Math.max(s.sizeX, s.sizeY);
lengths[l] = (lengths[l] ? lengths[l] : 0) + 1;
}
return lengths;
});
const valid = computed(() => {
for (let l = 0; l < Math.max(width.value, height.value); l++) {
const r = required[l] || 0;
const s = lengths.value[l] || 0;
if (r !== s) return false;
}
return true;
});
const json = computed(() => {
return JSON.stringify([...ships.value.values()]);
});
return {
width,
height,
getCell,
click,
ships,
lengths,
required,
valid,
reset,
json
};
}
};
</script>
<style>
td {
width: 3em;
height: 3em;
}
.water,
.unknown {
background: blue;
}
.ship {
background: gray;
}
</style>
......@@ -2,7 +2,7 @@
<html lang="de-de">
<head>
<meta charset="utf-8" />
<title>Vue3 Template</title>
<title>Switche versenken</title>
<link rel="canonical" href="./index.html" />
<link rel="preload" href="./bundle.css" as="style" />
<meta
......
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