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

double click to add

Browse Source
This commit is contained in:
Kyle
2021-06-02 20:29:18 -07:00
parent 181a1e599b
commit 3a339470b7
2 changed files with 78 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
creator/index.php
View File

@@ -135,13 +135,16 @@ include('../globalHTML/header-1.php');
<div id='mask-picker' class='mask-picker'></div>
</div>
<div class='input-grid margin-bottom'>
<button class='input' onclick='addFrame()'>Add Frame to Card</button>
<button class='input' onclick='addFrame([{src:"/img/frames/maskRightHalf.png", name:"Right Half"}])'>Add Frame to Card (Right Half)</button>
<button id='addToFull' class='input' onclick='addFrame()'>Add Frame to Card</button>
<button id='addToRightHalf' class='input' onclick='addFrame([{src:"/img/frames/maskRightHalf.png", name:"Right Half"}])'>Add Frame to Card (Right Half)</button>
</div>
<h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>More options</h5>
<div class='input-grid margin-bottom'>
<button class='input' onclick='addFrame([{src:"/img/frames/maskLeftHalf.png", name:"Left Half"}])'>Add Frame to Card (Left Half)</button>
<button class='input' onclick='addFrame([{src:"/img/frames/maskMiddleThird.png", name:"Middle Third"}])'>Add Frame to Card (Middle Third)</button>
<div>
<div class='input-grid margin-bottom'>
<button id='addToLeftHalf' class='input' onclick='addFrame([{src:"/img/frames/maskLeftHalf.png", name:"Left Half"}])'>Add Frame to Card (Left Half)</button>
<button id='addToMiddleThird' class='input' onclick='addFrame([{src:"/img/frames/maskMiddleThird.png", name:"Middle Third"}])'>Add Frame to Card (Middle Third)</button>
</div>
<h5 class='padding input-description'>You can now double click frames and masks to add them to the card. You can do so while holding the shift, control, or alt keys to add to the right half, left half, or middle third, respectively.</h5>
</div>
<h5 id='selectedPreview' class='padding input-description'>(Selected: White Frame, No Mask)</h5>
</div>
@@ -500,5 +503,5 @@ include('../globalHTML/header-1.php');
</h4>
</div>
</div>
<script defer src='/js/creator-19.js'></script>
<script defer src='/js/creator-20.js'></script>
<?php include('../globalHTML/footer.php'); ?>

104
js/creator-19.js → js/creator-20.js
View File

@@ -52,6 +52,8 @@ var selectedMaskIndex = 0;
var selectedTextIndex = 0;
var replacementMasks = {};
var customCount = 0;
var lastFrameClick = null;
var lastMaskClick = null;
//for imports
var scryfallArt;
var scryfallCard;
@@ -345,6 +347,7 @@ function loadFramePack(frameOptions = availableFrames) {
document.querySelector('#frame-picker').appendChild(frameOption);
})
document.querySelector('#mask-picker').innerHTML = '';
document.querySelector('#frame-picker').children[0].click();
if (localStorage.getItem('autoLoadFrameVersion') == 'true') {
document.querySelector('#loadFrameVersion').click();
@@ -354,47 +357,78 @@ function autoLoadFrameVersion() {
localStorage.setItem('autoLoadFrameVersion', document.querySelector('#autoLoadFrameVersion').checked);
}
function frameOptionClicked(event) {
var clickedFrameOption = event.target.closest('.frame-option');
if (document.querySelector('.frame-option.selected')) {
document.querySelector('.frame-option.selected').classList.remove('selected');
}
clickedFrameOption.classList.add('selected');
selectedFrameIndex = getElementIndex(clickedFrameOption);
if (!availableFrames[selectedFrameIndex].noDefaultMask) {
document.querySelector('#mask-picker').innerHTML = '<div class="mask-option" onclick="maskOptionClicked(event)"><img src="' + black.src + '"><p>No Mask</p></div>';
} else {
document.querySelector('#mask-picker').innerHTML = '';
}
document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)';
if (availableFrames[selectedFrameIndex].masks) {
availableFrames[selectedFrameIndex].masks.forEach(item => {
var maskOption = document.createElement('div');
maskOption.classList = 'mask-option hidden';
maskOption.onclick = maskOptionClicked;
var maskOptionImage = document.createElement('img');
maskOption.appendChild(maskOptionImage);
maskOptionImage.onload = function() {
this.parentElement.classList.remove('hidden');
}
maskOptionImage.src = fixUri(item.src.replace('.png', 'Thumb.png').replace('.svg', 'Thumb.png'));
maskOptionLabel = document.createElement('p');
maskOptionLabel.innerHTML = item.name;
maskOption.appendChild(maskOptionLabel);
document.querySelector('#mask-picker').appendChild(maskOption);
});
}
var firstChild = document.querySelector('#mask-picker').firstChild;
firstChild.classList.add('selected');
firstChild.click();
const button = doubleClick(event, 'frame');
const clickedFrameOption = event.target.closest('.frame-option');
const newFrameIndex = getElementIndex(clickedFrameOption);
if (newFrameIndex != selectedFrameIndex || document.querySelector('#mask-picker').innerHTML == '') {
Array.from(document.querySelectorAll('.frame-option.selected')).forEach(element => element.classList.remove('selected'));
clickedFrameOption.classList.add('selected');
selectedFrameIndex = newFrameIndex;
if (!availableFrames[selectedFrameIndex].noDefaultMask) {
document.querySelector('#mask-picker').innerHTML = '<div class="mask-option" onclick="maskOptionClicked(event)"><img src="' + black.src + '"><p>No Mask</p></div>';
} else {
document.querySelector('#mask-picker').innerHTML = '';
}
document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)';
if (availableFrames[selectedFrameIndex].masks) {
availableFrames[selectedFrameIndex].masks.forEach(item => {
const maskOption = document.createElement('div');
maskOption.classList = 'mask-option hidden';
maskOption.onclick = maskOptionClicked;
const maskOptionImage = document.createElement('img');
maskOption.appendChild(maskOptionImage);
maskOptionImage.onload = function() {
this.parentElement.classList.remove('hidden');
}
maskOptionImage.src = fixUri(item.src.replace('.png', 'Thumb.png').replace('.svg', 'Thumb.png'));
const maskOptionLabel = document.createElement('p');
maskOptionLabel.innerHTML = item.name;
maskOption.appendChild(maskOptionLabel);
document.querySelector('#mask-picker').appendChild(maskOption);
});
}
const firstChild = document.querySelector('#mask-picker').firstChild;
firstChild.classList.add('selected');
firstChild.click();
} else if (button) { button.click(); lastFrameClick = null; }
}
function maskOptionClicked(event) {
var clickedMaskOption = event.target.closest('.mask-option');
(document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
var button = doubleClick(event, 'mask');
const clickedMaskOption = event.target.closest('.mask-option');
// (document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
clickedMaskOption.classList.add('selected');
selectedMaskIndex = getElementIndex(clickedMaskOption);
const newMaskIndex = getElementIndex(clickedMaskOption)
if (newMaskIndex != selectedMaskIndex) { button = null; }
selectedMaskIndex = newMaskIndex;
var selectedMaskName = 'No Mask'
if (selectedMaskIndex > 0) {selectedMaskName = availableFrames[selectedFrameIndex].masks[selectedMaskIndex - 1].name;}
document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', ' + selectedMaskName + ')';
if (button) { button.click(); lastMaskClick = null; }
}
function doubleClick(event, maskOrFrame) {
const currentClick = (new Date()).getTime();
var lastClick = null;
if (maskOrFrame == 'mask') {
lastClick = lastMaskClick;
lastMaskClick = currentClick;
} else {
lastClick = lastFrameClick + 0;
lastFrameClick = currentClick + 0;
}
if (lastClick && lastClick + 500 > currentClick) {
var buttonID = null;
if (event.shiftKey) {
buttonID = '#addToRightHalf';
} else if (event.ctrlKey) {
buttonID = '#addToLeftHalf';
} else if (event.altKey) {
buttonID = '#addToMiddleThird';
} else {
buttonID = '#addToFull';
}
return document.querySelector(buttonID);
}
return null;
}
async function addFrame(additionalMasks = [], loadingFrame = false) {
var frameToAdd = JSON.parse(JSON.stringify(availableFrames[selectedFrameIndex]));