diff --git a/public/images/dialogue/controls.png b/public/images/dialogue/controls.png deleted file mode 100644 index 56e2bf0..0000000 Binary files a/public/images/dialogue/controls.png and /dev/null differ diff --git a/public/images/dialogue/controls/autofast.png b/public/images/dialogue/controls/autofast.png new file mode 100644 index 0000000..fae3215 Binary files /dev/null and b/public/images/dialogue/controls/autofast.png differ diff --git a/public/images/dialogue/controls/autoskip.png b/public/images/dialogue/controls/autoskip.png new file mode 100644 index 0000000..a612b54 Binary files /dev/null and b/public/images/dialogue/controls/autoskip.png differ diff --git a/public/images/dialogue/controls/hidefast.png b/public/images/dialogue/controls/hidefast.png new file mode 100644 index 0000000..3184cb9 Binary files /dev/null and b/public/images/dialogue/controls/hidefast.png differ diff --git a/public/images/dialogue/controls/hideskip.png b/public/images/dialogue/controls/hideskip.png new file mode 100644 index 0000000..55aa04d Binary files /dev/null and b/public/images/dialogue/controls/hideskip.png differ diff --git a/src/components/DialogueInput.astro b/src/components/DialogueInput.astro index 587f27e..c5e096d 100644 --- a/src/components/DialogueInput.astro +++ b/src/components/DialogueInput.astro @@ -1,5 +1,5 @@ --- - +import { eyeOn } from "../scripts/util.js"; ---
@@ -105,6 +105,25 @@ + + Dialogue Controls + + + +

Control Type

+ + + +

 

+ + + + Export See explanation @@ -210,7 +229,7 @@ - + @@ -390,4 +409,38 @@ .wholerow { padding: 0 5px; } + + p.tool-label { + /* width: min-content; */ + margin: 0px 0px 4px 6px; + text-align: left; + } + + button.but { + border: 0; + width: 40px; + height: 40px; + background-color: var(--darker); + border-radius: 4px; + color: lightgray; + font-family: "pretendard"; + text-align: center; + + transition-property: color, background-color, box-shadow; + transition-duration: 0.1s; + transition-timing-function: ease-in-out; + + margin: 0px; + margin-right: 4px; + } + + button.but:hover { + background-color: #f4d2594b; + color: white; + text-decoration: none; + + transition-property: color, background-color, box-shadow; + transition-duration: 0.1s; + transition-timing-function: ease-in-out; + } diff --git a/src/pages/update-log.md b/src/pages/update-log.md index 487cb0f..ac88d2f 100644 --- a/src/pages/update-log.md +++ b/src/pages/update-log.md @@ -9,6 +9,21 @@ embeddesc: the update log ---
+## Dialogue Control Types `Dec 8, 2023` + +- added four new dialogue control types (from the Neverland Update!) + - Auto-Log-Skip + - Auto-Log-Fast + - Hide-Auto-Log-Skip + - Hide-Auto-Log-Fast +- added the ability to hide UI + - this also hides the watermark as it's just all gradients. + +
+ +--- +
+ ## Numbers `Dec 6, 2023` - added Numbers to the logo generator diff --git a/src/scripts/dialogue.js b/src/scripts/dialogue.js index 7b28073..558f166 100644 --- a/src/scripts/dialogue.js +++ b/src/scripts/dialogue.js @@ -1,4 +1,4 @@ -import { draw9slice, dataURLtoFile } from "./util.js"; +import { draw9slice, dataURLtoFile, eyeOn, eyeOff } from "./util.js"; import { GIFEncoder, quantize, applyPalette } from "https://unpkg.com/gifenc"; import { downloadZip } from "https://cdn.jsdelivr.net/npm/client-zip/index.js" import { Buffer } from "buffer"; @@ -46,7 +46,7 @@ arrow.src = `/nikke-font-generator/images/dialogue/arrow.png`; let controls = new Image(); controls.crossOrigin = "anonymous" -controls.src = `/nikke-font-generator/images/dialogue/controls.png`; +controls.src = `/nikke-font-generator/images/dialogue/controls/autoskip.png`; let choicepng = new Image(); choicepng.crossOrigin = "anonymous" @@ -65,7 +65,7 @@ let rng = [ "Commander, do you perhaps have the money to buy me some soda?", "Let's do this again.\nBetween bullets and food, which one do you need more?", "I use my hands for two things.\nOne, to play the game, and two, to hold the Bible.", - "How would one make my swimsuit?\nThree standard medical masks should be fine.", + "How would someone make my swimsuit?\nThree standard medical masks should be fine.", "Ever thought about putting all our month's allowance on soda?", "Wanna see me do a backflip?", "Doing this again? Putting false words on me?", @@ -79,9 +79,11 @@ setTimeout(() => { let tpos = [125, 877]; let dpos = [125, 929]; let cpos = [110, 883]; -let copos = [769, 14]; +let copos = [773, 18]; let arpos = [953, 1027]; +let coposoffset = [-6, -6]; + let tsize = 25; let dsize = 23; let scaledc = 100; @@ -192,6 +194,26 @@ document.querySelectorAll('#size')[0].addEventListener('change', () => { generateText(text2, subtext2) }); +document.querySelectorAll('#cotype')[0].addEventListener('change', () => { + let n = document.getElementById('cotype').value; + + let prev = [coposoffset[0], coposoffset[1]]; + + if (n.startsWith('auto')) { + coposoffset = [-6, -6]; + } else if (n.startsWith('hide')) { + coposoffset = [-102, -11]; + } + + copos[0] += (coposoffset[0] - prev[0]) * scaledc / 100; + copos[1] += (coposoffset[1] - prev[1]) * scaledc / 100; + + controls.src = `/nikke-font-generator/images/dialogue/controls/${n}.png`; + controls.onload = () => { + generateText(text2, subtext2) + } +}); + document.querySelectorAll('#color')[0].addEventListener('change', () => { color = document.getElementById('color').value; generateText(text2, subtext2) @@ -679,7 +701,16 @@ let controlsOn = true; document.querySelectorAll('#controls-toggle')[0].addEventListener('click', () => { controlsOn = !controlsOn; - document.querySelectorAll('#controls-toggle')[0].innerHTML = "Top right controls: " + (controlsOn ? "ON" : "OFF"); + document.querySelectorAll('#controls-toggle')[0].innerHTML = controlsOn ? eyeOn : eyeOff; + generateText(text2, subtext2) +}); + +let uiOn = true; + +document.querySelectorAll('#ui-toggle')[0].addEventListener('click', () => { + uiOn = !uiOn; + + document.querySelectorAll('#ui-toggle')[0].innerHTML = "UI: " + (uiOn ? "ON" : "OFF"); generateText(text2, subtext2) }); @@ -1074,97 +1105,100 @@ function generateText(text, subtext, exporting=false) { let dsc = dsize / 23; - if (document.getElementById('choices').value.trim().length > 0) { - let shit = document.getElementById('choices').value; - shit = shit.replaceAll('\\n', String.fromCharCode(13, 10)); + if (uiOn) { + if (document.getElementById('choices').value.trim().length > 0) { + let shit = document.getElementById('choices').value; + shit = shit.replaceAll('\\n', String.fromCharCode(13, 10)); - let split = shit.trim().split('\n'); - if (split.length > 1) { - ctx.fillStyle = "rgba(0, 0, 0, 0.6)"; - ctx.fillRect(0, 0, canvassize[0], canvassize[1]); - } + let split = shit.trim().split('\n'); + if (split.length > 1) { + ctx.fillStyle = "rgba(0, 0, 0, 0.6)"; + ctx.fillRect(0, 0, canvassize[0], canvassize[1]); + } - // ctx.drawImage(img2, 0, 0); - drawGradients(true); + drawGradients(true); - let startY = (canvassize[1] * (765 / 1080)) - ((choicepng.height * split.length) + (14 * (split.length - 1))) / 2; + let startY = (canvassize[1] * (765 / 1080)) - ((choicepng.height * split.length) + (14 * (split.length - 1))) / 2; - let curY = startY; - for (let i = 0; i < split.length; i++) { - let item = split[i]; + let curY = startY; + for (let i = 0; i < split.length; i++) { + let item = split[i]; - ctx.drawImage(choicepng, (canvassize[0] - choicepng.width) / 2, curY); + ctx.drawImage(choicepng, (canvassize[0] - choicepng.width) / 2, curY); - ctx.font = "21px PEB"; - ctx.fillStyle = "#ffffff"; - ctx.textBaseline = "middle"; - ctx.textAlign = "center"; - ctx.fillText(item.trim(), canvassize[0] / 2, curY + choicepng.height / 2); + ctx.font = "21px PEB"; + ctx.fillStyle = "#ffffff"; + ctx.textBaseline = "middle"; + ctx.textAlign = "center"; + ctx.fillText(item.trim(), canvassize[0] / 2, curY + choicepng.height / 2); - curY += choicepng.height + 14; - } + curY += choicepng.height + 14; + } - } else if (document.getElementById('actionbox').value.trim().length > 0) { - drawGradients(true); + } else if (document.getElementById('actionbox').value.trim().length > 0) { + drawGradients(true); - let ay = canvassize[1] * (952 / 1080) - 248 * (scalena / 100) / 2; - let result = canvassize[0] - 203 * 2 > 674 ? canvassize[0] - 203 * 2 : 674; + let ay = canvassize[1] * (952 / 1080) - 248 * (scalena / 100) / 2; + let result = canvassize[0] - 203 * 2 > 674 ? canvassize[0] - 203 * 2 : 674; - let xoff = parseInt(document.getElementById('xposna').value); - let yoff = parseInt(document.getElementById('yposna').value); + let xoff = parseInt(document.getElementById('xposna').value); + let yoff = parseInt(document.getElementById('yposna').value); - draw9slice(ctx, action, [54, 54, 566, 140], (canvassize[0] - result * (scalena / 100)) / 2 + xoff, ay + yoff, result * (scalena / 100), 248 * scalena / 100); + draw9slice(ctx, action, [54, 54, 566, 140], (canvassize[0] - result * (scalena / 100)) / 2 + xoff, ay + yoff, result * (scalena / 100), 248 * scalena / 100); - ctx.font = dsize + "px PB"; - ctx.fillStyle = "#dcdcdc"; - ctx.textBaseline = "top"; - ctx.textAlign = "center"; + ctx.font = dsize + "px PB"; + ctx.fillStyle = "#dcdcdc"; + ctx.textBaseline = "top"; + ctx.textAlign = "left"; - let cw = ((result * scalena / 100) - 54 - (action.width - (54 + 566))); - let ch = (248 * scalena / 100 - 54 - (action.height - (54 + 140))) - let lines = getLinesForParagraphs(ctx, document.getElementById('actionbox').value.trim(), cw - 32 * 2); - let ath = ((39 * dsc) * lines.length) + let cw = ((result * scalena / 100) - 54 - (action.width - (54 + 566))); + let ch = (248 * scalena / 100 - 54 - (action.height - (54 + 140))) + let lines = getLinesForParagraphs(ctx, document.getElementById('actionbox').value.trim(), cw - 32 * 2); + let ath = ((39 * dsc) * lines.length) - for (let i = 0; i < lines.length; i++) { - ctx.fillText(lines[i], canvassize[0] / 2 + xoff, (ay + 248 * (scalena / 100) / 2 - ath / 2) + (7 * dsc) + 4 + ((39 * dsc) * i) + yoff, cw - 32 * 2); - } + for (let i = 0; i < lines.length; i++) { + ctx.fillText(lines[i], (canvassize[0] - ctx.measureText(lines[i]).width) / 2 + xoff, (ay + 248 * (scalena / 100) / 2 - ath / 2) + (7 * dsc) + 4 + ((39 * dsc) * i) + yoff, cw - 32 * 2); + } - if (arrowOn) { - ctx.drawImage(arrow, (canvassize[0] + cw) / 2 - 27 + xoff + (document.getElementById('xposar').value - 953) / scalena / 100, canvassize[1] * (952 / 1080) + (ch / 2) - 29 + yoff + (document.getElementById('yposar').value - 1027) / scalena / 100, arrow.width * scalear / 100, arrow.height * scalear / 100); - } - } else { - // ctx.drawImage(img, 0, 0) - drawGradients(false); + if (arrowOn) { + ctx.drawImage(arrow, (canvassize[0] + cw) / 2 - 27 + xoff + (document.getElementById('xposar').value - 953) / scalena / 100, canvassize[1] * (952 / 1080) + (ch / 2) - 29 + yoff + (document.getElementById('yposar').value - 1027) / scalena / 100, arrow.width * scalear / 100, arrow.height * scalear / 100); + } + } else { + // ctx.drawImage(img, 0, 0) + drawGradients(false); - ctx.fillStyle = color; - ctx.fillRect(cpos[0], cpos[1], 5 * scalecb / 100, 24 * scalecb / 100); + ctx.fillStyle = color; + ctx.fillRect(cpos[0], cpos[1], 5 * scalecb / 100, 24 * scalecb / 100); - ctx.font = tsize + "px PEB"; - ctx.fillStyle = "#ffffff"; - ctx.textBaseline = "top"; - ctx.fillText(text, tpos[0], tpos[1] + 8, canvassize[0] - 250); + ctx.font = tsize + "px PEB"; + ctx.fillStyle = "#ffffff"; + ctx.textBaseline = "top"; + ctx.fillText(text, tpos[0], tpos[1] + 8, canvassize[0] - 250); - ctx.font = dsize + "px PB"; - ctx.fillStyle = "#dcdcdc"; - ctx.textBaseline = "top"; + ctx.font = dsize + "px PB"; + ctx.fillStyle = "#dcdcdc"; + ctx.textBaseline = "top"; - let lines = getLinesForParagraphs(ctx, subtext, canvassize[0] - 250) + let lines = getLinesForParagraphs(ctx, subtext, canvassize[0] - 250) - for (let i = 0; i < lines.length; i++) { - ctx.fillText(lines[i], dpos[0], dpos[1] + (7 * dsc) + ((39 * dsc) * i), canvassize[0] - 250); + for (let i = 0; i < lines.length; i++) { + ctx.fillText(lines[i], dpos[0], dpos[1] + (7 * dsc) + ((39 * dsc) * i), canvassize[0] - 250); + } + + if (arrowOn) { + ctx.drawImage(arrow, arpos[0], arpos[1], arrow.width * scalear / 100, arrow.height * scalear / 100); + } } - if (arrowOn) { - ctx.drawImage(arrow, arpos[0], arpos[1], arrow.width * scalear / 100, arrow.height * scalear / 100); + if (controlsOn) { + ctx.drawImage(controls, copos[0], copos[1], controls.width * scaledc / 100, controls.height * scaledc / 100); } - } - if (controlsOn) { - ctx.drawImage(controls, copos[0], copos[1], controls.width * scaledc / 100, controls.height * scaledc / 100); + ctx.globalAlpha = 0.1; + ctx.drawImage(wmrk, 16, -16, 128, 128); + } else { + drawGradients(true); } - - ctx.globalAlpha = 0.1; - ctx.drawImage(wmrk, 16, -16, 128, 128); } // https://stackoverflow.com/questions/2936112/text-wrap-in-a-canvas-element diff --git a/src/scripts/util.js b/src/scripts/util.js index 2ed8afa..cfc7f52 100644 --- a/src/scripts/util.js +++ b/src/scripts/util.js @@ -26,6 +26,9 @@ export function draw9slice(ctx, img, squareslice, x, y, w, h) { ctx.drawImage(img, sx, sy, sw, sh, x + sx, y + sy, cw, ch); // center } +export const eyeOn = `` +export const eyeOff = `` + export function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],