summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--scripts/cards/card.js12
-rw-r--r--scripts/cards/deck.js16
-rw-r--r--scripts/gui/table.js42
-rw-r--r--scripts/socket/sock.js5
-rw-r--r--styles/client/card.css5
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 > * {