search

JirkaDellOro / FUDGE_Story

A FUDGE module for the easy development of interactive stories, visual novels and simple adventure games
https://jirkadelloro.github.io/FUDGE_Story/
7 stars 9 forks source link

Inputfeld in Textzeile einbringen ohne Zeilenumbruch #25

Open OrianeJoublin opened 2 years ago

OrianeJoublin commented 2 years ago

Wie kann man ein Inputfeld in derselben Zeile haben mit Text davor und danach? Also quasi in einer Zeile "I am __" (mit Anführungszeichen direkt hinter dem Feld) und dann nächste Zeile den Rest. Gerade wird jedes Mal der restliche Text gelöscht bevor der Text nach dem Inputfeld erscheint. Riem wusste da auf die Schnelle auch keine Lösung zu.

Code: https://github.com/OrianeJoublin/VisualNovel/blob/main/Template/Source/Scenes/S3_SceneWind1.ts Laufende Novel (direkt in der ersten Szene): https://orianejoublin.github.io/VisualNovel/Template/index.html

image

JirkaDellOro commented 2 years ago

Auch das sollte mit CSS leicht machbar sein. Das Input-Feld wird einfach als Element in die Textausgabe mit hineingehängt und wird ohne weiteres Styling als Inline-Element dargestellt. tell allerdings gibt die Texte in div-Elementen aus, die als Block dargestellt werden und die ganze Breite einnehmen. Du musst also den tell-Kommandos vor und nach dem getInput eine CSS-Klasse benennen, welche die Darstellung als inline oder inline-block erzwingt. Hierzu nutzt Du das display-Attribut.

Rina14 commented 2 years ago

was mir hier noch auffällt: Du kannst auch einfach null statt characters.narrator (und display: none in CSS) angeben, wenn du keinen Charakternamen angezeigt haben möchtest.

JirkaDellOro commented 2 years ago

Ist das geklärt und kann geschlossen werden?

OrianeJoublin commented 2 years ago

Nee, ich wollte es gleich ausprobieren, hatte bisher keine Zeit

OrianeJoublin commented 2 years ago

Okay, also ich habe es jetzt ausprobiert und es funktioniert leider nicht.

JirkaDellOro commented 2 years ago

Dein Code scheint noch nicht aktualisiert auf Github, so kann ich nicht sehen, was Du gemacht hast...

OrianeJoublin commented 2 years ago

Ich hab es jetzt aktualisiert.

JirkaDellOro commented 2 years ago

Ah... ich verstehe erst jetzt das Problem, denke ich.

Das I'm erscheint ja schon jetzt auf der gleichen Zeile wie das Input-Feld, aber es geht nicht weiter danach, korrekt?

Das wäre auch entsprechend des Codes korrekt, weil Du ja auf den Input wartest.

Probiere Folgendes: Speech gibt dir ein Versprechen, Input von deinem Nutzeri zu liefern. Warte nicht an Ort und Stelle, bis das Versprechen erfüllt ist, sondern merke es dir mit Hilfe einer neuen Variable. Schreibe statt dataForSave.nameProtagonist = await ƒS.Speech.getInput(); jetzt let promiseName: Promise<string> = ƒS.Speech.getInput();

Dann solltest Du zunächst den Text nach dem Input-Feld darstellen können. Erst wenn Du damit fertig bist, wartest Du auf die Erfüllung. dataForSave.nameProtagonist = await promiseName;

OrianeJoublin commented 2 years ago

Ja genau. Ich hab es gerade ausprobiert, aber jetzt erscheint gar kein Inputfeld mehr und die zwei Tell Texte vor und nach dem eigentlichen Inputfeld werden trotzdem erst nacheinander eingeblendet.