borderless mdfcs

This commit is contained in:
Kyle
2021-06-14 10:12:13 -07:00
parent 23e9e2c170
commit 062b70edac
68 changed files with 144 additions and 4 deletions

View File

@@ -329,6 +329,7 @@ function loadFramePacks(framePackOptions = []) {
loadScript("/js/frames/pack" + document.querySelector('#selectFramePack').value + ".js");
}
function loadFramePack(frameOptions = availableFrames) {
resetDoubleClick();
document.querySelector('#frame-picker').innerHTML = null;
frameOptions.forEach(item => {
var frameOption = document.createElement('div');
@@ -361,6 +362,7 @@ function frameOptionClicked(event) {
const clickedFrameOption = event.target.closest('.frame-option');
const newFrameIndex = getElementIndex(clickedFrameOption);
if (newFrameIndex != selectedFrameIndex || document.querySelector('#mask-picker').innerHTML == '') {
resetDoubleClick();
Array.from(document.querySelectorAll('.frame-option.selected')).forEach(element => element.classList.remove('selected'));
clickedFrameOption.classList.add('selected');
selectedFrameIndex = newFrameIndex;
@@ -390,12 +392,12 @@ function frameOptionClicked(event) {
const firstChild = document.querySelector('#mask-picker').firstChild;
firstChild.classList.add('selected');
firstChild.click();
} else if (button) { button.click(); lastFrameClick = null; }
} else if (button) { button.click(); resetDoubleClick(); }
}
function maskOptionClicked(event) {
var button = doubleClick(event, 'mask');
const clickedMaskOption = event.target.closest('.mask-option');
// (document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
(document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
clickedMaskOption.classList.add('selected');
const newMaskIndex = getElementIndex(clickedMaskOption)
if (newMaskIndex != selectedMaskIndex) { button = null; }
@@ -403,7 +405,10 @@ function maskOptionClicked(event) {
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; }
if (button) { button.click(); resetDoubleClick(); }
}
function resetDoubleClick() {
lastFrameClick, lastMaskClick = null, null;
}
function doubleClick(event, maskOrFrame) {
const currentClick = (new Date()).getTime();

View File

@@ -1,5 +1,7 @@
loadFramePacks([
{name:'Regular', value:'ModalRegular'},
{name:'Borderless', value:'ModalBorderless'},
{name:'Nickname', value:'ModalNickname'},
{name:'Short', value:'ModalShort'},
{name:'Short-Nickname', value:'ModalShortNickname'},
{name:'Addons', value:'disabled'},

View File

@@ -0,0 +1,57 @@
//Create objects for common properties across available frames
var masks = [{src:'/img/frames/modal/regular/reminder.svg', name:'Flipside'}, {src:'/img/frames/modal/borderless/pinline.svg', name:'Pinline'}, {src:'/img/frames/modal/modalMaskTitle.png', name:'Title'}, {src:'/img/frames/m15/regular/m15MaskType.png', name:'Type'}, {src:'/img/frames/modal/regular/textbox.svg', name:'Rules'}, {src:'/img/frames/modal/short/shortModalMaskBorder.png', name:'Border'}];
var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
//defines available frames
availableFrames = [
{name:'White Frame (Front)', src:'/img/frames/modal/borderless/wf.png', masks:masks},
{name:'Blue Frame (Front)', src:'/img/frames/modal/borderless/uf.png', masks:masks},
{name:'Black Frame (Front)', src:'/img/frames/modal/borderless/bf.png', masks:masks},
{name:'Red Frame (Front)', src:'/img/frames/modal/borderless/rf.png', masks:masks},
{name:'Green Frame (Front)', src:'/img/frames/modal/borderless/gf.png', masks:masks},
{name:'Multicolored Frame (Front)', src:'/img/frames/modal/borderless/mf.png', masks:masks},
{name:'Artifact Frame (Front)', src:'/img/frames/modal/borderless/af.png', masks:masks},
{name:'White Frame (Back)', src:'/img/frames/modal/borderless/wb.png', masks:masks},
{name:'Blue Frame (Back)', src:'/img/frames/modal/borderless/ub.png', masks:masks},
{name:'Black Frame (Back)', src:'/img/frames/modal/borderless/bb.png', masks:masks},
{name:'Red Frame (Back)', src:'/img/frames/modal/borderless/rb.png', masks:masks},
{name:'Green Frame (Back)', src:'/img/frames/modal/borderless/gb.png', masks:masks},
{name:'Multicolored Frame (Back)', src:'/img/frames/modal/borderless/mb.png', masks:masks},
{name:'Artifact Frame (Back)', src:'/img/frames/modal/borderless/ab.png', masks:masks},
{name:'White Power/Toughness', src:'/img/frames/m15/regular/m15PTW.png', bounds:bounds},
{name:'Blue Power/Toughness', src:'/img/frames/m15/regular/m15PTU.png', bounds:bounds},
{name:'Black Power/Toughness', src:'/img/frames/m15/regular/m15PTB.png', bounds:bounds},
{name:'Red Power/Toughness', src:'/img/frames/m15/regular/m15PTR.png', bounds:bounds},
{name:'Green Power/Toughness', src:'/img/frames/m15/regular/m15PTG.png', bounds:bounds},
{name:'Multicolored Power/Toughness', src:'/img/frames/m15/regular/m15PTM.png', bounds:bounds},
{name:'Artifact Power/Toughness', src:'/img/frames/m15/regular/m15PTA.png', bounds:bounds}
];
//disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = false;
//defines process for loading this version, if applicable
document.querySelector('#loadFrameVersion').onclick = async function() {
//resets things so that every frame doesn't have to
await resetCardIrregularities();
//sets card version
card.version = 'modalBorderless';
//art bounds
card.artBounds = {x:0, y:0, width:1, height:0.9224};
autoFitArt();
//set symbol bounds
card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, vertical:'center', horizontal: 'right'};
resetSetSymbol();
//watermark bounds
card.watermarkBounds = {x:0.5, y:0.7762, width:0.75, height:0.2305};
resetWatermark();
//text
loadTextOptions({
mana: {name:'Mana Cost', text:'', y:0.0613, width:0.9292, height:71/2100, oneLine:true, size:71/1638, align:'right', shadowX:-0.001, shadowY:0.0029, manaCost:true, manaSpacing:0},
title: {name:'Title', text:'', x:0.1614, y:0.0522, width:0.7534, height:0.0543, oneLine:true, font:'belerenb', size:0.0381},
type: {name:'Type', text:'', x:0.0854, y:0.5664, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324},
rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2572, size:0.0362},
flipsideType: {name:'Flipside Type', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0234, color:'white', oneLine:true, font:'belerenb'},
flipSideReminder: {name:'Flipside Text', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0258, color:'white', oneLine:true, align:'right'},
pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center'}
});
}
//loads available frames
loadFramePack();

View File

@@ -10,7 +10,7 @@ availableFrames = [
{name:'Multicolored Legend Crown', src:'/img/frames/modal/crowns/nickname/m.png', bounds:bounds, complementary:8},
{name:'Artifact Legend Crown', src:'/img/frames/modal/crowns/nickname/a.png', bounds:bounds, complementary:8},
{name:'Land Legend Crown', src:'/img/frames/modal/crowns/nickname/l.png', bounds:bounds, complementary:8},
{name:'Legend Crown Cutout', src:'/img/frames/modal/crowns/cutout.svg', erase:true}
{name:'Legend Crown Cutout', src:'/img/frames/modal/nickname/cutout.svg', erase:true}
];
//disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = true;

View File

@@ -0,0 +1,58 @@
//Create objects for common properties across available frames
var masks = [{src:'/img/frames/modal/regular/reminder.svg', name:'Flipside'}, {src:'/img/frames/modal/nickname/pinline.svg', name:'Pinline'}, {src:'/img/frames/modal/modalMaskTitle.png', name:'Title'}, {src:'/img/frames/m15/regular/m15MaskType.png', name:'Type'}, {src:'/img/frames/modal/regular/textbox.svg', name:'Rules'}, {src:'/img/frames/modal/short/shortModalMaskBorder.png', name:'Border'}];
var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
//defines available frames
availableFrames = [
{name:'White Frame (Front)', src:'/img/frames/modal/nickname/wf.png', masks:masks},
{name:'Blue Frame (Front)', src:'/img/frames/modal/nickname/uf.png', masks:masks},
{name:'Black Frame (Front)', src:'/img/frames/modal/nickname/bf.png', masks:masks},
{name:'Red Frame (Front)', src:'/img/frames/modal/nickname/rf.png', masks:masks},
{name:'Green Frame (Front)', src:'/img/frames/modal/nickname/gf.png', masks:masks},
{name:'Multicolored Frame (Front)', src:'/img/frames/modal/nickname/mf.png', masks:masks},
{name:'Artifact Frame (Front)', src:'/img/frames/modal/nickname/af.png', masks:masks},
{name:'White Frame (Back)', src:'/img/frames/modal/nickname/wb.png', masks:masks},
{name:'Blue Frame (Back)', src:'/img/frames/modal/nickname/ub.png', masks:masks},
{name:'Black Frame (Back)', src:'/img/frames/modal/nickname/bb.png', masks:masks},
{name:'Red Frame (Back)', src:'/img/frames/modal/nickname/rb.png', masks:masks},
{name:'Green Frame (Back)', src:'/img/frames/modal/nickname/gb.png', masks:masks},
{name:'Multicolored Frame (Back)', src:'/img/frames/modal/nickname/mb.png', masks:masks},
{name:'Artifact Frame (Back)', src:'/img/frames/modal/nickname/ab.png', masks:masks},
{name:'White Power/Toughness', src:'/img/frames/m15/regular/m15PTW.png', bounds:bounds},
{name:'Blue Power/Toughness', src:'/img/frames/m15/regular/m15PTU.png', bounds:bounds},
{name:'Black Power/Toughness', src:'/img/frames/m15/regular/m15PTB.png', bounds:bounds},
{name:'Red Power/Toughness', src:'/img/frames/m15/regular/m15PTR.png', bounds:bounds},
{name:'Green Power/Toughness', src:'/img/frames/m15/regular/m15PTG.png', bounds:bounds},
{name:'Multicolored Power/Toughness', src:'/img/frames/m15/regular/m15PTM.png', bounds:bounds},
{name:'Artifact Power/Toughness', src:'/img/frames/m15/regular/m15PTA.png', bounds:bounds}
];
//disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = false;
//defines process for loading this version, if applicable
document.querySelector('#loadFrameVersion').onclick = async function() {
//resets things so that every frame doesn't have to
await resetCardIrregularities();
//sets card version
card.version = 'modalNickname';
//art bounds
card.artBounds = {x:0, y:0, width:1, height:0.9224};
autoFitArt();
//set symbol bounds
card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, vertical:'center', horizontal: 'right'};
resetSetSymbol();
//watermark bounds
card.watermarkBounds = {x:0.5, y:0.7762, width:0.75, height:0.2305};
resetWatermark();
//text
loadTextOptions({
mana: {name:'Mana Cost', text:'', y:0.0613, width:0.9292, height:71/2100, oneLine:true, size:71/1638, align:'right', shadowX:-0.001, shadowY:0.0029, manaCost:true, manaSpacing:0},
nickname: {name:'Nickname', text:'', x:0.1614, y:0.0522, width:0.7534, height:0.0543, oneLine:true, font:'belerenb', size:0.0381},
title: {name:'Title', text:'', x:0.14, y:0.1129, width:0.72, height:0.0243, oneLine:true, font:'mplantini', size:0.0229, color:'white', shadowX:0.0014, shadowY:0.001, align:'center'},
type: {name:'Type', text:'', x:0.0854, y:0.5664, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324},
rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2572, size:0.0362},
flipsideType: {name:'Flipside Type', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0234, color:'white', oneLine:true, font:'belerenb'},
flipSideReminder: {name:'Flipside Text', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0258, color:'white', oneLine:true, align:'right'},
pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center'}
});
}
//loads available frames
loadFramePack();