style

data/main.js

@@ -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"

index.html

@@ -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><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.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;
+	padding: 4px;
-	border-radius: 36px;
-	/*margin: 5px 5px 5px 0px;*/
 }
 .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*/
 .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;
 }
-
+.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)*/
@@ -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;