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 id='mask-picker' class='mask-picker'></div>
</div> </div>
<div class='input-grid margin-bottom'> <div class='input-grid margin-bottom'>
<button class='input' onclick='addFrame()'>Add Frame to Card</button> <button id='addToFull' 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='addToRightHalf' class='input' onclick='addFrame([{src:"/img/frames/maskRightHalf.png", name:"Right Half"}])'>Add Frame to Card (Right Half)</button>
</div> </div>
<h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>More options</h5> <h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>More options</h5>
<div class='input-grid margin-bottom'> <div>
<button class='input' onclick='addFrame([{src:"/img/frames/maskLeftHalf.png", name:"Left Half"}])'>Add Frame to Card (Left Half)</button> <div class='input-grid margin-bottom'>
<button class='input' onclick='addFrame([{src:"/img/frames/maskMiddleThird.png", name:"Middle Third"}])'>Add Frame to Card (Middle Third)</button> <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> </div>
<h5 id='selectedPreview' class='padding input-description'>(Selected: White Frame, No Mask)</h5> <h5 id='selectedPreview' class='padding input-description'>(Selected: White Frame, No Mask)</h5>
</div> </div>
@@ -500,5 +503,5 @@ include('../globalHTML/header-1.php');
</h4> </h4>
</div> </div>
</div> </div>
<script defer src='/js/creator-19.js'></script> <script defer src='/js/creator-20.js'></script>
<?php include('../globalHTML/footer.php'); ?> <?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 selectedTextIndex = 0;
var replacementMasks = {}; var replacementMasks = {};
var customCount = 0; var customCount = 0;
var lastFrameClick = null;
var lastMaskClick = null;
//for imports //for imports
var scryfallArt; var scryfallArt;
var scryfallCard; var scryfallCard;
@@ -345,6 +347,7 @@ function loadFramePack(frameOptions = availableFrames) {
document.querySelector('#frame-picker').appendChild(frameOption); document.querySelector('#frame-picker').appendChild(frameOption);
}) })
document.querySelector('#mask-picker').innerHTML = '';
document.querySelector('#frame-picker').children[0].click(); document.querySelector('#frame-picker').children[0].click();
if (localStorage.getItem('autoLoadFrameVersion') == 'true') { if (localStorage.getItem('autoLoadFrameVersion') == 'true') {
document.querySelector('#loadFrameVersion').click(); document.querySelector('#loadFrameVersion').click();
@@ -354,47 +357,78 @@ function autoLoadFrameVersion() {
localStorage.setItem('autoLoadFrameVersion', document.querySelector('#autoLoadFrameVersion').checked); localStorage.setItem('autoLoadFrameVersion', document.querySelector('#autoLoadFrameVersion').checked);
} }
function frameOptionClicked(event) { function frameOptionClicked(event) {
var clickedFrameOption = event.target.closest('.frame-option'); const button = doubleClick(event, 'frame');
if (document.querySelector('.frame-option.selected')) { const clickedFrameOption = event.target.closest('.frame-option');
document.querySelector('.frame-option.selected').classList.remove('selected'); const newFrameIndex = getElementIndex(clickedFrameOption);
} if (newFrameIndex != selectedFrameIndex || document.querySelector('#mask-picker').innerHTML == '') {
clickedFrameOption.classList.add('selected'); Array.from(document.querySelectorAll('.frame-option.selected')).forEach(element => element.classList.remove('selected'));
selectedFrameIndex = getElementIndex(clickedFrameOption); clickedFrameOption.classList.add('selected');
if (!availableFrames[selectedFrameIndex].noDefaultMask) { selectedFrameIndex = newFrameIndex;
document.querySelector('#mask-picker').innerHTML = '<div class="mask-option" onclick="maskOptionClicked(event)"><img src="' + black.src + '"><p>No Mask</p></div>'; if (!availableFrames[selectedFrameIndex].noDefaultMask) {
} else { document.querySelector('#mask-picker').innerHTML = '<div class="mask-option" onclick="maskOptionClicked(event)"><img src="' + black.src + '"><p>No Mask</p></div>';
document.querySelector('#mask-picker').innerHTML = ''; } else {
} document.querySelector('#mask-picker').innerHTML = '';
document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)'; }
if (availableFrames[selectedFrameIndex].masks) { document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)';
availableFrames[selectedFrameIndex].masks.forEach(item => { if (availableFrames[selectedFrameIndex].masks) {
var maskOption = document.createElement('div'); availableFrames[selectedFrameIndex].masks.forEach(item => {
maskOption.classList = 'mask-option hidden'; const maskOption = document.createElement('div');
maskOption.onclick = maskOptionClicked; maskOption.classList = 'mask-option hidden';
var maskOptionImage = document.createElement('img'); maskOption.onclick = maskOptionClicked;
maskOption.appendChild(maskOptionImage); const maskOptionImage = document.createElement('img');
maskOptionImage.onload = function() { maskOption.appendChild(maskOptionImage);
this.parentElement.classList.remove('hidden'); 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'); maskOptionImage.src = fixUri(item.src.replace('.png', 'Thumb.png').replace('.svg', 'Thumb.png'));
maskOptionLabel.innerHTML = item.name; const maskOptionLabel = document.createElement('p');
maskOption.appendChild(maskOptionLabel); maskOptionLabel.innerHTML = item.name;
document.querySelector('#mask-picker').appendChild(maskOption); maskOption.appendChild(maskOptionLabel);
}); document.querySelector('#mask-picker').appendChild(maskOption);
} });
var firstChild = document.querySelector('#mask-picker').firstChild; }
firstChild.classList.add('selected'); const firstChild = document.querySelector('#mask-picker').firstChild;
firstChild.click(); firstChild.classList.add('selected');
firstChild.click();
} else if (button) { button.click(); lastFrameClick = null; }
} }
function maskOptionClicked(event) { function maskOptionClicked(event) {
var clickedMaskOption = event.target.closest('.mask-option'); var button = doubleClick(event, 'mask');
(document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected'); const clickedMaskOption = event.target.closest('.mask-option');
// (document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
clickedMaskOption.classList.add('selected'); clickedMaskOption.classList.add('selected');
selectedMaskIndex = getElementIndex(clickedMaskOption); const newMaskIndex = getElementIndex(clickedMaskOption)
if (newMaskIndex != selectedMaskIndex) { button = null; }
selectedMaskIndex = newMaskIndex;
var selectedMaskName = 'No Mask' var selectedMaskName = 'No Mask'
if (selectedMaskIndex > 0) {selectedMaskName = availableFrames[selectedFrameIndex].masks[selectedMaskIndex - 1].name;} if (selectedMaskIndex > 0) {selectedMaskName = availableFrames[selectedFrameIndex].masks[selectedMaskIndex - 1].name;}
document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', ' + selectedMaskName + ')'; 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) { async function addFrame(additionalMasks = [], loadingFrame = false) {
var frameToAdd = JSON.parse(JSON.stringify(availableFrames[selectedFrameIndex])); var frameToAdd = JSON.parse(JSON.stringify(availableFrames[selectedFrameIndex]));