summaryrefslogtreecommitdiff
path: root/webcards
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-05-17 20:31:10 -0400
committerKyle Gunger <corechg@gmail.com>2020-05-17 20:31:10 -0400
commit20201f77b5cf5cbb1c70b1cc51c4108d620a3202 (patch)
tree30e2871b60ac12f5b3ac2df5a1176faf682ce3ac /webcards
parentb48f0adccb11619680a47cac5fa9c68f638bd489 (diff)
[Webcards] styles and some fixes
+ Fixed draging transformed cards + Fixed mobile styles + Theme template complete
Diffstat (limited to 'webcards')
-rw-r--r--webcards/README.md2
-rw-r--r--webcards/client.html18
-rw-r--r--webcards/scripts/cards/card.js5
-rw-r--r--webcards/scripts/cards/deck.js9
-rw-r--r--webcards/scripts/cards/drag.js36
-rw-r--r--webcards/styles/client/card.css26
-rw-r--r--webcards/styles/client/mobile.css2
-rw-r--r--webcards/styles/themes/colors-base.css2
-rw-r--r--webcards/styles/themes/colors-dark.css2
9 files changed, 73 insertions, 29 deletions
diff --git a/webcards/README.md b/webcards/README.md
index 820db2b..0c6b070 100644
--- a/webcards/README.md
+++ b/webcards/README.md
@@ -1,5 +1,5 @@
# WebCardsClient
-WebCards
+![WebCards](http://35.11.215.147:3000/CCGKyle/WebCardsClient/raw/branch/master/images/wc-icon-144.png)
An in-browser client to play WebCards \ No newline at end of file
diff --git a/webcards/client.html b/webcards/client.html
index 069a041..e9cf664 100644
--- a/webcards/client.html
+++ b/webcards/client.html
@@ -45,7 +45,7 @@
<body>
- <div class="table" state="closed" onmouseup="d.stopDraggingAll()">
+ <div class="table" state="closed" onmouseup="md.stopDraggingAll()">
</div>
@@ -120,7 +120,7 @@
// Live testing purposes only
- var d = new MultiDrag();
+ var md = new MultiDrag();
var c1 = new Card({
all: [
{
@@ -145,14 +145,16 @@
}
]
});
+ var d = new Deck();
+ d.appendCard(c2);
+ d.appendCard(c1);
function test() {
- c1.e.addEventListener("mousedown", d.startDragging.bind(d));
- c1.e.addEventListener("mouseup", d.stopDraggingAll.bind(d));
- c2.e.addEventListener("mousedown", d.startDragging.bind(d));
- c2.e.addEventListener("mouseup", d.stopDraggingAll.bind(d));
+ c1.e.addEventListener("mousedown", md.startDragging.bind(md));
+ c1.e.addEventListener("mouseup", md.stopDraggingAll.bind(md));
+ c2.e.addEventListener("mousedown", md.startDragging.bind(md));
+ c2.e.addEventListener("mouseup", md.stopDraggingAll.bind(md));
- game.tab.root.append(c1.e);
- game.tab.root.append(c2.e);
+ game.tab.root.append(d.e);
game.tab.openTable();
}
</script>
diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js
index 0f045fe..932a22c 100644
--- a/webcards/scripts/cards/card.js
+++ b/webcards/scripts/cards/card.js
@@ -94,5 +94,10 @@ Card.prototype = {
generateErrorCard: function(el)
{
this.generateBasicCard("Card Error: data", el);
+ },
+
+ setPos: function(p)
+ {
+ this.e.style.setProperty("--cpos", p);
}
}; \ No newline at end of file
diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js
index 620a038..a02142d 100644
--- a/webcards/scripts/cards/deck.js
+++ b/webcards/scripts/cards/deck.js
@@ -44,17 +44,20 @@ function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){
this.e.setAttribute("mode", options.mode);
}
+//Decks work as FIFO
Deck.prototype = {
// Add a card to the front of the deck
appendCard: function(card) {
this.cards.push(card);
this.e.appendChild(card.e);
+ this.updatePos();
},
// Add a card to the back of the deck
prependCard: function(card) {
this.cards.unshift(card);
this.e.prepend(card.e);
+ card.setPos(this.cards.length - 1);
},
// Add a card at the index specified
@@ -105,5 +108,11 @@ Deck.prototype = {
this.e.removeChild(this.cards[index].e);
return this.cards.splice(index, 1)[0];
+ },
+
+ updatePos: function() {
+ let len = this.cards.length - 1;
+ for(let i in this.cards)
+ this.cards[i].setPos(len-i);
}
}; \ No newline at end of file
diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js
index cce1e72..54fb797 100644
--- a/webcards/scripts/cards/drag.js
+++ b/webcards/scripts/cards/drag.js
@@ -24,24 +24,36 @@ MultiDrag.prototype = {
return this.drag.length - 1;
},
- startDragging: function(mevent) {
+ dragging: function(e) {
+ for(let i in this.drag) {
+ if(this.drag[i].e == e)
+ return true;
+ }
+ return false;
+ },
+
+ startDragging: function(e) {
if(this.del)
return;
- console.log(mevent);
+ console.log(e);
- if(mevent.button != 0)
+ if(e.button != 0)
return;
- let pos = mevent.target.getBoundingClientRect();
+ let pos
+ if(e.target.parentElement != null)
+ pos = e.target.parentElement.getBoundingClientRect();
+ else
+ pos = e.target.getBoundingClientRect();
return this.addDragEl(
- mevent.currentTarget,
- mevent.clientX - pos.left,
- mevent.clientY - pos.top,
- mevent.currentTarget.style.left,
- mevent.currentTarget.style.top,
- mevent.currentTarget.style.transitionDuration
+ e.target,
+ e.pageX,
+ e.pageY,
+ e.target.style.left,
+ e.target.style.top,
+ e.target.style.transitionDuration
);
},
@@ -76,8 +88,8 @@ MultiDrag.prototype = {
update: function(e) {
for (let i = 0; i < this.drag.length && !this.del; i++) {
- this.drag[i].e.style.left = e.clientX - this.drag[i].osx + "px";
- this.drag[i].e.style.top = e.clientY - this.drag[i].osy + "px";
+ this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
+ this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
}
}
}; \ No newline at end of file
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
index 01cdcc5..2f52255 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -21,6 +21,10 @@ card:hover
box-shadow: 0 0 10px var(--card-hover);
}
+card > * {
+ pointer-events: none;
+}
+
carea
{
padding-left: 2px;
@@ -122,8 +126,8 @@ card[drag=true]
deck {
position: absolute;
- width: 0;
- height: 0;
+ min-width: 160px;
+ min-height: 240px;
top: 0;
left: 0;
@@ -132,24 +136,32 @@ deck {
display: flex;
justify-content: center;
align-content: center;
+
+ border-radius: 10px;
+
+ transition-duration: 0.2s;
+}
+
+deck:hover {
+ box-shadow: 0 0 5px var(--deck-hover);
}
deck > card {
- transform: translate(-75px, calc(-115px + ( var(--cpos) * 3px )));
+ transform: translate(0, calc(var(--cpos) * 3px ));
}
deck[mode="strip-hl"] > card {
- transform: translate(calc(-75px - ( var(--cpos) * 75px )), -115px);
+ transform: translate(calc(var(--cpos) * -75px), 0);
}
deck[mode="strip-hr"] > card {
- transform: translate(calc(-75px + ( var(--cpos) * 75px )), -115px);
+ transform: translate(calc(var(--cpos) * 75px), 0);
}
deck[mode="strip-vu"] > card {
- transform: translate(-75px, calc(-115px - ( var(--cpos) * 115px )));
+ transform: translate(0, calc(var(--cpos) * -115px ));
}
deck[mode="strip-vd"] > card {
- transform: translate(-75px, calc(-115px + ( var(--cpos) * 115px )));
+ transform: translate(0, calc(var(--cpos) * 115px ));
}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 5770dde..1afc4fb 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 599px) or (max-height: 500px) {
+@media (max-width: 599px), (max-height: 500px) {
/*
Hide stuff
*/
diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css
index 4f878da..fa2b60e 100644
--- a/webcards/styles/themes/colors-base.css
+++ b/webcards/styles/themes/colors-base.css
@@ -34,6 +34,8 @@
--card-border: #bbb;
--card-hover: #0f0;
+ --deck-hover: #3ea2ff;
+
/* Input */
--input-color-text: black;
diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css
index 8020491..2f6ef3e 100644
--- a/webcards/styles/themes/colors-dark.css
+++ b/webcards/styles/themes/colors-dark.css
@@ -34,6 +34,8 @@
--card-border: #bbb;
--card-hover: #0f0;
+ --deck-hover: #3ea2ff;
+
/* Input */
--input-color-text: white;