From 90e0ab737b34359728f2d0e0e7f26bbd8081dde1 Mon Sep 17 00:00:00 2001 From: Pyrofab Date: Fri, 27 Oct 2023 22:15:50 +0200 Subject: [PATCH 1/3] Add support for custom layout in editor --- .../dialogue_generator/blabber-dialogue.js | 18 ++++++++++++++++++ .../dialogue_generator/dialogue-editing.js | 5 +++++ .../dialogue_generator/dialogue-init.js | 2 ++ wiki/blabber/dialogue_generator/dialogue.scss | 12 ++++++++++++ wiki/blabber/dialogue_generator/index.html | 11 ++++++++++- wiki/blabber/dialogue_generator/main-view.html | 1 + 6 files changed, 48 insertions(+), 1 deletion(-) diff --git a/wiki/blabber/dialogue_generator/blabber-dialogue.js b/wiki/blabber/dialogue_generator/blabber-dialogue.js index 0e7bac86..7a20be09 100644 --- a/wiki/blabber/dialogue_generator/blabber-dialogue.js +++ b/wiki/blabber/dialogue_generator/blabber-dialogue.js @@ -19,11 +19,16 @@ * @property {?DialogueAction} [action] * @property {?DialogueChoice[]} [choices] */ +/** + * @typedef {Object} DialogueLayout + * @property {?string} [type] + */ /** * @typedef {Object} DialogueData * @property {?Object.} [states] * @property {?string} [start_at] * @property {?boolean} [unskippable] + * @property {?DialogueLayout} [layout] */ export default class BlabberDialogue { @@ -63,6 +68,19 @@ export default class BlabberDialogue { return !!this.data.unskippable; } + /** + * + * @param {string} [layout] + * @returns {?string} + */ + layout(layout) { + if (layout !== undefined) { + this.data.layout = {type: layout}; + this.markDirty(); + } + return this.data.layout?.type; + } + /** * @returns {string[]} */ diff --git a/wiki/blabber/dialogue_generator/dialogue-editing.js b/wiki/blabber/dialogue_generator/dialogue-editing.js index 82a2b9b9..45a090ec 100644 --- a/wiki/blabber/dialogue_generator/dialogue-editing.js +++ b/wiki/blabber/dialogue_generator/dialogue-editing.js @@ -15,6 +15,7 @@ import BlabberDialogue from "./blabber-dialogue.js"; const exportButton = document.getElementById('dialogue-export'); const startInput = document.getElementById('dialogue-start-at'); const unskippableInput = document.getElementById('dialogue-unskippable'); + const dialogueLayoutInputs = document.querySelectorAll('input[name=dialogue-layout]'); const choiceEditor = document.querySelector('.dialogue-choice-editor'); const stateList = document.getElementById('dialogue-state-list'); @@ -24,6 +25,9 @@ import BlabberDialogue from "./blabber-dialogue.js"; startInput.disabled = true; startInput.addEventListener('change', e => dialogue.startAt(e.target.value)); unskippableInput.addEventListener('change', e => dialogue.unskippable(e.target.value)); + dialogueLayoutInputs.forEach((e) => e.addEventListener('change', (ev) => { + dialogue.layout(document.querySelector('input[name=dialogue-layout]:checked').value); + })) const textFormatSelect = document.getElementById('dialogue-text-format'); @@ -81,6 +85,7 @@ import BlabberDialogue from "./blabber-dialogue.js"; } unskippableInput.checked = dialogue.unskippable(); + dialogueLayoutInputs.forEach((e) => e.checked = e.value === dialogue.layout()); startInput.value = dialogue.startAt(); } diff --git a/wiki/blabber/dialogue_generator/dialogue-init.js b/wiki/blabber/dialogue_generator/dialogue-init.js index 6afb4599..a3ba2597 100644 --- a/wiki/blabber/dialogue_generator/dialogue-init.js +++ b/wiki/blabber/dialogue_generator/dialogue-init.js @@ -36,6 +36,7 @@ import BlabberDialogue from "./blabber-dialogue.js"; e.preventDefault(); const unskippable = document.getElementById('dialogue-unskippable').checked; + const layout = document.querySelector('input[name=layout]:checked').value; const textFormat = textFormatInputs.find((it) => it.checked)?.value; if (![filenameField, startStateField, endStateField].every((e) => validateIdentifierField(e))) { @@ -55,6 +56,7 @@ import BlabberDialogue from "./blabber-dialogue.js"; const startState = startStateField.value; const endState = endStateField.value; dialogue.filename = filenameField.value; + dialogue.layout(layout); dialogue.unskippable(unskippable); dialogue.startAt(startState); dialogue.data.states = { diff --git a/wiki/blabber/dialogue_generator/dialogue.scss b/wiki/blabber/dialogue_generator/dialogue.scss index 116d81a0..29b25701 100644 --- a/wiki/blabber/dialogue_generator/dialogue.scss +++ b/wiki/blabber/dialogue_generator/dialogue.scss @@ -239,6 +239,18 @@ input[type=text] { } } + .dialogue-layout-selection { + display: inline-flex; + flex-direction: row; + align-items: center; + padding-right: 1em; + gap: 0.2em; + label { + margin-bottom: 0; + margin-right: 2em; + } + } + & > * { display: flex; flex-direction: column; diff --git a/wiki/blabber/dialogue_generator/index.html b/wiki/blabber/dialogue_generator/index.html index ea9fde95..ab106664 100644 --- a/wiki/blabber/dialogue_generator/index.html +++ b/wiki/blabber/dialogue_generator/index.html @@ -31,7 +31,7 @@

Create a dialogue

- Which format should this editor use for texts? + Which format should this editor use for texts? @@ -42,6 +42,15 @@

Create a dialogue

+
+ What layout do you want your dialogue to use for regular states? + + + + + + +
diff --git a/wiki/blabber/dialogue_generator/main-view.html b/wiki/blabber/dialogue_generator/main-view.html index de863866..c1669a19 100644 --- a/wiki/blabber/dialogue_generator/main-view.html +++ b/wiki/blabber/dialogue_generator/main-view.html @@ -28,6 +28,7 @@

Global Properties