Also use tabs for the game

src/main.rs

@@ -20,6 +20,7 @@ use data_stream::{
     from_stream, to_stream,
 };
 use header_config::parse_config;
+use indexmap::IndexMap;
 use maud::html;
 use percent_encoding::percent_decode_str;
 use pukram2html::{Settings, convert, convert_extended, convert_subheader};
@@ -652,35 +653,26 @@ fn handle_relative_connection(
         .parent()
         .map(|parent| parent.with_extension("mlc"));
 
-    if let Some(config_map) = config_map {
+    #[derive(Default)]
-        if render_novel(
+    struct Section {
+        title: Box<str>,
+        lines: Vec<String>,
+        config_map: Option<IndexMap<Box<str>, Box<str>>>,
+    }
+
+    let mut sections = Vec::new();
+
+    if config_map.is_some() {
+        sections.push(Section {
+            title: "Game".into(),
+            lines: Vec::new(),
             config_map,
-            file_paths.pk,
+        });
-            mlc_path.as_deref(),
-            file_paths.mld,
-            relative_path,
-            &mut stream,
-            choice,
-            progress,
-        )
-        .is_err()
-        {
-            fail(stream);
-            return;
-        }
     } else {
         let Ok(pk_file) = File::open(file_paths.pk) else {
             unreachable!();
         };
 
-        #[derive(Default)]
-        struct Section {
-            title: Box<str>,
-            lines: Vec<String>,
-        }
-
-        let mut sections = Vec::new();
-
         let mut current_section = Section::default();
 
         for line in BufReader::new(pk_file).lines() {
@@ -694,6 +686,7 @@ fn handle_relative_connection(
                 current_section = Section {
                     title: title.into(),
                     lines: vec![line],
+                    config_map: None,
                 };
 
                 continue;
@@ -703,12 +696,13 @@ fn handle_relative_connection(
         }
 
         sections.push(current_section);
+    }
 
-        let count = sections.len();
+    let count = sections.len();
 
-        let _ = write!(stream, "<style>");
+    let _ = write!(stream, "<style>");
 
-        let general_style = r"
+    let general_style = r"
   .tab-system {
     margin: 20px;
   }
@@ -750,43 +744,50 @@ fn handle_relative_connection(
     border: 1px solid #ddd;
   }";
 
-        let _ = write!(stream, "{general_style}");
+    let _ = write!(stream, "{general_style}");
-        for i in 1..count {
+    for i in 1..count {
-            let _ = write!(stream, "#tab-{i}:checked ~ #content-{i},");
+        let _ = write!(stream, "#tab-{i}:checked ~ #content-{i},");
-        }
+    }
+    let _ = write!(
+        stream,
+        "#tab-{count}:checked ~ #content-{count} {{ display: block; }}"
+    );
+
+    let _ = write!(stream, "</style>");
+
+    let _ = write!(stream, r#"<div class="tab-system">"#);
+
+    let _ = write!(
+        stream,
+        r#"<input type="radio" id="tab-1" name="tab-group" class="tab-radio" checked>"#
+    );
+    for i in 2..=count {
         let _ = write!(
             stream,
-            "#tab-{count}:checked ~ #content-{count} {{ display: block; }}"
+            r#"<input type="radio" id="tab-{i}" name="tab-group" class="tab-radio">"#
         );
+    }
 
-        let _ = write!(stream, "</style>");
+    let _ = write!(stream, r#"<div class="tab-nav">"#);
-
+    for (i, Section { title, .. }) in sections.iter().enumerate() {
-        let _ = write!(stream, r#"<div class="tab-system">"#);
+        let index = i + 1;
-
         let _ = write!(
             stream,
-            r#"<input type="radio" id="tab-1" name="tab-group" class="tab-radio" checked>"#
+            r#"<label for="tab-{index}" class="tab-button">{title}</label>"#
         );
-        for i in 2..=count {
+    }
-            let _ = write!(
+    let _ = write!(stream, "</div>");
-                stream,
-                r#"<input type="radio" id="tab-{i}" name="tab-group" class="tab-radio">"#
-            );
-        }
 
-        let _ = write!(stream, r#"<div class="tab-nav">"#);
+    for (
-        for (i, Section { title, .. }) in sections.iter().enumerate() {
+        i,
-            let index = i + 1;
+        Section {
-            let _ = write!(
+            lines, config_map, ..
-                stream,
+        },
-                r#"<label for="tab-{index}" class="tab-button">{title}</label>"#
+    ) in sections.into_iter().enumerate()
-            );
+    {
-        }
+        let index = i + 1;
-        let _ = write!(stream, "</div>");
+        let _ = write!(stream, r#"<div class="tab-content" id="content-{index}">"#);
-
+        if !lines.is_empty() {
-        for (i, Section { lines, .. }) in sections.iter().enumerate() {
-            let index = i + 1;
-            let _ = write!(stream, r#"<div class="tab-content" id="content-{index}">"#);
             convert_extended(
                 lines,
                 &mut stream,
@@ -795,12 +796,29 @@ fn handle_relative_connection(
                     .with_start_level(start_level)
                     .with_use_textboxes(true),
             );
-            let _ = write!(stream, "</div>");
         }
-
+        if let Some(config_map) = config_map {
+            if render_novel(
+                config_map,
+                file_paths.pk,
+                mlc_path.as_deref(),
+                file_paths.mld,
+                relative_path,
+                &mut stream,
+                choice,
+                progress,
+            )
+            .is_err()
+            {
+                fail(stream);
+                return;
+            }
+        }
         let _ = write!(stream, "</div>");
     }
 
+    let _ = write!(stream, "</div>");
+
     section(&mut stream);
 
     if let Some(pki_path) = file_paths.pki {