diff options
-rw-r--r-- | assets/nou/draw-set-color.svg | 94 | ||||
-rw-r--r-- | assets/nou/draw.svg | 94 | ||||
-rw-r--r-- | assets/nou/reverse.svg | 60 | ||||
-rw-r--r-- | assets/nou/set-color.svg | 70 | ||||
-rw-r--r-- | assets/nou/skip.svg | 34 | ||||
-rw-r--r-- | index.html | 3 | ||||
-rw-r--r-- | scripts/cards/deck.js | 10 | ||||
-rw-r--r-- | styles/client/card.css | 23 |
8 files changed, 367 insertions, 21 deletions
diff --git a/assets/nou/draw-set-color.svg b/assets/nou/draw-set-color.svg new file mode 100644 index 0000000..c7c4a4c --- /dev/null +++ b/assets/nou/draw-set-color.svg @@ -0,0 +1,94 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="512.0px" + height="512.0px" + viewBox="0 0 512.0 512.0" + version="1.1" + id="SVGRoot" + sodipodi:docname="draw-set-color.svg" + inkscape:version="1.0.1 (unknown)"> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1012" + id="namedview10" + showgrid="false" + inkscape:zoom="0.82421875" + inkscape:cx="146.63039" + inkscape:cy="224.51489" + inkscape:window-x="1080" + inkscape:window-y="840" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /> + <defs + id="defs833" /> + <metadata + id="metadata836"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1"> + <rect + style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561" + width="187.68198" + height="250.39899" + x="281.03061" + y="36.405998" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + <rect + style="fill:#0000ff;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561-9" + width="187.68198" + height="250.39899" + x="129.44128" + y="238.65132" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + <rect + style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561-0" + width="187.68198" + height="250.39899" + x="140.2691" + y="36.405998" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + <rect + style="fill:#00ff00;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561-6" + width="187.68198" + height="250.39899" + x="270.20279" + y="238.65132" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + </g> +</svg> diff --git a/assets/nou/draw.svg b/assets/nou/draw.svg new file mode 100644 index 0000000..78f0c54 --- /dev/null +++ b/assets/nou/draw.svg @@ -0,0 +1,94 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="512.0px" + height="512.0px" + viewBox="0 0 512.0 512.0" + version="1.1" + id="SVGRoot" + sodipodi:docname="draw.svg" + inkscape:version="1.0.1 (unknown)"> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1012" + id="namedview10" + showgrid="false" + inkscape:zoom="0.82421875" + inkscape:cx="68.451501" + inkscape:cy="239.79531" + inkscape:window-x="1080" + inkscape:window-y="840" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /> + <defs + id="defs833" /> + <metadata + id="metadata836"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1"> + <rect + style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561" + width="187.68198" + height="250.39899" + x="281.03061" + y="36.405998" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + <rect + style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561-9" + width="187.68198" + height="250.39899" + x="129.44128" + y="238.65132" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + <rect + style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561-0" + width="187.68198" + height="250.39899" + x="140.2691" + y="36.405998" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + <rect + style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:8.10444558;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + id="rect1561-6" + width="187.68198" + height="250.39899" + x="270.20279" + y="238.65132" + ry="38.522919" + rx="47.32975" + transform="matrix(1,0,-0.22485951,0.9743912,0,0)" /> + </g> +</svg> diff --git a/assets/nou/reverse.svg b/assets/nou/reverse.svg new file mode 100644 index 0000000..56d3905 --- /dev/null +++ b/assets/nou/reverse.svg @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="512.0px" + height="512.0px" + viewBox="0 0 512.0 512.0" + version="1.1" + id="SVGRoot" + sodipodi:docname="reverse.svg" + inkscape:version="1.0.1 (unknown)"> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1012" + id="namedview7" + showgrid="false" + inkscape:zoom="0.82421875" + inkscape:cx="128.86246" + inkscape:cy="246.90249" + inkscape:window-x="1080" + inkscape:window-y="840" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /> + <defs + id="defs10" /> + <metadata + id="metadata13"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + style="fill:#ffffff;stroke:#000000;stroke-opacity:1;stroke-width:5.64173568;stroke-miterlimit:4;stroke-dasharray:none" + transform="matrix(1.0635025,0,0,1.0635025,-16.256629,-16.256629)"> + <path + id="path30-5-9" + style="fill:#ffffff;stroke-width:7.52231424;stroke:#000000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + d="M 327.93848,39.999998 A 68.483504,108.14175 76.120545 0 0 201.38379,111.36523 l -22.85742,71.36523 h -51.14258 l 25.01758,42.82032 25.01367,42.81836 52.44336,-42.81836 52.44336,-42.82032 H 240.792 l 1.9082,-5.95898 20.94922,-65.40625 a 27.393402,43.256699 76.120545 0 1 50.65234,-28.546872 27.393402,43.256699 76.120545 0 1 32.36719,28.546872 l -20.94922,65.40625 -11.05078,34.50586 h 62.26367 l 31.93359,-99.70703 a 68.483504,108.14175 76.120545 0 0 0.0664,-0.20508 68.483504,108.14175 76.120545 0 0 -80.91797,-71.365232 68.483504,108.14175 76.120545 0 0 -0.0762,0 z m 6.64844,203.628902 -52.44532,42.82032 -52.44336,42.81835 h 41.50977 l -1.9082,5.95899 -20.94727,65.4082 a 27.393402,43.256699 76.120545 0 1 -50.6543,28.54492 27.393402,43.256699 76.120545 0 1 -32.36523,-28.54492 l 20.94727,-65.4082 11.05273,-34.50391 h -62.26562 l -31.9336,99.70508 a 68.483504,108.14175 76.120545 0 0 -0.0664,0.20703 68.483504,108.14175 76.120545 0 0 80.91797,71.36524 68.483504,108.14175 76.120545 0 0 0.0762,0 68.483504,108.14175 76.120545 0 0 126.55468,-71.36524 l 22.85743,-71.36719 h 51.14257 l -25.01562,-42.81835 z" /> + </g> +</svg> diff --git a/assets/nou/set-color.svg b/assets/nou/set-color.svg new file mode 100644 index 0000000..ef1158a --- /dev/null +++ b/assets/nou/set-color.svg @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="512.0px" + height="512.0px" + viewBox="0 0 512.0 512.0" + version="1.1" + id="SVGRoot" + sodipodi:docname="set-color.svg" + inkscape:version="1.0.1 (unknown)"> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1012" + id="namedview10" + showgrid="false" + inkscape:zoom="0.82421875" + inkscape:cx="-15.937654" + inkscape:cy="224.2913" + inkscape:window-x="1080" + inkscape:window-y="840" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /> + <defs + id="defs833" /> + <metadata + id="metadata836"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1"> + <path + id="rect1415" + style="fill:#ff0000;stroke:#000000;stroke-width:8;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + d="M 304,48 A 151.48635,219.68977 26.384962 0 0 96,256 H 256 L 304.45312,48 Z" /> + <path + id="rect1415-4" + style="fill:#00ff00;stroke:#000000;stroke-width:8;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + d="M 208,464 A 151.48635,219.68977 26.384962 0 0 416,256 H 256 l -48.45312,208 z" /> + <path + id="rect1415-0" + style="fill:#ffff00;stroke:#000000;stroke-width:8;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + d="M 304.90624,48 A 151.48635,219.68977 26.384962 0 1 416,256 H 256 L 304.45312,48 Z" /> + <path + id="rect1415-0-7" + style="fill:#0000ff;stroke:#000000;stroke-width:8;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" + d="M 207.09376,464 A 151.48635,219.68977 26.384962 0 1 96,256 h 160 l -48.45312,208 z" /> + </g> +</svg> diff --git a/assets/nou/skip.svg b/assets/nou/skip.svg new file mode 100644 index 0000000..a213141 --- /dev/null +++ b/assets/nou/skip.svg @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + width="512.0px" + height="512.0px" + viewBox="0 0 512.0 512.0" + version="1.1" + id="SVGRoot"> + <defs + id="defs833" /> + <metadata + id="metadata836"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1"> + <path + id="path1412" + style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="M 256,36.571429 A 219.42857,219.42857 0 0 0 36.571429,256 219.42857,219.42857 0 0 0 256,475.42857 219.42857,219.42857 0 0 0 475.42857,256 219.42857,219.42857 0 0 0 256,36.571429 Z m -0.18527,54.857142 a 164.57143,164.57143 0 0 1 0.18527,0 164.57143,164.57143 0 0 1 87.60045,25.252229 L 116.6808,343.60045 A 164.57143,164.57143 0 0 1 91.428571,256 164.57143,164.57143 0 0 1 255.81473,91.428571 Z M 395.3192,168.39955 A 164.57143,164.57143 0 0 1 420.57143,256 164.57143,164.57143 0 0 1 256,420.57143 164.57143,164.57143 0 0 1 168.39955,395.3192 Z" /> + </g> +</svg> @@ -43,6 +43,9 @@ </div> <a style="border: none; padding: 0; display: contents; margin: 0;" href="http://vanilla-js.com/"><img src="images/vanilla.png"></a> + + <div style="color: red;">This site uses cookies to store themes and previous servers. That is all.</div> + <div>You may choose to submit user generated data over this site (Such as player name or text chat). This site stores none of that data. Please check with the server owner for privacy policy and/or any legal issue.</div> </div> <script> diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js index d87d619..dcfa1e9 100644 --- a/scripts/cards/deck.js +++ b/scripts/cards/deck.js @@ -45,14 +45,9 @@ class Deck { // all - no effect this.sct = options.sct > 0 ? options.sct : 0; - // Position - // array of where the deck is centered - this.x = options.pos[0]; - this.y = options.pos[1]; - this.e = document.createElement("deck"); - this.e.style.left = this.x + "px"; - this.e.style.top = this.y + "px"; + this.e.style.setProperty("--x", options.pos[0]); + this.e.style.setProperty("--y", options.pos[1]); this.e.setAttribute("mode", options.mode); this.getID = function() { @@ -73,7 +68,6 @@ class Deck { this.cards.push(card); this.e.appendChild(card.e); this.updatePos(); - } prependCard(card) diff --git a/styles/client/card.css b/styles/client/card.css index 774990e..0ee8f6a 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -135,8 +135,8 @@ deck { width: 166px; height: 250px; - top: 0; - left: 0; + top: calc(var(--y) * (100vh - 250px)); + left: calc(var(--x) * (100vw - 166px)); overflow: visible; @@ -160,36 +160,33 @@ deck[mode="stack"] > card { deck[mode="stack"] { height: calc(var(--ccount) * 3px + 250px); + top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px))); } + deck[mode="strip-hl"] > card { transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); } -deck[mode="strip-hl"] { - width: calc(var(--ccount) * 75px + 160px); -} - deck[mode="strip-hr"] > card { transform: translate(calc(var(--cpos) * 75px + 5px), 7px); } -deck[mode="strip-hr"] { +deck[mode="strip-hl"], deck[mode="strip-hr"] { width: calc(var(--ccount) * 75px + 160px); + left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px))); } + deck[mode="strip-vu"] > card { transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); } -deck[mode="strip-vu"] { - height: calc(var(--ccount) * 115px + 240px); -} - deck[mode="strip-vd"] > card { transform: translate(5px, calc(var(--cpos) * 115px + 7px)); } -deck[mode="strip-vd"] { +deck[mode="strip-vu"], deck[mode="strip-vd"] { height: calc(var(--ccount) * 115px + 240px); -}
\ No newline at end of file + top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px))); +} |