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

tabs

Browse Source
This commit is contained in:
Kyle
2019-10-27 20:31:11 -07:00
parent 76cda1c8be
commit 9be3d874a9
4 changed files with 92 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/scripts/setCodeList.js
View File

@@ -103,4 +103,4 @@ function randomSet(updateHTML = true) {
document.getElementById("inputSetRarity").value = rarity
}
setSymbol.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + set + "&size=large&rarity=" + rarity
}
}

96
data/site/main.js
View File

@@ -6,6 +6,7 @@ var cardWidth = 750, cardHeight = 1050
var version = {}
var date = new Date()
var initiated = false
var suggestedColor = "White"
document.getElementById("inputInfoNumber").value = date.getFullYear()
//Make all the canvases and their contexts
var mainCanvas = document.getElementById("mainCanvas")
@@ -170,14 +171,22 @@ function updateTextCanvas() {
//post processing?
updateCardCanvas()
}
var currentlyWritingText = false
//Rewrites all the text!
function updateText() {
version.textList[whichTextIndex][1] = document.getElementById("inputText").value
textContext.clearRect(0, 0, cardWidth, cardHeight)
for (var i = 0; i < version.textList.length; i ++) {
var waitUntilIAmDone = textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9])
updateTextCanvas()
}
if (!currentlyWritingText) {
console.log(currentlyWritingText)
currentlyWritingText = true
setTimeout(updateTextInnerShell, 100)
}
}
function updateTextInnerShell() {
version.textList[whichTextIndex][1] = document.getElementById("inputText").value
textContext.clearRect(0, 0, cardWidth, cardHeight)
for (var i = 0; i < version.textList.length; i ++) {
var waitUntilIAmDone = textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9])
updateTextCanvas()
}
}
//figures out the placing of the set symbol
function updateSetSymbolCanvas() {
@@ -268,20 +277,21 @@ function updateCardCanvas() {
//paste it to the visible canvas
mainContext.clearRect(0, 0, cardWidth, cardHeight)
mainContext.drawImage(cardCanvas, 0, 0, cardWidth, cardHeight)
currentlyWritingText = false
}
//Loads an image in from user input
function userLoadImage() {
loadImage(document.getElementById("inputImageIndex").value, "preview")
loadImage(getSelectedTab("tabSelectColor"), "preview")
}
//Enters an image from user input
function userEnterImage() {
loadImage(document.getElementById("inputImageIndex").value, document.getElementById("inputImageType").value)
loadImage(getSelectedTab("tabSelectColor"), getSelectedTab("frameType"))
}
//Removes an image from user input
function userRemoveImage() {
if (cardMasterTypes.includes(document.getElementById("inputImageType").value) && document.getElementById("inputImageType").value != "Full") {
cardMasterImages.splice(cardMasterTypes.indexOf(document.getElementById("inputImageType").value), 1)
cardMasterTypes.splice(cardMasterTypes.indexOf(document.getElementById("inputImageType").value), 1)
if (cardMasterTypes.includes(getSelectedTab("frameType")) && getSelectedTab("frameType") != "Full") {
cardMasterImages.splice(cardMasterTypes.indexOf(getSelectedTab("frameType")), 1)
cardMasterTypes.splice(cardMasterTypes.indexOf(getSelectedTab("frameType")), 1)
cardMasterUpdated()
}
}
@@ -310,16 +320,17 @@ function changeVersionTo(versionToChangeTo) {
loadScript("data/versions/" + versionToChangeTo + "Version.js")
}
function finishChangingVersion() {
document.getElementById("inputImageType").innerHTML = ""
document.getElementById("frameType").innerHTML = ""
document.getElementById("inputImageTypeOpacity").innerHTML = ""
for (var i = 0; i < version.typeOrder.length; i ++) {
document.getElementById("inputImageType").innerHTML += "<option>" + version.typeOrder[i] + "</option>"
tabSelectAddOption("frameType", version.typeOrder[i].replace("Secondary", " (right)"), version.typeOrder[i])
if (window[version.currentVersion + "Mask" + version.typeOrder[i]]) {
document.getElementById("inputImageTypeOpacity").innerHTML += "<option>" + version.typeOrder[i] + "</option>"
cardMasterOpacity[cardMasterOpacity.length] = version.typeOrder[i]
cardMasterOpacityValue[cardMasterOpacityValue.length] = 100
}
}
document.getElementsByClassName("frameType")[0].className += " activeTab"
for (var i = 0; i < version.textList.length; i ++) {
document.getElementById("inputWhichTextTabs").innerHTML += "<div class='tabButton text' onclick='tabFunction(event, `text`, `option" + version.textList[i][0] + "`, `textTabFunction`)'>" + version.textList[i][0] + "</div>"
if (i == 0) {
@@ -334,12 +345,20 @@ function finishChangingVersion() {
}
//Hides and shows the options in inputImageColor to match the selected type
function hideShowColors(enter = false) {
document.getElementById("inputImageIndex").innerHTML = ""
document.getElementById("tabSelectColor").innerHTML = ""
var activeTab = false
for (var i = 0; i < versionArray.length; i ++) {
if (versionArray[i] == version.currentVersion && (typeArray[i] == document.getElementById("inputImageType").value.replace("Secondary", "") || (typeArray[i] == "Full" && version.typeNotFull.includes(document.getElementById("inputImageType").value) == false)) && colorArray[i] != "Mask") {
document.getElementById("inputImageIndex").innerHTML += "<option value='" + i + "''>" + displayNameArray[i] + "</option>"
if (versionArray[i] == version.currentVersion && (typeArray[i] == getSelectedTab("frameType").replace("Secondary", "") || (typeArray[i] == "Full" && version.typeNotFull.includes(getSelectedTab("frameType")) == false)) && colorArray[i] != "Mask") {
tabSelectAddOption("tabSelectColor", displayNameArray[i], i)
if (displayNameArray[i] == suggestedColor) {
document.getElementsByClassName("tabSelectColor")[document.getElementsByClassName("tabSelectColor").length - 1].className += " activeTab"
activeTab = true
}
}
}
if (!activeTab) {
document.getElementsByClassName("tabSelectColor")[0].className += " activeTab"
}
if (enter) {
userEnterImage()
}
@@ -742,6 +761,51 @@ function textTabFunction(event, section, target) {
}
function tabSelect(event, selectSection) {
var tabSelectButtons = document.getElementsByClassName(selectSection)
for (var i = 0; i < tabSelectButtons.length; i++) {
tabSelectButtons[i].className = tabSelectButtons[i].className.replace(" activeTab", "")
}
event.target.className += " activeTab"
if (selectSection == "frameType") {
hideShowColors()
} else if (selectSection == "tabSelectColor") {
userLoadImage()
suggestedColor = displayNameArray[getSelectedTab("tabSelectColor")]
}
}
function getSelectedTab(selectSection) {
var tabSelectButtons = document.getElementsByClassName(selectSection)
for (var i = 0; i < tabSelectButtons.length; i++) {
if (tabSelectButtons[i].className.includes("activeTab")) {
return tabSelectButtons[i].id
}
}
}
function tabSelectAddOption(tabSection, displayName, tabValue) {
document.getElementById(tabSection).innerHTML += "<div class='tabButton tabSelectButton " + tabSection + "' id='" + tabValue + "' onclick='tabSelect(event, `" + tabSection + "`)'>" + displayName + "</div>"
}
/*To do list:
watermarks

6
data/site/styles.css
View File

@@ -287,6 +287,12 @@ footer a:hover {
grid-auto-rows: min-content;
cursor: pointer;
}
.tab.tabSelect {
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
}
.tabButton.tabSelectButton {
font: 1em belerenb;
}
.tabButton {
text-align: center;
background: var(--clear-light);

10
index.html
View File

@@ -27,10 +27,12 @@
</div>
<div class="bar"></div>
<div class="tabContent editor displayed" id="optionFrame">
Select the part of the card frame:<br>
<div class="tab tabSelect" id="frameType"></div><br>
Select the color:<br>
<div class="tab tabSelect" id="tabSelectColor"></div><br>
<div class="imageGrid">
<div class="autoGrid">
<div class="tooltip"><select class="select" id="inputImageType" onchange="hideShowColors()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
<div class="tooltip"><select class="select" id="inputImageIndex" onchange="userLoadImage()"></select><span class="tooltiptext">Select the color of the current image type</span></div>
<button class="button tooltip" onclick="userEnterImage()">Enter<span class="tooltiptext">Add the selected image to the card</span></button>
<button class="button tooltip" onclick="userRemoveImage()">Remove<span class="tooltiptext">Remove the select image type from the card</span></button>
</div>
@@ -44,9 +46,7 @@
</div>
</div>
<div class="tabContent editor" id="optionText">
<div id="inputWhichTextTabs" class="tab tooltip">
<span class="tooltiptext">Select the text you want to edit</span>
</div>
<div id="inputWhichTextTabs" class="tab"></div>
<div class="tooltip"><textarea class="textarea tooltip" id="inputText" placeholder="" oninput="updateText()"></textarea><span class="tooltiptext">Edit the selected text</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="updateCardCanvas()" value=""><span class="tooltiptext">Enter the mana cost. Include spaces!</span></div>
</div>