diff --git a/src/static/test/main.css b/src/static/test/css/main.css similarity index 76% rename from src/static/test/main.css rename to src/static/test/css/main.css index f487fc3..fe43ae5 100644 --- a/src/static/test/main.css +++ b/src/static/test/css/main.css @@ -140,6 +140,26 @@ div[dropable=true] > * > * { bottom: 10px; right: 10px; } +.card_number_joker_middle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 14pt; + width: 100%; + text-align: center; + font-weight: bold; +} +.card_number_joker_1 { + top: 28%; + left: 50%; + transform: translate(-50%, -28%); +} +.card_number_joker_2 { + top: 75%; + left: 50%; + transform: translate(-50%, -75%); +} .card_color_green { background: linear-gradient( 45deg, @@ -210,4 +230,45 @@ div[dropable=true] > * > * { } .p_active::before { border: 2px solid red !important; +} + +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; +} +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; } \ No newline at end of file diff --git a/src/static/test/css/msgbox.css b/src/static/test/css/msgbox.css new file mode 100644 index 0000000..e3ef820 --- /dev/null +++ b/src/static/test/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/test/index.html b/src/static/test/index.html index 9500016..1da70ab 100644 --- a/src/static/test/index.html +++ b/src/static/test/index.html @@ -1,9 +1,21 @@ - + + +
+ +
@@ -51,6 +63,7 @@
+ \ No newline at end of file diff --git a/src/static/test/js/events.js b/src/static/test/js/events.js index d010b54..9e5089f 100644 --- a/src/static/test/js/events.js +++ b/src/static/test/js/events.js @@ -4,10 +4,6 @@ document.querySelectorAll("[dropable='true']").forEach(e => { e.addEventListener("drag", event => { }, false); - e.addEventListener("dragstart", event => { - dragged = event.target; - }, false); - e.addEventListener("dragend", event => { }, false); @@ -25,14 +21,21 @@ document.querySelectorAll("[dropable='true']").forEach(e => { e.addEventListener("drop", event => { event.preventDefault(); - const tmp = dragged; - const to = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target; + const tmpto = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target; + + document.querySelector("div#debug").innerHTML = `from: ${dragged.parentNode.id} to: ${tmpto.id}`; const from = { - val: tmp + val: parseInt(dragged.dataset.val), + element: dragged, + pile: dragged.parentNode + }; + const to = { + val: event.target.dataset.val ? parseInt(event.target.dataset.val) : 0, + pile: tmpto }; - console.log("from", tmp); + console.log("from", from); console.log("to", to); event.target.style.opacity = ""; @@ -44,6 +47,7 @@ export default ({ document.querySelectorAll(".card_outer[draggable='true']").forEach(card => { card.addEventListener("dragstart", event => { event.dataTransfer.setData("text/plain", null); + dragged = event.target; }); }); } diff --git a/src/static/test/js/game.js b/src/static/test/js/game.js new file mode 100644 index 0000000..520bffb --- /dev/null +++ b/src/static/test/js/game.js @@ -0,0 +1,9 @@ +const colors = [...Array(12)].map((_,i) => ["blue","green","red"][i % 3]).sort(); + +export const card = ({ val, drag, joker = false }) => + `
+
+
${val>0?val:""}
+
${joker?"Skip-Bo":val}
+
${val>0?val:""}
+
`; \ No newline at end of file diff --git a/src/static/test/js/main.js b/src/static/test/js/main.js index c255e25..389ecf1 100644 --- a/src/static/test/js/main.js +++ b/src/static/test/js/main.js @@ -1,29 +1,20 @@ import events from "./events.js"; +import { msgBox } from "./msgbox.js"; +import { card } from "./game.js"; +//import socket from "./socket.js"; -const colors = { - 1: "blue", 2: "blue", 3: "blue", 4: "blue", - 5: "green", 6: "green", 7: "green", 8: "green", - 9: "red", 10: "red", 11: "red", 12: "red" -}; -const card = ({ val, drag }) => - `
-
-
${val}
-
${val}
-
${val}
-
`; - -const fillAll = () => { - document.querySelectorAll(".pile").forEach(slot => { - console.log(slot.id); - if(slot.id.slice(0, 4) === "main" && slot.id.slice(-1) === "0") - return; - slot.insertAdjacentHTML("beforeend", - [{ val: ~~(Math.random() * 12) + 1, drag: slot.id.slice(0, 2) === "p0" }].map(card).join`` - ); - }); -}; -fillAll(); +document.querySelector("#menu button.menu_new").addEventListener("click", () => { + msgBox("newGame"); +}); +document.querySelector("#menu button.menu_join").addEventListener("click", () => { + msgBox("joinGame"); +}); +document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend", + [{ val: 0, drag: true, joker: true }].map(card).join`` +); +document.querySelector("#p0_pile_card_1").insertAdjacentHTML("beforeend", + [{ val: 1, drag: true, joker: false }].map(card).join`` +); events.createCardEvents(); \ No newline at end of file diff --git a/src/static/test/js/msgbox.js b/src/static/test/js/msgbox.js new file mode 100644 index 0000000..eaf534d --- /dev/null +++ b/src/static/test/js/msgbox.js @@ -0,0 +1,105 @@ +const msgBoxes = { + tpl: ({ title, content, buttons }) => ` +
+
${title}
+
+
+
+ ${content} +
+
+
+ ${buttons.map(button => button.tpl).join``} +
+
+
+ `, + joinGame: { + title: "join game", + content: ` +
+

Game room

+ +
+
+

Your name

+ +
+ `, + buttons: [{ + tpl: ``, + event: e => { + alert("join"); + } + }, { + tpl: ``, + event: e => { + removemsgBox(e.target.parentNode.parentNode.parentNode); + } + }] + }, + newGame: { + title: "new game", + content: ` +
+

Game room

+ +
+
+

Your name

+ +
+ `, + buttons: [{ + tpl: ``, + 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: ``, + event: e => { + removemsgBox(e.target.parentNode.parentNode.parentNode); + } + }] + }, + waitforPlayer: { + title: "waiting for players", + content: `actually connected: 1`, + buttons: [{ + tpl: ``, + 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 removeAllmsgBox = () => { + document.querySelectorAll(".msgbox").forEach(msgbox => { + removemsgBox(msgbox); + }); +}; + +export const msgBox = type => { + if (document.querySelector("#black").style.display === "none") + document.querySelector("#black").style.display = "block"; + + document.querySelector("body").insertAdjacentHTML("afterbegin", + [msgBoxes[type]].map(msgBoxes.tpl).join`` + ); + document.querySelectorAll(".msgBox:first-child input[type='button']").forEach((button, i) => { + button.addEventListener("click", msgBoxes[type].buttons[i].event); + }); + return document.querySelector(".msgBox:first-child"); +}; \ No newline at end of file diff --git a/src/static/test/js/socket.js b/src/static/test/js/socket.js new file mode 100644 index 0000000..afec90b --- /dev/null +++ b/src/static/test/js/socket.js @@ -0,0 +1,55 @@ +let socket = false + , _playername + , _gameroom; + +export const connect = ({ playername, gameroom = "default" }) => { + if(playername < 3 || gameroom < 3) + return false; + + [_playername, _gameroom] = [playername, gameroom]; + + if(socket) { + socket.disconnect(); + socket = false; + } + socket = io(); + socketevents(); +}; + +const socketevents = () => { + socket.on("auth", () => { + socket.emit("player", { + playername: _playername, + gameroom: _gameroom + }); + }); + removeAllmsgBox(); + msgBox("waitforPlayer"); + socket.on("playerlist", player => { + document.querySelector("span#wfp_players").innerHTML = player.join("
") + `start`; + document.querySelector("a#start").addEventListener("click", () => { + socket.emit("start"); + }); + }); + socket.on("gamestart", _game => { + removeAllmsgBox(); + document.querySelector("#menu").style.display = "none"; + document.querySelector("#black").style.display = "none"; + + render.renderAll(); + _game.player.forEach((player, i) => { + game.stackables.set(player[0], new game.player(i)); + const _player = game.stackables.get(player[0]); + _player.id = i; + if(i === 0) { + player[1].cards.hand.forEach(card => { + _player.hand.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card })); + }); + } + player[1].cards.stock.forEach(card => { + _player.stock.push(new game.card({ type: card === 13 ? "joker" : "normal", val: card === 13 ? "" : card })); + }); + render.renderAll(); + }); + }); +}; \ No newline at end of file