Skip to content

Commit

Permalink
dialogue types
Browse files Browse the repository at this point in the history
  • Loading branch information
@skuqre
skuqre committed Dec 8, 2023
1 parent 7fb33b4 commit b2e1dcc
Show file tree
Hide file tree
Showing 9 changed files with 178 additions and 73 deletions.
Binary file removed public/images/dialogue/controls.png
View file
Binary file not shown.
Binary file added public/images/dialogue/controls/autofast.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dialogue/controls/autoskip.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dialogue/controls/hidefast.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dialogue/controls/hideskip.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 55 additions & 2 deletions src/components/DialogueInput.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { eyeOn } from "../scripts/util.js";
---

<div class="input-fields">
Expand Down Expand Up @@ -105,6 +105,25 @@
</td>
</tr>

<th>
Dialogue Controls
</th>
<tr>
<td colspan="2" style="vertical-align: top;">
<p class="tool-label">Control Type</p>
<select id="cotype" name="Control Type" style="position: inherit; margin-left: 4px; width: calc(100% - 8px);">
<option value="autoskip">Auto-Log-Skip (Default)</option>
<option value="autofast">Auto-Log-Fast</option>
<option value="hideskip">Hide-Auto-Log-Skip</option>
<option value="hidefast">Hide-Auto-Log-Fast</option>
</select>
</td>
<td>
<p class="tool-label">&nbsp;</p>
<button class="but" id="controls-toggle" style="margin-bottom: 4px;" set:html={eyeOn}></button>
</td>
</tr>

<th>
Export <span style="font-size: 13px"><a href="/nikke-font-generator/what-is/export-types">See explanation</a></span>
</th>
Expand Down Expand Up @@ -210,7 +229,7 @@
</tr>
<tr>
<td colspan="3" class="wholerow">
<button class="whole-row" id="controls-toggle">Top right controls: ON</button>
<button class="whole-row" id="ui-toggle">UI: ON</button>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -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;
}
</style>
15 changes: 15 additions & 0 deletions src/pages/update-log.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,21 @@ embeddesc: the update log
---
<br>

## 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.

<br>

---
<br>

## Numbers `Dec 6, 2023`

- added Numbers to the logo generator
Expand Down
176 changes: 105 additions & 71 deletions src/scripts/dialogue.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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"
Expand All @@ -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?",
Expand All @@ -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;
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
});

Expand Down Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions src/scripts/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<svg clip-rule="evenodd" fill-rule="evenodd" fill="rgba(211, 211, 211)" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 5c-4.078 0-7.742 3.093-9.853 6.483-.096.159-.145.338-.145.517s.048.358.144.517c2.112 3.39 5.776 6.483 9.854 6.483 4.143 0 7.796-3.09 9.864-6.493.092-.156.138-.332.138-.507s-.046-.351-.138-.507c-2.068-3.403-5.721-6.493-9.864-6.493zm8.413 7c-1.837 2.878-4.897 5.5-8.413 5.5-3.465 0-6.532-2.632-8.404-5.5 1.871-2.868 4.939-5.5 8.404-5.5 3.518 0 6.579 2.624 8.413 5.5zm-8.411-4c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4zm0 1.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z" fill-rule="nonzero"/></svg>`
export const eyeOff = `<svg clip-rule="evenodd" fill-rule="evenodd" fill="rgba(211, 211, 211)" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m17.069 6.546 2.684-2.359c.143-.125.32-.187.497-.187.418 0 .75.34.75.75 0 .207-.086.414-.254.562l-16.5 14.501c-.142.126-.319.187-.496.187-.415 0-.75-.334-.75-.75 0-.207.086-.414.253-.562l2.438-2.143c-1.414-1.132-2.627-2.552-3.547-4.028-.096-.159-.144-.338-.144-.517s.049-.358.145-.517c2.111-3.39 5.775-6.483 9.853-6.483 1.815 0 3.536.593 5.071 1.546zm2.319 1.83c.966.943 1.803 2.014 2.474 3.117.092.156.138.332.138.507s-.046.351-.138.507c-2.068 3.403-5.721 6.493-9.864 6.493-1.297 0-2.553-.313-3.729-.849l1.247-1.096c.795.285 1.626.445 2.482.445 3.516 0 6.576-2.622 8.413-5.5-.595-.932-1.318-1.838-2.145-2.637zm-3.434 3.019c.03.197.046.399.046.605 0 2.208-1.792 4-4 4-.384 0-.756-.054-1.107-.156l1.58-1.389c.895-.171 1.621-.821 1.901-1.671zm-.058-3.818c-1.197-.67-2.512-1.077-3.898-1.077-3.465 0-6.533 2.632-8.404 5.5.853 1.308 1.955 2.567 3.231 3.549l1.728-1.519c-.351-.595-.553-1.289-.553-2.03 0-2.208 1.792-4 4-4 .925 0 1.777.315 2.455.843zm-2.6 2.285c-.378-.23-.822-.362-1.296-.362-1.38 0-2.5 1.12-2.5 2.5 0 .36.076.701.213 1.011z" fill-rule="nonzero"/></svg>`

export function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
Expand Down

0 comments on commit b2e1dcc

Please sign in to comment.