diff --git a/src/index.mjs b/src/index.mjs index fcd9405..6849646 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -1,35 +1,34 @@ import cfg from "./cfg"; import express from "express"; +import repl from "repl"; import http from "http"; import sio from "socket.io"; import path from "path"; -let deck = [ +let deck = () => [ ...[...Array(12)].map((_, i) => new Array(12).fill(++i)).reduce((a,b)=>[...b,...a]) , ...[...Array(18).fill(13)] ].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() { this.hand = []; this.pile = Array(cfg.iters.pile); this.stock = []; } -//player.set("Spieler 1", new cards); -//player.set("Spieler 2", new cards); - const fillHand = _player => { _player = player.get(_player); _player.hand.push(...deck.splice(0, cfg.iters.hand - _player.hand.length)); _player.hand.sort((a,b)=>a>b); }; -const begin = () => { +/*const begin = () => { player.forEach((cards, _player) => { fillHand(_player); //cards.stock.push(...deck.splice(0, cfg.iters.stock - cards.stock.length)); }); }; -begin(); +begin();*/ const app = express(); const server = http.Server(app); @@ -40,9 +39,29 @@ server.listen(8080); app .use(express.static(path.resolve("src", "static"))) + io.on("connection", socket => { - socket.on("player", data => { - console.log(data); + socket.emit("auth"); // initial ping + 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"); }); -}); \ No newline at end of file +}); + +//repl.start("> "); \ No newline at end of file diff --git a/src/static/main.css b/src/static/css/main.css similarity index 79% rename from src/static/main.css rename to src/static/css/main.css index c918b44..20d29c2 100644 --- a/src/static/main.css +++ b/src/static/css/main.css @@ -1,6 +1,7 @@ html, body { height: 100%; min-height: 100%; + background-color: rgb(18, 153, 0); } * { margin: 0; @@ -14,7 +15,21 @@ html, body { #debug { position: absolute; 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 { @@ -203,7 +218,7 @@ html, body { #spielfeld { height: 100vh; - background-color: rgb(18, 153, 0); + } #player { @@ -254,4 +269,51 @@ html, body { } #player1_pile { 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; } \ No newline at end of file diff --git a/src/static/css/msgbox.css b/src/static/css/msgbox.css new file mode 100644 index 0000000..e3ef820 --- /dev/null +++ b/src/static/css/msgbox.css @@ -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%; +} \ No newline at end of file diff --git a/src/static/index.html b/src/static/index.html index 13317d5..527abc8 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -1,68 +1,82 @@
- + + -