This commit is contained in:
Flummi 2018-08-15 17:06:00 +02:00
parent 80d849ab7b
commit 987e668e32
8 changed files with 361 additions and 33 deletions

View File

@ -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;
}

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%;
}

View File

@ -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>

View File

@ -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;
}); });
}); });
} }

View 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>`;

View File

@ -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();

View 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");
};

View 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();
});
});
};