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

style

Browse Source
This commit is contained in:
Kyle
2019-01-12 15:59:32 -08:00
parent c3fb84bc91
commit da8c6d5451
4 changed files with 57 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
data/main.js
View File

@@ -119,7 +119,7 @@ loadScript("data/borders/defaultBorder.js")
loadSetSymbol() loadSetSymbol()
//Randomize the sample cards at the bottom //samplecount //Randomize the sample cards at the bottom //samplecount
randomizeSampleCards(16) randomizeSampleCards(15)
//Set up the initial clock! //Set up the initial clock!
var cardClockInterval var cardClockInterval
@@ -544,7 +544,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.toLowerCase().split(" ") var symbols = document.getElementById("inputCost").value.toLowerCase().replace(/{/g, " ").replace(/}/g, " ").split(" ")
var xShift = 0 var xShift = 0
for (var n = symbols.length; n > -1; n--) { for (var n = symbols.length; n > -1; n--) {
if (manaSymbolCode.indexOf(symbols[n]) != -1) { if (manaSymbolCode.indexOf(symbols[n]) != -1) {
@@ -686,7 +686,7 @@ function drawText(text, xCoord, yCoord) {
card.lineWidth = 2 card.lineWidth = 2
} }
for (var wordIndex = 0; wordIndex < words.length; wordIndex ++) { for (var wordIndex = 0; wordIndex < words.length; wordIndex ++) {
if (words[wordIndex].includes("<") == false || words[wordIndex].includes(">") == false) { if (words[wordIndex].includes("{") == false || words[wordIndex].includes("}") == false) {
//Just a regular old word //Just a regular old word
testLine = line + words[wordIndex] testLine = line + words[wordIndex]
var lineWidth = card.measureText(testLine).width var lineWidth = card.measureText(testLine).width
@@ -711,7 +711,7 @@ function drawText(text, xCoord, yCoord) {
} }
} else { } else {
//Symbols and more! //Symbols and more!
var splitWord = words[wordIndex].split("<") var splitWord = words[wordIndex].split("{")
for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) { for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) {
//Write what's there first! //Write what's there first!
if (outlineRulesText == true) { if (outlineRulesText == true) {
@@ -720,9 +720,9 @@ function drawText(text, xCoord, yCoord) {
card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0]) card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
textXShift += card.measureText(line).width textXShift += card.measureText(line).width
line = "" line = ""
if (splitWord[splitIndex].includes(">")) { if (splitWord[splitIndex].includes("}")) {
var plainWord = "" var plainWord = ""
var megaSplit = splitWord[splitIndex].split(">") var megaSplit = splitWord[splitIndex].split("}")
//series of if statements to determine an action based off of the given code //series of if statements to determine an action based off of the given code
if (megaSplit[0] == "i") { if (megaSplit[0] == "i") {
canvas.style.letterSpacing = textFontSpacing * 1/3 + "px" canvas.style.letterSpacing = textFontSpacing * 1/3 + "px"

BIN
images/sampleCards/sample-card-12.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 453 KiB

After

Width:  |  Height:  |  Size: 609 KiB

BIN
images/sampleCards/sample-card-16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 609 KiB

98
index.html
View File

@@ -263,7 +263,7 @@
<div class="cmm" id="cmm-text"> <div class="cmm" id="cmm-text">
Rules Text Rules Text
<br> <br>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea> <textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px" placeholder="Remember to include curly brackets ('{' and '}') around each code. To skip to the next line use {line}. See 'Mana Symbols' and 'Other Codes' (below) for more information."></textarea>
<br> <br>
Rules Text Font Size Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"> <input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
@@ -443,10 +443,10 @@
<div class="text"> <div class="text">
Donate? Donate?
</div> </div>
<div class="paragraph" style="margin-bottom: 0.5em"> <div class="paragraph">
I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link... Or you can check out my friend's youtube channel: Izzet Right? I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link... Or you can check out my friend's youtube channel: Izzet Right?
</div> </div><br>
<div class="grid donateGrid"> <div class="grid donateGrid selectionGrid">
<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></img></div> <div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></img></div>
<div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></img></div> <div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></img></div>
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></img></div> <div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></img></div>
@@ -459,13 +459,13 @@
</div> </div>
</div> </div>
<div class="extras" id="extras-symbolList"> <div class="extras" id="extras-symbolList">
Each of the following codes must include '<' before each code and '>' after. These codes aren't caps sensitive. Each of the following codes must include '{' before each code and '}' after. These codes aren't caps sensitive.
<div class="symbolGrid grid" id="symbolList"> <div class="symbolGrid grid" id="symbolList">
</div> </div>
</div> </div>
<div class="extras" id="extras-codes"> <div class="extras" id="extras-codes">
Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are caps sensitive.<br> Like the mana symbols, each of the following codes must include '{' before each code and '}' after. These codes are caps sensitive.<br>
&#8226 line &#8594 Skips to the next line<br> &#8226 line &#8594 Skips to the next line<br>
&#8226 bar &#8594 Just like line, except adds the bar that usually seperates flavor text<br> &#8226 bar &#8594 Just like line, except adds the bar that usually seperates flavor text<br>
&#8226 lineNoSpace &#8594 Just like line, except stays closer to the previous line<br> &#8226 lineNoSpace &#8594 Just like line, except stays closer to the previous line<br>
@@ -546,7 +546,7 @@
--color-c: #095700; --color-c: #095700;
--color-d: #0e720040; /*0e720040*/ --color-d: #0e720040; /*0e720040*/
--color-e: #0e7200; --color-e: #0e7200;
--color-gray: #00000060; --color-gray: #0002;
} }
/*Page-wide styling*/ /*Page-wide styling*/
@@ -554,7 +554,7 @@
font-family: belerenb; font-family: belerenb;
font-size: 6vw; font-size: 6vw;
user-select: none; user-select: none;
color: #ddd; color: #eee;
} }
html { html {
background: url("images/background.png") no-repeat center center fixed; background: url("images/background.png") no-repeat center center fixed;
@@ -563,51 +563,53 @@ html {
-o-background-size: cover; -o-background-size: cover;
background-size: cover; background-size: cover;
} }
body {
margin: 0;
}
/*Grid styling*/ /*Grid styling*/
.grid { .grid {
display: grid; display: grid;
grid-gap: 3px; grid-gap: 4px;
} }
.mainGrid { .mainGrid {
grid-gap: 0px 4px; grid-gap: 0px 0px;
}
.mainGrid > div, body, footer, .title {
border: 3px solid var(--color-a);
} }
.canvasContainer { .canvasContainer {
justify-self: center; text-align: center;
background-color: var(--color-b) !important;
width: calc(100% - 18px);
} }
.selectionGrid { .selectionGrid {
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
text-align: center; text-align: center;
} }
.grid > div { .grid > div {
padding: 8px; padding: 4px;
border-radius: 36px;
/*margin: 5px 5px 5px 0px;*/
} }
.grid > div:not(.noBorder) { .grid > div:not(.noBorder) {
border: 5px solid var(--color-d); background: var(--color-gray);
background: var(--color-d);
}
.mainGrid > div {
background: var(--color-gray) !important;
} }
/*Card manipulation menu grid*/ /*Card manipulation menu grid*/
.selectionGrid > div { .selectionGrid > div {
font-family: belerenbsc; font-family: belerenbsc;
cursor: pointer; cursor: pointer;
border-radius: 36px;
border: 4px solid var(--color-d);
background-color: #0008 !important;
} }
.selectionGrid > div:hover { .selectionGrid > div:hover {
background: var(--color-c); border-color: var(--color-c);
} }
/*.selectionGrid > div:nth-child(odd) {
}*/
.cardManipulationMenu, .extrasMenu { .cardManipulationMenu, .extrasMenu {
margin-top: 4px; margin-top: 4px;
padding: 24px; padding: 24px;
border-radius: 36px; border-radius: 36px;
border: 2px solid var(--color-d); border: 4px solid var(--color-d);
background-color: var(--color-gray); background-color: var(--color-gray);
} }
.cmm, .extras { .cmm, .extras {
@@ -631,7 +633,7 @@ html {
border-radius: 0.25em; border-radius: 0.25em;
padding-left: 0.25em; padding-left: 0.25em;
width: inherit; width: inherit;
background-color: var(--color-c); background-color: var(--color-a);
border: none; border: none;
cursor: pointer; cursor: pointer;
-moz-appearance: none; -moz-appearance: none;
@@ -663,7 +665,7 @@ html {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
background: var(--color-c); background: var(--color-a);
cursor: pointer; cursor: pointer;
} }
.checkbox input:checked ~ label:after { .checkbox input:checked ~ label:after {
@@ -689,7 +691,7 @@ html {
input[type="text"], input[type="number"], textarea, input[type="file"] { input[type="text"], input[type="number"], textarea, input[type="file"] {
width: 100%; width: 100%;
border: none; border: none;
background: var(--color-c); background: var(--color-a);
border-radius: 0.25em; border-radius: 0.25em;
padding-left: 0.25em; padding-left: 0.25em;
} }
@@ -697,7 +699,7 @@ input[type="text"], input[type="number"], textarea, input[type="file"] {
input[type="color"] { input[type="color"] {
padding: 0px; padding: 0px;
border: none; border: none;
background: var(--color-c); background: var(--color-a);
} }
/*Hyperlinks*/ /*Hyperlinks*/
@@ -710,6 +712,9 @@ a:hover, a:active {
/*Desktop*/ /*Desktop*/
@media only screen and (min-width: 1130px) { @media only screen and (min-width: 1130px) {
.canvasContainer {
width: auto;
}
.mainGrid:not(.plane) { .mainGrid:not(.plane) {
grid-template-columns: calc(749px + 0.7em) auto; grid-template-columns: calc(749px + 0.7em) auto;
} }
@@ -746,33 +751,38 @@ a:hover, a:active {
} }
/*Text and stuff :)*/ /*Text and stuff :)*/
.info, .title {
text-align: center;
font-size: 0.75em;
}
.info > * { .info > * {
font-size: inherit; font-size: inherit;
} }
.info {
font-size: 0.75em;
}
/*Title*/
.title > img {
max-height: 80px;
width: auto;
}
.title, .info {
text-align: center;
background-color: black;
padding: 10px;
}
/*symbol grid*/ /*symbol grid*/
.manaSymbol > img { .manaSymbol > img {
position: relative; position: relative;
top: 0.15em;
height: 1em; height: 1em;
margin-bottom: 0.25em;
} }
.symbolGrid { .symbolGrid {
margin-top: 8px; margin-top: 8px;
grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
text-align: center; text-align: center;
} }
.symbolGrid > div {
/*Title*/ border: 4px solid var(--color-a);
.title > img { border-radius: 36px;
margin-bottom: 20px; background-color: var(--color-d) !important;
margin-top: 0px;
max-height: 80px;
width: auto;
} }
/*Sitewide text (bottom of the page)*/ /*Sitewide text (bottom of the page)*/
@@ -785,17 +795,11 @@ a:hover, a:active {
/*Donation buttons!*/ /*Donation buttons!*/
.donateGrid { .donateGrid {
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
text-align: center;
} }
.donateGrid.grid > div { .donateGrid.grid > div {
background: black;
font-size: 1.7em; font-size: 1.7em;
cursor: pointer;
padding: 0px; padding: 0px;
} }
.donateGrid.grid > div:hover {
background: var(--color-b);
}
.donateGrid > div > img { .donateGrid > div > img {
position: relative; position: relative;
top: 0.25em; top: 0.25em;