diff options
| -rw-r--r-- | scripts/cards/card.js | 12 | ||||
| -rw-r--r-- | scripts/cards/deck.js | 16 | ||||
| -rw-r--r-- | scripts/gui/table.js | 42 | ||||
| -rw-r--r-- | scripts/socket/sock.js | 5 | ||||
| -rw-r--r-- | styles/client/card.css | 5 |
5 files changed, 70 insertions, 10 deletions
diff --git a/scripts/cards/card.js b/scripts/cards/card.js index 750d124..884e0d9 100644 --- a/scripts/cards/card.js +++ b/scripts/cards/card.js @@ -7,12 +7,16 @@ const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "b // Every card should have a deck. // Use deck.appendCard or deck.prependCard to make a card visible class Card { - constructor (data) + constructor (id, data) { this.e = document.createElement("card"); this.generateElements(data); this.e.style.left = "0px"; this.e.style.top = "0px"; + + this.getID = function() { + return id; + } } // Generate a card with basic text only @@ -107,4 +111,10 @@ class Card { { this.e.style.setProperty("--cpos", p); } + + resetPos() + { + this.e.style.left = "0px"; + this.e.style.top = "0px"; + } } diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js index 6da24b0..d87d619 100644 --- a/scripts/cards/deck.js +++ b/scripts/cards/deck.js @@ -13,7 +13,7 @@ class Deck { y = 0; e = null; - constructor(options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}) + constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}) { // View mode // infdraw - infinite draw. always appears as if there are multiple cards @@ -54,6 +54,10 @@ class Deck { this.e.style.left = this.x + "px"; this.e.style.top = this.y + "px"; this.e.setAttribute("mode", options.mode); + + this.getID = function() { + return id; + } } updatePos() @@ -143,4 +147,14 @@ class Deck { var rect = this.e.getBoundingClientRect(); return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) } + + checkCard (el) + { + for(let c of this.cards) + { + if(c.e === el) + return c; + } + return null; + } } diff --git a/scripts/gui/table.js b/scripts/gui/table.js index 7199f83..5c65ed4 100644 --- a/scripts/gui/table.js +++ b/scripts/gui/table.js @@ -5,7 +5,7 @@ class Table{ this.drag = drag; drag.addEventListener("dragstart", (e) => {console.log(e)}); - drag.addEventListener("dragstop", (e) => {console.log(e)}); + drag.addEventListener("dragstop", this.dragMsg.bind(this)); this.socket = socket; @@ -47,16 +47,16 @@ class Table{ } /* Deck and card functions */ - newDeck(options) + newDeck(id, options) { - var d = new Deck(options); + var d = new Deck(id, options); this.decks.push(d); this.root.appendChild(d.e); } - newCard(data, deck = 0) + newCard(id, data, deck = 0) { - var c = new Card(data); + var c = new Card(id, data); this.decks[deck].appendCard(c); this.drag.addTarget(c.e); } @@ -66,13 +66,41 @@ class Table{ for(let d of this.decks) { if(d.isInside(x, y)) - return true; + return d; } - return false; + return null; + } + + checkCard (el) + { + for(let d of this.decks) + { + let c = d.checkCard(el); + if(c !== null) + return c; + } + return null; } dragCheck(cap) { console.log(cap); } + + dragMsg (event) + { + if(event.drag.length < 1) + return; + + var c = this.checkCard(event.drag[0].e); + var d = this.checkDeck(event.x, event.y); + + if(c !== null) + { + if(d !== null) + console.log({card: c.getID(), deck: d.getID()}); + else + c.resetPos(); + } + } } diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js index 4eacc18..31b9a7f 100644 --- a/scripts/socket/sock.js +++ b/scripts/socket/sock.js @@ -62,4 +62,9 @@ class SockWorker extends EventTarget{ var m = new Message(type, data); this.socket.send(m.stringify()) } + + // Raw message the server + sendRaw (s) { + this.socket.send(s) + } } diff --git a/styles/client/card.css b/styles/client/card.css index 8172e41..774990e 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -14,12 +14,15 @@ card overflow: hidden; user-select: none; box-sizing: border-box; + + z-index: 3; } card:hover { box-shadow: 0 0 10px var(--card-hover); - z-index: 3; + + z-index: 4; } card > * { |