From c6e423ca5507953f2f530d13d408b96b7c20fa58 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Thu, 28 Nov 2019 16:21:32 -0800 Subject: [PATCH] this really works! --- data/images/imageCSV.csv | 16 +++ data/images/masks/Border.png | Bin 0 -> 7491 bytes data/images/masks/Frame.png | Bin 0 -> 7507 bytes data/images/masks/Full.png | Bin 0 -> 4878 bytes data/images/masks/Pinline.png | Bin 0 -> 7599 bytes data/images/masks/RightHalf.png | Bin 0 -> 4645 bytes data/images/masks/RulesText.png | Bin 0 -> 6316 bytes data/images/masks/Title.png | Bin 0 -> 6068 bytes data/images/masks/Type.png | Bin 0 -> 6058 bytes data/scripts/main.js | 188 +++++++++++++++++++++++++++++--- data/scripts/sortable.js | 4 +- data/site/newStyles.css | 63 +++++++++-- test.html | 18 +-- 13 files changed, 253 insertions(+), 36 deletions(-) create mode 100644 data/images/imageCSV.csv create mode 100644 data/images/masks/Border.png create mode 100644 data/images/masks/Frame.png create mode 100644 data/images/masks/Full.png create mode 100644 data/images/masks/Pinline.png create mode 100644 data/images/masks/RightHalf.png create mode 100644 data/images/masks/RulesText.png create mode 100644 data/images/masks/Title.png create mode 100644 data/images/masks/Type.png 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 0000000000000000000000000000000000000000..bf57bbfde0a9fdaa4324ee3dbe953d0e68f6879c GIT binary patch literal 7491 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 literal 0 HcmV?d00001 diff --git a/data/images/masks/Pinline.png b/data/images/masks/Pinline.png new file mode 100644 index 0000000000000000000000000000000000000000..8a23389d68f45814cfc066456b1341a252defdad GIT binary patch literal 7599 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 E1GI3A2><{9 literal 0 HcmV?d00001 diff --git a/data/images/masks/RightHalf.png b/data/images/masks/RightHalf.png new file mode 100644 index 0000000000000000000000000000000000000000..d254490dc06b18c3c9df4c6a8982d54ea3a9fa20 GIT binary patch literal 4645 zcmeAS@N?(olHy`uVBq!ia0y~yV0z2Iz#_uI1{68_S-l5Hu_bxCy8vk*`02d69!PN( zctjR6Fz_7#VaBQ2e9}Nc_7YEDSN2ET!ptnnX_=SP7#IXMdAc};RNQ)d&5-MWf{4q( z(D(J}()X0G+IG%NOVdkTitH$N-iGnFJC5n*>r%meJS@ z138Nf!%!RocNt;BP<#dRCSk)+0t^(Sm_dZqFqF`Tc@xdB*}wqDh#bQ1B*tiL?j#(Q zSlx-1O0Y%cP)Qf&K*z)UNJ7>ioJz18MmQ?5reCyFf-Ne^PIA}`qhY$pV~z@h`i z)59pqVJm-Wm@e+JK+1ZQ5G0&_Q9_@}r5v4;9G$DE-JFn`79|8xLLXH1f(20W8Q}^G zRx_X&MmQ>meNiL~ZHyp?AWGu17bWzuW^sotqYZI7S5c!4aXPn(MjPUEX^4Ml<$QgdQ(aZ=)K_4o O$>8bg=d#Wzp$PzhEX9HV literal 0 HcmV?d00001 diff --git a/data/images/masks/RulesText.png b/data/images/masks/RulesText.png new file mode 100644 index 0000000000000000000000000000000000000000..7dd26950a09b4409137b0e1d7300db87996282bf GIT binary patch literal 6316 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 literal 0 HcmV?d00001 diff --git a/data/images/masks/Title.png b/data/images/masks/Title.png new file mode 100644 index 0000000000000000000000000000000000000000..335d0ca56e3eb4e227c23f577a2517f448e6389c GIT binary patch literal 6068 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 literal 0 HcmV?d00001 diff --git a/data/images/masks/Type.png b/data/images/masks/Type.png new file mode 100644 index 0000000000000000000000000000000000000000..78ee4eb9738063fb8f4c04ed62e4dcc32520e6ff GIT binary patch literal 6058 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" + 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 @@ -
    -
  • item 1
    • -
  • item 2
    • -
  • item 3
    • -
Card Conjurer @@ -29,7 +24,12 @@
Art
- oh boy the frames! +
+
+
+
+ +
oh cool some text! @@ -91,7 +91,7 @@
- - - + + +