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()
//Randomize the sample cards at the bottom //samplecount
randomizeSampleCards(16)
randomizeSampleCards(15)
//Set up the initial clock!
var cardClockInterval
@@ -544,7 +544,7 @@ function drawWatermark() {
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
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
for (var n = symbols.length; n > -1; n--) {
if (manaSymbolCode.indexOf(symbols[n]) != -1) {
@@ -686,7 +686,7 @@ function drawText(text, xCoord, yCoord) {
card.lineWidth = 2
}
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
testLine = line + words[wordIndex]
var lineWidth = card.measureText(testLine).width
@@ -711,7 +711,7 @@ function drawText(text, xCoord, yCoord) {
}
} else {
//Symbols and more!
var splitWord = words[wordIndex].split("<")
var splitWord = words[wordIndex].split("{")
for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) {
//Write what's there first!
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])
textXShift += card.measureText(line).width
line = ""
if (splitWord[splitIndex].includes(">")) {
if (splitWord[splitIndex].includes("}")) {
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
if (megaSplit[0] == "i") {
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">
Rules Text
<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>
Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
@@ -443,10 +443,10 @@
<div class="text">
Donate?
</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?
</div>
<div class="grid donateGrid">
</div><br>
<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.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>
@@ -459,13 +459,13 @@
</div>
</div>
<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>
</div>
<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 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>
@@ -546,7 +546,7 @@
--color-c: #095700;
--color-d: #0e720040; /*0e720040*/
--color-e: #0e7200;
--color-gray: #00000060;
--color-gray: #0002;
}
/*Page-wide styling*/
@@ -554,7 +554,7 @@
font-family: belerenb;
font-size: 6vw;
user-select: none;
color: #ddd;
color: #eee;
}
html {
background: url("images/background.png") no-repeat center center fixed;
@@ -563,51 +563,53 @@ html {
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
}
/*Grid styling*/
.grid {
display: grid;
grid-gap: 3px;
grid-gap: 4px;
}
.mainGrid {
grid-gap: 0px 4px;
grid-gap: 0px 0px;
}
.mainGrid > div, body, footer, .title {
border: 3px solid var(--color-a);
}
.canvasContainer {
justify-self: center;
text-align: center;
background-color: var(--color-b) !important;
width: calc(100% - 18px);
}
.selectionGrid {
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
text-align: center;
}
.grid > div {
padding: 8px;
border-radius: 36px;
/*margin: 5px 5px 5px 0px;*/
padding: 4px;
}
.grid > div:not(.noBorder) {
border: 5px solid var(--color-d);
background: var(--color-d);
}
.mainGrid > div {
background: var(--color-gray) !important;
background: var(--color-gray);
}
/*Card manipulation menu grid*/
.selectionGrid > div {
font-family: belerenbsc;
cursor: pointer;
border-radius: 36px;
border: 4px solid var(--color-d);
background-color: #0008 !important;
}
.selectionGrid > div:hover {
background: var(--color-c);
border-color: var(--color-c);
}
/*.selectionGrid > div:nth-child(odd) {
}*/
.cardManipulationMenu, .extrasMenu {
margin-top: 4px;
padding: 24px;
border-radius: 36px;
border: 2px solid var(--color-d);
border: 4px solid var(--color-d);
background-color: var(--color-gray);
}
.cmm, .extras {
@@ -631,7 +633,7 @@ html {
border-radius: 0.25em;
padding-left: 0.25em;
width: inherit;
background-color: var(--color-c);
background-color: var(--color-a);
border: none;
cursor: pointer;
-moz-appearance: none;
@@ -663,7 +665,7 @@ html {
position: absolute;
top: 0px;
left: 0px;
background: var(--color-c);
background: var(--color-a);
cursor: pointer;
}
.checkbox input:checked ~ label:after {
@@ -689,7 +691,7 @@ html {
input[type="text"], input[type="number"], textarea, input[type="file"] {
width: 100%;
border: none;
background: var(--color-c);
background: var(--color-a);
border-radius: 0.25em;
padding-left: 0.25em;
}
@@ -697,7 +699,7 @@ input[type="text"], input[type="number"], textarea, input[type="file"] {
input[type="color"] {
padding: 0px;
border: none;
background: var(--color-c);
background: var(--color-a);
}
/*Hyperlinks*/
@@ -710,6 +712,9 @@ a:hover, a:active {
/*Desktop*/
@media only screen and (min-width: 1130px) {
.canvasContainer {
width: auto;
}
.mainGrid:not(.plane) {
grid-template-columns: calc(749px + 0.7em) auto;
}
@@ -746,33 +751,38 @@ a:hover, a:active {
}
/*Text and stuff :)*/
.info, .title {
text-align: center;
font-size: 0.75em;
}
.info > * {
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*/
.manaSymbol > img {
position: relative;
top: 0.15em;
height: 1em;
margin-bottom: 0.25em;
}
.symbolGrid {
margin-top: 8px;
grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
text-align: center;
}
/*Title*/
.title > img {
margin-bottom: 20px;
margin-top: 0px;
max-height: 80px;
width: auto;
.symbolGrid > div {
border: 4px solid var(--color-a);
border-radius: 36px;
background-color: var(--color-d) !important;
}
/*Sitewide text (bottom of the page)*/
@@ -785,17 +795,11 @@ a:hover, a:active {
/*Donation buttons!*/
.donateGrid {
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
text-align: center;
}
.donateGrid.grid > div {
background: black;
font-size: 1.7em;
cursor: pointer;
padding: 0px;
}
.donateGrid.grid > div:hover {
background: var(--color-b);
}
.donateGrid > div > img {
position: relative;
top: 0.25em;