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 = "|||
x";
+ tempElement.innerHTML = "|||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:
+