diff options
| author | Kyle Gunger <corechg@gmail.com> | 2020-05-17 20:31:10 -0400 |
|---|---|---|
| committer | Kyle Gunger <corechg@gmail.com> | 2020-05-17 20:31:10 -0400 |
| commit | 20201f77b5cf5cbb1c70b1cc51c4108d620a3202 (patch) | |
| tree | 30e2871b60ac12f5b3ac2df5a1176faf682ce3ac /webcards | |
| parent | b48f0adccb11619680a47cac5fa9c68f638bd489 (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.md | 2 | ||||
| -rw-r--r-- | webcards/client.html | 18 | ||||
| -rw-r--r-- | webcards/scripts/cards/card.js | 5 | ||||
| -rw-r--r-- | webcards/scripts/cards/deck.js | 9 | ||||
| -rw-r--r-- | webcards/scripts/cards/drag.js | 36 | ||||
| -rw-r--r-- | webcards/styles/client/card.css | 26 | ||||
| -rw-r--r-- | webcards/styles/client/mobile.css | 2 | ||||
| -rw-r--r-- | webcards/styles/themes/colors-base.css | 2 | ||||
| -rw-r--r-- | webcards/styles/themes/colors-dark.css | 2 |
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 + 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; |