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

css

Browse Source
This commit is contained in:
Kyle
2018-11-08 21:33:01 -08:00
parent 11abc78dc5
commit dec22d51b7
2 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
data/scripts/main.js
View File

@@ -357,7 +357,7 @@ function createBorder() {
} }
//COLOR IDENTITY //COLOR IDENTITY
if (document.getElementById("checkboxIdentity").checked == true) { if (document.getElementById("checkboxIdentity").checked == true) {
var identityList = document.getElementById("inputIdentity").value.split(" ") var identityList = document.getElementById("inputIdentity").value.toLowerCase().split(" ")
var angleSize = Math.PI * 2 / identityList.length var angleSize = Math.PI * 2 / identityList.length
var identityRadius = 14 var identityRadius = 14
var identityX = typeX + 8 var identityX = typeX + 8
@@ -494,7 +494,7 @@ function drawWatermark() {
function drawManaCost() { function drawManaCost() {
//the symbols string splits the mana cost input into an array of strings which is then put into a for loop that draws the appropriate set symbol then adjusts the xShift so the set symbols are spaced properly //the symbols string splits the mana cost input into an array of strings which is then put into a for loop that draws the appropriate set symbol then adjusts the xShift so the set symbols are spaced properly
card.fillStyle = "Black" card.fillStyle = "Black"
var symbols = document.getElementById("inputCost").value.split(" ") var symbols = document.getElementById("inputCost").value.toLowerCase().split(" ")
var xShift = 0 var xShift = 0
for (n = symbols.length; n > -1; n--) { for (n = symbols.length; n > -1; n--) {
if (manaSymbolCode.indexOf(symbols[n]) != -1) { if (manaSymbolCode.indexOf(symbols[n]) != -1) {
@@ -689,8 +689,9 @@ function drawText(text, xCoord, yCoord) {
x += 58 x += 58
} else { } else {
//It's an image (mana symbol, tap, etc...) //It's an image (mana symbol, tap, etc...)
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize * 0.77, textSize * 0.77) card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17 + parseInt(document.getElementById("inputSymbolDown").value), textSize * 0.77, textSize * 0.77)
textXShift += textSize * 0.84 textXShift += textSize * 0.84
console.log(y + textSize * 0.17)
} }
if (megaSplit[1] != "") { if (megaSplit[1] != "") {
plainWord = megaSplit[1] + " " plainWord = megaSplit[1] + " "
@@ -741,16 +742,11 @@ function toggleSection(target) {
} }
//Resizes anything that may need to be resized //Resizes anything that may need to be resized
function resizeThings() { function resizeThings() {
if (window.innerWidth > 809 + 300 && cardWidth <= 749) {
document.getElementById("optionsColumn").style = "width: calc(100% - 769px)"
} else {
document.getElementById("optionsColumn").style = "width: 100%"
}
var symbolList = "" var symbolList = ""
var rowCount = Math.ceil(manaSymbolCode.length / Math.floor((window.innerWidth - 30) / 130)) var rowCount = Math.ceil(manaSymbolCode.length / Math.floor((window.innerWidth - 30) / 150))
for (var i = 0; i < manaSymbolCode.length; i++) { for (var i = 0; i < manaSymbolCode.length; i++) {
if (i%rowCount == 0) { if (i%rowCount == 0) {
symbolList += "<div class='column' style='width: 130px'>" symbolList += "<div class='column-4' style='width: 150px'>"
} }
symbolList += manaSymbolCode[i] + "\u2192" + "<img src=" + manaSymbolImages[i].src + "></img><br/>" symbolList += manaSymbolCode[i] + "\u2192" + "<img src=" + manaSymbolImages[i].src + "></img><br/>"
if (i%rowCount == rowCount - 1) { if (i%rowCount == rowCount - 1) {

78
index.html
View File

@@ -26,8 +26,8 @@
<!-- <img src="data/background.png"></img> --> <!-- <img src="data/background.png"></img> -->
<body onresize="resizeThings()" onload="resizeThings()"> <body onresize="resizeThings()" onload="resizeThings()">
<div class="row"> <div class="row">
<div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div> <div class="column-1"><canvas id="canvas" width="749" height="1044"></canvas></div>
<div class="column" id="optionsColumn"> <div class="column-2" id="optionsColumn">
<!--OPTIONS--> <!--OPTIONS-->
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Border</div> <div class="toggler" onclick="toggleSection(this)">Card Border</div>
@@ -172,6 +172,9 @@
<br/> <br/>
Shift All Text Down Shift All Text Down
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input> <input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
<br/>
Shift All Mana Symbols Down
<input id="inputSymbolDown" type="number" class="input" value="0"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
@@ -216,7 +219,7 @@
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" /> <input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" /> <label for="checkboxArtistColor" />
<div>Make Artist Credit font black</div> <div>Black Bottom Info</div>
</div> </div>
</div> </div>
</div> </div>
@@ -314,11 +317,11 @@
</div> </div>
<div class="row section"> <div class="row section">
Check out some samples! <br/> Check out some samples! <br/>
<img id="sampleCardA" class="column sampleImage"></img> <img id="sampleCardA" class="column-3"></img>
<img id="sampleCardB" class="column sampleImage"></img> <img id="sampleCardB" class="column-3"></img>
<img id="sampleCardC" class="column sampleImage"></img> <img id="sampleCardC" class="column-3"></img>
</div> </div>
<div class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the Github page</a>.</div> <div class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank" class="info">the Github page</a>.</div>
</body> </body>
@@ -373,44 +376,32 @@
* { * {
text-align: center; text-align: center;
font-family: belerenb; font-family: belerenb;
font-size: 24px; font-size: 25px;
color: var(--main-text-color); color: var(--main-text-color);
user-select: none; user-select: none;
box-sizing: border-box;
} }
.row { .row::after{
margin-bottom: 5;
}
.row:after{
content: ""; content: "";
display: table; display: block;
clear: both; clear: both;
} }
.row * { [class*="column-"] {
box-sizing: border-box; width: 100%;
padding: 5px;
}
.column {
float: left; float: left;
} padding: 0.2em;
.sampleImage {
width: 33.33%;
} }
/*Style for sections, togglers, and togglees*/ /*Style for sections, togglers, and togglees*/
.section { .section {
border: 1px solid var(--section-border-color); border: 0.04em solid var(--section-border-color);
background-color: var(--section-background-color); background-color: var(--section-background-color);
padding: 0px;
}
.toggler {
width: 100%;
} }
.toggler:hover { .toggler:hover {
color: var(--hover-text-color); color: var(--hover-text-color);
} }
.togglee { .togglee {
width: 100%;
text-align: left; text-align: left;
border-width: 1px; border-width: 0.04em;
border-color: var(--section-border-color); border-color: var(--section-border-color);
border-style: dashed solid solid solid; border-style: dashed solid solid solid;
display: none; display: none;
@@ -420,7 +411,7 @@
} }
/*Specific input element styles*/ /*Specific input element styles*/
.input { .input {
border-radius: 10px; border-radius: 0.25em;
text-align: left; text-align: left;
border: none; border: none;
background-color: var(--section-border-color); background-color: var(--section-border-color);
@@ -460,7 +451,7 @@ input[type="color"] {
.checkbox div { .checkbox div {
white-space: pre; white-space: pre;
position: absolute; position: absolute;
top: -9px; top: -5px;
left: 18px; left: 18px;
} }
/*Custom select box (dropdown)*/ /*Custom select box (dropdown)*/
@@ -496,10 +487,9 @@ input[type="color"] {
} }
/*List of all mana symbols and their associated codes*/ /*List of all mana symbols and their associated codes*/
#symbolList img { #symbolList img {
padding: 0px;
position: relative; position: relative;
top: 8px; top: 0.25em;
width: 30px; width: 1.2em;
/*padding: 0px 0px 0px 0px !important;*/ /*padding: 0px 0px 0px 0px !important;*/
} }
/*Other*/ /*Other*/
@@ -509,10 +499,10 @@ input[type="color"] {
font-family: belerenbsc; font-family: belerenbsc;
font-size: 60px; font-size: 60px;
} }
.info, .info * { .info {
color: var(--dark-text-color); color: var(--dark-text-color);
font-family: belerenbsc; font-family: belerenbsc;
font-size: 16px; font-size: 0.75rem;
} }
html { html {
background:url(data/background.png) no-repeat center center fixed; background:url(data/background.png) no-repeat center center fixed;
@@ -534,6 +524,24 @@ a:hover {
a:active { a:active {
color: var(--hover-text-color); color: var(--hover-text-color);
} }
/*Adjustments For Desktop*/
@media only screen and (min-width: 850px) {
/*Nothing for now :)*/
}
@media only screen and (min-width: 1150px) {
.column-1 {
width: 769px;
}
.column-2 {
width: calc(100% - 769px);
}
.column-3 {
width: 33.33%;
}
.column-4 {
}
}
</style> </style>
<script src="data/scripts/loadScript.js"></script> <script src="data/scripts/loadScript.js"></script>
<script src="data/scripts/loadImage.js"></script> <script src="data/scripts/loadImage.js"></script>