init

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/db 
+/.env

account.js

@@ -0,0 +1,45 @@
+import { initDb } from './db.js';
+import fetch from 'node-fetch';
+
+let getToken = async (token) => {
+    let db = await initDb();
+
+    let id = '!nobody';
+
+    let username = await fetch("https://nbg.dervland.net/auth.php",
+        {
+            "method": "get",
+            "headers": {
+                "cookie": `token=${token}`
+            }
+        }
+    );
+
+    username = await username.text();
+
+    try {
+        username = (username.length > 1) ? username : '';
+
+        if (username) id = username;
+    } catch (err) {
+        id = '!nobody';
+    }
+
+    let userExists = await db.all('SELECT * FROM user WHERE username = ?', [
+        id
+    ]);
+
+    if (userExists.length < 1) {
+        await db.run('INSERT INTO user (username, roles, nickname) VALUES (?,?,?)', [
+            id,
+            0,
+            id
+        ]);
+    }
+
+    return id;
+}
+
+export {
+    getToken
+};

db.js

@@ -0,0 +1,74 @@
+import sqlite3 from 'sqlite3'
+import { open } from 'sqlite'
+import { mkdir, access } from 'node:fs/promises';
+
+let db;
+
+const FILE_DIRS = [
+    '/db',
+    '/db/pfp'
+]
+
+async function newDir(dir) {
+    await access(newDir)
+        .then(() => {})
+        .catch(async () => await mkdir(dir, { recursive: true }));
+}
+
+async function initFolders() {
+    for (var i = 0; i < FILE_DIRS.length; i++) {
+        await newDir( `${process.cwd()}/${FILE_DIRS[i]}`);
+    }
+}
+
+async function initDb() {
+    if (db) return db;
+
+    await initFolders();
+
+    db = await open({
+      filename: `${process.cwd()}/db/main.db`,
+      driver: sqlite3.Database
+    });
+    
+    await db.run('CREATE TABLE IF NOT EXISTS user ( \
+        username TEXT, \
+        roles INTEGER, \
+        nickname TEXT \
+    )');
+
+    await db.run('CREATE TABLE IF NOT EXISTS tile ( \
+        username CHAR(64), \
+        x INTEGER, \
+        y INTEGER \
+    )');
+
+    await db.run('CREATE TABLE IF NOT EXISTS block ( \
+        status INTEGER, \
+        x INTEGER, \
+        y INTEGER \
+    )');
+
+    await db.run('CREATE TABLE IF NOT EXISTS player ( \
+        username CHAR(64), \
+        score INTEGER, \
+        out INTEGER, \
+        color CHAR(64) \
+    )');
+
+    let blocks = await db.all('SELECT * FROM block');
+
+    if (!blocks || blocks.length == 0) {
+        await db.run('INSERT INTO block (status, x, y) VALUES (0,0,0)');
+        await db.run('INSERT INTO block (status, x, y) VALUES (1,1,0)');
+        await db.run('INSERT INTO block (status, x, y) VALUES (1,-1,0)');
+        await db.run('INSERT INTO block (status, x, y) VALUES (1,0,1)');
+        await db.run('INSERT INTO block (status, x, y) VALUES (1,0,-1)');
+    }
+
+    return db;
+}
+
+export {
+    initDb
+};

gridwar.js

@@ -0,0 +1,312 @@
+import { initDb } from "./db.js";
+import { getToken } from './account.js';
+
+let dat = {};
+
+let cooldown = {};
+let lastTurn = '';
+
+let users = {};
+
+let initTile = async (x, y, username) => {
+    let db = await initDb();
+
+    let data = new Array(25);
+
+    let blockData = await db.all('SELECT * FROM block WHERE x = ? AND y = ?', [
+        x,
+        y
+    ]);
+
+    let occupied = await db.all('SELECT * FROM tile WHERE username = ?', [
+        username
+    ]);
+
+    let blockEntry = blockData[0];
+
+    if (!dat[`${x},${y}`]) {
+        dat[`${x},${y}`] = {};
+    }
+
+    dat[`${x},${y}`].type = blockEntry ? (blockEntry.status == 1 ? 'select' : 'claimed') : ''
+
+    if (username && blockEntry && blockEntry.status == 1 && (!occupied || occupied.length < 1)) {
+        for (let i = 0; i < 25; i++) {
+            data[i] = username;
+        }
+
+        let vals = [
+            [x + 1, y],
+            [x, y + 1],
+            [x - 1, y],
+            [x, y - 1]
+        ];
+
+        await db.run('UPDATE block SET status = 0 WHERE x = ? AND y = ?', [
+            x,
+            y
+        ]);
+
+        for (let thing of vals) {
+            await db.run('INSERT INTO block (status, x, y) VALUES (1,?,?)', [
+                thing[0],
+                thing[1]
+            ]);
+        }
+
+
+    } else if (!blockEntry || blockEntry.status == 1) {
+        return false;
+    } else {
+        for (let i = 0; i < 25; i++) {
+            data[i] = data[i] || '!nobody';
+        }
+    }
+
+    let table = await db.all('SELECT * FROM tile WHERE x < ? AND y < ? AND x > ? AND y > ?', [
+        x * 5 + 5,
+        y * 5 + 5,
+        x * 5 - 1,
+        y * 5 - 1,
+    ]);
+
+    for (let i in data) {
+        let x2 = i % 5 + x * 5;
+        let y2 = Math.floor(i / 5) + y * 5;
+
+        let tile = table.find(({ x, y }) => x == x2 && y == y2);
+
+
+        if (tile) {
+            data[i] = tile.username;
+        } else {
+            await db.run('DELETE FROM tile WHERE x = ? AND y = ?', [
+                x2,
+                y2
+            ]);
+            await db.run('INSERT INTO tile (username, x, y) VALUES (?, ?, ?)', [
+                data[i],
+                x2,
+                y2
+            ]);
+        }
+
+    }
+
+    dat[`${x},${y}`].data = data;
+
+    return dat;
+}
+
+
+(async () => {
+
+    let db = await initDb();
+
+    let blocks = await db.all('SELECT * FROM block');
+
+    for (let block of blocks) {
+        initTile(block.x, block.y);
+    }
+
+    let dataUser = await db.all('SELECT * FROM player');
+
+    for (let entry of dataUser) {
+        dat[`_user_${entry.username}`] = entry;
+    }
+})();
+
+let socketHandler = async (socket, io) => {
+    let user;
+
+    let db = await initDb();
+
+    socket.on('join', async ({ token }) => {
+        user = await getToken(token);
+
+        if (user == '!nobody') {
+            user = '';
+            socket.emit('data','noauth');
+        }
+
+        users[user] = true;
+
+        socket.emit('data', dat);
+
+        socket.emit('cooldown', cooldown[user]);
+        socket.emit('turn',lastTurn);
+
+        let dataUser = await db.all('SELECT * FROM player WHERE username = ?', [
+            user
+        ]);
+
+        if (dataUser && dataUser.length > 0) {
+            dat[`_user_${user}`] = dataUser[0];
+        } else {
+            dat[`_user_${user}`] = {
+                'username': user,
+                'score': 0,
+                'out': 0,
+                'color': `hsl(${Math.random() * 360}deg,${Math.random() * 30 + 65}%,${Math.random() * 30 + 60}%)`
+            };
+
+            await db.run('INSERT INTO player (username, score, out, color) VALUES (?,?,?,?)', [
+                dat[`_user_${user}`].username,
+                dat[`_user_${user}`].score,
+                dat[`_user_${user}`].out,
+                dat[`_user_${user}`].color
+            ]);
+        }
+
+    })
+
+    socket.on('color', async (color) => {
+
+        await db.run('UPDATE player SET color = ? WHERE username = ?', [
+            color,
+            user
+        ]);
+
+        dat[`_user_${user}`].color = color;
+
+        socket.emit('data', dat);
+    })
+
+    socket.on('disconnect', () => {
+        delete users[user];
+    })
+
+    socket.on('claim', async ({ x, y }) => {
+        if (!user) return;
+
+        x = x * 1;
+        y = y * 1;
+
+        await initTile(x, y, user);
+
+        let blocks = await db.all('SELECT * FROM block');
+
+        for (let block of blocks) {
+            await initTile(block.x, block.y);
+        }
+
+        io.emit('data', dat);
+    })
+
+    socket.on('conquer', async ({ x, y }) => {
+        if (!user) return;
+
+        x = x * 1;
+        y = y * 1;
+
+        let x2 = Math.floor(x / 5);
+        let y2 = Math.floor(y / 5);
+
+        let x3 = x % 5;
+        let y3 = Math.floor(y / 5);
+
+        let key = `${x2},${y2}`
+
+        if (!dat[key]) return;
+
+        let vals = [
+            [x + 1, y],
+            [x, y + 1],
+            [x - 1, y],
+            [x, y - 1]
+        ];
+
+        let canClaim = false;
+
+        for (let val of vals) {
+            let isClaimed = await db.all('SELECT * FROM tile WHERE x = ? AND y = ?', [
+                val[0],
+                val[1]
+            ]);
+
+            console.log(isClaimed)
+
+            if (isClaimed && isClaimed.length > 0 && isClaimed[0].username == user) {
+                canClaim = true;
+                break;
+            }
+        }
+
+        if (!canClaim) return;
+
+        if (new Date() * 1 < cooldown[user] || lastTurn == user) return;
+
+        let userFactor = Math.min(Object.keys(users).length, 10);
+        userFactor = Math.max(userFactor, 1);
+
+        cooldown[user] = (60000 / userFactor) + (new Date() * 1);
+        lastTurn = user;
+
+        socket.emit('cooldown', cooldown[user]);
+        io.emit('turn',lastTurn);
+
+        let formerOwner = await db.all('SELECT * FROM tile WHERE x = ? AND y = ?', [
+            x,
+            y
+        ]);
+
+        let formerOwnerStr = formerOwner[0].username;
+
+        formerOwner = formerOwner[0] ? `_user_${formerOwner[0].username}` : false;
+        
+        await db.run('UPDATE tile SET username = ? WHERE x = ? AND y = ?', [
+            user,
+            x,
+            y
+        ]);
+
+        dat[key].data[`${x3},${y3}`] = user;
+
+        await initTile(x2, y2);
+
+        io.emit('data', dat);
+
+        if (!dat[formerOwner]) {
+            dat[formerOwner] = {
+                'username': formerOwnerStr,
+                'score': 0,
+                'out': 0,
+                'color': `hsl(${Math.random() * 360}deg,${Math.random() * 30 + 65}%,${Math.random() * 30 + 60}%)`
+            };
+
+            await db.run('INSERT INTO player (username, score, out, color) VALUES (?,?,?,?)', [
+                dat[formerOwner].username,
+                dat[formerOwner].score,
+                dat[formerOwner].out,
+                dat[formerOwner].color
+            ]);
+        }
+
+        let tCount = (await db.all('SELECT * FROM tile WHERE username = ?', [
+            formerOwnerStr
+        ])).length;
+
+        if (tCount < 26) {
+            dat[formerOwner].score--;
+        } else {
+            dat[formerOwner].score--;
+            dat[`_user_${user}`].score++;
+        }
+
+        await db.run('UPDATE player SET score = ? WHERE username = ?', [
+            dat[`_user_${user}`].score,
+            user
+        ]);
+
+        await db.run('UPDATE player SET score = ? WHERE username = ?', [
+            dat[formerOwner].score,
+            formerOwnerStr
+        ]);
+
+        console.log(dat[`_user_${user}`].score,dat[formerOwner].score);
+    });
+}
+
+export {
+    socketHandler
+};

index.js

@@ -0,0 +1,32 @@
+import express from 'express';
+
+import { Server } from 'socket.io'
+import { createServer } from 'http';
+import { socketHandler } from './gridwar.js';
+
+const app = express()
+const server = createServer(app);
+const io = new Server(server);
+const port = process.argv[2] || 3069;
+
+app.use((req, res, next) => {
+    let param = new URL(`https://gw.dervland.net/${req.originalUrl}`).searchParams.get('token');
+    if (param) {
+        res.cookie('token', param, {
+            maxAge: 1000 * 60 * 60 * 24 * 7,
+            path: '/'
+        });
+    }
+    next();
+});
+app.use(express.static('./static'));
+
+io.on('connection', (socket) => {
+    socketHandler(socket, io)
+})
+
+server.listen(port, () => {
+    console.log(`Web server listening on port ${port}`)
+})
+
+

package.json

@@ -0,0 +1,11 @@
+{
+    "type": "module",
+    "dependencies": {
+        "cookie-parser": "^1.4.6",
+        "express": "^4.18.2",
+        "http": "^0.0.1-security",
+        "socket.io": "^4.7.1",
+        "sqlite": "^5.0.1",
+        "sqlite3": "^5.1.6"
+    }
+}

static/gridwar.css

@@ -0,0 +1,291 @@
+:root {
+    --dark-1: #2b2f36;
+    --dark-2: #d8d8d8;
+
+    --light-1: #ffffff;
+    --light-2: #f8f8f8;
+
+    --red-1: rgb(245, 108, 108);
+    --purple-1: rgb(187, 112, 236);
+    --blue-1: rgb(112, 169, 235);
+
+    --shadow-1: 0px 0px 2px 2px var(--dark-2);
+    --border-1: solid var(--dark-2) 5px;
+
+    font-family: 'Noto Sans';
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+
+    margin: 0;
+    padding: 0;
+
+    background: var(--light-1);
+}
+
+a {
+    color: var(--blue-1);
+    text-decoration: none;
+}
+
+input:not([type='file']):not([type='checkbox']),
+textarea {
+    border: 0;
+
+    border: solid var(--dark-2) 2px;
+    border-radius: 5px;
+
+    font-size: 0.8rem;
+    padding: 0.5rem;
+    width: 200px;
+
+    margin: 10px;
+}
+
+#content {
+    height: 100vh;
+    width: 100vw;
+
+    overflow-y: auto;
+
+    padding-top: 0px;
+}
+
+.button {
+    min-width: 150px;
+    height: 30px;
+    background: var(--red-1);
+    color: var(--light-1);
+    font-weight: bold;
+}
+
+.button a {
+    color: white;
+}
+
+.area,
+input:not([type='file']),
+textarea {
+    border: var(--border-1);
+}
+
+textarea,
+.button,
+#content,
+.wrapper,
+.postie {
+    display: flex;
+    flex-direction: column;
+}
+
+input:not([type='file']),
+.area {
+    display: inline-block;
+}
+
+.area,
+input:not([type='file']),
+textarea,
+.button {
+    border-radius: 10px;
+    padding: 5px;
+    justify-content: center;
+}
+
+.header div {
+    padding: 10px;
+}
+
+#content,
+.button {
+    text-align: center;
+}
+
+#content {
+    align-items: center;
+}
+
+.area {
+    width: 500px;
+    min-height: 175px;
+}
+
+.area,
+.button,
+.header {
+    margin: 5px;
+}
+
+.header.header-first>.post,
+.header.header-last>.post {
+    width: min(500px, 90vw);
+}
+
+.header {
+    position: sticky;
+    font-weight: bold;
+}
+
+.header.header-first {
+    top: 0;
+    z-index: 10;
+}
+
+.header.header-last {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+}
+
+.header .menu,
+.dropdown {
+    border: none;
+    background: var(--blue-1);
+
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+}
+
+.header a {
+    color: var(--light-1);
+    height: 1.5em;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+
+.header span {
+    color: var(--light-1);
+}
+
+.dropdown {
+    position: absolute;
+    margin-top: 3em;
+    margin-left: 0px;
+
+    background: var(--purple-1);
+    color: inherit;
+
+    width: 10em;
+
+    text-align: center;
+    justify-content: center;
+
+    opacity: 0;
+
+    font-size: 0.8em;
+    height: 0.8em;
+
+    transition: 0.3s ease-in-out opacity;
+}
+
+a:hover>.dropdown {
+    opacity: 1;
+}
+
+.icon {
+    width: 2em;
+    max-height: 2em;
+    margin: 0.2em;
+}
+
+#post-area {
+    width: 500px;
+    min-height: 200px;
+    display: block;
+    resize: none;
+}
+
+.left {
+    text-align: left;
+}
+
+.hwrap,
+.area.postie {
+    display: flex;
+    justify-content: space-between;
+}
+
+.hwrap>span {
+    display: flex;
+    align-items: center;
+}
+
+form {
+    text-align: left;
+}
+
+.pfp {
+    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)), var(--img) center / cover
+}
+
+#grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+}
+
+svg text, .header-first, .header-last {
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    z-index: 1;
+}
+
+svg text {
+    opacity: 0.75;
+}
+
+.info {
+    top: 15px;
+    left: 15px;
+    font-weight: bold;
+    position: absolute;
+    z-index: 100;
+    user-select: none;
+}
+
+
+.info2 {
+    top: 15px;
+    right: 15px;
+    font-weight: bold;
+    position: absolute;
+    z-index: 100;
+    user-select: none;
+}
+
+svg text {
+    pointer-events: none;
+}
+
+input:not([type='file']):not([type='checkbox'])[type='color'] {
+    width: 50px;
+    height: 50px;
+}
+
+.postie .icon {
+    border-radius: 100%;
+    height: 2em;
+    object-fit: cover;
+}
+
+#content > p {
+    max-width: 600px;
+}

static/gridwar.js

@@ -0,0 +1,292 @@
+let area = document.querySelector('#grid');
+let group = document.querySelector('#group');
+
+let mpos = [0, 0];
+let translate = "";
+let width = 0;
+let height = 0;
+let center = [0, 0];
+let lastPos = [0, 0];
+let isMouse = false;
+let zoom = 0.8;
+
+genTrans();
+
+function mouseMove(e) {
+    lastPos = [e.clientX, e.clientY];
+    if (!isMouse) return;
+    mpos[0] += e.clientX - center[0];
+    mpos[1] += e.clientY - center[1];
+    center = lastPos;
+
+    genTrans();
+}
+
+function mouseUp(e) {
+    isMouse = false;
+}
+
+function mouseDown(e) {
+    isMouse = true;
+    center = [e.clientX, e.clientY];
+}
+
+function wheel(e) {
+    mpos[0] -= lastPos[0];
+    mpos[1] -= lastPos[1];
+
+    mpos[0] *= 1.005 ** -e.deltaY;
+    mpos[1] *= 1.005 ** -e.deltaY;
+
+    mpos[0] += lastPos[0];
+    mpos[1] += lastPos[1];
+
+    zoom *= 1.005 ** -e.deltaY;
+
+    genTrans();
+}
+
+function genTrans() {
+    group.setAttribute('transform', `translate(${mpos[0]},${mpos[1]}), scale(${zoom},${zoom})`);
+}
+
+window.onwheel = wheel;
+window.onmousemove = mouseMove;
+window.onmouseup = mouseUp;
+window.onmousedown = mouseDown;
+window.ondblclick = doubleClick;
+
+let tiles = {};
+let colors = {
+    '!nobody': 'rgb(255,255,255)'
+};
+
+let amounts = {
+    '!nobody': -1
+};
+
+let areas = {};
+
+function doubleClick(e) {
+    let data = e.target.id.split('|').pop();
+
+    data = data.split('_');
+
+    if (e.target.id.startsWith('grid-claimed')) {
+        socket.emit('conquer', { x: data[0], y: data[1] })
+    } else if (e.target.id.startsWith('grid-select')) {
+        socket.emit('claim', { x: data[0], y: data[1] })
+    }
+}
+
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+function renderRect(x, y, h, w) {
+    let elem = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+    elem.setAttribute('x', x);
+    elem.setAttribute('y', y);
+    elem.setAttribute('width', w);
+    elem.setAttribute('height', h);
+    elem.setAttribute('fill', 'white');
+    elem.setAttribute('stroke', 'black');
+    elem.setAttribute('stroke-width', '3.5');
+
+    group.appendChild(elem);
+
+    return elem;
+}
+
+function renderSelect(key, val) {
+    let elem = renderRect(key[0] * 125, key[1] * 125, 125, 125);
+
+    elem.id = `grid-select|${key[0]}_${key[1]}`;
+}
+
+function renderClaimed(key, val, data2) {
+    for (let i in val.data) {
+        if (i.startsWith('_')) continue;
+
+        let space = val.data[i];
+
+        let innerGroup = (space != '!nobody') ? document.querySelector(`g#${space}`) : false;
+
+        let userData = data2[`_user_${space}`];
+
+        colors[space] = userData ? userData.color : colors[space];
+
+        if (space == '!nobody') {
+            colors[space] = 'rgb(255,255,255)';
+        }
+
+        if (!colors[space]) {
+            colors[space] = `hsl(${Math.random() * 360}deg,${Math.random() * 30 + 65}%,${Math.random() * 30 + 60}%)`
+        }
+
+        if (!amounts[space]) {
+            amounts[space] = 0;
+            areas[space] = [];
+        }
+
+        let x = i % 5;
+        let y = Math.floor(i / 5);
+
+        if (areas[space]) {
+            let x2 = key[0] * 125 + x * 25;
+            let y2 = key[1] * 125 + y * 25;
+
+            let filter = areas[space].filter((a) => {
+                return a.findIndex(([x, y]) => Math.abs(x2 - x) + Math.abs(y2 - y) < 2 * 25) != -1
+            });
+
+            let noFilter = areas[space].filter((a) => {
+                return a.findIndex(([x, y]) => Math.abs(x2 - x) + Math.abs(y2 - y) < 2 * 25) == -1
+            });
+
+            areas[space] = [];
+
+            areas[space].push(...noFilter);
+            filter = [filter.flat(1)];
+
+            areas[space].push(...(filter));
+
+            if (filter.length == 0) {
+                areas[space].push([[x2, y2]]);
+            } else {
+                areas[space][areas[space].length - 1].push([x2, y2]);
+            }
+        }
+
+        amounts[space]++;
+
+        if (!innerGroup && space != '!nobody') {
+            let elem = document.createElementNS("http://www.w3.org/2000/svg", 'g');
+            elem.id = space;
+
+            group.appendChild(elem);
+
+            innerGroup = elem;
+        }
+
+        let elem = renderRect(key[0] * 125 + x * 25, key[1] * 125 + y * 25, 25, 25);
+
+        if (innerGroup) innerGroup.appendChild(elem);
+
+        elem.setAttribute('fill', colors[space]);
+
+        elem.id = `grid-claimed|${key[0] * 5 + x}_${key[1] * 5 + y}`;
+    }
+
+}
+
+let biggestBox = (thing) => {
+    let xVal = thing.map(x => Math.min(...x.map(y => y[0])));
+    let yVal = thing.map(x => Math.min(...x.map(y => y[1])));
+
+    let wVal = thing.map(x => Math.max(...x.map(y => y[0])) - Math.min(...x.map(y => y[0])));
+    let hVal = thing.map(x => Math.max(...x.map(y => y[1])) - Math.min(...x.map(y => y[1])));
+    let sVal = thing.map(x => (Math.max(...x.map(y => y[0])) - Math.min(...x.map(y => y[0]))) * ((Math.max(...x.map(y => y[1])) - Math.min(...x.map(y => y[1])))));
+
+    let i = sVal.indexOf(Math.max(...sVal));
+
+    return {
+        x: xVal[i],
+        y: yVal[i],
+        width: wVal[i] + 25,
+        height: hVal[i] + 25
+    }
+}
+
+const socket = io(host);
+
+socket.emit('area', { area: 'grid' });
+
+
+var token = getCookie('token');
+var noauth = false;
+
+setTimeout(() => {
+    if (!token) window.location.href = 'https://nbg.dervland.net/login.php?next=' + encodeURIComponent(window.location.href);
+    if (token && window.location.search != '') window.location.href = '/';
+
+    socket.emit('join', { token });
+}, 800);
+
+socket.on('data', (data) => {
+    if (data == 'noauth') {
+        noauth = true;
+    }
+
+    group.innerHTML = '';
+    for (let key in data) {
+        let val = data[key];
+
+        let keyDecomp = key.split(',');
+
+        if (val.type == 'select') {
+            renderSelect(keyDecomp, val);
+        } else if (val.type == 'claimed') {
+            renderClaimed(keyDecomp, val, data);
+        }
+    }
+
+    let groups = document.querySelectorAll(`g g`);
+
+    for (let group of groups) {
+        let box = biggestBox(areas[group.id])
+
+        let id = group.id;
+
+        let elem = document.createElementNS("http://www.w3.org/2000/svg", 'text');
+        elem.setAttribute("x", box.x + box.width / 2);
+        elem.setAttribute("y", box.y + box.height / 2 - box.width / 4);
+        elem.setAttribute("font-size", box.width / 8 + "px");
+        elem.setAttribute("stroke", "white");
+        elem.setAttribute("stroke-width", box.width / 35)
+        elem.setAttribute("paint-order", "stroke")
+        elem.setAttribute('text-anchor', 'middle')
+
+        let lines = [id, amounts[id]];
+
+        for (let line of lines) {
+            let tspan = document.createElementNS("http://www.w3.org/2000/svg", 'tspan');
+            tspan.textContent = line;
+            tspan.setAttribute('x', box.x + box.width / 2);
+            tspan.setAttribute('dy', box.width / 6);
+            elem.appendChild(tspan);
+        }
+
+        document.querySelector('svg > g').appendChild(elem);
+
+        amounts[id] = 0;
+    }
+})
+
+let cooldown = 0;
+let lastTurn = 'nobody';
+
+socket.on('cooldown', (cooldownIn) => {
+    cooldown = cooldownIn;
+})
+
+socket.on('turn', (cooldownIn) => {
+    lastTurn = cooldownIn;
+})
+
+setInterval(() => {
+    let distance = new Date(cooldown) - new Date();
+
+    if (distance < 0) {
+        document.querySelector('.info').textContent = `The next turn is now, last turn was by ${lastTurn || 'nobody'}`;
+    } else {
+        document.querySelector('.info').textContent = `The next turn is in ${Math.floor(distance / 1000)} seconds, last turn was by ${lastTurn || 'nobody'}`;
+    }
+
+}, 100);
+
+document.querySelector('#color').onchange = (e) => {
+    socket.emit('color', e.target.value)
+}

static/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <link rel="icon" href="/img/icon.svg" />
+    <link href='/gridwar.css' rel='stylesheet'>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <span class='info'>
+        Your cooldown
+    </span>
+    <span class='info2'>
+        <div>Your grid color</div>
+        <input type="color" id="color" value="#e66465">
+    </span>
+    <svg id="grid">
+        <g transform="" id='group'>
+        </g>
+    </svg>
+    <script>
+        let host = '/';
+    </script>
+    <script src="./socket.io/socket.io.js"></script>
+    <script src='/gridwar.js'></script>
+</body>