GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Kyle
2018-11-16 17:10:59 -08:00
parent d10bba39f5
commit 1a9693c26d
40 changed files with 56 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

614
backup.html
View File

@@ -1,614 +0,0 @@
<!DOCTYPE html5>
<html>
<head>
<title>Card Conjurer</title>
<img src="images/title.png" height="auto" style="max-height: 100px;">
<!-- Favicon craziness! -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#64ca2f">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#64ca2f">
<meta charset="UTF-8">
</head>
<!-- <img src="data/background.png"></img> -->
<body>
<div class="row">
<div class="column-1"><canvas id="canvas" width="749" height="1044"></canvas></div>
<div class="column-2" id="optionsColumn">
<!--OPTIONS-->
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Border</div>
<div class="togglee shown">
Border
<span class="dropdown">
<select id="borderSelection" onchange="changeTemplate()">
<option value="m15/">M15</option>
<option value="map/">Map (Ixalan)</option>
<option value="plane/">Plane</option>
<option value="8th/">8th</option>
</select>
</span>
<br/>
Color
<span class="dropdown">
<select id="colorSelection" onchange="updateBorder()">
<option value="white">White</option>
</select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" />
<div>Second Color</div>
</div>
<span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" />
<div>Third Color</div>
</div>
<span class="dropdown">
<select id="thirdColorSelection" onchange="updateBorder()"></select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" value="" type="text"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
<div class="togglee">
<div class="checkbox">
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
<label for="checkboxLegendary" />
<div>Legendary</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
<label for="checkboxNyx" />
<div>Nyx</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
<label for="checkboxMiracle" />
<div>Miracle</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
<label for="checkboxRareStamp" />
<div>Rare Stamp</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
<label for="checkboxFlipIcon" />
<div>Flip Icon</div>
</div>
<span class="dropdown">
<select id="inputFlipIcon" onchange="updateBorder()">
<option value="blank.png">Blank</option>
<option value="day.png">Day</option>
<option value="night.png">Night</option>
<option value="compass.png">Compass</option>
<option value="moon.png">Moon</option>
<option value="eldrazi.png">Eldrazi</option>
<option value="planeswalker.png">Planeswalker</option>
<option value="creature.png">Creature</option>
<option value="instant.png">Instant</option>
<option value="sorcery.png">Sorcery</option>
<option value="enchantment.png">Enchantment</option>
<option value="artifact.png">Artifact</option>
<option value="land.png">Land</option>
<option value="multitype.png">Multitype</option>
<option value="planeshift.png">Planeshift</option>
<option value="structure.png">Structure</option>
</select>
</span>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
<label for="checkboxFlipTip" />
<div>Flip Tip</div>
</div>
<input id="inputFlipTip" value="" type="text" class="input"></input>
<div class="checkbox">
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
<label for="checkboxFlippedDark" />
<div>Flipped (Darker)</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" />
<label for="checkboxSilverBorder" />
<div>Silver Border</div>
</div>
<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
<div class="checkbox">
<input type="checkbox" id="checkboxFoil" />
<label for="checkboxFoil" />
<div>Foil</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" />
<label for="checkboxIdentity" />
<div>Color Identity</div>
</div>
<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div>
<div class="togglee">
Name
<input id="inputName" type="text" class="input"></input>
<br/>
Mana Cost
<input id="inputCost" type="text" class="input"></input>
<br/>
Type
<input id="inputType" type="text" class="input"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Rules Text</div>
<div class="togglee">
Rules Text
<br/>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
<br/>
Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"></input>
<br/>
Pixels Between Paragraphs
<input id="textShift" type="number" class="input" min="0" max="300" value="13"></input>
<br/>
Shift All Text Down
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
<br/>
Shift Mana Symbols Down
<input id="inputSymbolDown" type="number" class="input" value="0"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Art</div>
<div class="togglee">
Image
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input>
<br/>
Image Zoom
<input id="imageSize" type="number" class="input" value="100" step="0.1"></input>
<br/>
Image Left
<input id="imageLeft" type="number" class="input" value="0" step="1"></input>
<br/>
Image Up
<input id="imageUp" type="number" class="input" value="0" step="1"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Bottom Information</div>
<div class="togglee">
Other Info
<input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
<br/>
Card Number
<input id="inputNumber" value="001/001" type="text" class="input"></input>
<br/>
Rarity
<input id="inputRarity" value="C" type="text" class="input"></input>
<br/>
Set Abbreviation
<input id="inputSet" value="MTG" type="text" class="input"></input>
<br/>
Language
<input id="inputLanguage" value="EN" type="text" class="input"></input>
<br/>
Artist Credit
<input id="inputArtist" value="" type="text" class="input"></input>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" />
<div>Black Bottom Info</div>
</div>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div>
<div class="togglee">
<div class="checkbox">
<input type="checkbox" id="checkboxSetSymbol" checked="true" />
<label for="checkboxSetSymbol" />
<div>Set Symbol</div>
</div>
Set Code
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
<br>
Set Symbol Rarity
<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity" class="input"></input>
<br>
Custom Set Symbol
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input>
<br/>
Scale Set Symbol
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
<br/><br/>
<div class="checkbox">
<input type="checkbox" id="checkboxWatermark" checked="true" />
<label for="checkboxWatermark" />
<div>Watermark</div>
</div>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
<br/>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
<br/>
Watermark Color
<br/>
<span class="dropdown">
<select id="watermarkColorSelection">
<!-- <option value="#f3f2ef">White</option>
<option value="#1d7097">Blue</option>
<option value="#31302e">Black</option>
<option value="#bf544c">Red</option>
<option value="#1c6449">Green</option>
<option value="#e3d591">Gold</option>
<option value="#e0e0e0">Artifact/Colorless</option> -->
<option value="#afa360">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
<option value="#a3280d">Red</option>
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">Artifact/Colorless</option>
</select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div>
</div>
<span class="dropdown">
<select id="secondWatermarkColorSelection">
<option value="#afa360">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
<option value="#a3280d">Red</option>
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">Artifact/Colorless</option>
</select>
</span>
Watermark Opacity
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Download/Options</div>
<div class="togglee">
Frame Rate
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
</div>
<!--END-->
</div>
</div>
<div class="row">
<div class="column-4">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Mana Symbol Codes</div>
<div class="togglee shown">
Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after. These codes are caps sensative.<br/>
<div id="symbolList" style="overflow: hidden;"></div>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Other Codes</div>
<div class="togglee">
Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are also caps sensative.<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/>
&#8226 i &#8594 Text is italicized<br/>
&#8226 /i &#8594 Text returns to normal<br/>
&#8226 left &#8594 Text aligns to the left<br/>
&#8226 center &#8594 Text aligns to the center<br/>
&#8226 right &#8594 Text aligns to the right<br/>
&#8226 plane &#8594 Creates a large <img src="data/manaSymbols/56.png" style="height: 1em; background-color: var(--main-text-color);"></img> and shifts the following text to the right. This is designed for planar cards.
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Abbreviations</div>
<div class="togglee">
Every set in Magic: The Gathering has an associated 2-3 letter code. For example, Homelands is HM and Innistrad is ISD. This program uses the codes from <a href="http://gatherer.wizards.com" target="_blank">The Gatherer</a>, the official Magic card database. A handy list of all sets and their codes can be found on <a href="https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets" target="_blank">Wikipedia</a>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Choosing Your Border</div>
<div class="togglee">
Under the 'Card Border' tab use the following guidelines:<br/>
&#8226 Border &#8594 Selects the border style, such as planar card, m15 card, etc...<br/>
&#8226 Color &#8594 Selects the card's primary color<br/>
&#8226 Second Color &#8594 Selects the card's secondary color which only affects the right half of the card. This creates the same effect as seen on hybrid cards.<br/>
&#8226 Third Color &#8594 Selects the card's tertiary color which will affect the entire card, including power and toughness. This is used to create two-colored gold cards.<br/>
Under the 'Border (Advanced)' tab the checkboxes are fairly straightforward. Try each feature out to see what it does.
</div>
</div>
<div class="section" style="overflow: hidden; border-top: hidden;">
Check out some samples! <br/>
<img id="sampleCardA" class="column-3"></img>
<img id="sampleCardB" class="column-3"></img>
<img id="sampleCardC" class="column-3"></img>
</div>
</div>
</div>
<footer 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>.</footer>
</body>
<!--CSS-->
<style>
/*fonts*/
@font-face {
font-family: relaymedium;
src: url("data/fonts/relay-medium.ttf");
}
@font-face {
font-family: belerenb;
src: url("data/fonts/beleren-b.ttf");
}
@font-face {
font-family: belerenbsc;
src: url("data/fonts/beleren-bsc.ttf");
}
@font-face {
font-family: matrixbsc;
src: url("data/fonts/matrix-bsc.ttf");
}
@font-face {
font-family: matrix;
src: url("data/fonts/matrix.ttf");
}
@font-face {
font-family: matrixb;
src: url("data/fonts/matrix-b.ttf");
}
@font-face {
font-family: mplantin;
src: url("data/fonts/mplantin.ttf");
}
@font-face {
font-family: mplantini;
src: url("data/fonts/mplantin-i.ttf");
}
/*Color Palette*/
:root {
--title-text-color: rgb(100, 200, 50); /*TITLE*/
--main-text-color: rgb(150, 150, 150); /*REGULAR*/
--input-text-color: rgb(100, 200, 50); /*INPUTS*/
--dark-text-color: rgb(96, 96, 96); /*DARK*/
--section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/
--section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/
--solid-border-color: rgb(39, 71, 39); /*Opaque Border*/
}
/*General style things*/
* {
text-align: center;
font-family: belerenb;
font-size: 5vw;
color: var(--main-text-color);
user-select: none;
box-sizing: border-box;
}
html {
background-color: rgb(16, 16, 16);
}
/*Applies to most elements (with rows and columns)*/
.row::after{
content: "";
display: block;
clear: both;
margin-bottom: 5px;
}
[class*="column-"] {
width: 100%;
float: left;
padding: 5px;
}
/*Style for sections, togglers, and togglees*/
.section {
border: 0.04em solid var(--section-border-color);
background-color: var(--section-background-color);
width: 100%;
}
.toggler:hover {
color: var(--title-text-color);
}
.togglee {
text-align: left;
border-width: 0.04em;
border-color: var(--section-border-color);
border-style: dashed solid solid solid;
display: none;
padding: 5px;
}
.shown {
display: block;
}
/*Specific input element styles*/
.input {
border-radius: 0.25em;
padding-left: 0.25em;
text-align: left;
border: none;
background-color: var(--section-border-color);
color: var(--input-text-color);
width: 100%;
}
input[type="color"] {
border-radius: 0.25em;
border: none;
background-color: var(--section-border-color);
padding-top: 0px;
padding-bottom: 0px;
}
/*Custom checkboxes!*/
.checkbox {
height: 1em;
margin: 5px 0px;
position: relative;
}
.checkbox label {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 0.25em;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: var(--section-border-color);
}
.checkbox input[type=checkbox]:checked + label {
background: var(--title-text-color);
}
.checkbox input {
opacity: 0;
}
.checkbox div {
white-space: pre;
position: relative;
top: -0.1em;
left: 1.1em;
}
/*Custom select box (dropdown)*/
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown select {
border-radius: 0.25em;
padding-left: 0.25em;
width: inherit;
background-color: var(--section-border-color);
color: var(--title-text-color);
border: none;
-moz-appearance: none;
-webkit-appearance:none;
appearance: none;
}
.dropdown select option {
border-radius: 0.25em;
color: var(--title-text-color);
background-color: var(--solid-border-color);
}
.dropdown::after {
content: "\25BC";
font-size: 0.5em;
position: absolute;
pointer-events: none;
color: var(--title-text-color);
right: 0.65em;
top: 0.65em;
}
/*List of all mana symbols and their associated codes*/
#symbolList img {
position: relative;
top: 0.25em;
height: 1.2em;
}
#symbolList div {
float: left;
width: 5.5em;
}
/*Other*/
.title {
text-align: center;
color: var(--title-text-color);
font-family: belerenbsc;
font-size: 60px;
}
.info {
color: var(--dark-text-color);
font-family: belerenbsc;
font-size: 0.75rem;
}
/*Hyperlinks*/
a:link {
color: var(--main-text-color);
background-color: rgba(100, 200, 0, 0.1);
border-radius: 0.25em;
}
a:visited {
color: var(--main-text-color);
}
a:hover {
color: var(--title-text-color);
}
a:active {
color: var(--title-text-color);
}
.column-2 {
margin-bottom: 20px;
}
/*Adjustments For Desktop*/
@media only screen and (orientation: landscape) {
.column-3 {width: 33.33%;}
}
@media only screen and (min-width: 1130px) {
/*The card manipulator menu can be side-by-side with the regular card*/
.column-1:not(.wide) {width: auto;}
.column-2:not(.wide) {
width: calc(100% - 759px);
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1455px) {
/*The card manipulator menu can be side-by-side with the wide card*/
.column-1.wide {width: auto;}
.column-2.wide {
width: calc(100% - 1084px);
margin-bottom: 0px;
}
}
@media only screen and (min-width: 801px) {
html {
background:url(data/background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
font-size: 25px;
cursor: url(images/cursor.png), auto;
}
}
</style>
<script src="data/scripts/loadScript.js"></script>
<script src="data/scripts/loadImage.js"></script>
<script src="data/scripts/loadColors.js"></script>
<script src="data/scripts/mask.js"></script>
<script src="data/scripts/autocrop.js"></script>
<script src="data/scripts/whiteToTransparent.js"></script>
<script src="data/scripts/main.js"></script>
<html>

BIN
data/background-original.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 MiB

BIN
data/background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 846 KiB

24
data/borders/8th/border.js
View File

@@ -1,3 +1,7 @@
imgMultiMask.src = borderPath + "multiMask.png"
imgFrameMask.src = borderPath + "frameMask.png"
imgBorderMask.src = borderPath + "frameMask.png"
var titleFont = "44px matrixb"
var titleFontSpacing = "0.5px"
var titleX = 66
@@ -27,10 +31,7 @@ var ptY = 920.5
var ptWidth = 162
var ptHeight = 84
var eighthInfo = true
var eighthInfoY = 956
var m15Info = false
var m15InfoY = 992
var infoY = 956
var setSymbolY = 615
var setSymbolRight = 689
@@ -48,3 +49,18 @@ document.getElementById("secondColorSelection").innerHTML = document.getElementB
document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
finishTemplate()
var uniqueFunctionName = "bottomInfo8th"
function bottomInfo8th() {
if (document.getElementById("checkboxArtistColor").checked == true) {
card.fillStyle = "black"
} else {
card.fillStyle = "white"
}
canvas.style.letterSpacing = "1px"
card.font = "25px matrixb"
card.fillText(document.getElementById("inputArtist").value, 116, infoY)
canvas.style.letterSpacing = "0.5px"
card.font = "16px mplantin"
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value + " " + document.getElementById("inputNumber").value, 62, infoY + 31)
}

2
data/borders/defaultBorder.js
View File

@@ -4,8 +4,6 @@ var cardWidth = 749
var cardHeight = 1044
document.getElementsByClassName("mainGrid")[0].classList.remove("plane")
//Sets the correct values to anything that may have been changed from an out of the ordinary border
var eighthInfo = false
var m15Info = false
var planechaseInfo = false
var legendaryBorder = false
var nyxBorder = false

12
data/borders/m15/border.js
View File

@@ -1,5 +1,11 @@
//M15 Border
//Anything to do with...
//Loading Images
imgMultiMask.src = borderPath + "multiMask.png"
imgFrameMask.src = borderPath + "frameMask.png"
imgLegendFrameMask.src = borderPath + "legendFrameMask.png"
imgRareStampMask.src = borderPath + "rareStampMask.png"
imgBorderMask.src = borderPath + "borderMask.png"
//Card Title
var titleFont = "40px belerenb" //40
var titleFontSpacing = "0.15px" //0.15
@@ -30,8 +36,7 @@ var ptY = 929 //929
var ptWidth = 137 //137
var ptHeight = 75 //75
//Bottom Info
var m15Info = true
var m15InfoY = 993 //993
var infoY = 993 //993
//Set Symbol
var setSymbolY = 616 //616
var setSymbolRight = 693 //693
@@ -47,7 +52,7 @@ var rareStampY = 958 //958
loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact,vehicle-Vehicle")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
//Other
//Things The Card Can Do
legendaryBorder = true
stampBorder = true
nyxBorder = true
@@ -56,3 +61,4 @@ flipBorder = true
//With all the new values in place, the program will update it's border images
finishTemplate()
//Any special functions go at the bottom
var uniqueFunctionName = "bottomInfoM15"

9
data/borders/map/border.js
View File

@@ -1,5 +1,8 @@
//Map Border
//Anything to do with...
//Loading Images
imgFrameMask.src = borderPath + "frameMask.png"
imgBorderMask.src = borderPath + "borderMask.png"
//Card Title
var titleFont = "40px belerenbsc"
var titleFontSpacing = "0.1px"
@@ -32,10 +35,7 @@ var ptY = 920
var ptWidth = 150
var ptHeight = 70
//Bottom Info
var eighthInfo = false
var eighthInfoY = 992
var m15Info = true
var m15InfoY = 993
var infoY = 993
//Set Symbol
var setSymbolY = 123
var setSymbolRight = 374.5
@@ -57,3 +57,4 @@ var artY = 116
//With all the new values in place, the program will update it's border images
finishTemplate()
//Any special functions go at the bottom
var uniqueFunctionName = "bottomInfoM15"

4
data/borders/plane/border.js
View File

@@ -1,5 +1,8 @@
//Plane Border
//Anything to do with...
//Loading Images
imgFrameMask.src = borderPath + "frameMask.png"
imgBorderMask.src = borderPath + "borderMask.png"
//Card Size
cardWidth = 1074
cardHeight = 749
@@ -52,6 +55,7 @@ transparentBorder = true
//With all the new values in place, the program will update it's border images
finishTemplate()
//Any special functions go at the bottom
var uniqueFunctionName = "bottomInfoPlanechase"
function bottomInfoPlanechase() {
card.textAlign = "left"
if (document.getElementById("checkboxArtistColor").checked == true) {

BIN
data/favicons/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
data/favicons/android-chrome-256x256.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
data/favicons/apple-touch-icon-120x120.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
data/favicons/apple-touch-icon-152x152.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
data/favicons/apple-touch-icon-180x180.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
data/favicons/apple-touch-icon-60x60.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
data/favicons/apple-touch-icon-76x76.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
data/favicons/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

9
data/favicons/browserconfig.xml
View File

@@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="https://imkyle4815.github.io/cardconjurer/data/favicons/mstile-150x150.png"/>
<TileColor>#00a300</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
data/largeIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

49
data/scripts/main.js
View File

@@ -129,14 +129,8 @@ function cardClock() {
drawWatermark()
//writes all the text: name, type, rules...
writeText()
//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
if (m15Info == true) {
bottomInfoM15()
} else if (eighthInfo == true) {
bottomInfo8th()
}else if (planechaseInfo == true) {
bottomInfoPlanechase()
}
//Runs any special function that a card may have, including bottom information.
window[uniqueFunctionName]()
//A shiny foil overlay!
if(document.getElementById("checkboxFoil").checked == true) {
card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
@@ -157,6 +151,7 @@ function cardClock() {
//The two following functions load border images
function changeTemplate() {
//the loadScript function is located in data/scripts/loadScript.js. It sets values to variables such as set symbol coordinates or title font
borderPath = "data/borders/" + document.getElementById("borderSelection").value
loadScript("data/borders/defaultBorder.js")
}
function finishTemplate() {
@@ -166,20 +161,10 @@ function finishTemplate() {
borderCanvas.width = cardWidth
borderCanvas.height = cardHeight
document.getElementById("colorSelection").value = "white"
imgMultiMask.src = borderPath + "multiMask.png"
imgFrameMask.src = borderPath + "frameMask.png"
if (m15Info == true) {
imgLegendFrameMask.src = borderPath + "legendFrameMask.png"
imgRareStampMask.src = borderPath + "rareStampMask.png"
imgBorderMask.src = borderPath + "borderMask.png"
} else if (eighthInfo == true) {
imgBorderMask.src = borderPath + "frameMask.png"
}
updateBorder()
}
//Loads the images for the card frame, power toughness box, and rare stamp
function updateBorder() {
borderPath = "data/borders/" + document.getElementById("borderSelection").value
secondColor = document.getElementById("checkboxSecondColor").checked
thirdColor = document.getElementById("checkboxThirdColor").checked
var firstColorPath = borderPath + document.getElementById("colorSelection").value
@@ -557,19 +542,19 @@ function bottomInfoM15() {
canvas.style.letterSpacing = "0.8px"
card.font = "19.5px relaymedium"
var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
card.fillText(bottomLine, 48, m15InfoY)
card.fillText(bottomLine, 48, infoY)
var artistBrushShift = card.measureText(bottomLine).width + 58
drawMask(card.fillStyle, artistBrushShift, m15InfoY + 5, 21, 13, card, imgArtistBrush, false, false)
drawMask(card.fillStyle, artistBrushShift, infoY + 5, 21, 13, card, imgArtistBrush, false, false)
canvas.style.letterSpacing = "1.3px"
card.font = "19.5px relaymedium"
card.fillText(document.getElementById("inputNumber").value, 49, m15InfoY - 20)
card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, m15InfoY - 20)
card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20)
card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20)
if (442 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("checkboxCreature").checked == false) {
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width + 5
}
canvas.style.letterSpacing = "-0.1px"
card.font = "24px matrixbsc"
card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, m15InfoY + 2)
card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY + 2)
if (442 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("checkboxCreature").checked == true) {
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputArtist").value).width + 26
}
@@ -584,26 +569,12 @@ function bottomInfoM15() {
bottomInfo = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
}
if (document.getElementById("checkboxCreature").checked == true) {
card.fillText(bottomInfo, shiftInfo, m15InfoY + 3)
card.fillText(bottomInfo, shiftInfo, infoY + 3)
} else {
card.fillText(bottomInfo, shiftInfo, m15InfoY - 17)
card.fillText(bottomInfo, shiftInfo, infoY - 17)
}
}
}
//Bottom info on 8th edition cards
function bottomInfo8th() {
if (document.getElementById("checkboxArtistColor").checked == true) {
card.fillStyle = "black"
} else {
card.fillStyle = "white"
}
canvas.style.letterSpacing = "1px"
card.font = "25px matrixb"
card.fillText(document.getElementById("inputArtist").value, 116, eighthInfoY)
canvas.style.letterSpacing = "0.5px"
card.font = "16px mplantin"
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value + " " + document.getElementById("inputNumber").value, 62, eighthInfoY + 31)
}
//============================================//

BIN
favicon-16x16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 960 B

BIN
favicon-32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

0
android-chrome-192x192.png → favicons/android-chrome-192x192.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
android-chrome-256x256.png → favicons/android-chrome-256x256.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

0
apple-touch-icon-120x120.png → favicons/apple-touch-icon-120x120.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

0
apple-touch-icon-152x152.png → favicons/apple-touch-icon-152x152.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

0
apple-touch-icon-180x180.png → favicons/apple-touch-icon-180x180.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
apple-touch-icon-60x60.png → favicons/apple-touch-icon-60x60.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

0
apple-touch-icon-76x76.png → favicons/apple-touch-icon-76x76.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

0
apple-touch-icon.png → favicons/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
browserconfig.xml → favicons/browserconfig.xml
View File

0
data/favicons/favicon-16x16.png → favicons/favicon-16x16.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 960 B

After

Width:  |  Height:  |  Size: 960 B

0
data/favicons/favicon-32x32.png → favicons/favicon-32x32.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
data/favicons/favicon.ico → favicons/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
data/favicons/mstile-150x150.png → favicons/mstile-150x150.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

0
data/favicons/safari-pinned-tab.svg → favicons/safari-pinned-tab.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
data/favicons/site.webmanifest → favicons/site.webmanifest
View File

18
index.html
View File

@@ -4,11 +4,11 @@
<title>Card Conjurer</title>
<div class="title"><img src="images/title.png"></div>
<!-- Favicon craziness! -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#64ca2f">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#64ca2f">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="browserconfig.xml">
@@ -391,12 +391,6 @@
/*Color Palette*/
:root {
/*Green*/
/*--color-a: #13c800;
--color-b: #13c80080;
--color-c: #034e10;
--color-d: #013d0b80;
--color-e: #013d0b;*/
/*Regular*/
--color-a: #073c00;
--color-b: #073c0040;
@@ -409,12 +403,10 @@
* {
font-family: belerenb;
font-size: 6vw;
/*font-size: 24px;*/
user-select: none;
color: #ddd;
}
html {
/*background: linear-gradient(#252522, #101010) no-repeat center center fixed;*/
background: url("data/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;

BIN
mstile-150x150.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.0 KiB

29
safari-pinned-tab.svg
View File

@@ -1,29 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1069 2585 c-383 -72 -708 -303 -902 -640 -56 -98 -101 -207 -135
-334 -24 -89 -26 -111 -26 -311 0 -200 2 -222 26 -311 132 -487 470 -825 957
-957 89 -24 111 -26 311 -26 200 0 222 2 311 26 487 132 825 470 957 957 24
89 26 111 26 311 0 200 -2 222 -26 311 -132 487 -474 829 -957 956 -82 22
-122 26 -281 29 -131 2 -207 -1 -261 -11z m-23 -628 c70 -20 174 -68 174 -81
0 -22 -41 -331 -45 -334 -1 -2 -9 14 -15 35 -21 63 -78 170 -111 208 -51 58
-100 78 -179 73 -81 -4 -134 -36 -179 -107 -60 -95 -81 -200 -81 -412 0 -256
41 -404 134 -486 53 -47 89 -58 171 -51 101 8 180 91 240 249 15 39 29 69 30
67 3 -3 45 -307 45 -327 0 -15 -81 -54 -163 -80 -274 -84 -554 16 -671 239
-60 113 -79 202 -79 370 -1 163 12 227 68 345 77 161 203 262 380 305 51 12
215 4 281 -13z m1070 0 c70 -20 174 -68 174 -81 0 -22 -41 -331 -45 -334 -1
-2 -9 14 -15 35 -21 63 -78 170 -111 208 -51 58 -100 78 -179 73 -81 -4 -134
-36 -179 -107 -60 -95 -81 -200 -81 -412 0 -256 41 -404 134 -486 53 -47 89
-58 171 -51 101 8 180 91 240 249 15 39 29 69 30 67 3 -3 45 -307 45 -327 0
-15 -81 -54 -163 -80 -274 -84 -554 16 -671 239 -60 113 -79 202 -79 370 -1
163 12 227 68 345 77 161 203 262 380 305 51 12 215 4 281 -13z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

19
site.webmanifest
View File

@@ -1,19 +0,0 @@
{
"name": "Card Conjurer",
"short_name": "Card Conjurer",
"icons": [
{
"src": "https://imkyle4815.github.io/cardconjurer/data/favicons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://imkyle4815.github.io/cardconjurer/data/favicons/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"theme_color": "#64ca2f",
"background_color": "#64ca2f",
"display": "standalone"
}