tabs

data/site/main.js

@@ -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,8 +171,16 @@ function updateTextCanvas() {
 	//post processing?
 	updateCardCanvas()
 }
+var currentlyWritingText = false
 //Rewrites all the text!
 function updateText() {
+    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 ++) {
@@ -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
 

data/site/styles.css

@@ -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);

index.html

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