Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

fixes

Browse Source
This commit is contained in:
Kyle
2020-03-30 20:42:41 -07:00
parent 76f0563ef9
commit ae4cd65238
9 changed files with 34 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
askScryfallStyles.css
View File

@@ -6,28 +6,22 @@
justify-items: center; justify-items: center;
} }
.urzaCard { .urzaCard {
width: 360pt; width: 90vw;
text-align: center; text-align: center;
grid-column: 1 / span 3; grid-column: 1 / span 3;
} }
.urzaCard > img { .urzaCard > img {
width: 360pt; width: 100%;
height: auto; height: auto;
} }
.askScryfallGrid > * { .askScryfallGrid > * {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
} }
.askScryfallButton { .askScryfallButton {
width: auto; height: auto;
height: 60pt; width: 22vw;
transition: 0.25s; transition: 0.25s;
} }
.askScryfallButton:hover {
height: 80pt;
}
.askScryfallButton:active {
height: 90pt !important;
}
#askScryfallResult { #askScryfallResult {
grid-column: 1 / span 3; grid-column: 1 / span 3;
padding: 2rem; padding: 2rem;
@@ -35,12 +29,12 @@
background: var(--background-color-contrast); background: var(--background-color-contrast);
color: var(--font-color-contrast); color: var(--font-color-contrast);
border-radius: 1rem; border-radius: 1rem;
font: 2rem belerenb; font: 1.5rem belerenb;
} }
@media screen and (min-width: 864pt) { @media screen and (min-width: 864pt) {
.askScryfallGrid { .askScryfallGrid {
grid-template-columns: calc(360pt) 1fr 1fr 1fr !important; grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
grid-template-rows: 90pt auto !important; grid-template-rows: 92pt auto !important;
} }
.urzaCard { .urzaCard {
grid-column: 1; grid-column: 1;
@@ -49,4 +43,20 @@
#askScryfallResult { #askScryfallResult {
grid-column: 2 / span 3 !important; grid-column: 2 / span 3 !important;
} }
}
@media screen and (min-width: 380pt) {
.urzaCard {
width: 360pt;
}
.askScryfallButton {
height: auto;
width: 100pt;
transition: 0.25s;
}
.askScryfallButton:hover {
width: 110pt;
}
.askScryfallButton:active {
width: 120pt !important;
}
} }

3
data/scripts/main.js
View File

@@ -117,9 +117,7 @@ class cardPlaceholder {
} else { } else {
mainContext.globalAlpha = 1 mainContext.globalAlpha = 1
} }
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) mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
// breaks here
} }
cardMasterElement() { cardMasterElement() {
var temporaryElement = document.createElement('div') var temporaryElement = document.createElement('div')
@@ -223,7 +221,6 @@ function drawCardObjects() {
mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight) mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
mainContext.globalCompositeOperation = 'destination-over' 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' mainContext.globalCompositeOperation = 'destination-out'
//draw the corner cutters //draw the corner cutters
mainContext.drawImage(cornerCutout, 0, 0, scaleX(59/1500), scaleX(59/1500)) mainContext.drawImage(cornerCutout, 0, 0, scaleX(59/1500), scaleX(59/1500))

3
data/scripts/palettes/darkMode.js
View File

@@ -1,8 +1,7 @@
rootStyles.setProperty('--background-color', '#141414') rootStyles.setProperty('--background-color', '#181818')
rootStyles.setProperty('--background-color-contrast', '#0a0a0a') rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
rootStyles.setProperty('--interactable-color', '#202020') rootStyles.setProperty('--interactable-color', '#202020')
rootStyles.setProperty('--interactable-selected-color', '#2f2f2f') rootStyles.setProperty('--interactable-selected-color', '#2f2f2f')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#282828') rootStyles.setProperty('--input-color', '#282828')
rootStyles.setProperty('--input-font-color', '#efefef') rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#efefef') rootStyles.setProperty('--font-color', '#efefef')

5
data/scripts/palettes/dayRave.js
View File

@@ -2,12 +2,11 @@ rootStyles.setProperty('--background-color', '#eaeaea')
rootStyles.setProperty('--background-color-contrast', '#f5f5f5') rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
rootStyles.setProperty('--interactable-color', '#f5f5f5') rootStyles.setProperty('--interactable-color', '#f5f5f5')
rootStyles.setProperty('--interactable-selected-color', '#eaeaea') rootStyles.setProperty('--interactable-selected-color', '#eaeaea')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#efefef') rootStyles.setProperty('--input-color', '#efefef')
rootStyles.setProperty('--input-font-color', '#000') rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000') rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000') rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png)') rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'dayRave') setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow! //Cycles through a rainbow!
@@ -24,7 +23,7 @@ var currentColorIndex = 0
function changeColor() { function changeColor() {
var colors = indexToColor(currentColorIndex) var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead) var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ')') rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
} }
function indexToColor(colorIndex) { function indexToColor(colorIndex) {

3
data/scripts/palettes/lightMode.js
View File

@@ -1,8 +1,7 @@
rootStyles.setProperty('--background-color', '#f5f5f5') rootStyles.setProperty('--background-color', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#eaeaea') rootStyles.setProperty('--background-color-contrast', '#e4e4e4')
rootStyles.setProperty('--interactable-color', '#dfdfdf') rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc') rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#dadada') rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000') rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000') rootStyles.setProperty('--font-color', '#000')

5
data/scripts/palettes/nightRave.js
View File

@@ -2,12 +2,11 @@ rootStyles.setProperty('--background-color', '#121212')
rootStyles.setProperty('--background-color-contrast', '#0a0a0a') rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
rootStyles.setProperty('--interactable-color', '#202020') rootStyles.setProperty('--interactable-color', '#202020')
rootStyles.setProperty('--interactable-selected-color', '#555') rootStyles.setProperty('--interactable-selected-color', '#555')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#3a3a3a') rootStyles.setProperty('--input-color', '#3a3a3a')
rootStyles.setProperty('--input-font-color', '#efefef') rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#000') rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#efefef') rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png)') rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'nightRave') setCookie('colorPalette', 'nightRave')
//Cycles through a rainbow! //Cycles through a rainbow!
@@ -24,7 +23,7 @@ var currentColorIndex = 0
function changeColor() { function changeColor() {
var colors = indexToColor(currentColorIndex) var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead) var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ')') rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
} }
function indexToColor(colorIndex) { function indexToColor(colorIndex) {

7
data/scripts/palettes/scholarMode.js
View File

@@ -1,11 +1,10 @@
rootStyles.setProperty('--background-color', 'none') rootStyles.setProperty('--background-color', 'url(data/site/images/palettes/darkWood.png) left/cover no-repeat fixed')
rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png)') rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png) left/cover no-repeat')
rootStyles.setProperty('--interactable-color', 'url(data/site/images/palettes/whitePaperTileable.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-selected-color', 'url(data/site/images/palettes/whitePaperHighlightedTileable.png)')
rootStyles.setProperty('--interactable-tiling', 'auto')
rootStyles.setProperty('--input-color', 'url(data/site/images/palettes/whitePaperTileable.png)') rootStyles.setProperty('--input-color', 'url(data/site/images/palettes/whitePaperTileable.png)')
rootStyles.setProperty('--input-font-color', '#000') rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#eee') rootStyles.setProperty('--font-color', '#eee')
rootStyles.setProperty('--font-color-contrast', '#000') rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(data/site/images/palettes/darkWood.png)') rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'scholarMode') setCookie('colorPalette', 'scholarMode')

2
index.html
View File

@@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<script async src="data/scripts/cookies.js"></script> <script async src="data/scripts/cookies.js"></script>
<!-- <script async src="data/scripts/palettes/dayRave.js"></script> -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -242,6 +241,7 @@
<script defer src="data/scripts/sortable.js"></script> <script defer src="data/scripts/sortable.js"></script>
<script defer src="data/scripts/main.js"></script> <script defer src="data/scripts/main.js"></script>
<script defer src="data/scripts/versions/versionM15.js"></script> <script defer src="data/scripts/versions/versionM15.js"></script>
<!-- <script async src="data/scripts/palettes/nightRave.js"></script> -->
</body> </body>
<footer class='footer'> <footer class='footer'>
<div> <div>

19
styles.css
View File

@@ -38,10 +38,9 @@
:root { :root {
--background-color: #f5f5f5; --background-color: #f5f5f5;
--background-color-contrast: #eaeaea; --background-color-contrast: #e4e4e4;
--interactable-color: #dfdfdf; --interactable-color: #dfdfdf;
--interactable-selected-color: #cccccc; --interactable-selected-color: #cccccc;
--interactable-tiling: 100% 100%;
--input-color: #dadada; --input-color: #dadada;
--input-font-color: #000; --input-font-color: #000;
--font-color: #000; --font-color: #000;
@@ -53,7 +52,6 @@ html {
font: 12pt georgia; font: 12pt georgia;
background: var(--background-color); background: var(--background-color);
color: var(--font-color); color: var(--font-color);
background-attachment: fixed;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@@ -63,14 +61,10 @@ html, body {
margin: 0; margin: 0;
border: 0; border: 0;
padding: 0; padding: 0;
/*overflow-x: hidden;*/ overflow-x: hidden;
} }
body { body {
background: var(--body-background); background: var(--body-background);
background-position: left;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
} }
a { a {
font: inherit; font: inherit;
@@ -83,7 +77,6 @@ a:hover {
.title { .title {
text-align: center; text-align: center;
/*color: var(--font-color);*/
font: 2.5rem 'belerenbsc'; font: 2.5rem 'belerenbsc';
padding: 1rem 0; padding: 1rem 0;
} }
@@ -99,7 +92,6 @@ a:hover {
align-items: center; align-items: center;
background: var(--interactable-color); background: var(--interactable-color);
color: var(--input-font-color); color: var(--input-font-color);
background-size: var(--interactable-tiling);
cursor: pointer; cursor: pointer;
} }
.cardMasterElement > .handle { .cardMasterElement > .handle {
@@ -166,7 +158,6 @@ img {
#maskPicker > div, #framePicker > div { #maskPicker > div, #framePicker > div {
background: var(--interactable-color); background: var(--interactable-color);
color: var(--input-font-color); color: var(--input-font-color);
background-size: var(--interactable-tiling);
cursor: pointer; cursor: pointer;
} }
#maskPicker > div { #maskPicker > div {
@@ -185,7 +176,6 @@ img {
font: 1rem belerenbsc; font: 1rem belerenbsc;
background: var(--interactable-color); background: var(--interactable-color);
color: var(--input-font-color); color: var(--input-font-color);
background-size: var(--interactable-tiling);
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
} }
@@ -223,7 +213,6 @@ textarea {
padding: 0.5rem 0; padding: 0.5rem 0;
background: var(--interactable-color); background: var(--interactable-color);
color: var(--input-font-color); color: var(--input-font-color);
background-size: var(--interactable-tiling);
cursor: pointer; cursor: pointer;
} }
.tabPicker > div.tabOptionSelected { .tabPicker > div.tabOptionSelected {
@@ -267,13 +256,11 @@ input[type='checkbox'], select, option, input[type='file'], button {
to {position: relative; left: 0px;} to {position: relative; left: 0px;}
} }
.layerTitle { .layerTitle {
/*color: inherit;*/
text-align: center; text-align: center;
font: 2rem 'belerenbsc'; font: 2rem 'belerenbsc';
} }
.darkLayer { .darkLayer {
background: var(--background-color-contrast); background: var(--background-color-contrast);
background-size: 100% 100%;
color: var(--font-color-contrast); color: var(--font-color-contrast);
} }
.layer > div { .layer > div {
@@ -398,7 +385,6 @@ canvas {
.footer { .footer {
padding: 1rem; padding: 1rem;
background: var(--background-color-contrast); background: var(--background-color-contrast);
background-size: 100% 100%;
color: var(--font-color-contrast); color: var(--font-color-contrast);
font: 0.6rem arial; font: 0.6rem arial;
display: grid; display: grid;
@@ -412,7 +398,6 @@ canvas {
.mainGrid { .mainGrid {
grid-template-columns: 750px auto; grid-template-columns: 750px auto;
justify-items: stretch; 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*/ @media screen and (min-width: 800pt) { /*Screen is wide enough for cardLayerGrids to display side by side, and for more padding*/