diff --git a/data/images/imageCSV.csv b/data/images/imageCSV.csv new file mode 100644 index 00000000..9a706a75 --- /dev/null +++ b/data/images/imageCSV.csv @@ -0,0 +1,16 @@ +displayName,imagePath,maskOptions +White,m15WFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Blue,m15UFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Black,m15BFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Red,m15RFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Green,m15GFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Multicolored,m15MFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Artifact,m15AFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Colorless,m15CFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +White Land,m15WLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Blue Land,m15ULFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Black Land,m15BLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Red Land,m15RLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Green Land,m15GLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Multicolored Land,m15MLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 +Colorless Land,m15CLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050 \ No newline at end of file diff --git a/data/images/masks/Border.png b/data/images/masks/Border.png new file mode 100644 index 00000000..bf57bbfd Binary files /dev/null and b/data/images/masks/Border.png differ diff --git a/data/images/masks/Frame.png b/data/images/masks/Frame.png new file mode 100644 index 00000000..afd61b47 Binary files /dev/null and b/data/images/masks/Frame.png differ diff --git a/data/images/masks/Full.png b/data/images/masks/Full.png new file mode 100644 index 00000000..abf14c74 Binary files /dev/null and b/data/images/masks/Full.png differ diff --git a/data/images/masks/Pinline.png b/data/images/masks/Pinline.png new file mode 100644 index 00000000..8a23389d Binary files /dev/null and b/data/images/masks/Pinline.png differ diff --git a/data/images/masks/RightHalf.png b/data/images/masks/RightHalf.png new file mode 100644 index 00000000..d254490d Binary files /dev/null and b/data/images/masks/RightHalf.png differ diff --git a/data/images/masks/RulesText.png b/data/images/masks/RulesText.png new file mode 100644 index 00000000..7dd26950 Binary files /dev/null and b/data/images/masks/RulesText.png differ diff --git a/data/images/masks/Title.png b/data/images/masks/Title.png new file mode 100644 index 00000000..335d0ca5 Binary files /dev/null and b/data/images/masks/Title.png differ diff --git a/data/images/masks/Type.png b/data/images/masks/Type.png new file mode 100644 index 00000000..78ee4eb9 Binary files /dev/null and b/data/images/masks/Type.png differ diff --git a/data/scripts/main.js b/data/scripts/main.js index da9cdc00..c66c3d9b 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -1,36 +1,200 @@ //============================================// // Card Conjurer, by Kyle Burton // //============================================// +/* Test things! */ +function testFunction() { + // console.log("test function begin"); + // cardMaster.innerHTML += frameList[0].cardMasterElement("Full"); + // console.log("test function end"); + // cardMasterUpdated(); +} + + /* Initiate! */ -window.onload = initiate +window.onload = initiate; function initiate() { window.cardWidth = 750; window.cardHeight = 1050; + window.frameList = new Array(); + window.maskNameList = ["Right Half", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame"]; + window.maskList = []; + window.selectedFrame = -1; + window.selectedMask = ""; + for (var i = 0; i < maskNameList.length; i++) { + var imageSource = "data/images/masks/" + maskNameList[i].replace(" ", "") + ".png"; + maskList[i] = new Image(); + maskList[i].src = imageSource; + } + window.cardMaster = document.getElementById("cardMaster"); window.displayCanvas = document.getElementById("displayCanvas"); document.getElementById("displayCanvas").width = cardWidth; document.getElementById("displayCanvas").height = cardHeight; window.displayContext = displayCanvas.getContext("2d"); - // loadScript("data/scripts/sortable.js"); - import Sortable from './data/scripts/sortable.js'; - // var el = document.getElementById('items'); - // var sortable = Sortable.create(el); - console.log("init done") + newCanvas("frameMask"); + newCanvas("frameFinal"); + newCanvas("cardFinal"); + //Loads up anything that uses Sortable.js + var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: "cardMasterElementMoving"}); + //initiation is complete, ready to load image data + console.log("init done"); + loadImageCSV(); } +/* Loads all the image info from the CSV! */ +function loadImageCSV() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + var splitImageCSV = xhttp.responseText.split("\n"); + for (var i = 1; i < splitImageCSV.length; i++) { + var splitIndividualImageCSV = splitImageCSV[i].split(","); + frameList[frameList.length] = new frameImage(splitIndividualImageCSV[0], "data/images/" + splitIndividualImageCSV[1], splitIndividualImageCSV[2]); + } + console.log("frame list loaded"); + for (var i = 0; i < frameList.length; i++) { + // frameList[i].framePickerElement(document.getElementById("framePicker")); + document.getElementById("framePicker").innerHTML += frameList[i].framePickerElement(); + } + //I don't like these here, because even though they run, it doesn't populate the mask options + // document.getElementsByClassName("frameOption")[0].classList.add("frameOptionSelected"); + // selectedMask = document.getElementsByClassName("frameOption")[0].id.replace("frameIndex", ""); + setTimeout(testFunction, 500); //deleteme + } + } + xhttp.open("GET", "data/images/imageCSV.csv", true); + xhttp.send(); +} +/* Image Class */ +class frameImage { + constructor(display, path, masks) { + this.displayName = display; + this.image = new Image(); + this.image.src = path; + this.maskOptionList = new Array(); + this.xList = new Array(); + this.yList = new Array(); + this.widthList = new Array(); + this.heightList = new Array(); + var splitMasks = masks.split(";"); + for (var i = 0; i < splitMasks.length; i++) { + var splitIndividualMasks = splitMasks[i].split("-"); + this.maskOptionList[i] = splitIndividualMasks[0]; + this.xList[i] = scale(parseInt(splitIndividualMasks[1])); + this.yList[i] = scale(parseInt(splitIndividualMasks[2])); + this.widthList[i] = scale(parseInt(splitIndividualMasks[3])); + this.heightList[i] = scale(parseInt(splitIndividualMasks[4])); + } + } + cardMasterElement(targetMask, right) { + var extraMask = "" + if (right) { + extraMask = " - Right" + } + return "
" + this.displayName + " (" + targetMask + extraMask + ")x
"; + } + framePickerElement(targetElement) { + return "
"; + } +} +/* User input for card master */ +function frameOptionClicked(event) { + //Takes the clicked element, determines the right frame image index, sets the selected frame, and displays available masks + //most importantly, stores the selected frame under 'selectedFrame' + var clickedElement = event.target; + if (clickedElement.nodeName == "IMG") { + clickedElement = event.target.parentElement; + } + var frameOptionList = document.getElementsByClassName("frameOption"); + for (var i = 0; i < frameOptionList.length; i++) { + frameOptionList[i].classList.remove("frameOptionSelected"); + } + clickedElement.classList.add("frameOptionSelected"); + clickedElementIndex = clickedElement.id.replace("frameIndex", ""); + if (clickedElementIndex != selectedFrame) { + selectedFrame = parseInt(clickedElementIndex); + document.getElementById("maskPicker").innerHTML = ""; + for (var i = 0; i < frameList[selectedFrame].maskOptionList.length; i++) { + document.getElementById("maskPicker").innerHTML += "
" + frameList[selectedFrame].maskOptionList[i] + "
"; + } + document.getElementsByClassName("maskOption")[0].classList.add("maskOptionSelected"); + selectedMask = document.getElementsByClassName("maskOption")[0].id.replace("maskName", ""); + } +} +function maskOptionClicked(event) { + //Determines which mask was selected, and stores that value under 'selectedMask' + var clickedElement = event.target; + if (clickedElement.nodeName == "IMG") { + clickedElement = event.target.parentElement; + } + var maskOptionList = document.getElementsByClassName("maskOption"); + for (var i = 0; i < maskOptionList.length; i++) { + maskOptionList[i].classList.remove("maskOptionSelected"); + } + clickedElement.classList.add("maskOptionSelected"); + selectedMask = clickedElement.id.replace("maskName", ""); +} +function addFrameToCardMaster(right = false) { + //Takes the stored selectedFrame and selectedMask to add the frame w/ mask to the card master! + if (selectedFrame > -1 && selectedMask != "") { + cardMaster.innerHTML = frameList[selectedFrame].cardMasterElement(selectedMask, right) + cardMaster.innerHTML; + cardMasterUpdated(); + } +} +function deleteCardMasterElement(event) { + event.target.parentElement.parentElement.removeChild(event.target.parentElement); + cardMasterUpdated(); +} +/* Card Master Cool Stuff! */ +function cardMasterUpdated() { + console.log("The card master is updating!"); + frameFinalContext.clearRect(0, 0, cardWidth, cardHeight); + for (var i = cardMaster.children.length - 1; i >= 0; i--) { + var targetChild = cardMaster.children[i]; + var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))]; + var maskName = targetChild.innerHTML.slice(targetChild.innerHTML.indexOf("(") + 1, targetChild.innerHTML.indexOf(")")); + var rightHalf = false; + if (maskName.includes(" - Right")) { + maskName = maskName.replace(" - Right", ""); + rightHalf = true; + } + var maskIndex = frameToDraw.maskOptionList.indexOf(maskName); + var maskImageIndex = maskNameList.indexOf(maskName) + //Clears the temporary mask canvas, draws the mask, draws the image over it, then copies it to the final frame canvas + frameMaskContext.globalCompositeOperation = "source-over"; + frameMaskContext.clearRect(0, 0, cardWidth, cardHeight); + frameMaskContext.drawImage(maskList[maskImageIndex], 0, 0, cardWidth, cardHeight); + if (rightHalf) { + frameMaskContext.globalCompositeOperation = "source-in" + frameMaskContext.drawImage(maskList[0], 0, 0, cardWidth, cardHeight) + } + frameMaskContext.globalCompositeOperation = "source-in"; + frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]); + frameFinalContext.drawImage(frameMaskCanvas, 0, 0, cardWidth, cardHeight); + } + cardImageUpdated(); +} +/* Overall card stuff */ +function cardImageUpdated() { + cardFinalContext.clearRect(0, 0, cardWidth, cardHeight); + displayContext.clearRect(0, 0, cardWidth, cardHeight); + cardFinalContext.drawImage(frameFinalCanvas, 0, 0, cardWidth, cardHeight); + displayContext.drawImage(cardFinalCanvas, 0, 0, cardWidth, cardHeight); +} - - - +/* Misc convenient functions */ +function scale(input) { + return input * cardWidth / 750; +} /* Functions that make stuff */ @@ -42,8 +206,6 @@ function newCanvas(newCanvasName) { } - - /* Functions that manage the website */ function toggleTabs(event, targetTab, tabSubject) { var tabList = document.getElementsByClassName(tabSubject); @@ -51,8 +213,8 @@ function toggleTabs(event, targetTab, tabSubject) { tabList[i].classList.remove("tabVisible"); tabList[i].classList.remove("tabOptionSelected"); } - document.getElementById(targetTab).classList.add("tabVisible") - event.target.classList.add("tabOptionSelected") + document.getElementById(targetTab).classList.add("tabVisible"); + event.target.classList.add("tabOptionSelected"); } function loadScript(scriptPath){ var script = document.createElement("script"); diff --git a/data/scripts/sortable.js b/data/scripts/sortable.js index a4643f1f..c9929e2a 100644 --- a/data/scripts/sortable.js +++ b/data/scripts/sortable.js @@ -3688,5 +3688,5 @@ function removeMultiDragElements() { }); } -export default Sortable; -export { AutoScrollPlugin as AutoScroll, MultiDragPlugin as MultiDrag, OnSpill, Sortable, SwapPlugin as Swap }; \ No newline at end of file +// export default Sortable; +// export { AutoScrollPlugin as AutoScroll, MultiDragPlugin as MultiDrag, OnSpill, Sortable, SwapPlugin as Swap }; \ No newline at end of file diff --git a/data/site/newStyles.css b/data/site/newStyles.css index 6dc8ce7e..0e4e8994 100644 --- a/data/site/newStyles.css +++ b/data/site/newStyles.css @@ -91,10 +91,14 @@ canvas { grid-template-columns: auto; font: 1.6em mplantin; } -.imageGrid { +.splitGrid { display: grid; - grid-template-columns: auto 9em; - min-height: 12.5em; + grid-template-columns: 50% 50%; +} +.frameGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(4em, 1fr)); + grid-auto-rows: min-content; } .footerGrid { display: grid; @@ -257,16 +261,51 @@ footer a:hover { display: none; } +.cardMasterElement { + font: 1em belerenbsc; + background-color: var(--clear-light); + border: 1px solid var(--light-color); + border-radius: 0.25em; + padding: 0.25em; + margin-top: 0.25em; +} +.cardMasterElementMoving { + background-color: var(--clear-dark); +} +.closeCardMasterElement { + cursor: pointer; + position: absolute; + /*top: 50%;*/ + left: 96%; + /*padding: 12px 16px;*/ + /*transform: translate(0%, -50%);*/ +} - - - - - - - - - +.frameOption { + height: 4em; + text-align: center; +} +.frameOption img { + max-width: 4em; + max-height: 4em; +} +.maskOption img { + max-width: 2em; + max-height: 2em; +} +.frameOption.frameOptionSelected, .maskOption.maskOptionSelected { + background-color: var(--clear-dark); +} +.maskOption, .frameOption { + background-color: var(--clear-light); + border: 1px solid var(--light-color); + border-radius: 0.25em; + width: 100%; +} +.maskOption { + margin-left: 0.5em; + padding: 0.125em; +} diff --git a/test.html b/test.html index 4459ddf1..5586476d 100644 --- a/test.html +++ b/test.html @@ -8,11 +8,6 @@ -
Card Conjurer @@ -29,7 +24,12 @@
Art
- oh boy the frames! +
+
+
+
+ +
oh cool some text! @@ -91,7 +91,7 @@
- - - + + +