diff --git a/data/images/masks/LeftHalf.png b/data/images/masks/LeftHalf.png new file mode 100644 index 00000000..cc5441f3 Binary files /dev/null and b/data/images/masks/LeftHalf.png differ diff --git a/data/images/masks/LeftThird.png b/data/images/masks/LeftThird.png new file mode 100644 index 00000000..2faa0ae8 Binary files /dev/null and b/data/images/masks/LeftThird.png differ diff --git a/data/images/masks/LeftTwoThirds.png b/data/images/masks/LeftTwoThirds.png new file mode 100644 index 00000000..aa943a38 Binary files /dev/null and b/data/images/masks/LeftTwoThirds.png differ diff --git a/data/images/masks/MiddleThird.png b/data/images/masks/MiddleThird.png new file mode 100644 index 00000000..566a5951 Binary files /dev/null and b/data/images/masks/MiddleThird.png differ diff --git a/data/images/masks/RightThird.png b/data/images/masks/RightThird.png new file mode 100644 index 00000000..477d274a Binary files /dev/null and b/data/images/masks/RightThird.png differ diff --git a/data/images/masks/RightTwoThirds.png b/data/images/masks/RightTwoThirds.png new file mode 100644 index 00000000..e31a6783 Binary files /dev/null and b/data/images/masks/RightTwoThirds.png differ diff --git a/data/scripts/main.js b/data/scripts/main.js index da651ee4..1507ebd8 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -143,7 +143,7 @@ class frameImage { var tempElement = document.createElement("div"); tempElement.id = "frameIndex" + frameList.indexOf(this); tempElement.classList.add("cardMasterElement"); - tempElement.innerHTML = "|||
" + this.displayName + " (" + targetMask + ")
x"; + tempElement.innerHTML = "|||
" + this.displayName + " (" + targetMask + ")
x"; return tempElement } framePickerElement(targetElement) { @@ -253,11 +253,11 @@ function cardMasterUpdated() { var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))]; var opacityToDraw = targetChild.children[1].children[1].value / 100; 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 sectionMask = "none" + if (maskName.includes(" - ")) { + sectionMask = maskName.split(" - ")[1]; + maskName = maskName.split(" - ")[0]; + } 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 @@ -265,11 +265,10 @@ function cardMasterUpdated() { frameMaskContext.clearRect(0, 0, cardWidth, cardHeight); frameMaskContext.drawImage(maskList[maskImageIndex], 0, 0, cardWidth, cardHeight); frameMaskContext.globalCompositeOperation = "source-in"; - if (rightHalf) { - frameMaskContext.drawImage(maskList[0], 0, 0, cardWidth, cardHeight) - } + if (sectionMask != "none") { + frameMaskContext.drawImage(maskList[maskNameList.indexOf(sectionMask)], 0, 0, cardWidth, cardHeight); + } frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]); -// console.log(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]); if (targetChild.children[1].children[2].checked == true) { frameFinalContext.globalCompositeOperation = "destination-out"; } @@ -925,7 +924,7 @@ function filterFramePicker(classToShow) { function loadSampleImages() { - var availableSamples = 7; + var availableSamples = 10; var samplesToLoad = [0,0,0]; for (var i = 1; i <= samplesToLoad.length; i ++) { var sampleImage = new Image() diff --git a/data/site/images/samples/10.png b/data/site/images/samples/10.png new file mode 100644 index 00000000..560d31e0 Binary files /dev/null and b/data/site/images/samples/10.png differ diff --git a/data/site/images/samples/9.png b/data/site/images/samples/9.png new file mode 100644 index 00000000..974279c0 Binary files /dev/null and b/data/site/images/samples/9.png differ diff --git a/data/versions/moreMasks.js b/data/versions/moreMasks.js new file mode 100644 index 00000000..a39a95ba --- /dev/null +++ b/data/versions/moreMasks.js @@ -0,0 +1,17 @@ +//============================================// +// Card Conjurer, by Kyle Burton // +//============================================// +if (!version.addedMoreMasks) { + version.addedMoreMasks = true; + version.masksToAdd = ["Left Half", "Left Third", "Left Two Thirds", "Middle Third", "Right Two Thirds", "Right Third"]; + for (var i = 0; i < version.masksToAdd.length; i++) { + if (!maskNameList.includes(version.masksToAdd[i])) { + document.getElementById("addFrameToCardMasterButtons").innerHTML += "" + maskNameList[maskNameList.length] = version.masksToAdd[i]; + maskList[maskList.length] = new Image(); + maskList[maskList.length - 1].crossOrigin = "anonymous"; + maskList[maskList.length - 1].src = "data/images/masks/" + version.masksToAdd[i].replace(/ /g, "") + ".png"; + } + } +} + diff --git a/index.html b/index.html index 4fd95b14..bba2be7b 100644 --- a/index.html +++ b/index.html @@ -34,9 +34,9 @@
-
+
- +
No frame selected
@@ -128,6 +128,7 @@
Click on one of the following buttons to load the described image frame set:
+