GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

more mask controls

Browse Source
This commit is contained in:
Kyle
2021-05-24 10:52:07 -07:00
parent c097eaa940
commit 094440caa4
2 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
creator/index.php
View File

@@ -50,6 +50,15 @@ include('../globalHTML/header-1.php');
<span class='checkmark'></span>
</label>
</div>
<div>
<h5 class='input-description'>Select and remove masks</h5>
<select id='frame-editor-masks' class='input margin-bottom'></select>
<button onclick='frameElementMaskRemoved();' class='input'>Remove mask</button>
</div>
<div class='drop-area'>
<h5 class='margin-bottom padding input-description'>Drag and drop masks to add</h5>
<input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadMaskOption);' data-dropFunction='uploadMaskOption' data-otherParams=''>
</div>
</div>
<div id='textbox-editor' class='textbox-editor'>
<h2 class='textbox-editor-title'>Textbox Editor</h2>
@@ -490,5 +499,5 @@ include('../globalHTML/header-1.php');
</h4>
</div>
</div>
<script defer src='/js/creator-18.js'></script>
<script defer src='/js/creator-19.js'></script>
<?php include('../globalHTML/footer.php'); ?>

43
js/creator-18.js → js/creator-19.js
View File

@@ -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();
}