variable replacement working. Next button without text. example story…

… broken into smaller pieces.

Signed-off-by: Sebastian Schmittner <[email protected]>

editor/code.js

@@ -1,5 +1,5 @@
 import cytoscape from "./cytoscape.esm.min.js";
-import { toast_alert } from "../toast.js";
+import { toast_alert } from "./toast.js";
 
 var story = {};
 
@@ -268,8 +268,8 @@ function add__or_remove_media() {
     text_editor_load(active_element);
   } else {
     load_file((content) => {
-      if (!active_element || !story.sections.includes(active_element)) {
-        alert("Please section to add media to.");
+      if (!active_element || !story?.sections?.[active_element.id]) {
+        alert("Please select section to add media to.");
         return;
       }
 

viewer/bootstrap-icons-font

@@ -0,0 +1 @@
+../commons/bootstrap-icons-font/

viewer/code.js

@@ -76,7 +76,19 @@ function start_playing() {
   show_ui_components_according_to_state();
 }
 
+function replace_variables(text, variables) {
+  if (!variables || !text) {
+    return text;
+  }
+  var re = text;
+  for (const key in variables) {
+    re = re.replaceAll("${" + key + "}", variables[key]);
+  }
+  return re;
+}
+
 function load_section(id) {
+  story.state.current_section = id;
   if (!story?.sections?.[id]) {
     toast_alert("Section ${id} is missing from the story");
     return;
@@ -93,12 +105,15 @@ function load_section(id) {
   if (!text) {
     toast_alert("This section has no text");
   }
+
+  text = replace_variables(text, story.state?.variables);
+
   story_text.innerHTML = DOMPurify.sanitize(marked.parse(text));
 
   if (section?.media?.type === "image" && section?.media?.src) {
     background_image.src = section.media.src;
     background_image.style.display = "inline-block";
-  } 
+  }
 
   choices_row.innerHTML = "";
   if (section?.next) {
@@ -108,7 +123,13 @@ function load_section(id) {
       const button = col.appendChild(document.createElement("button"));
       button.className = "btn btn-primary";
       button.type = "button";
-      button.appendChild(document.createTextNode(choice?.text));
+
+      if (choice?.text) {
+        button.appendChild(document.createTextNode(choice.text));
+      } else {
+        button.innerHTML = '<i class="bi bi-arrow-right-circle-fill"></i>';
+      }
+
       button.addEventListener("click", () => {
         load_section(choice.next);
       });

viewer/index.html

@@ -9,6 +9,7 @@
     <title>Story Adventure Viewer</title>
     <link href="bootstrap.min.css" rel="stylesheet" />
     <script src="bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="bootstrap-icons-font/bootstrap-icons.min.css">
     <link href="style.css" rel="stylesheet" />
   </head>
 

viewer/style.css

@@ -37,9 +37,12 @@ body {
   font-size: x-large;
 }
 
+#story_container button {
+  font-size: x-large;
+}
+
 .container {
-  background-color: black;
-  opacity: 0.8;
+  background-color: rgba(0, 0, 0, 0.7);
 }
 
 #story_text {