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;
}
.urzaCard {
width: 360pt;
width: 90vw;
text-align: center;
grid-column: 1 / span 3;
}
.urzaCard > img {
width: 360pt;
width: 100%;
height: auto;
}
.askScryfallGrid > * {
/*border: 1px solid red;*/
}
.askScryfallButton {
width: auto;
height: 60pt;
height: auto;
width: 22vw;
transition: 0.25s;
}
.askScryfallButton:hover {
height: 80pt;
}
.askScryfallButton:active {
height: 90pt !important;
}
#askScryfallResult {
grid-column: 1 / span 3;
padding: 2rem;
@@ -35,12 +29,12 @@
background: var(--background-color-contrast);
color: var(--font-color-contrast);
border-radius: 1rem;
font: 2rem belerenb;
font: 1.5rem belerenb;
}
@media screen and (min-width: 864pt) {
.askScryfallGrid {
grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
grid-template-rows: 90pt auto !important;
grid-template-rows: 92pt auto !important;
}
.urzaCard {
grid-column: 1;
@@ -49,4 +43,20 @@
#askScryfallResult {
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 {
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)
// breaks here
}
cardMasterElement() {
var temporaryElement = document.createElement('div')
@@ -223,7 +221,6 @@ function drawCardObjects() {
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)
//breaks here
mainContext.globalCompositeOperation = 'destination-out'
//draw the corner cutters
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('--interactable-color', '#202020')
rootStyles.setProperty('--interactable-selected-color', '#2f2f2f')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#282828')
rootStyles.setProperty('--input-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('--interactable-color', '#f5f5f5')
rootStyles.setProperty('--interactable-selected-color', '#eaeaea')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
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(data/site/images/lowpoly.png)')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow!
@@ -24,7 +23,7 @@ var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
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
}
function indexToColor(colorIndex) {

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

@@ -1,8 +1,7 @@
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-selected-color', '#cccccc')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-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('--interactable-color', '#202020')
rootStyles.setProperty('--interactable-selected-color', '#555')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
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(data/site/images/lowpoly.png)')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'nightRave')
//Cycles through a rainbow!
@@ -24,7 +23,7 @@ var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
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
}
function indexToColor(colorIndex) {

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

@@ -1,11 +1,10 @@
rootStyles.setProperty('--background-color', 'none')
rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png)')
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) left/cover no-repeat')
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(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(data/site/images/palettes/darkWood.png)')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'scholarMode')

2
index.html
View File

@@ -2,7 +2,6 @@
<html>
<head>
<script async src="data/scripts/cookies.js"></script>
<!-- <script async src="data/scripts/palettes/dayRave.js"></script> -->
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<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/main.js"></script>
<script defer src="data/scripts/versions/versionM15.js"></script>
<!-- <script async src="data/scripts/palettes/nightRave.js"></script> -->
</body>
<footer class='footer'>
<div>

19
styles.css
View File

@@ -38,10 +38,9 @@
:root {
--background-color: #f5f5f5;
--background-color-contrast: #eaeaea;
--background-color-contrast: #e4e4e4;
--interactable-color: #dfdfdf;
--interactable-selected-color: #cccccc;
--interactable-tiling: 100% 100%;
--input-color: #dadada;
--input-font-color: #000;
--font-color: #000;
@@ -53,7 +52,6 @@ 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;
@@ -63,14 +61,10 @@ html, body {
margin: 0;
border: 0;
padding: 0;
/*overflow-x: hidden;*/
overflow-x: hidden;
}
body {
background: var(--body-background);
background-position: left;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
a {
font: inherit;
@@ -83,7 +77,6 @@ a:hover {
.title {
text-align: center;
/*color: var(--font-color);*/
font: 2.5rem 'belerenbsc';
padding: 1rem 0;
}
@@ -99,7 +92,6 @@ a:hover {
align-items: center;
background: var(--interactable-color);
color: var(--input-font-color);
background-size: var(--interactable-tiling);
cursor: pointer;
}
.cardMasterElement > .handle {
@@ -166,7 +158,6 @@ img {
#maskPicker > div, #framePicker > div {
background: var(--interactable-color);
color: var(--input-font-color);
background-size: var(--interactable-tiling);
cursor: pointer;
}
#maskPicker > div {
@@ -185,7 +176,6 @@ img {
font: 1rem belerenbsc;
background: var(--interactable-color);
color: var(--input-font-color);
background-size: var(--interactable-tiling);
padding: 0.5rem;
cursor: pointer;
}
@@ -223,7 +213,6 @@ textarea {
padding: 0.5rem 0;
background: var(--interactable-color);
color: var(--input-font-color);
background-size: var(--interactable-tiling);
cursor: pointer;
}
.tabPicker > div.tabOptionSelected {
@@ -267,13 +256,11 @@ input[type='checkbox'], select, option, input[type='file'], button {
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 {
@@ -398,7 +385,6 @@ canvas {
.footer {
padding: 1rem;
background: var(--background-color-contrast);
background-size: 100% 100%;
color: var(--font-color-contrast);
font: 0.6rem arial;
display: grid;
@@ -412,7 +398,6 @@ canvas {
.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*/