diff --git a/src/static/index.html b/src/static/index.html index ccfc2d7..13317d5 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -1,7 +1,7 @@ - +
@@ -13,7 +13,6 @@ - del card
@@ -21,39 +20,48 @@
Spieler 2
-
-
-
-
+
+
+
+
Spieler 3
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
+
Spieler 1
+
-
-
-
-
+
+
+
+
+
+ +
+
+
+
+
+
diff --git a/src/static/js/events.js b/src/static/js/events.js index 1d8f21c..e839ee3 100644 --- a/src/static/js/events.js +++ b/src/static/js/events.js @@ -1,7 +1,15 @@ +import * as render from "./render.js"; +let debug = true; let activeElement, droptimer; let dropto = null; +const allowDrop = e => { + if(debug) console.log("dropover"); + e.preventDefault(); +}; + const dragstart = e => { + if(debug) console.log("dragstart"); e.dataTransfer.setData("text", e.target.id); activeElement = e.target; setTimeout(() => { @@ -10,36 +18,71 @@ const dragstart = e => { }; const dragEnd = e => { + if(debug) console.log("dragend"); e.preventDefault(); if(dropto !== null) { - activeElement.parentNode.removeChild(activeElement); - dropto.insertAdjacentHTML("beforeend", activeElement.innerHTML); + const [pstack, , , ppileid] = activeElement.parentNode.id.split("_"); + const [mstack, , , mpileid] = dropto.id.split("_"); + const pile = render.stackables.getID(parseInt(pstack.slice(-1))).pile[ppileid]; + let from = pile.splice(-1)[0]; + let to = render.mainstack[mpileid]; + let last = to[to.length - 1] || { val: 0 }; + + if(from.type === "joker") + from.val = last.val + 1; + + (last.val + 1 === from.val ? to : pile).push(from); + + if(last.val + 1 === 12) { + console.log(from.val); + render.mainstack[mpileid] = []; + console.log(render.mainstack); + } + + render.renderAll(); + + //dropto.insertAdjacentHTML("beforeend", `
${activeElement.innerHTML}
`); + //activeElement.parentNode.removeChild(activeElement); } activeElement.style.display = "block"; activeElement = null; + dragleave(e); }; -document.querySelectorAll(".mainstock_pile").forEach(slot => { - slot.addEventListener("dragenter", e => { - e.preventDefault(); - clearTimeout(droptimer); - e.target.classList.add("over"); - dropto = e.target; - }); - slot.addEventListener("dragleave", e => { - e.preventDefault(); - e.target.classList.remove("over"); - droptimer = setTimeout(() => { - dropto = null; - }, 100); +const dragenter = e => { + if(debug) console.log("dragenter"); + e.preventDefault(); + clearTimeout(droptimer); + e.target.classList.add("over"); + dropto = e.target; +}; + +const dragleave = e => { + if(debug) console.log("dragleave"); + e.preventDefault(); + removeOver(); + droptimer = setTimeout(() => { + dropto = null; + }, 100); +}; + +const removeOver = () => { + document.querySelectorAll("div[dropable='true']").forEach(slot => { + slot.classList.remove("over"); }); +}; + +document.querySelectorAll("div[dropable='true']").forEach(slot => { + slot.addEventListener("dragover", allowDrop); + slot.addEventListener("dragenter", dragenter); + slot.addEventListener("dragleave", dragleave); }); export default ({ createCardEvents: () => { - document.querySelectorAll(".card_outer").forEach(card => { + document.querySelectorAll(".card_outer[draggable='true']").forEach(card => { card.addEventListener("dragstart", dragstart); card.addEventListener("dragend", dragEnd); }); } -}); \ No newline at end of file +}); diff --git a/src/static/js/main.js b/src/static/js/main.js index 7b83c0e..410c9d5 100644 --- a/src/static/js/main.js +++ b/src/static/js/main.js @@ -14,18 +14,24 @@ function player(id) { this.stock = []; } -render.stackables.set("Test", new player(2)); -render.stackables.get("Test").pile[0].push(new card({ type: "joker", val: 12 })); -render.stackables.get("Test").pile[1].push(new card({ val: 3 })); -render.stackables.get("Test").pile[2].push(new card({ val: 4 })); -render.stackables.get("Test").pile[2].push(new card({ val: 12 })); +render.stackables.set("P1", new player(1)); +render.stackables.get("P1").pile[0].push(new card({ val: 12 })); +render.stackables.get("P1").pile[1].push(new card({ val: 11 })); +render.stackables.get("P1").pile[2].push(new card({ val: 2 })); +render.stackables.get("P1").pile[2].push(new card({ val: 1 })); +render.stackables.get("P1").pile[2].push(new card({ type: "joker" })); -render.stackables.set("blah", new player(3)); -render.stackables.get("blah").pile[2].push(new card({ val: 5 })); +render.stackables.set("P2", new player(2)); +render.stackables.get("P2").pile[0].push(new card({ type: "joker", val: 12 })); +render.stackables.get("P2").pile[1].push(new card({ val: 3 })); +render.stackables.get("P2").pile[2].push(new card({ val: 4 })); +render.stackables.get("P2").pile[2].push(new card({ val: 12 })); -render.mainstack[1].push(new card({ val: 2 })); +render.stackables.set("P3", new player(3)); +render.stackables.get("P3").pile[2].push(new card({ val: 5 })); + +render.mainstack[1].push(new card({ val: 10 })); render.renderAll(); -render.clear("Test"); document.querySelector("#debug > #newcard").addEventListener("click", () => { const selcard = document.querySelector("#debug > #selcard"); @@ -37,13 +43,3 @@ document.querySelector("#debug > #newcard").addEventListener("click", () => { })); render.render("Test"); }); - -document.querySelector("#debug > #delcard").addEventListener("click", () => { - /*document.querySelector("#player2_pile_slot2").removeChild( - document.querySelector("#player2_pile_slot2 > .card_outer:last-child") - );*/ - console.log(render.stackables.get("Test").pile[0]); - render.stackables.get("Test").pile[0].pop(); - console.log(render.stackables.get("Test").pile[0]); - render.render("Test"); -}); diff --git a/src/static/js/render.js b/src/static/js/render.js index dd54c47..563a087 100644 --- a/src/static/js/render.js +++ b/src/static/js/render.js @@ -7,25 +7,24 @@ export let mainstack = Array(4).fill().map(()=>[]); export const clear = player => { const _player = stackables.get(player); _player.pile.forEach((slots, slotid) => { - document.querySelector(`#player${_player.id}_pile_slot${slotid}`).innerHTML = ""; + document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).innerHTML = ""; }); }; const clearMain = () => { - mainstack.forEach((cards, slotid) => { - document.querySelector(`#mainstock_pile_slot${slotid}`).innerHTML = ""; - }); + mainstack.forEach((cards, slotid) => document.querySelector(`#mainstock_pile_slot_${slotid}`).innerHTML = ""); }; -const clearAll = () => { - +export const clearAll = () => { + clearMain(); + stackables.forEach((e, player) => clear(player)); }; export const render = player => { - clear(player); const _player = stackables.get(player); + document.querySelector(`#player${_player.id}_name`).innerHTML = player.toString(); _player.pile.forEach((slots, slotid) => { slots.forEach(card => { - document.querySelector(`#player${_player.id}_pile_slot${slotid}`).insertAdjacentHTML("beforeend", - [{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` + document.querySelector(`#player${_player.id}_pile_slot_${slotid}`).insertAdjacentHTML("beforeend", + [{ val: card.val, draggable: _player.id === 1 }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` ); }); }); @@ -34,13 +33,20 @@ export const render = player => { export const renderMain = () => { mainstack.forEach((cards, slotid) => { cards.forEach(card => { - document.querySelector(`#mainstock_pile_slot${slotid}`).insertAdjacentHTML("beforeend", + document.querySelector(`#mainstock_pile_slot_${slotid}`).insertAdjacentHTML("beforeend", [{ val: card.val }].map(card.type === "joker" ? tpl.joker : tpl.card).join`` ); }); }); }; export const renderAll = () => { + clearAll(); stackables.forEach((e, player) => render(player)); renderMain(); +}; + +Map.prototype.getID = function(id) { + for(let [key, val] of this.entries()) + if(val.id === id) + return val; }; \ No newline at end of file diff --git a/src/static/js/tpl.js b/src/static/js/tpl.js index 624b340..85a11ff 100644 --- a/src/static/js/tpl.js +++ b/src/static/js/tpl.js @@ -14,16 +14,16 @@ const colors = { } export default { - card: ({ val }) => ` -
+ card: ({ val, draggable = false }) => ` +
${val}
${val}
${val}
`, - joker: ({ val = 0 }) => ` -
+ joker: ({ val = 0, draggable = false }) => ` +
${val}
Skip-Bo
diff --git a/src/static/test.css b/src/static/main.css similarity index 81% rename from src/static/test.css rename to src/static/main.css index 2d9ead5..c918b44 100644 --- a/src/static/test.css +++ b/src/static/main.css @@ -1,230 +1,257 @@ -* { - margin: 0; - padding: 0; - overflow: hidden; - position: relative; - background-color: rgb(18, 153, 0); -} - -#debug { - position: absolute; - bottom: 0; - z-index: 999; -} - -#spielfeld { - display: grid; - grid-template-rows: 1fr auto 1fr; - grid-template-columns: 1fr; - grid-row-gap: 40px; - height: 100%; -} - -#player { - width: 98%; - height: 200px; - margin: auto; - display: grid; - grid-column-gap: 5px; - grid-template-columns: repeat(2, 1fr); -} - -.player { - box-sizing: border-box; - border-style: none solid solid solid; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; -} -#player1 { - width: 95%; - margin: auto; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-style: solid solid none solid; -} -.playername { - text-align: center; - font-weight: bold; -} - -.pile { - width: 95%; - margin: auto; - height: 160px; - display: grid; - grid-template-columns: 2fr repeat(4, 1fr); - grid-column-gap: 2px; -} -.pileslot { - width: 110px; - border: 1px solid #000; - background-color: #fff !important; - border-radius: 10px; -} - -.pileslot:nth-child(0) { - border: 0; -} - -#mainstock_pile { - width: 500px; - height: 200px; - display: grid; - margin: auto; - grid-template-columns: repeat(4, 1fr); -} -.mainstock_pile { - width: 110px; - height: 160px; - border: 1px solid #000; - background-color: #fff; - border-radius: 10px; -} - -.card_outer { - height: 100%; - width: 100%; - background-color: #fff; - position: absolute; -} -.card_tri { - position: absolute; - height: 140px; - width: 90px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 10px; -} -.card_color_green { - background: linear-gradient( - 45deg, - #63b846 20%, - white 20%, - white 80%, - #63b846 80%, - white 80%, - #63b846 80% - ); -} -.card_color_red { - background: linear-gradient( - 45deg, - #d41389 20%, - white 20%, - white 80%, - #d41389 80%, - white 80%, - #d41389 80% - ); -} -.card_color_blue { - background: linear-gradient( - 45deg, - #27388b 20%, - white 20%, - white 80%, - #27388b 80%, - white 80%, - #27388b 80% - ); -} -.green { - color: #63b846; -} -.red { - color: #d41389; -} -.blue { - color: #27388b; -} -.card_color_joker { - background: linear-gradient( - 45deg, - #27388b 6.66%, - #63b846 6.66%, - #63b846 13.33%, - #d41389 13.33%, - #d41389 20%, - white 20%, - white 80%, - #d41389 80%, - #d41389 86.66%, - #63b846 86.66%, - #63b846 93.33%, - #27388b 93.33% - ); -} -.card_number { - position: absolute; - font-size: 18pt; - font-weight: bold; - background-color: #fff; -} -.card_number_middle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 30pt; - font-weight: bold; - background-color: #fff; -} -.card_number_1 { - top: 10px; - left: 10px; -} -.card_number_2 { - bottom: 10px; - right: 10px; -} -.card_border { - position: absolute; - height: 100%; - width: 100%; - border: 1px solid #000; - border-radius: 10px; -} -.card_number_joker_middle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 14pt; - width: 100%; - background-color: #fff; - 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%); -} - -*[draggable=true] { - cursor: move; -} -[draggable] { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; - -khtml-user-drag: element; - -webkit-user-drag: element; -} - -.over { - border: 2px dashed #000; -} - -.mainstock_pile * { - pointer-events: none; +html, body { + height: 100%; + min-height: 100%; +} +* { + margin: 0; + padding: 0; + overflow: hidden; + position: relative; + user-drag: none; + user-select: none; +} + +#debug { + position: absolute; + bottom: 0; + z-index: 999; +} + +.player { + height: 200px; + box-sizing: border-box; + border-style: none solid solid solid; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +.playername { + text-align: center; + font-weight: bold; +} + +.pile { + width: 95%; + margin: auto; + height: 160px; + display: grid; + grid-template-columns: 2fr repeat(4, 1fr); + grid-column-gap: 2px; +} +.pileslot { + width: 110px; + border: 1px solid #000; + background-color: #fff; + border-radius: 10px; +} +.handslot { + width: 110px; + border: 1px solid #000; + background-color: #fff; + border-radius: 10px; +} + +#mainstock_pile { + width: 500px; + height: 200px; + display: grid; + margin: auto; + grid-template-columns: repeat(4, 1fr); +} +.mainstock_pile { + width: 110px; + height: 160px; + border: 1px solid #000; + background-color: #fff; + border-radius: 10px; +} + +.card_outer { + height: 100%; + width: 100%; + position: absolute; +} +.card_tri { + position: absolute; + height: 140px; + width: 90px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 10px; +} +.card_color_green { + background: linear-gradient( + 45deg, + #63b846 20%, + white 20%, + white 80%, + #63b846 80% + ); +} +.card_color_red { + background: linear-gradient( + 45deg, + #d41389 20%, + white 20%, + white 80%, + #d41389 80% + ); +} +.card_color_blue { + background: linear-gradient( + 45deg, + #27388b 20%, + white 20%, + white 80%, + #27388b 80% + ); +} +.green { + color: #63b846; +} +.red { + color: #d41389; +} +.blue { + color: #27388b; +} +.card_color_joker { + background: linear-gradient( + 45deg, + #27388b 6.66%, + #63b846 6.66%, + #63b846 13.33%, + #d41389 13.33%, + #d41389 20%, + white 20%, + white 80%, + #d41389 80%, + #d41389 86.66%, + #63b846 86.66%, + #63b846 93.33%, + #27388b 93.33% + ); +} +.card_number { + position: absolute; + font-size: 18pt; + font-weight: bold; +} +.card_number_middle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 30pt; + font-weight: bold; +} +.card_number_1 { + top: 10px; + left: 10px; +} +.card_number_2 { + bottom: 10px; + right: 10px; +} +.card_border { + position: absolute; + height: 100%; + width: 100%; + border: 1px solid #000; + border-radius: 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%); +} + +*[draggable=true] { + cursor: move; +} +[draggable] { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + -khtml-user-drag: element; + -webkit-user-drag: element; +} + +.over { + border: 2px dashed #000; +} + +.mainstock_pile * { + pointer-events: none; +} + +#spielfeld { + height: 100vh; + background-color: rgb(18, 153, 0); +} + +#player { + width: 95%; + height: 200px; + display: grid; + grid-column-gap: 5px; + grid-template-columns: repeat(2, 1fr); + position: fixed; + left: 50%; + transform: translateX(-50%); +} + +#mainstock { + height: 200px; + width: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#player_self { + width: 95%; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-style: solid solid none solid; + height: 200px; + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr auto; + grid-template-areas: "a a" "b c"; +} + +#player1_name { + grid-area: a; +} +#player1_hand { + grid-area: b; + grid-template-columns: repeat(5, 1fr) !important; +} +#player1_pile { + grid-area: c; } \ No newline at end of file