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 @@
-
+
+
+
+
+
+
\ 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}
+
+
+
+ ${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