GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

outline/shadow fix and restyle

Browse Source
This commit is contained in:
Kyle
2020-07-27 17:56:10 -07:00
parent b772555d43
commit ffe307b9e0
2 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
data/scripts/main.js
View File

@@ -466,6 +466,10 @@ function writeText(textObjectList, targetContext) {
textParagraphContext.clearRect(0, 0, textParagraphCanvas.width, textParagraphCanvas.height)
var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0, permanentLineShift = 0, temporaryLineShift = 0, fontStyle = '', manaCost = false, canWriteText = true
textObjectList[i].otherParameters.forEach(item => eval(item))
textLineContext.shadowOffsetX = shadow
textLineContext.shadowOffsetY = shadow
textLineContext.shadowBlur = 0
textLineContext.shadowColor = 'black'
textLineContext.strokeStyle = outline
textLineContext.lineWidth = outlineThickness
textFont = textObjectList[i].font
@@ -538,11 +542,18 @@ function writeText(textObjectList, targetContext) {
} else if (possibleCodeLower == 'loadtextx') {
textX = savedTextX
} else if (possibleCodeLower.includes('outline:')) {
console.log(parseInt(possibleCodeLower.replace('outline:', '').split(',')[1]), possibleCodeLower.replace('outline:', '').split(',')[1], possibleCodeLower.replace('outline:', '').split(','))
if (parseInt(possibleCodeLower.replace('outline:', '').split(',')[1]) == 0) {
outline = false
} else {
outline = true
textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0]
textLineContext.lineWidth = parseInt(possibleCodeLower.replace('outline:', '').split(',')[1])
}
} else if (possibleCodeLower.includes('shadow')) {
shadow = parseInt(possibleCodeLower.replace('shadow', ''))
var shadowOffset = parseInt(possibleCodeLower.replace('shadow', ''))
textLineContext.shadowOffsetX = shadowOffset
textLineContext.shadowOffsetY = shadowOffset
} else if (possibleCodeLower.includes('fontcolor')) {
currentFontColor = possibleCodeLower.slice(9, possibleCodeLower.length)
textLineContext.fillStyle = currentFontColor
@@ -617,12 +628,7 @@ function writeText(textObjectList, targetContext) {
}
}
}
if (shadow > 0) {
textLineContext.fillStyle = 'black'
textLineContext.fillText(wordToWrite, textX + shadow, textCanvasBuffer + textSize + shadow)
textLineContext.fillStyle = currentFontColor
}
if (outline != undefined) {
if (outline == true) {
textLineContext.strokeText(wordToWrite, textX, textCanvasBuffer + textSize)
}
textLineContext.fillText(wordToWrite, textX, textCanvasBuffer + textSize)

45
data/styles/main.css
View File

@@ -211,15 +211,13 @@ img {
padding: 0.5rem;
}
textarea {
resize: vertical;
min-height: 4rem;
max-height: 12rem;
}
/*Hides anything*/
.hidden {
display: none;
}
/*Overrides hiding custom uploaded frame images*/
.hidden.frameClassCustom {
display: inline-block;
}
@@ -241,28 +239,47 @@ textarea {
padding: 0.5rem 0;
}
/*Gives non-text inputs the pointer cursor*/
input:not([type='text']), select, option, button {
cursor: pointer;
}
/*Styles most of the inputs, except checkboxes*/
input:not([type='checkbox']), textarea, button, select {
font: inherit;
color: inherit;
width: 100%;
background: var(--layer-background);
border: none;
outline: none;
border-style: solid none none none;
padding: 0.25rem;
margin-top: 0.25rem;
background: var(--layer-background);
border-top: 0.1rem solid var(--interactable-unselected);
border-radius: 0.1rem;
transition: 0.25s;
position: relative;
top: 0;
}
input:not([type='checkbox']):active, textarea:active, button:active {
padding: 0.1rem;
border: 0.1rem solid var(--interactable-unselected);
/*Slightly lifts inputs upon hovering over them*/
input:not([type='checkbox']):hover, textarea:hover, button:hover, select:hover {
top: -0.1rem;
box-shadow: 0 0.125rem 0.25rem black;
}
/*Shows that inputs that aren't checkboxes are in use*/
input:not([type='checkbox']):active, button:active, input:not([type='checkbox']):not([type='input']):focus, textarea:focus, select:active {
border-top-color: var(--interactable-selected);
}
/*Styles checboxes*/
input[type='checkbox'] {
position: relative;
top: 0.25rem;
width: 1rem;
height: 1rem;
}
input[type='checkbox'], select, option, input[type='file'], button {
cursor: pointer;
/*Allows resizing of the textarea*/
textarea {
resize: vertical;
min-height: 6rem;
max-height: 12rem;
}
@keyframes fade-in {
@@ -395,6 +412,7 @@ input[type='checkbox'], select, option, input[type='file'], button {
}
#textCodeReference {
background: var(--interactable-unselected);
display: grid;
grid-template-columns: 7rem auto;
margin-top: 1rem;
@@ -406,6 +424,9 @@ input[type='checkbox'], select, option, input[type='file'], button {
background: var(--layer-background);
padding: 0.25rem;
}
#textCodeReference > div:nth-child(2n + 1):not(:nth-child(1)) {
user-select: all;
}
.notificationContainer {