diff --git a/creator/index.php b/creator/index.php index f733a30c..6d179ea7 100644 --- a/creator/index.php +++ b/creator/index.php @@ -50,6 +50,15 @@ include('../globalHTML/header-1.php'); +
+
Select and remove masks
+ + +
+
+
Drag and drop masks to add
+ +

Textbox Editor

@@ -490,5 +499,5 @@ include('../globalHTML/header-1.php');
- + \ No newline at end of file diff --git a/js/creator-18.js b/js/creator-19.js similarity index 97% rename from js/creator-18.js rename to js/creator-19.js index e7480c7b..05e821ee 100644 --- a/js/creator-18.js +++ b/js/creator-19.js @@ -46,10 +46,12 @@ var previewContext = previewCanvas.getContext('2d'); var canvasList = []; //frame/mask picker stuff var availableFrames = []; +var selectedFrame = null; var selectedFrameIndex = 0; var selectedMaskIndex = 0; var selectedTextIndex = 0; var replacementMasks = {}; +var customCount = 0; //for imports var scryfallArt; var scryfallCard; @@ -491,12 +493,13 @@ function removeFrame(event) { function frameElementClicked(event) { if (!event.target.classList.contains('frame-element-close')) { var selectedFrameElement = event.target.closest('.frame-element'); - var selectedFrame = card.frames[Array.from(selectedFrameElement.parentElement.children).indexOf(selectedFrameElement)]; + selectedFrame = card.frames[Array.from(selectedFrameElement.parentElement.children).indexOf(selectedFrameElement)]; document.querySelector('#frame-element-editor').classList.add('opened'); selectedFrame.bounds = selectedFrame.bounds || {}; if (selectedFrame.ogBounds == undefined) { selectedFrame.ogBounds = JSON.parse(JSON.stringify(selectedFrame.bounds)); } + // Basic manipulations document.querySelector('#frame-editor-x').value = scaleWidth(selectedFrame.bounds.x || 0); document.querySelector('#frame-editor-x').onchange = (event) => {selectedFrame.bounds.x = (event.target.value / card.width); drawFrames();} document.querySelector('#frame-editor-y').value = scaleHeight(selectedFrame.bounds.y || 0); @@ -511,10 +514,46 @@ function frameElementClicked(event) { document.querySelector('#frame-editor-erase').onchange = (event) => {selectedFrame.erase = event.target.checked; drawFrames();} document.querySelector('#frame-editor-alpha').checked = selectedFrame.preserveAlpha || false; document.querySelector('#frame-editor-alpha').onchange = (event) => {selectedFrame.preserveAlpha = event.target.checked; drawFrames();} + // Removing masks + const selectMaskElement = document.querySelector('#frame-editor-masks'); + selectMaskElement.innerHTML = null; + const maskOptionNone = document.createElement('option'); + maskOptionNone.disabled = true; + maskOptionNone.innerHTML = 'None Selected'; + selectMaskElement.appendChild(maskOptionNone); + selectedFrame.masks.forEach(mask => { + const maskOption = document.createElement('option'); + maskOption.innerHTML = mask.name; + selectMaskElement.appendChild(maskOption); + }); + selectMaskElement.selectedIndex = 0; } } +function frameElementMaskRemoved() { + const selectElement = document.querySelector('#frame-editor-masks'); + const selectedOption = selectElement.value; + console.log(selectedOption) + if (selectedOption != 'None Selected') { + selectElement.remove(selectElement.selectedIndex); + selectElement.selectedIndex = 0; + selectedFrame.masks.forEach(mask => { + if (mask.name == selectedOption) { + selectedFrame.masks = selectedFrame.masks.filter(item => item.name != selectedOption); + drawFrames(); + } + }); + } +} +function uploadMaskOption(imageSource) { + const uploadedMask = {name:`Uploaded Image (${customCount})`, src:imageSource, noThumb:true, image: new Image()}; + customCount ++; + selectedFrame.masks.push(uploadedMask); + uploadedMask.image.onload = drawFrames; + uploadedMask.image.src = imageSource; +} function uploadFrameOption(imageSource) { - var uploadedFrame = {name:'Uploaded Image', src:imageSource, noThumb:true} + const uploadedFrame = {name:`Uploaded Image (${customCount})`, src:imageSource, noThumb:true}; + customCount ++; availableFrames.push(uploadedFrame); loadFramePack(); }