forked from GithubMirrors/cardconjurer
safari fixes
This commit is contained in:
Kyle
BIN
data/images/blank.png
Normal file
BIN
data/images/blank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -50,9 +50,10 @@ newCanvas('autoCrop')
|
||||
var artWidth = cardWidth, artHeight = cardHeight
|
||||
var setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight
|
||||
var watermarkDrawX = 0, watermarkDrawY = 0, watermarkDrawWidth = 0, watermarkDrawHeight = 0
|
||||
cardArt = new Image()
|
||||
setSymbol = new Image()
|
||||
watermark = new Image()
|
||||
var cardArt = new Image()
|
||||
cardArt.src = 'data/images/blank.png'
|
||||
var setSymbol = new Image()
|
||||
var watermark = new Image()
|
||||
cardArt.crossOrigin = "anonymous"
|
||||
setSymbol.crossOrigin = "anonymous"
|
||||
watermark.crossOrigin = "anonymous"
|
||||
@@ -116,7 +117,9 @@ class cardPlaceholder {
|
||||
} else {
|
||||
mainContext.globalAlpha = 1
|
||||
}
|
||||
mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
|
||||
console.log(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
|
||||
mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
|
||||
// breaks here
|
||||
}
|
||||
cardMasterElement() {
|
||||
var temporaryElement = document.createElement('div')
|
||||
@@ -219,7 +222,8 @@ function drawCardObjects() {
|
||||
mainContext.drawImage(setSymbol, setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight)
|
||||
mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
|
||||
mainContext.globalCompositeOperation = 'destination-over'
|
||||
mainContext.drawImage(cardArt, scaleX(cardMasterList[0].x), scaleY(cardMasterList[0].y), scaleX(cardMasterList[0].width) * cardMasterList[0].zoom, scaleY(cardMasterList[0].height) * cardMasterList[0].zoom)
|
||||
mainContext.drawImage(cardArt, scaleX(cardMasterList[0].x), scaleY(cardMasterList[0].y), scaleX(cardMasterList[0].width) * cardMasterList[0].zoom, scaleY(cardMasterList[0].height) * cardMasterList[0].zoom)
|
||||
//breaks here
|
||||
mainContext.globalCompositeOperation = 'destination-out'
|
||||
//draw the corner cutters
|
||||
mainContext.drawImage(cornerCutout, 0, 0, scaleX(59/1500), scaleX(59/1500))
|
||||
@@ -843,4 +847,4 @@ function autoCrop(targetImage, source = targetImage.src) {
|
||||
|
||||
|
||||
//Must run last:
|
||||
initialize()
|
||||
initialize()
|
||||
|
||||
@@ -7,7 +7,7 @@ rootStyles.setProperty('--input-color', '#efefef')
|
||||
rootStyles.setProperty('--input-font-color', '#000')
|
||||
rootStyles.setProperty('--font-color', '#000')
|
||||
rootStyles.setProperty('--font-color-contrast', '#000')
|
||||
rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
|
||||
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png)')
|
||||
setCookie('colorPalette', 'dayRave')
|
||||
|
||||
//Cycles through a rainbow!
|
||||
|
||||
@@ -7,7 +7,7 @@ rootStyles.setProperty('--input-color', '#3a3a3a')
|
||||
rootStyles.setProperty('--input-font-color', '#efefef')
|
||||
rootStyles.setProperty('--font-color', '#000')
|
||||
rootStyles.setProperty('--font-color-contrast', '#efefef')
|
||||
rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
|
||||
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png)')
|
||||
setCookie('colorPalette', 'nightRave')
|
||||
|
||||
//Cycles through a rainbow!
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
rootStyles.setProperty('--background-color', 'none')
|
||||
rootStyles.setProperty('--background-color-contrast', 'url(images/palettes/canvasPaper.png)')
|
||||
rootStyles.setProperty('--interactable-color', 'url(images/palettes/whitePaperTileable.png)')
|
||||
rootStyles.setProperty('--interactable-selected-color', 'url(images/palettes/whitePaperHighlightedTileable.png)')
|
||||
rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png)')
|
||||
rootStyles.setProperty('--interactable-color', 'url(data/site/images/palettes/whitePaperTileable.png)')
|
||||
rootStyles.setProperty('--interactable-selected-color', 'url(data/site/images/palettes/whitePaperHighlightedTileable.png)')
|
||||
rootStyles.setProperty('--interactable-tiling', 'auto')
|
||||
rootStyles.setProperty('--input-color', 'url(images/palettes/whitePaperTileable.png)')
|
||||
rootStyles.setProperty('--input-color', 'url(data/site/images/palettes/whitePaperTileable.png)')
|
||||
rootStyles.setProperty('--input-font-color', '#000')
|
||||
rootStyles.setProperty('--font-color', '#eee')
|
||||
rootStyles.setProperty('--font-color-contrast', '#000')
|
||||
rootStyles.setProperty('--body-background', 'url(images/palettes/darkWood.png)')
|
||||
setCookie('colorPalette', 'scholarMode')
|
||||
rootStyles.setProperty('--body-background', 'url(data/site/images/palettes/darkWood.png)')
|
||||
setCookie('colorPalette', 'scholarMode')
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
.askScryfallGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto 90pt auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.urzaCard {
|
||||
width: 360pt;
|
||||
text-align: center;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
.urzaCard > img {
|
||||
width: 360pt;
|
||||
height: auto;
|
||||
}
|
||||
.askScryfallGrid > * {
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
.askScryfallButton {
|
||||
width: auto;
|
||||
height: 60pt;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.askScryfallButton:hover {
|
||||
height: 80pt;
|
||||
}
|
||||
.askScryfallButton:active {
|
||||
height: 90pt !important;
|
||||
}
|
||||
#askScryfallResult {
|
||||
grid-column: 1 / span 3;
|
||||
padding: 2rem;
|
||||
margin: 1rem;
|
||||
background: var(--background-color-contrast);
|
||||
color: var(--font-color-contrast);
|
||||
border-radius: 1rem;
|
||||
font: 2rem belerenb;
|
||||
}
|
||||
@media screen and (min-width: 864pt) {
|
||||
.askScryfallGrid {
|
||||
grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
|
||||
grid-template-rows: 90pt auto !important;
|
||||
}
|
||||
.urzaCard {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2 !important;
|
||||
}
|
||||
#askScryfallResult {
|
||||
grid-column: 2 / span 3 !important;
|
||||
}
|
||||
}
|
||||
@@ -1,451 +0,0 @@
|
||||
/*fonts*/
|
||||
@font-face {
|
||||
font-family: gothammedium;
|
||||
src: url("../fonts/gotham-medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenb;
|
||||
src: url("../fonts/beleren-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenbsc;
|
||||
src: url("../fonts/beleren-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrix;
|
||||
src: url("../fonts/matrix.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixb;
|
||||
src: url("../fonts/matrix-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixbsc;
|
||||
src: url("../fonts/matrix-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantin;
|
||||
src: url("../fonts/mplantin.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantini;
|
||||
src: url("../fonts/mplantin-i.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: goudymedieval;
|
||||
src: url("../fonts/goudy-medieval.ttf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #f5f5f5;
|
||||
--background-color-contrast: #eaeaea;
|
||||
--interactable-color: #dfdfdf;
|
||||
--interactable-selected-color: #cccccc;
|
||||
--interactable-tiling: 100% 100%;
|
||||
--input-color: #dadada;
|
||||
--input-font-color: #000;
|
||||
--font-color: #000;
|
||||
--font-color-contrast: #000;
|
||||
--body-background: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font: 12pt georgia;
|
||||
background: var(--background-color);
|
||||
color: var(--font-color);
|
||||
background-attachment: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
/*overflow-x: hidden;*/
|
||||
}
|
||||
body {
|
||||
background: var(--body-background);
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
a {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
/*color: var(--font-color);*/
|
||||
font: 2.5rem 'belerenbsc';
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.cardMaster {
|
||||
margin: 0.9rem 0px;
|
||||
}
|
||||
.cardMasterElement {
|
||||
font: 1rem belerenbsc;
|
||||
margin-top: 0.1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 2rem auto 2rem;
|
||||
align-items: center;
|
||||
background: var(--interactable-color);
|
||||
color: var(--input-font-color);
|
||||
background-size: var(--interactable-tiling);
|
||||
cursor: pointer;
|
||||
}
|
||||
.cardMasterElement > .handle {
|
||||
cursor: move;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.cardMasterElementMoving {
|
||||
background: var(--interactable-selected-color);
|
||||
}
|
||||
.cardMasterElement > .delete {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.cardMasterElement.cardMasterElementSelected {
|
||||
background: var(--interactable-selected-color);
|
||||
}
|
||||
|
||||
.splitGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.1rem;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
grid-gap: 0.1rem;
|
||||
}
|
||||
.frameGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
grid-gap: 0.1rem;
|
||||
}
|
||||
img {
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
#framePicker, #maskPicker {
|
||||
max-height: 260pt;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#framePicker > div {
|
||||
height: 3rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
#framePicker img {
|
||||
max-width: 3rem;
|
||||
max-height: 3rem;
|
||||
}
|
||||
#maskPicker img {
|
||||
max-width: 1.5rem;
|
||||
max-height: 1.5rem;
|
||||
}
|
||||
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
|
||||
background: var(--interactable-selected-color);
|
||||
}
|
||||
#maskPicker > div, #framePicker > div {
|
||||
background: var(--interactable-color);
|
||||
color: var(--input-font-color);
|
||||
background-size: var(--interactable-tiling);
|
||||
cursor: pointer;
|
||||
}
|
||||
#maskPicker > div {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
#textPicker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
grid-gap: 0.1rem;
|
||||
margin: 0.1rem 0px;
|
||||
}
|
||||
#textPicker > div {
|
||||
font: 1rem belerenbsc;
|
||||
background: var(--interactable-color);
|
||||
color: var(--input-font-color);
|
||||
background-size: var(--interactable-tiling);
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#textPicker > div.selectedText {
|
||||
background: var(--interactable-selected-color);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 4rem;
|
||||
max-height: 12rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.hidden.frameClassCustom {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.tabPicker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
grid-gap: 0.1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.tabPicker > div {
|
||||
font: 1.2rem belerenbsc;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
background: var(--interactable-color);
|
||||
color: var(--input-font-color);
|
||||
background-size: var(--interactable-tiling);
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabPicker > div.tabOptionSelected {
|
||||
background: var(--interactable-selected-color);
|
||||
}
|
||||
|
||||
input:not([type='checkbox']), textarea, button, select {
|
||||
font: inherit;
|
||||
color: var(--input-font-color);
|
||||
width: 100%;
|
||||
background: var(--input-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0.2rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
input:not([type='checkbox']):active, textarea:active, button:active {
|
||||
border: 0.1rem solid var(--input-font-color);
|
||||
padding: 0.1rem;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
position: relative;
|
||||
top: 0.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
input[type='checkbox'], select, option, input[type='file'], button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
@keyframes slide-from-left {
|
||||
from {position: relative; left: -100vw;}
|
||||
to {position: relative; left: 0px;}
|
||||
}
|
||||
@keyframes slide-from-right {
|
||||
from {position: relative; left: 100vw;}
|
||||
to {position: relative; left: 0px;}
|
||||
}
|
||||
.layerTitle {
|
||||
/*color: inherit;*/
|
||||
text-align: center;
|
||||
font: 2rem 'belerenbsc';
|
||||
}
|
||||
.darkLayer {
|
||||
background: var(--background-color-contrast);
|
||||
background-size: 100% 100%;
|
||||
color: var(--font-color-contrast);
|
||||
}
|
||||
.layer > div {
|
||||
opacity: 0;
|
||||
}
|
||||
.layer.revealedLayer > div {
|
||||
opacity: 1;
|
||||
}
|
||||
.layer.revealedLayer.fadeIn > div {
|
||||
animation: fade-in 2s;
|
||||
}
|
||||
.layer.revealedLayer.slideFromLeft > div {
|
||||
animation: slide-from-left 1.5s;
|
||||
}
|
||||
.layer.revealedLayer.slideFromRight > div {
|
||||
animation: slide-from-right 1.5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fiveSampleCards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.fiveSampleCards > div > img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.layer.revealedLayer > div > div > div > .sample1 {
|
||||
animation: sample-one 2s;
|
||||
transform: rotate(-10deg) translate(16%, 15%);
|
||||
}
|
||||
.layer.revealedLayer > div > div > div > .sample2 {
|
||||
animation: sample-two 2s;
|
||||
transform: rotate(-5deg) translate(10%, 4%);
|
||||
}
|
||||
.layer.revealedLayer > div > div > div > .sample4 {
|
||||
animation: sample-four 2s;
|
||||
transform: rotate(5deg) translate(-10%, 4%);
|
||||
}
|
||||
.layer.revealedLayer > div > div > div > .sample5 {
|
||||
animation: sample-five 2s;
|
||||
transform: rotate(10deg) translate(-16%, 15%);
|
||||
}
|
||||
@keyframes sample-one {
|
||||
from {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
|
||||
to {transform: rotate(-10deg) translate(16%, 15%); position: relative; left: 0;}
|
||||
}
|
||||
@keyframes sample-two {
|
||||
from {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
|
||||
to {transform: rotate(-5deg) translate(10%, 4%); position: relative; left: 0;}
|
||||
}
|
||||
@keyframes sample-four {
|
||||
from {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
|
||||
to {transform: rotate(5deg) translate(-10%, 4%); position: relative; left: 0;}
|
||||
}
|
||||
@keyframes sample-five {
|
||||
from {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
|
||||
to {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
|
||||
}
|
||||
|
||||
#inputColorPalette {
|
||||
font: inherit;
|
||||
width: 10rem;
|
||||
textAlign: left;
|
||||
}
|
||||
|
||||
.downloadCardImage {
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
font: 2rem belerenbsc;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*ANYTHING THAT CHANGES BASED ON SCREEN WIDTH GOES HERE*/
|
||||
.mainGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
justify-items: center;
|
||||
grid-gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.layer {
|
||||
padding: 2rem;
|
||||
}
|
||||
.cardLayerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 1rem;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cardLayerGrid > img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
canvas {
|
||||
width: 100%;
|
||||
}
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
background: var(--background-color-contrast);
|
||||
background-size: 100% 100%;
|
||||
color: var(--font-color-contrast);
|
||||
font: 0.6rem arial;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 1rem;
|
||||
}
|
||||
.footer > div > select {
|
||||
width: auto !important;
|
||||
}
|
||||
@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
|
||||
.mainGrid {
|
||||
grid-template-columns: 750px auto;
|
||||
justify-items: stretch;
|
||||
/*padding: 0 1rem 1rem 1rem;*/
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 800pt) { /*Screen is wide enough for cardLayerGrids to display side by side, and for more padding*/
|
||||
.cardLayerGrid {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
.layer {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 618pt) { /*Screen is wide enough for padding*/
|
||||
.mainGrid {
|
||||
/*padding: 1rem 1rem;*/
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) { /*Screen is wide enough for the card image to be 750px wide. Scrollbar is 18 pixels?*/
|
||||
canvas {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 450pt) { /*Screen is wide enough for the footer to display horizontally*/
|
||||
.footer {
|
||||
padding: 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/
|
||||
.cardLayerGrid > img {
|
||||
width: 300pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 300pt) { /*Screen is wide enough for larger text*/
|
||||
html {
|
||||
font: 20pt georgia;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user