From 3a339470b7e9bdc6c0d0f4105eaca7ffe145fe36 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Wed, 2 Jun 2021 20:29:18 -0700 Subject: [PATCH] double click to add --- creator/index.php | 15 ++-- js/{creator-19.js => creator-20.js} | 104 ++++++++++++++++++---------- 2 files changed, 78 insertions(+), 41 deletions(-) rename js/{creator-19.js => creator-20.js} (96%) diff --git a/creator/index.php b/creator/index.php index d7d4b28e..4237cd38 100644 --- a/creator/index.php +++ b/creator/index.php @@ -135,13 +135,16 @@ include('../globalHTML/header-1.php');
- - + +
-
- - +
+
+ + +
+
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.
(Selected: White Frame, No Mask)
@@ -500,5 +503,5 @@ include('../globalHTML/header-1.php'); - + \ No newline at end of file diff --git a/js/creator-19.js b/js/creator-20.js similarity index 96% rename from js/creator-19.js rename to js/creator-20.js index e08ad005..99ccb657 100644 --- a/js/creator-19.js +++ b/js/creator-20.js @@ -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 = '

No Mask

'; - } 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 = '

No Mask

'; + } 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]));