...
This commit is contained in:
Flummi
parent
80d849ab7b
commit
987e668e32
|
|
@ -140,6 +140,26 @@ div[dropable=true] > * > * {
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
right: 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 {
|
.card_color_green {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
|
|
@ -211,3 +231,44 @@ div[dropable=true] > * > * {
|
||||||
.p_active::before {
|
.p_active::before {
|
||||||
border: 2px solid red !important;
|
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;
|
||||||
|
}
|
||||||
90
src/static/test/css/msgbox.css
Normal file
90
src/static/test/css/msgbox.css
Normal 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%;
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,21 @@
|
||||||
<!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" style="position: fixed; top: 0; left: 0"></div>
|
||||||
|
<div id="menu" style="display: none">
|
||||||
|
<div id="menu_title">Menu</div>
|
||||||
|
<div class="menu_new">
|
||||||
|
<button class="menu_new">new</button>
|
||||||
|
</div>
|
||||||
|
<div class="menu_join">
|
||||||
|
<button class="menu_join">join</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="black" style="display: none"></div>
|
||||||
<div id="spielfeld">
|
<div id="spielfeld">
|
||||||
<div id="p0">
|
<div id="p0">
|
||||||
<div id="p0_pile_card_0" class="pile"></div>
|
<div id="p0_pile_card_0" class="pile"></div>
|
||||||
|
|
@ -51,6 +63,7 @@
|
||||||
<div id="mainstack_card_3" class="pile" dropable="true"></div>
|
<div id="mainstack_card_3" class="pile" dropable="true"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
<script src="./js/main.js" type="module" defer></script>
|
<script src="./js/main.js" type="module" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -4,10 +4,6 @@ document.querySelectorAll("[dropable='true']").forEach(e => {
|
||||||
e.addEventListener("drag", event => {
|
e.addEventListener("drag", event => {
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
e.addEventListener("dragstart", event => {
|
|
||||||
dragged = event.target;
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
e.addEventListener("dragend", event => {
|
e.addEventListener("dragend", event => {
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
|
|
@ -25,14 +21,21 @@ document.querySelectorAll("[dropable='true']").forEach(e => {
|
||||||
|
|
||||||
e.addEventListener("drop", event => {
|
e.addEventListener("drop", event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const tmp = dragged;
|
const tmpto = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target;
|
||||||
const to = 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 = {
|
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);
|
console.log("to", to);
|
||||||
|
|
||||||
event.target.style.opacity = "";
|
event.target.style.opacity = "";
|
||||||
|
|
@ -44,6 +47,7 @@ export default ({
|
||||||
document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
|
document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
|
||||||
card.addEventListener("dragstart", event => {
|
card.addEventListener("dragstart", event => {
|
||||||
event.dataTransfer.setData("text/plain", null);
|
event.dataTransfer.setData("text/plain", null);
|
||||||
|
dragged = event.target;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
9
src/static/test/js/game.js
Normal file
9
src/static/test/js/game.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
const colors = [...Array(12)].map((_,i) => ["blue","green","red"][i % 3]).sort();
|
||||||
|
|
||||||
|
export const card = ({ val, drag, joker = false }) =>
|
||||||
|
`<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}>
|
||||||
|
<div class="card_tri card_color_${joker?"joker":colors[val]}"></div>
|
||||||
|
<div class="card_number card_number${joker?"_joker":""}_1">${val>0?val:""}</div>
|
||||||
|
<div class="card_number${joker?"_joker":""}_middle ${joker?"":colors[val]}">${joker?"Skip-Bo":val}</div>
|
||||||
|
<div class="card_number card_number${joker?"_joker":""}_2">${val>0?val:""}</div>
|
||||||
|
</div>`;
|
||||||
|
|
@ -1,29 +1,20 @@
|
||||||
import events from "./events.js";
|
import events from "./events.js";
|
||||||
|
import { msgBox } from "./msgbox.js";
|
||||||
|
import { card } from "./game.js";
|
||||||
|
//import socket from "./socket.js";
|
||||||
|
|
||||||
const colors = {
|
document.querySelector("#menu button.menu_new").addEventListener("click", () => {
|
||||||
1: "blue", 2: "blue", 3: "blue", 4: "blue",
|
msgBox("newGame");
|
||||||
5: "green", 6: "green", 7: "green", 8: "green",
|
});
|
||||||
9: "red", 10: "red", 11: "red", 12: "red"
|
document.querySelector("#menu button.menu_join").addEventListener("click", () => {
|
||||||
};
|
msgBox("joinGame");
|
||||||
const card = ({ val, drag }) =>
|
|
||||||
`<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}>
|
|
||||||
<div class="card_tri card_color_${colors[val]}"></div>
|
|
||||||
<div class="card_number card_number_1">${val}</div>
|
|
||||||
<div class="card_number_middle ${colors[val]}">${val}</div>
|
|
||||||
<div class="card_number card_number_2">${val}</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
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("#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();
|
events.createCardEvents();
|
||||||
105
src/static/test/js/msgbox.js
Normal file
105
src/static/test/js/msgbox.js
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
const 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);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
waitforPlayer: {
|
||||||
|
title: "waiting for players",
|
||||||
|
content: `actually connected: <span id="wfp_players">1</span>`,
|
||||||
|
buttons: [{
|
||||||
|
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 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");
|
||||||
|
};
|
||||||
55
src/static/test/js/socket.js
Normal file
55
src/static/test/js/socket.js
Normal file
|
|
@ -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("<br />") + `<a href="#" id="start">start</a>`;
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user