Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

text code reference

Browse Source
This commit is contained in:
Kyle
2020-03-31 11:36:57 -07:00
parent a2fc2d6fb9
commit 4b478312c2
3 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
data/scripts/main.js
View File

@@ -593,6 +593,7 @@ function initialize() {
document.getElementById('inputInfoNumber').value = date.getFullYear() document.getElementById('inputInfoNumber').value = date.getFullYear()
window.updateTextDelay = setTimeout(drawCardTextReal, 250) window.updateTextDelay = setTimeout(drawCardTextReal, 250)
setTimeout(bottomInfoUpdated, 500) setTimeout(bottomInfoUpdated, 500)
textCodeReference()
} }
function bottomInfoUpdated() { function bottomInfoUpdated() {
@@ -815,23 +816,32 @@ function autoCrop(targetImage, source = targetImage.src) {
} }
} }
} }
/*
var n = pix.x.length - 1; var textCodeReferenceArray = [
//Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas ['Code', 'Result'],
width = pix.x[n] - pix.x[0]; ['{linenospace}', 'Moves to the next line without an extra space'],
height = pix.y[n] - pix.y[0]; ['{bar}', 'Moves to the next line and draws the flavor text bar'],
var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1); ['{flavor}', 'Moves to the next line, draws the flavor text bar, and italicizes the text'],
//Resizes the canvas and draws cropped image ['{i}', 'Italicizes the text'],
cropCanvas.width = width + 1; ['{/i}', 'Removes italicization'],
cropCanvas.height = height + 1; ['{fontsize#}', 'Changes the font size by # pixels'],
cropContext.putImageData(cropped, 0, 0); ['{fontcolor#}', 'Changes the font color to #'],
//Saves the newly cropped image to the given image ['{left}', 'Aligns the text to the left'],
setTimeout(function() {targetImage.src = cropCanvas.toDataURL();}, 100) ['{center}', 'Aligns the text to the center'],
} ['{right}', 'Aligns the text to the right'],
} ['{left#}', 'Shifts the following text # pixels to the left'],
} ['{right#}', 'Shifts the following text # pixels to the right'],
['{up#}', 'Shifts the following text # pixels up'],
['{down#}', 'Shifts the following text # pixels down'],
['{outline*,#}', 'Outlines the following text by # pixels in * color'],
['{shadow#}', 'Adds a shadow # pixels away from the following text']
]
function textCodeReference() {
// for (var i = 0; i < textCodeReferenceArray.length; i++) {
// document.getElementById('textCodeReference')
// }
textCodeReferenceArray.forEach(item => document.getElementById('textCodeReference').innerHTML += '<div>' + item[0] + '</div><div>' + item[1] + '</div>')
} }
*/

3
index.html
View File

@@ -75,6 +75,9 @@
Width: <input id='textEditorWidth' type='number' oninput='cardTextEdited()'> Width: <input id='textEditorWidth' type='number' oninput='cardTextEdited()'>
Height: <input id='textEditorHeight' type='number' oninput='cardTextEdited()'> Height: <input id='textEditorHeight' type='number' oninput='cardTextEdited()'>
</div> </div>
<div id='textCodeReference'>
</div>
</div> </div>
<div id='artTab' class='hidden'> <div id='artTab' class='hidden'>
<div class="splitGrid"> <div class="splitGrid">

12
styles.css
View File

@@ -353,6 +353,18 @@ input[type='checkbox'], select, option, input[type='file'], button {
text-align: justify; text-align: justify;
} }
#textCodeReference {
display: grid;
grid-template-columns: 7rem auto;
margin-top: 0.5rem;
grid-gap: 0.1rem;
padding: 0.5rem 1rem 0 1rem;
}
#textCodeReference > div {
background: var(--input-color);
padding: 0.1rem;
}