various fixes

This commit is contained in:
Kyle
2021-01-08 17:50:21 -08:00
parent c4a9d37a22
commit 729f93f9d5
10 changed files with 96 additions and 22 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

@@ -49,6 +49,8 @@ var date = new Date();
var loadedVersions = [];
//Card Object managament
async function resetCardIrregularities({canvas = [1500, 2100, 0, 0], resetOthers = true} = {}) {
//misc details
card.margins = false;
//rotation
if (card.landscape) {
previewContext.scale(5/7, 7/5);
@@ -508,13 +510,16 @@ function writeText(textObject, targetContext) {
//Preps the text string
var splitString = '6GJt7eL8';
var rawText = textObject.text
if (params.get('copyright') != null && textObject.name == 'wizards' && card.version == 'margin') {
if (params.get('copyright') != null && textObject.name == 'wizards' && card.margins) {
rawText = params.get('copyright'); //so people using CC for custom card games can customize their copyright info
}
var splitText = rawText.replace(/\n/g, '{line}').replace('{flavor}', '{lns}{bar}{lns}{i}').replace(/{/g, splitString + '{').replace(/}/g, '}' + splitString).replace(/ /g, splitString + ' ' + splitString).split(splitString);
var splitText = rawText.replace(/\n/g, '{line}').replace('{flavor}', '{lns}{bar}{lns}{fixtextalign}{i}').replace(/{/g, splitString + '{').replace(/}/g, '}' + splitString).replace(/ /g, splitString + ' ' + splitString).split(splitString);
splitText = splitText.filter(item => item);
if (textManaCost && textObject.arcStart > 0) {
splitText.reverse();
// if (textManaCost && textObject.arcStart > 0) {
// splitText.reverse();
// }
if (textObject.manaCost) {
splitText = splitText.filter(item => item != ' ');
}
splitText.push('');
//Manages the redraw loop
@@ -548,6 +553,7 @@ function writeText(textObject, targetContext) {
var textFontExtension = '';
var textFontStyle = textObject.fontStyle || '';
var manaPlacementCounter = 0;
var realTextAlign = textAlign;
//variables that track various... things?
var newLineSpacing = 0;
var textSize = startingTextSize;
@@ -580,10 +586,21 @@ function writeText(textObject, targetContext) {
var barWidth = textWidth * 0.95;
var barHeight = scaleHeight(0.002);
var barImageName = 'bar';
var barDistance = 0.45;
realTextAlign = textAlign;
textAlign = 'left';
if (textColor == 'white') {
barImageName = 'whitebar';
}
lineContext.drawImage(manaSymbols[findManaSymbolIndex(barImageName)].image, canvasMargin + (textWidth - barWidth) / 2, canvasMargin + 0.45 * textSize, barWidth, barHeight);
if (card.version == 'cartoony') {
barImageName = 'cflavor';
barWidth = scaleWidth(0.8547);
barHeight = scaleHeight(0.0458);
barDistance = -0.23;
newLineSpacing = textSize * -0.23;
textSize -= scaleHeight(0.0086);
}
lineContext.drawImage(manaSymbols[findManaSymbolIndex(barImageName)].image, canvasMargin + (textWidth - barWidth) / 2, canvasMargin + barDistance * textSize, barWidth, barHeight);
} else if (possibleCode == 'i') {
if (textFont == 'mplantin') {
textFontExtension = 'i';
@@ -674,21 +691,51 @@ function writeText(textObject, targetContext) {
textArcRadius = parseInt(possibleCode.replace('arcradius', '')) || 0;
} else if (possibleCode.includes('arcstart')) {
textArcStart = parseFloat(possibleCode.replace('arcstart', '')) || 0;
} else if (possibleCode.includes('fixtextalign')) {
textAlign = realTextAlign;
} else if (findManaSymbolIndex(possibleCode.replace('/', '')) > -1 || findManaSymbolIndex(possibleCode.replace('/', '').split('').reverse().join('')) > -1) {
var manaSymbol = manaSymbols[findManaSymbolIndex(possibleCode.replace('/', ''))] || manaSymbols[findManaSymbolIndex(possibleCode.replace('/', '').split('').reverse().join(''))];
possibleCode = possibleCode.replace('/', '')
var manaSymbol;
if (textObject.manaPrefix && (findManaSymbolIndex(textObject.manaPrefix + possibleCode) != -1 || findManaSymbolIndex(textObject.manaPrefix + possibleCode.split('').reverse().join('')) != -1)) {
manaSymbol = manaSymbols[findManaSymbolIndex(textObject.manaPrefix + possibleCode)] || manaSymbols[findManaSymbolIndex(textObject.manaPrefix + possibleCode.split('').reverse().join(''))];
} else {
manaSymbol = manaSymbols[findManaSymbolIndex(possibleCode)] || manaSymbols[findManaSymbolIndex(possibleCode.split('').reverse().join(''))];
}
var manaSymbolSpacing = textSize * 0.04 + textManaSpacing;
var manaSymbolWidth = manaSymbol.width * textSize * 0.78;
var manaSymbolHeight = manaSymbol.height * textSize * 0.78;
var manaSymbolX = currentX + canvasMargin + manaSymbolSpacing;
var manaSymbolY = canvasMargin + textSize * 0.34 - manaSymbolHeight / 2;
if (textObject.manaPlacement) {
manaSymbolX = scaleX(textObject.manaPlacement.x[manaPlacementCounter] || 0) + canvasMargin;
manaSymbolX = scaleWidth(textObject.manaPlacement.x[manaPlacementCounter] || 0) + canvasMargin;
manaSymbolY = canvasMargin;
currentY = scaleY(textObject.manaPlacement.y[manaPlacementCounter] || 0);
currentY = scaleHeight(textObject.manaPlacement.y[manaPlacementCounter] || 0);
manaPlacementCounter ++;
newLine = true;
} else if (textObject.manaLayout) {
var layoutOption = 0;
var manaSymbolCount = splitText.length - 1;
while (textObject.manaLayout[layoutOption].max < manaSymbolCount && layoutOption < textObject.manaLayout.length - 1) {
layoutOption ++;
}
var manaLayout = textObject.manaLayout[layoutOption];
if (manaLayout.pos[manaPlacementCounter] == undefined) {
manaLayout.pos[manaPlacementCounter] = [0, 0];
}
manaSymbolX = scaleWidth(manaLayout.pos[manaPlacementCounter][0] || 0) + canvasMargin;
manaSymbolY = canvasMargin;
currentY = scaleHeight(manaLayout.pos[manaPlacementCounter][1] || 0);
manaPlacementCounter ++;
manaSymbolWidth *= manaLayout.size;
manaSymbolHeight *= manaLayout.size;
newLine = true;
}
if (textObject.manaImageScale) {
currentX -= (textObject.manaImageScale - 1) * manaSymbolWidth;
manaSymbolX -= (textObject.manaImageScale - 1) / 2 * manaSymbolWidth;
manaSymbolY -= (textObject.manaImageScale - 1) / 2 * manaSymbolHeight;
manaSymbolWidth *= textObject.manaImageScale;
manaSymbolHeight *= textObject.manaImageScale;
}
//fake shadow begins
var fakeShadow = lineCanvas.cloneNode();

View File

@@ -9,6 +9,11 @@ if (findManaSymbolIndex('cw') == -1) {
['cartoony/c5.png', 'cc', 15], ['cartoony/c6.png', 'cc', 15], ['cartoony/c7.png', 'cc', 15], ['cartoony/c8.png', 'cc', 15], ['cartoony/c9.png', 'cc', 15],
['cartoony/c10.png', 'cc', 15], ['cartoony/c11.png', 'cc', 15], ['cartoony/c12.png', 'cc', 15], ['cartoony/c13.png', 'cc', 15], ['cartoony/c14.png', 'cc', 15],
['cartoony/c15.png', 'cc', 15], ['cartoony/c16.png', 'cc', 15], ['cartoony/c17.png', 'cc', 15], ['cartoony/c18.png', 'cc', 15], ['cartoony/c19.png', 'cc', 15],
['cartoony/cc.png', 'cc', 15], ['cartoony/ct.png', 'cdark', 1], ['cartoony/cx.png', 'cc', 15], ['cartoony/cy.png', 'cc', 15], ['cartoony/cz.png', 'cc', 15],
['cartoony/cc.png', 'cc', 15], ['cartoony/ct.png', 'cc', 15], ['cartoony/cx.png', 'cc', 15], ['cartoony/cy.png', 'cc', 15], ['cartoony/cz.png', 'cc', 15],
['cartoony/cwu.png', 'cwu', 2], ['cartoony/cwb.png', 'cwb', 2], ['cartoony/cub.png', 'cub', 2], ['cartoony/cur.png', 'cur', 2], ['cartoony/cbr.png', 'cbr', 2],
['cartoony/cbg.png', 'cbg', 2], ['cartoony/crg.png', 'crg', 2], ['cartoony/crw.png', 'crw', 2], ['cartoony/cgw.png', 'cgw', 2], ['cartoony/cgu.png', 'cgu', 2],
['cartoony/cpw.png', 'cw', 4], ['cartoony/cpu.png', 'cw', 4], ['cartoony/cpb.png', 'cu', 4], ['cartoony/cpr.png', 'cu', 4], ['cartoony/cpg.png', 'cb', 4],
['cartoony/cpc.png', 'cc', 15], ['cartoony/csnow.png', 'cc', 15], ['cartoony/cinf.png', 'cc', 15], ['cartoony/ce.png'], ['cartoony/cuntap.png', 'cc', 15],
['cartoony/cflavor.png']
]);
}

View File

@@ -11,22 +11,37 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
loadScript('/js/frames/manaSymbolsCartoony.js');
// notify('The Future version adds special mana symbols. To use them, place an "F" before the following mana symbols: wubrg, 0-20, x, and hybrid mana symbols.');
//art bounds
card.artBounds = {x:0.0767, y:0.1129, width:0.8476, height:0.4429};
card.artBounds = {x:0, y:0, width:1, height:1};
autoFitArt();
//set symbol bounds
card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, vertical:'center', horizontal: 'right'};
card.setSymbolBounds = {x:0.5, y:0.9715, width:0.12, height:0.0358, vertical:'center', horizontal: 'center'};
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.01, oneLine:true, size:180/1638, manaCost:true, manaSpacing:-0.11, noVerticalCenter:true, arcRadius:2, arcStart:0.165},
title: {name:'Title', y:0.02, text:'', oneLine:true, font:'Acme-Regular', size:0.081, arcRadius:2, arcStart:-0.165, noVerticalCenter:true, outlineWidth:0.0048, color:'white'}, //, x:0.0854, width:0.8292, height:0.0543
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.2875, 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'}
mana: {name:'Mana Cost', text:'', manaCost:true, noVerticalCenter:true, size:200/1638, manaPrefix:'c', manaLayout:[
{max:1, size:1.26, pos:[[0.828, 0]]},
{max:2, size:1, pos:[[0.7854, 0.0034], [0.8734, 0.03]]},
{max:3, size:1, pos:[[0.7914, 0.0205], [0.8794, -0.01], [0.8734, 0.0548]]},
{max:4, size:0.9, pos:[[0.7927, -0.0034], [0.88, 0.0086], [0.8054, 0.0553], [0.89, 0.0715]]},
{max:7, size:0.8, pos:[[0.8687, -0.0034], [0.9007, 0.0439], [0.7934, -0.0043], [0.8274, 0.0434], [0.8667, 0.092], [0.7534, 0.04], [0.786, 0.09]]},
]},
title: {name:'Title', y:0.02, text:'', oneLine:true, font:'Acme-Regular', size:0.08, arcRadius:2, arcStart:-0.168, noVerticalCenter:true, outlineWidth:0.0048, color:'white'}, //, x:0.0854, width:0.8292, height:0.0543
type: {name:'Type', text:'', x:0.0234, y:0.6205, width:0.9534, height:0.0543, oneLine:true, font:'belerenb', size:0.0491, color:'white', outlineWidth:0.0034, font:'Acme-Regular'},
rules: {name:'Rules Text', text:'', x:0.0234, y:0.662, width:0.9534, height:0.3, size:0.0562, align:'center', color:'white', outlineWidth:0.0034, font:'Acme-Regular', manaImageScale:10/7, manaPrefix:'c'},
pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.062, font:'belerenbsc', oneLine:true, align:'center', color:'white', outlineWidth:0.0034, font:'Acme-Regular'},
pronouns: {name:'Pronouns', text:'', x:0.0234, y:0.95, width:0.9534, height:0.05, size:0.03, align:'center', color:'white', outlineWidth:0.0034, font:'Acme-Regular', manaImageScale:10/7, manaPrefix:'c'},
});
//bottom info
await loadBottomInfo({
topLeft: {text:'Art: {elemidinfo-artist}', x:0.01, y:0.9572, width:0.98, height:0.0177, oneLine:true, font:'Acme-Regular', size:0.0177, color:'white', outlineWidth:0.003},
bottomLeft: {text:'Sheepwave.com', x:0.03, y:0.9767, width:0.94, height:0.0177, oneLine:true, font:'Acme-Regular', size:0.0177, color:'white', outlineWidth:0.003},
topRight: {text:'*NOT FOR SALE*', x:0.01, y:0.9572, width:0.98, height:0.0177, oneLine:true, font:'Acme-Regular', size:0.0177, color:'white', outlineWidth:0.003, align:'right'},
wizards: {name:'wizards', text:'{ptshift0,0.0172}\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x:0.03, y:0.9767, width:0.94, height:0.0177, oneLine:true, font:'Acme-Regular', size:0.0177, color:'white', align:'right', outlineWidth:0.003},
});
setTimeout(bottomInfoEdited, 250);
}
//loads available frames
loadFramePack();

View File

@@ -13,7 +13,8 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
//resets things so that every frame doesn't have to
await resetCardIrregularities({canvas:[1500, 2100, 0.044, 1/35], resetOthers:false});
//sets card version
card.version = 'margin';
// card.version = 'margin';
card.margins = true;
//art stuff
if (card.artBounds.width == 1) {
card.artBounds.width += 0.044;

View File

@@ -1,6 +1,9 @@
document.querySelector('#hue-rotate').value = theme.huerotate;
document.querySelector('#hue-rotate-auto').value = theme.rainbow;
document.querySelector('#readable-brightness').value = theme.readablebrightness;
function resetThemeControls() {
document.querySelector('#hue-rotate').value = theme.huerotate;
document.querySelector('#hue-rotate-auto').value = theme.rainbow;
document.querySelector('#readable-brightness').value = theme.readablebrightness;
}
resetThemeControls();
var updateCSSTimer;
var canUpdateCSS = true;

View File

@@ -41,4 +41,7 @@ function resetTheme() {
theme = {huerotate:0, background:'/img/lowpolyBackground.svg', readablebrightness:0.3, rainbow:0};
localStorage.setItem('theme', JSON.stringify(theme));
updateCSS();
if (window.location.href.includes('/theme/')) {
resetThemeControls();
}
}

View File

@@ -18,7 +18,7 @@
<input id='background-url' class='input' type='url' placeholder='Enter a URL' onchange='changeThemeVar(this.value, "background");'>
<h4>Shift the Background's Hue</h4>
<input id='hue-rotate' class='input' type='range' min='0' max='360' step='1' oninput='changeThemeVar(this.value, "huerotate");'>
<h4>Enable Rainbow-Mode</h4>
<h4>Enable/Set Rainbow Speed</h4>
<input id='hue-rotate-auto' class='input' type='range' min='0' max='200' step='1' oninput='changeThemeVar(this.value, "rainbow");'>
<h3 class='margin-top'>Readable Areas</h3>
<h4>Adjust the Brightness</h4>