Flummi/skipbo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

msgbox und ein Haufen Müll

Browse Source
This commit is contained in:
Flummi 2018-08-08 16:56:34 +02:00
parent 975dcb9919
commit e19453dc66
9 changed files with 444 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/index.mjs
View File

@ -1,35 +1,34 @@
import cfg from "./cfg"; import cfg from "./cfg";
import express from "express"; import express from "express";
import repl from "repl";
import http from "http"; import http from "http";
import sio from "socket.io"; import sio from "socket.io";
import path from "path"; import path from "path";
let deck = [ let deck = () => [
...[...Array(12)].map((_, i) => new Array(12).fill(++i)).reduce((a,b)=>[...b,...a]) ...[...Array(12)].map((_, i) => new Array(12).fill(++i)).reduce((a,b)=>[...b,...a])
, ...[...Array(18).fill(13)] , ...[...Array(18).fill(13)]
].map(a => [Math.random(), a]).sort((a, b) => a[0] - b[0]).map(a => a[1]); ].map(a => [Math.random(), a]).sort((a, b) => a[0] - b[0]).map(a => a[1]);
const player = new Map(); //const player = new Map();
const rooms = new Map();
function cards() { function cards() {
this.hand = []; this.hand = [];
this.pile = Array(cfg.iters.pile); this.pile = Array(cfg.iters.pile);
this.stock = []; this.stock = [];
} }
//player.set("Spieler 1", new cards);
//player.set("Spieler 2", new cards);
const fillHand = _player => { const fillHand = _player => {
_player = player.get(_player); _player = player.get(_player);
_player.hand.push(...deck.splice(0, cfg.iters.hand - _player.hand.length)); _player.hand.push(...deck.splice(0, cfg.iters.hand - _player.hand.length));
_player.hand.sort((a,b)=>a>b); _player.hand.sort((a,b)=>a>b);
}; };
const begin = () => { /*const begin = () => {
player.forEach((cards, _player) => { player.forEach((cards, _player) => {
fillHand(_player); fillHand(_player);
//cards.stock.push(...deck.splice(0, cfg.iters.stock - cards.stock.length)); //cards.stock.push(...deck.splice(0, cfg.iters.stock - cards.stock.length));
}); });
}; };
begin(); begin();*/
const app = express(); const app = express();
const server = http.Server(app); const server = http.Server(app);
@ -40,9 +39,29 @@ server.listen(8080);
app app
.use(express.static(path.resolve("src", "static"))) .use(express.static(path.resolve("src", "static")))
io.on("connection", socket => { io.on("connection", socket => {
socket.on("player", data => { socket.emit("auth"); // initial ping
console.log(data); socket.on("test", blah => {
console.log(blah);
io.in(socket.room).emit("test", blah);
});
socket.on("player", data => { // playername, roomname
socket.playername = data.playername;
socket.room = data.roomname;
socket.join(data.roomname);
if(!rooms.has(data.roomname)) {
rooms.set(data.roomname, {
player: new Map(Object.entries({ [data.playername]: { cards: new cards }})),
mainstack: deck()
});
}
console.log(rooms);
socket.emit("done");
}); });
}); });
//repl.start("> ");

66
src/static/main.css → src/static/css/main.css
View File

@ -1,6 +1,7 @@
html, body { html, body {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
background-color: rgb(18, 153, 0);
} }
* { * {
margin: 0; margin: 0;
@ -14,7 +15,21 @@ html, body {
#debug { #debug {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
z-index: 999; z-index: 2;
}
#log {
position: fixed;
top: 50%;
left: 10px;
border: 1px solid #000;
background-color: #fff;
height: 50%;
width: 400px;
transform: translateY(-50%);
white-space: pre;
overflow-y: scroll;
z-index: 2;
display: none;
} }
.player { .player {
@ -203,7 +218,7 @@ html, body {
#spielfeld { #spielfeld {
height: 100vh; height: 100vh;
background-color: rgb(18, 153, 0);
} }
#player { #player {
@ -254,4 +269,51 @@ html, body {
} }
#player1_pile { #player1_pile {
grid-area: c; grid-area: c;
}
#layer_game {
display: block;
}
div#black {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(0,0,0,0.8);
z-index: 100;
}
div#menu {
z-index: 101;
border: 1px solid #000;
border-radius: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "head head" "left right";
height: 300px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
}
div#menu_title {
grid-area: head;
text-align: center;
border-bottom: 1px solid #000;
}
div.menu_new {
grid-area: left;
border: 1px dotted #000;
}
div.menu_join {
grid-area: right;
border: 1px dotted #000;
} }

90
src/static/css/msgbox.css Normal file
View File

@ -0,0 +1,90 @@
div.msgBox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 4px 10px 4px 10px;
position: fixed;
z-index: 9999999;
width: 430px;
min-height: 160px;
color: #00335e;
border-radius: 6px;
box-shadow: 0px 0px 11px #000;
background-color: #fff;
}
div.msgBoxTitle {
padding: 5px 0 5px 0;
font-variant: small-caps;
font-size: 16pt;
font-weight: lighter;
color: #00335e;
width: 100%;
border-bottom: 1px solid #002c5f;
}
div.msgBoxButtons {
display: inline-block;
width: 100%;
text-align: right;
}
div.msgBoxButtons input[type='button'] {
cursor: pointer;
margin: 2px;
height: 35px;
width: 90px;
border: 1px solid #afafaf;
background-color: #004076;
color: #fff;
border-radius: 6px;
outline: none;
}
div.msgBoxButtons input[type='button']:hover {
background-color: #00549c;
color: #fff;
}
div.msgBoxButtons input[type='button']:active {
background-color: #aaa;
color: #fff;
}
div.msgBoxButtons input[type='button']:focus {
outline: none;
border: solid 2px #fc6;
}
div.msgBoxInputs {
margin: 0 auto;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 5px;
width: 195px;
}
div.msgInput input[type='text'], div.msgInput input[type='password'] {
padding: 4px;
border: 1px solid #dfdfdf;
color: #2f2f2f;
width: 180px;
}
div.msgBoxContent {
font-size: 11pt;
margin: 0 3px 6px 3px;
display: inline-block;
height: 100%;
width: 100%;
}
div.msgBoxContentTableRow {
display: table-row;
width: 100%;
}
div.msgBoxContentTableCell {
display: table-cell;
width: 50%;
}

124
src/static/index.html
View File

@ -1,68 +1,82 @@
<!doctype blah> <!doctype blah>
<html> <html>
<head> <head>
<link rel="stylesheet" href="./main.css" /> <link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/msgbox.css" />
</head> </head>
<body> <body>
<div id="debug"> <div id="menu" style="display: block">
<a href="#" id="newcard">new card</a> <div id="menu_title">Menu</div>
<select id="selcard"> <div class="menu_new">
<option>1</option><option>2</option><option>3</option> <button class="menu_new">new</button>
<option>4</option><option>5</option><option>6</option> </div>
<option>7</option><option>8</option><option>9</option> <div class="menu_join">
<option>10</option><option>11</option><option>12</option> <button class="menu_join">join</button>
<option>Skip-Bo</option> </div>
</select>
</div> </div>
<div id="spielfeld"> <div id="black" style="display: block"></div>
<div id="player"> <div id="layer_game">
<div id="player2" class="player"> <div id="debug">
<div id="player2_name" class="playername">Spieler 2</div> <a href="#" id="newcard">new card</a>
<div id="player2_pile" class="pile"> <select id="selcard">
<div id="player2_stock" class="pileslot"></div> <option>1</option><option>2</option><option>3</option>
<div id="player2_pile_slot_0" class="pileslot"></div> <option>4</option><option>5</option><option>6</option>
<div id="player2_pile_slot_1" class="pileslot"></div> <option>7</option><option>8</option><option>9</option>
<div id="player2_pile_slot_2" class="pileslot"></div> <option>10</option><option>11</option><option>12</option>
<div id="player2_pile_slot_3" class="pileslot"></div> <option>Skip-Bo</option>
</div> </select>
</div>
<div id="player3" class="player">
<div id="player3_name" class="playername">Spieler 3</div>
<div id="player3_pile" class="pile">
<div id="player3_stock" class="pileslot"></div>
<div id="player3_pile_slot_0" class="pileslot"></div>
<div id="player3_pile_slot_1" class="pileslot"></div>
<div id="player3_pile_slot_2" class="pileslot"></div>
<div id="player3_pile_slot_3" class="pileslot"></div>
</div>
</div>
</div> </div>
<div id="mainstock"> <div id="log"></div>
<div id="mainstock_pile"> <div id="spielfeld">
<div id="mainstock_pile_slot_0" class="mainstock_pile" dropable="true"></div> <div id="player">
<div id="mainstock_pile_slot_1" class="mainstock_pile" dropable="true"></div> <div id="player2" class="player">
<div id="mainstock_pile_slot_2" class="mainstock_pile" dropable="true"></div> <div id="player2_name" class="playername">Spieler 2</div>
<div id="mainstock_pile_slot_3" class="mainstock_pile" dropable="true"></div> <div id="player2_pile" class="pile">
<div id="player2_stock" class="pileslot"></div>
<div id="player2_pile_slot_0" class="pileslot"></div>
<div id="player2_pile_slot_1" class="pileslot"></div>
<div id="player2_pile_slot_2" class="pileslot"></div>
<div id="player2_pile_slot_3" class="pileslot"></div>
</div>
</div>
<div id="player3" class="player">
<div id="player3_name" class="playername">Spieler 3</div>
<div id="player3_pile" class="pile">
<div id="player3_stock" class="pileslot"></div>
<div id="player3_pile_slot_0" class="pileslot"></div>
<div id="player3_pile_slot_1" class="pileslot"></div>
<div id="player3_pile_slot_2" class="pileslot"></div>
<div id="player3_pile_slot_3" class="pileslot"></div>
</div>
</div>
</div> </div>
</div> <div id="mainstock">
<div id="player_self" class="player"> <div id="mainstock_pile">
<div id="player1_name" class="playername">Spieler 1</div> <div id="mainstock_pile_slot_0" class="mainstock_pile" dropable="true"></div>
<div id="mainstock_pile_slot_1" class="mainstock_pile" dropable="true"></div>
<div id="player1_pile" class="pile"> <div id="mainstock_pile_slot_2" class="mainstock_pile" dropable="true"></div>
<div id="player1_stock" class="pileslot"></div> <div id="mainstock_pile_slot_3" class="mainstock_pile" dropable="true"></div>
<div id="player1_pile_slot_0" class="pileslot"></div>
<div id="player1_pile_slot_1" class="pileslot"></div>
<div id="player1_pile_slot_2" class="pileslot"></div>
<div id="player1_pile_slot_3" class="pileslot"></div>
</div> </div>
</div>
<div id="player_self" class="player">
<div id="player1_name" class="playername">Spieler 1</div>
<div id="player1_hand" class="pile"> <div id="player1_pile" class="pile">
<div id="player1_hand_slot_0" class="handslot"></div> <div id="player1_stock" class="pileslot"></div>
<div id="player1_hand_slot_1" class="handslot"></div> <div id="player1_pile_slot_0" class="pileslot" dropable="true"></div>
<div id="player1_hand_slot_2" class="handslot"></div> <div id="player1_pile_slot_1" class="pileslot" dropable="true"></div>
<div id="player1_hand_slot_3" class="handslot"></div> <div id="player1_pile_slot_2" class="pileslot" dropable="true"></div>
<div id="player1_hand_slot_4" class="handslot"></div> <div id="player1_pile_slot_3" class="pileslot" dropable="true"></div>
</div> </div>
<div id="player1_hand" class="pile">
<div id="player1_hand_slot_0" class="handslot"></div>
<div id="player1_hand_slot_1" class="handslot"></div>
<div id="player1_hand_slot_2" class="handslot"></div>
<div id="player1_hand_slot_3" class="handslot"></div>
<div id="player1_hand_slot_4" class="handslot"></div>
</div>
</div>
</div> </div>
</div> </div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>

23
src/static/js/events.js
View File

@ -2,6 +2,7 @@ import * as render from "./render.js";
let debug = true; let debug = true;
let activeElement, droptimer; let activeElement, droptimer;
let dropto = null; let dropto = null;
let log = document.querySelector("#log");
const allowDrop = e => { const allowDrop = e => {
if(debug) console.log("dropover"); if(debug) console.log("dropover");
@ -21,9 +22,9 @@ const dragEnd = e => {
if(debug) console.log("dragend"); if(debug) console.log("dragend");
e.preventDefault(); e.preventDefault();
if(dropto !== null) { if(dropto !== null) {
const [pstack, , , ppileid] = activeElement.parentNode.id.split("_"); const [pstack, ptype, , ppileid] = activeElement.parentNode.id.split("_");
const [mstack, , , mpileid] = dropto.id.split("_"); const [mstack, , , mpileid] = dropto.id.split("_");
const pile = render.stackables.getID(parseInt(pstack.slice(-1))).pile[ppileid]; const pile = render.stackables.getID(parseInt(pstack.slice(-1)))[ptype][ppileid];
let from = pile.splice(-1)[0]; let from = pile.splice(-1)[0];
let to = render.mainstack[mpileid]; let to = render.mainstack[mpileid];
let last = to[to.length - 1] || { val: 0 }; let last = to[to.length - 1] || { val: 0 };
@ -35,12 +36,12 @@ const dragEnd = e => {
if(last.val + 1 === 12) if(last.val + 1 === 12)
render.mainstack[mpileid].length = 0; // clear stack render.mainstack[mpileid].length = 0; // clear stack
log.innerHTML += `from: ${pstack}_${ptype}_${ppileid} (${from.val}) to: ${mstack}_slot_${mpileid} (${last.val})\n`;
log.scrollTop = log.scrollHeight;
render.render(render.stackables.getName(parseInt(pstack.slice(-1)))); render.render(render.stackables.getName(parseInt(pstack.slice(-1))));
render.renderMain(); render.renderMain();
//dropto.insertAdjacentHTML("beforeend", `<div class="card_outer" data-val="${activeElement.dataset.val}">${activeElement.innerHTML}</div>`);
//activeElement.parentNode.removeChild(activeElement);
} }
activeElement.style.display = "block"; activeElement.style.display = "block";
activeElement = null; activeElement = null;
@ -58,16 +59,8 @@ const dragenter = e => {
const dragleave = e => { const dragleave = e => {
if(debug) console.log("dragleave"); if(debug) console.log("dragleave");
e.preventDefault(); e.preventDefault();
removeOver(); document.querySelectorAll("div[dropable='true']").forEach(slot => slot.classList.remove("over"));
droptimer = setTimeout(() => { droptimer = setTimeout(() => dropto = null, 100);
dropto = null;
}, 100);
};
const removeOver = () => {
document.querySelectorAll("div[dropable='true']").forEach(slot => {
slot.classList.remove("over");
});
}; };
document.querySelectorAll("div[dropable='true']").forEach(slot => { document.querySelectorAll("div[dropable='true']").forEach(slot => {

37
src/static/js/main.js
View File

@ -1,7 +1,6 @@
import * as render from "./render.js"; import * as render from "./render.js";
//import { render, renderAll, stackables, mainstack } from "./render.js"; import { tpl, msgBox } from "./tpl.js";
//import events from "./events.js"; //let socket = io();
//const socket = io();
function card({ type = "normal", val = "" }) { function card({ type = "normal", val = "" }) {
this.type = type; this.type = type;
@ -14,13 +13,25 @@ function player(id) {
this.stock = []; this.stock = [];
} }
render.stackables.set("P1", new player(1)); /*render.stackables.set("P1", new player(1));
render.stackables.get("P1").pile[0].push(new card({ val: 12 })); render.stackables.get("P1").pile[0].push(new card({ val: 12 }));
render.stackables.get("P1").pile[1].push(new card({ val: 11 })); render.stackables.get("P1").pile[1].push(new card({ val: 11 }));
render.stackables.get("P1").pile[2].push(new card({ val: 2 })); render.stackables.get("P1").pile[2].push(new card({ val: 2 }));
render.stackables.get("P1").pile[2].push(new card({ val: 1 })); render.stackables.get("P1").pile[2].push(new card({ val: 1 }));
render.stackables.get("P1").pile[2].push(new card({ type: "joker" })); render.stackables.get("P1").pile[2].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[0].push(new card({ val: 12 }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.get("P1").hand[1].push(new card({ type: "joker" }));
render.stackables.set("P2", new player(2)); render.stackables.set("P2", new player(2));
render.stackables.get("P2").pile[0].push(new card({ type: "joker", val: 12 })); render.stackables.get("P2").pile[0].push(new card({ type: "joker", val: 12 }));
render.stackables.get("P2").pile[1].push(new card({ val: 3 })); render.stackables.get("P2").pile[1].push(new card({ val: 3 }));
@ -30,16 +41,26 @@ render.stackables.get("P2").pile[2].push(new card({ val: 12 }));
render.stackables.set("P3", new player(3)); render.stackables.set("P3", new player(3));
render.stackables.get("P3").pile[2].push(new card({ val: 5 })); render.stackables.get("P3").pile[2].push(new card({ val: 5 }));
render.mainstack[1].push(new card({ val: 10 })); render.mainstack[1].push(new card({ val: 10 }));*/
render.renderAll(); render.renderAll();
document.querySelector("#debug > #newcard").addEventListener("click", () => { document.querySelector("#debug > #newcard").addEventListener("click", () => {
const selcard = document.querySelector("#debug > #selcard"); const selcard = document.querySelector("#debug > #selcard");
const selindex = selcard.selectedIndex; const selindex = selcard.selectedIndex;
const selval = selcard.options[selindex].textContent; const selval = selcard.options[selindex].textContent;
render.stackables.get("Test").pile[0].push(new card({ render.stackables.get("P1").pile[0].push(new card({
val: selval === "Skip-Bo" ? "" : selval, val: selval === "Skip-Bo" ? "" : parseInt(selval),
type: selval === "Skip-Bo" ? "joker" : "normal" type: selval === "Skip-Bo" ? "joker" : "normal"
})); }));
render.render("Test"); render.render("P1");
}); });
//console.log(msgBox("joinGame"));
//console.log(msgBox("newGame"));
document.querySelector("#menu button.menu_new").addEventListener("click", () => {
msgBox("newGame");
});
document.querySelector("#menu button.menu_join").addEventListener("click", () => {
msgBox("joinGame");
});

23
src/static/js/render.js
View File

@ -1,22 +1,23 @@
import tpl from "./tpl.js"; import { tpl } from "./tpl.js";
import events from "./events.js"; import events from "./events.js";
export let stackables = new Map(); export let stackables = new Map();
export let mainstack = Array(4).fill().map(()=>[]); export let mainstack = Array(4).fill().map(()=>[]);
export const clear = player => { const clear = player => {
const _player = stackables.get(player); const _player = stackables.get(player);
_player.pile.forEach((slots, slotid) => { _player.pile.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = ""; document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = "";
}); });
if(_player.id === 1) {
_player.hand.forEach((slots, slotid) => {
document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).innerHTML = "";
});
}
}; };
const clearMain = () => { const clearMain = () => {
mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = ""); mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = "");
}; };
export const clearAll = () => {
clearMain();
stackables.forEach((e, player) => clear(player));
};
export const render = player => { export const render = player => {
console.log(`render ${player}`); console.log(`render ${player}`);
@ -30,6 +31,15 @@ export const render = player => {
); );
}); });
}); });
if(_player.hand) {
_player.hand.forEach((slots, slotid) => {
slots.forEach(card => {
document.querySelector(`#player${_player.id}_hand_slot_${slotid}`).insertAdjacentHTML("beforeend",
[{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join``
);
});
});
}
events.createCardEvents(); events.createCardEvents();
}; };
export const renderMain = () => { export const renderMain = () => {
@ -44,7 +54,6 @@ export const renderMain = () => {
}); });
}; };
export const renderAll = () => { export const renderAll = () => {
//clearAll();
stackables.forEach((e, player) => render(player)); stackables.forEach((e, player) => render(player));
renderMain(); renderMain();
}; };

45
src/static/js/socket.js Normal file
View File

@ -0,0 +1,45 @@
let socket = false;
let _playername;
let _roomname;
export const connect = ({ playername, roomname = "default" }) => {
// checks
if(playername < 3 || roomname < 3)
return false;
[_playername, _roomname] = [playername, roomname];
socket = io();
socketevents();
};
const socketevents = () => {
socket.on("auth", () => {
});
};
/*const socketevents = () => {
socket.on("auth", () => {
socket.emit("player", {
roomname: _roomname,
playername: _playername
});
});
socket.on("done", () => {
socket.emit("test", "lul");
});
socket.on("test", blah => {
console.log(blah);
});
};
export const connect = ({ playername, roomname = "default" }) => {
[_playername, _roomname] = [playername, roomname];
if(!socket)
socket = io();
else {
socket.disconnect(true);
socket = io();
}
socketevents();
};*/

96
src/static/js/tpl.js
View File

@ -1,3 +1,5 @@
import { connect } from "./socket.js";
const colors = { const colors = {
1: "blue", 1: "blue",
2: "blue", 2: "blue",
@ -13,7 +15,7 @@ const colors = {
12: "red" 12: "red"
} }
export default { export const tpl = {
card: ({ val, draggable = false }) => ` card: ({ val, draggable = false }) => `
<div class="card_outer"${draggable?" draggable=true":""} data-val="${val}"> <div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
<div class="card_tri card_color_${colors[val]}"></div> <div class="card_tri card_color_${colors[val]}"></div>
@ -29,5 +31,95 @@ export default {
<div class="card_number_joker_middle">Skip-Bo</div> <div class="card_number_joker_middle">Skip-Bo</div>
<div class="card_number card_number_joker_2">${val}</div> <div class="card_number card_number_joker_2">${val}</div>
</div> </div>
` `,
msgBoxes: {
tpl: ({ title, content, buttons }) => `
<div class="msgBox">
<div class="msgBoxTitle">${title}</div>
<div>
<div class="msgBoxContainer">
<div class="msgBoxContent">
${content}
</div>
</div>
<div class="msgBoxButtons">
${buttons.map(button => button.tpl).join``}
</div>
</div>
</div>
`,
joinGame: {
title: "join game",
content: `
<div style="margin-top: 1em; width: 40%; text-align: center; margin-left: 10%; float: left">
<h3>Game room</h3>
<select style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; font-size: 12px;">
<option>default</option>
</select>
</div>
<div style="margin-top: 1em; width: 40%; text-align: center; float: left">
<h3>Your name</h3>
<input type="text" placeholder="Your name" style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; margin-bottom: 1em; font-size: 12px;">
</div>
`,
buttons: [{
tpl: `<input class="msgButton" type="button" value="Ok" />`,
event: e => {
alert("join");
}
}, {
tpl: `<input class="msgButton" type="button" value="Cancel" />`,
event: e => {
removemsgBox(e.target.parentNode.parentNode.parentNode);
}
}]
},
newGame: {
title: "new game",
content: `
<div style="margin-top: 1em; width: 40%; text-align: center; margin-left: 10%; float: left">
<h3>Game room</h3>
<input name="gameroom" type="text" value="default" style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; font-size: 12px" />
</div>
<div style="margin-top: 1em; width: 40%; text-align: center; float: left">
<h3>Your name</h3>
<input name="playername" type="text" placeholder="Your name" style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; margin-bottom: 1em; font-size: 12px" />
</div>
`,
buttons: [{
tpl: `<input class="msgButton" type="button" value="Ok" />`,
event: e => {
const box = e.target.parentNode.parentNode.parentNode;
connect({
gameroom: box.querySelector("input[name='gameroom']").value,
playername: box.querySelector("input[name='playername']").value
});
}
}, {
tpl: `<input class="msgButton" type="button" value="Cancel" />`,
event: e => {
removemsgBox(e.target.parentNode.parentNode.parentNode);
}
}]
}
}
};
const removemsgBox = node => {
document.querySelector("body").removeChild(node);
if(document.querySelectorAll(".msgBox").length === 0 && document.querySelector("div#menu").style.display === "none")
document.querySelector("#black").style.display = "none";
};
export const msgBox = type => {
if(document.querySelector("#black").style.display === "none")
document.querySelector("#black").style.display = "block";
document.querySelector("body").insertAdjacentHTML("afterbegin",
[tpl.msgBoxes[type]].map(tpl.msgBoxes.tpl).join``
);
document.querySelectorAll(".msgBox:first-child input[type='button']").forEach((button, i) => {
button.addEventListener("click", tpl.msgBoxes[type].buttons[i].event);
});
return document.querySelector(".msgBox:first-child");
}; };