mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
Mystical Archive (JP)
This commit is contained in:
Kyle
@@ -399,7 +399,11 @@ function addFrame(additionalMasks = [], loadingFrame = false) {
|
||||
frameToAdd.image.crossOrigin = 'anonymous'
|
||||
frameToAdd.image.src = blank.src;
|
||||
frameToAdd.image.onload = drawFrames;
|
||||
frameToAdd.image.src = fixUri(frameToAdd.src);
|
||||
if ('stretch' in frameToAdd) {
|
||||
stretchSVG(frameToAdd);
|
||||
} else {
|
||||
frameToAdd.image.src = fixUri(frameToAdd.src);
|
||||
}
|
||||
if (!loadingFrame) {
|
||||
card.frames.unshift(frameToAdd);
|
||||
}
|
||||
@@ -557,6 +561,22 @@ function writeText(textObject, targetContext) {
|
||||
}
|
||||
var splitText = rawText.replace(/\n/g, '{line}').replace(/{flavor}/g, '{lns}{bar}{lns}{fixtextalign}{i}').replace(/{/g, splitString + '{').replace(/}/g, '}' + splitString).replace(/ /g, splitString + ' ' + splitString).split(splitString);
|
||||
splitText = splitText.filter(item => item);
|
||||
if (textObject.vertical) {
|
||||
newSplitText = [];
|
||||
splitText.forEach(item => {
|
||||
if (item.includes('{') && item.includes('}')) {
|
||||
newSplitText.push(item);
|
||||
} else if (item == ' ') {
|
||||
newSplitText.push(`{down${scaleHeight(0.01)}}`);
|
||||
} else {
|
||||
item.split('').forEach(char => {
|
||||
newSplitText.push(char, '{lns}');
|
||||
});
|
||||
// newSplitText = newSplitText.concat(item.split(''));
|
||||
}
|
||||
});
|
||||
splitText = newSplitText;
|
||||
}
|
||||
// if (textManaCost && textObject.arcStart > 0) {
|
||||
// splitText.reverse();
|
||||
// }
|
||||
@@ -1430,6 +1450,47 @@ function loadScript(scriptPath) {
|
||||
document.querySelectorAll('head')[0].appendChild(script);
|
||||
}
|
||||
}
|
||||
// Stretchable SVGs
|
||||
function stretchSVG(frameObject) {
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', fixUri(frameObject.src), true);
|
||||
xhr.overrideMimeType('image/svg+xml');
|
||||
xhr.onload = function(e) {
|
||||
frameObject.image.src = 'data:image/svg+xml;charset=utf-8,' + stretchSVGReal((new XMLSerializer).serializeToString(xhr.responseXML.documentElement), frameObject);
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
function stretchSVGReal(data, frameObject) {
|
||||
var returnData = data;
|
||||
frameObject.stretch.forEach(stretch => {
|
||||
const change = stretch.change;
|
||||
const targets = stretch.targets;
|
||||
const name = stretch.name;
|
||||
const oldData = returnData.split(name + '" d="')[1].split('" style=')[0];
|
||||
var newData = '';
|
||||
const listData = oldData.replace(/L/g, '|L').replace(/C/g, '|C').replace(/M/g, '|M').replace(/Z/g, '|Z').replace('|', '').split('|');
|
||||
for (i = 0; i < listData.length; i ++) {
|
||||
const item = listData[i]
|
||||
if (targets.includes(i)) {
|
||||
if (item[0] == 'C') {
|
||||
newCoords = [];
|
||||
item.slice(1).split(' ').forEach(pair => {
|
||||
coords = pair.split(',');
|
||||
newCoords.push((scaleWidth(change[0]) + parseFloat(coords[0])) + ',' + (scaleHeight(change[1]) + parseFloat(coords[1])));
|
||||
});
|
||||
newData += 'C' + newCoords.join(' ');
|
||||
} else {
|
||||
const coords = item.slice(1).split(',');
|
||||
newData += item[0] + (scaleWidth(change[0]) + parseFloat(coords[0])) + ',' + (scaleHeight(change[1]) + parseFloat(coords[1]))
|
||||
}
|
||||
} else {
|
||||
newData += item;
|
||||
}
|
||||
}
|
||||
returnData = returnData.replace(oldData, newData);
|
||||
});
|
||||
return returnData;
|
||||
}
|
||||
//SCRYFALL STUFF MAY BE CHANGED IN THE FUTURE
|
||||
function fetchScryfallData(cardName, callback = console.log) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
@@ -1,4 +1,5 @@
|
||||
loadFramePacks([
|
||||
{name:'Mystical Archive (Japanese)', value:'MysticalArchiveJP'},
|
||||
{name:'Mystical Archive', value:'MysticalArchive'},
|
||||
{name:'Praetors', value:'Praetors'},
|
||||
{name:'Kaldheim', value:'Kaldheim-2'},
|
||||
|
||||
12
js/frames/manaSymbolsMysticalArchiveJP.js
Normal file
12
js/frames/manaSymbolsMysticalArchiveJP.js
Normal file
@@ -0,0 +1,12 @@
|
||||
//checks to see if it needs to run
|
||||
if (!card.manaSymbols.includes('/js/frames/manaSymbolsOutline.js')) {
|
||||
card.manaSymbols.push('/js/frames/manaSymbolsOutline.js');
|
||||
}
|
||||
if (findManaSymbolIndex('majpw') == -1) {
|
||||
loadManaSymbols([
|
||||
'majp/majpw', 'majp/majpu', 'majp/majpb', 'majp/majpr', 'majp/majpg',
|
||||
'majp/majpc', 'majp/majpx', 'majp/majp0', 'majp/majp1',
|
||||
'majp/majp2', 'majp/majp3', 'majp/majp4', 'majp/majp5', 'majp/majp6',
|
||||
'majp/majp7', 'majp/majp8', 'majp/majp9'
|
||||
]);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
if (!card.manaSymbols.includes('/js/frames/manaSymbolsOutline.js')) {
|
||||
card.manaSymbols.push('/js/frames/manaSymbolsOutline.js');
|
||||
}
|
||||
if (findManaSymbolIndex('cw') == -1) {
|
||||
if (findManaSymbolIndex('outlinew') == -1) {
|
||||
loadManaSymbols([
|
||||
'outline/outlinew', 'outline/outlineu', 'outline/outlineb', 'outline/outliner', 'outline/outlineg',
|
||||
'outline/outlinec', 'outline/outlines', 'outline/outlinex', 'outline/outline0', 'outline/outline1',
|
||||
|
||||
@@ -12,6 +12,7 @@ availableFrames = [
|
||||
{name:'Artifact Frame', src:'/img/frames/m15/boxTopper/m15BoxTopperFrameA.png', masks:masks},
|
||||
{name:'Land Frame', src:'/img/frames/m15/boxTopper/m15BoxTopperFrameL.png', masks:masks},
|
||||
{name:'Vehicle Frame', src:'/img/frames/m15/boxTopper/m15BoxTopperFrameV.png', masks:masks},
|
||||
{name:'Colorless Frame', src:'/img/frames/m15/boxTopper/c.png', masks:masks},
|
||||
{name:'Bevel Cutout for Nickname', src:'/img/black.png', bounds:{x:0.058, y:0.111, width:0.884, height:0.0381}, erase:true},
|
||||
{name:'Nickname Bevel', src:'/img/frames/m15/boxTopper/m15BoxTopperNicknameBevel.png', bounds:{x:0.058, y:0.111, width:0.884, height:0.0381}}
|
||||
];
|
||||
|
||||
66
js/frames/packMysticalArchiveJP.js
Normal file
66
js/frames/packMysticalArchiveJP.js
Normal file
@@ -0,0 +1,66 @@
|
||||
//Create objects for common properties across available frames
|
||||
var masks = [{src:'/img/frames/mysticalArchive/jp/pinline.svg', name:'Pinline'}];
|
||||
var stretch = [
|
||||
{name:'adjustable', targets: [0, 1, 6, 7, 8, 10, 11, 16, 17, 18, 20, 21, 22, 27, 28], change:[0, 0]},
|
||||
{name:'typePinline', targets: [0, 1, 2, 3, 4, 5, 6, 12, 14, 18, 19, 20, 21, 22, 23], change:[0, 0]},
|
||||
{name:'type', targets: [0, 1, 2], change:[0, 0]}
|
||||
];
|
||||
var bounds = {x:0.8027, y:0.5381, width:0.116, height:0.0829}
|
||||
var bounds2 = {x:0.7767, y:0.8881, width:0.1687, height:0.0591}
|
||||
// Notification
|
||||
notify('When you load the Japanese Mystical Archive frame version, a "Mystical Archive" tab will appear. This tab allows you to control the height of the title bar.', 15);
|
||||
//defines available frames
|
||||
availableFrames = [
|
||||
{name:'White Frame', src:'/img/frames/mysticalArchive/jp/w.svg', stretch:stretch, masks:masks},
|
||||
{name:'Blue Frame', src:'/img/frames/mysticalArchive/jp/u.svg', stretch:stretch, masks:masks},
|
||||
{name:'Black Frame', src:'/img/frames/mysticalArchive/jp/b.svg', stretch:stretch, masks:masks},
|
||||
{name:'Red Frame', src:'/img/frames/mysticalArchive/jp/r.svg', stretch:stretch, masks:masks},
|
||||
{name:'Green Frame', src:'/img/frames/mysticalArchive/jp/g.svg', stretch:stretch, masks:masks},
|
||||
{name:'Multicolored Frame', src:'/img/frames/mysticalArchive/jp/m.svg', stretch:stretch, masks:masks},
|
||||
{name:'Artifact Frame', src:'/img/frames/mysticalArchive/jp/a.svg', stretch:stretch, masks:masks},
|
||||
{name:'Land Frame', src:'/img/frames/mysticalArchive/jp/l.svg', stretch:stretch, masks:masks},
|
||||
{name:'Uncommon', src:'/img/frames/mysticalArchive/jp/uncommon.png', bounds:bounds},
|
||||
{name:'Rare', src:'/img/frames/mysticalArchive/jp/rare.png', bounds:bounds},
|
||||
{name:'Mythic', src:'/img/frames/mysticalArchive/jp/mythic.png', bounds:bounds},
|
||||
{name:'Power/Toughness Cutout', src:'/img/frames/mysticalArchive/jp/pt/cutout.svg', bounds:bounds2, erase:true},
|
||||
{name:'White Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/w.svg', bounds:bounds2},
|
||||
{name:'Blue Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/u.svg', bounds:bounds2},
|
||||
{name:'Black Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/b.svg', bounds:bounds2},
|
||||
{name:'Red Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/r.svg', bounds:bounds2},
|
||||
{name:'Green Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/g.svg', bounds:bounds2},
|
||||
{name:'Multicolored Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/m.svg', bounds:bounds2},
|
||||
{name:'Artifact Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/a.svg', bounds:bounds2},
|
||||
{name:'Land Power/Toughness', src:'/img/frames/mysticalArchive/jp/pt/l.svg', bounds:bounds2}
|
||||
];
|
||||
//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();
|
||||
// Notification
|
||||
notify('For a better Japanese font, use {fontjapanese-title} or {fontjapanese}.', 15)
|
||||
//sets card version
|
||||
card.version = 'MAJP';
|
||||
card.onload = '/js/frames/versionMysticalArchiveJP.js';
|
||||
loadScript('/js/frames/versionMysticalArchiveJP.js');
|
||||
//art bounds
|
||||
card.artBounds = {x:0, y:0, width:1, height:0.9286};
|
||||
autoFitArt();
|
||||
//set symbol bounds
|
||||
card.setSymbolBounds = {x:0.8607, y:0.5796, width:0.116, height:0.0829, vertical:'center', horizontal: 'center'};
|
||||
resetSetSymbol();
|
||||
//watermark bounds
|
||||
card.watermarkBounds = {x:0.5, y:0.7705, width:0.75, height:0.2362};
|
||||
resetWatermark();
|
||||
//text
|
||||
loadTextOptions({
|
||||
mana: {name:'Mana Cost', text:'', y:0.0505, width:0.9414, height:100/2100, oneLine:true, size:100/1638, align:'right', manaCost:true, manaSpacing:-0.0015, manaPrefix:'majp'},
|
||||
title: {name:'Title', text:'', x:0.09, y:0.0715, width:0.1194, height:0.1286, font:'belerenb', size:0.0305, align:'center', vertical:true, color:'white'},
|
||||
type: {name:'Type', text:'', x:0.08, y:0.5548, width:0.2867, height:0.0543, oneLine:true, font:'belerenb', size:0.0324, align:'center'},
|
||||
rules: {name:'Rules Text', text:'', x:0.0934, y:0.6248, width:0.8134, height:0.2934, size:0.0362},
|
||||
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();
|
||||
41
js/frames/versionMysticalArchiveJP.js
Normal file
41
js/frames/versionMysticalArchiveJP.js
Normal file
@@ -0,0 +1,41 @@
|
||||
//checks to see if it needs to run
|
||||
if (!loadedVersions.includes('/js/frames/versionMysticalArchiveJP.js')) {
|
||||
loadedVersions.push('/js/frames/versionMysticalArchiveJP.js');
|
||||
document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `mysticalArchive`)">Mystical Archive</h3>';
|
||||
var newHTML = document.createElement('div');
|
||||
newHTML.id = 'creator-menu-mysticalArchive';
|
||||
newHTML.classList.add('hidden');
|
||||
newHTML.innerHTML = `
|
||||
<div class='readable-background padding'>
|
||||
<h5 class='padding margin-bottom input-description'>Adjust the title bar's height:</h5>
|
||||
<input id='ma-change1' class='input' type='number' oninput='stretchMysticalArchive();' min='100', max='1000', value='270', step='5'>
|
||||
</div>
|
||||
<div class='readable-background padding'>
|
||||
<h5 class='padding margin-bottom input-description'>Adjust the type bar's width:</h5>
|
||||
<input id='ma-change2' class='input' type='number' oninput='stretchMysticalArchive();' min='150', max='1000', value='430', step='5'>
|
||||
</div>
|
||||
<!-- <div class='readable-background padding'>
|
||||
<h5 class='padding margin-bottom input-description'>Targets:</h5>
|
||||
<input id='ma-targets' class='input' type='text' oninput='stretchMysticalArchive();'>
|
||||
</div> -->`;
|
||||
document.querySelector('#creator-menu-sections').appendChild(newHTML);
|
||||
loadScript('/js/frames/manaSymbolsMysticalArchiveJP.js');
|
||||
}
|
||||
|
||||
function stretchMysticalArchive() {
|
||||
const change1 = [0, (parseInt(document.querySelector('#ma-change1').value) - 270) / 2100];
|
||||
const change2 = [(parseInt(document.querySelector('#ma-change2').value) - 430) / 1260, 0];
|
||||
// var targets = []
|
||||
// document.querySelector('#ma-targets').value.split(' ').forEach(item => targets.push(parseInt(item)));
|
||||
card.frames.forEach(frame => {
|
||||
if (frame.src.includes('Archive/jp') && 'stretch' in frame) {
|
||||
frame.stretch[0].change = change1;
|
||||
card.text.title.height = change1[1] + 270 / 2100;
|
||||
frame.stretch[1].change = change2;
|
||||
frame.stretch[2].change = change2;
|
||||
card.text.type.width = change2[0] + 430 / 1500;
|
||||
drawTextBuffer();
|
||||
stretchSVG(frame);
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user