tabs

data/site/main.js

@@ -5,6 +5,7 @@
 var cardWidth = 750, cardHeight = 1050
 var version = {}
 var date = new Date()
+var initiated = false
 document.getElementById("inputInfoNumber").value = date.getFullYear()
 //Make all the canvases and their contexts
 var mainCanvas = document.getElementById("mainCanvas")
@@ -85,6 +86,7 @@ function init() {
 	//Runs any tests. This should not do anything when published.
 	setTimeout(testFunction, 100)
 	checkCookies()
+    initiated = true
 }
 //Loads an image. Only actually loads images the first time each image is loaded, otherwise assigns it.
 function loadImage(index, target = "none") {
@@ -245,6 +247,9 @@ function updateBottomInfoCanvas() {
 	window[version.bottomInfoFunction]()
 }
 function updateCardCanvas() {
+    if (!initiated) {
+        return
+    }
 	//clear it
 	cardContext.fillStyle = "black"
 	cardContext.fillRect(0, 0, cardWidth, cardHeight)
@@ -316,7 +321,10 @@ function finishChangingVersion() {
 		}
 	}
 	for (var i = 0; i < version.textList.length; i ++) {
-		document.getElementById("inputWhichText").innerHTML += "<option>" + version.textList[i][0] + "</option>"
+		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) {
+            document.getElementsByClassName("tabButton text")[0].classList.add("activeTab")
+        }
 	}
 	hideShowColors(true)
 	loadOpacityValue()
@@ -708,6 +716,31 @@ function checkCookies() {
 }
 
 
+function tabFunction(event, section, target, specialFunction = "none") {
+    var tabButtons = document.getElementsByClassName("tabButton " + section)
+    for (var i = 0; i < tabButtons.length; i++) {
+        tabButtons[i].className = tabButtons[i].className.replace(" activeTab", "")
+    }
+    event.currentTarget.className += " activeTab"
+    if (specialFunction != "none") {
+        window[specialFunction](event, section, target)
+    } else {
+        var tabContents = document.getElementsByClassName("tabContent " + section)
+        for (var i = 0; i < tabContents.length; i++) {
+            tabContents[i].className = tabContents[i].className.replace(" displayed", "")
+        }
+        document.getElementById(target).className += " displayed"
+    }
+}
+function textTabFunction(event, section, target) {
+    for (var i = 0; i < version.textList.length; i ++) {
+        if (version.textList[i][0] == target.replace("option", "")) {
+            whichTextIndex = i
+        }
+    }
+    document.getElementById("inputText").value = version.textList[whichTextIndex][1]
+}
+
 
 /*To do list:
 watermarks

data/site/styles.css

@@ -40,7 +40,8 @@
 	--shifting-color-1-light: #c8ff64;
 	--light-color: #eee;
 	--dark-color: #333;
-    --clear-light: #1111;
+    --clear-light: #0001;
+    --clear-dark: #0003;
 }
 footer {
 	background-color: var(--dark-color);
@@ -276,3 +277,39 @@ footer a:hover {
 		grid-gap: 1em;
 	}
 }
+
+
+/*WIP*/
+.tab {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+    grid-auto-rows: min-content;
+/*    align-items: center;*/
+}
+.tabButton {
+    text-align: center;
+    background: var(--clear-light);
+    border: 1px solid var(--light-color);
+    font: 1.2em belerenbsc;
+    padding: 0.1em 0em;
+}
+.tabButton.activeTab {
+    background: var(--clear-dark);
+}
+.tabContent {
+    display: none;
+}
+.tabContent.displayed {
+    display: block;
+}
+
+
+
+
+
+
+
+
+
+
+

index.html

@@ -42,7 +42,9 @@
 					<div>
 						Text
 					</div>
-					<div class="tooltip"><select class="select" id="inputWhichText" onchange="changeWhichText()"></select><span class="tooltiptext">Select the text you want to edit</span></div>
+                    <div id="inputWhichTextTabs" class="tab tooltip">
+                        <span class="tooltiptext">Select the text you want to edit</span>
+                    </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 class="bar"></div>