...
This commit is contained in:
Flummi
parent
80d849ab7b
commit
987e668e32
|
|
@ -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;
|
||||
}
|
||||
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>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./main.css" />
|
||||
<link rel="stylesheet" href="./css/main.css" />
|
||||
<link rel="stylesheet" href="./css/msgbox.css" />
|
||||
</head>
|
||||
<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="p0">
|
||||
<div id="p0_pile_card_0" class="pile"></div>
|
||||
|
|
@ -51,6 +63,7 @@
|
|||
<div id="mainstack_card_3" class="pile" dropable="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="./js/main.js" type="module" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
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 { 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 }) =>
|
||||
`<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("#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();
|
||||
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