Rework and impovement of choice boxes

src/vn.rs

@@ -36,13 +36,7 @@ fn navigation_controls(total_scenes: usize) -> Markup {
     }
 }
 
-fn generate_html(mut scenes: Vec<Markup>, sections: Vec<Markup>, choices: Markup) -> Markup {
+fn generate_html(scenes: Vec<Markup>, sections: Vec<Markup>) -> Markup {
-    scenes.push(html! {
-        div class="choices-section" {
-            (choices)
-        }
-    });
-
     let total_scenes = scenes.len();
 
     html! {
@@ -135,7 +129,6 @@ fn global_styles() -> Markup {
             position: relative;
             padding-top: 42.1875%;
             background: #f8f8f8;
-            border-radius: 8px;
             overflow: hidden;
         }
         .scene-container {
@@ -186,12 +179,12 @@ fn global_styles() -> Markup {
             right: 0;
             z-index: 2;
             background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 30%);
-            padding: 2rem;
+            padding: 2vw;
         }
         .visual-novel-box {
             border: 0.2vw solid var(--border-color);
             border-radius: var(--border-radius);
-            padding: 1vw 2vw;
+            padding: 0.5vh 2vw;
             margin: 1vh 0;
             background: rgba(255, 255, 255, 0.9);
             box-shadow: var(--box-shadow);
@@ -203,6 +196,9 @@ fn global_styles() -> Markup {
             left: 50%;
             transform: translateX(-50%);
         }
+        .visual-novel-box:has(.character-name) {
+            padding-top: 1vh;
+        }
         .visual-novel-box::after {
             content: '';
             position: absolute;
@@ -225,8 +221,6 @@ fn global_styles() -> Markup {
             margin: 0;
             transform: translateY(-60%);
             width: max-content;
-        }
-        .character-name {
             position: absolute;
             top: 0;
             left: 1vw;
@@ -248,10 +242,8 @@ fn global_styles() -> Markup {
             bottom: 0;
             z-index: 3;
             background: rgba(0, 0, 0, 0.85);
-            padding: 2rem;
+            padding: 2vw;
             overflow-y: auto;
-            display: flex;
-            flex-direction: column;
             align-items: center;
         }
         .choice-box {
@@ -259,65 +251,38 @@ fn global_styles() -> Markup {
             min-width: 85%;
             border: 0.2vw solid var(--border-color);
             border-radius: var(--border-radius);
-            padding: 1vw 2vw;
+            margin: 1vh 0;
-            margin: 1vh auto;
             background: rgba(255, 255, 255, 0.9);
             box-shadow: var(--box-shadow);
-            position: relative;
-            transform: translateX(-50%);
-            left: 50%;
             transition: all var(--transition-duration) ease;
+            position: relative;
+            transform: none;
         }
         .choice-box:hover {
-            transform: translateX(-50%) translateY(-0.5vh);
+            transform: translateY(-0.5vh);
             box-shadow: 0 0.6vw 0.8vw rgba(0, 0, 0, 0.15);
         }
         .choice-box:has(.choice-name) {
-            padding-top: 2.5vw;
+            padding-top: 1vh;
         }
         .choice-button {
             width: 100%;
             background: none;
             border: none;
-            padding: 0.75vh 2vw;
+            padding: 0;
             font-size: 1.6vw;
             line-height: 1.4;
             cursor: pointer;
             color: #333;
             text-align: left;
             font-family: inherit;
-        }
-        .choice-name {
-            margin: -1.2vw 0 1vw 0;
-            position: relative;
-            z-index: 1;
-        }";
-
-    const RESPONSIVE: &str = r"
-        @media (max-width: 768px) {
-            .choice-name {
-                font-size: 1.2rem;
-                margin: -1rem 0 0.8rem 0;
-                transform: translateY(-40%);
-            }
-            .choices-section {
-                padding: 1rem;
-            }
-            .choice-box {
-                width: 95%;
-                padding: 3vw;
-            }
-            .choice-button {
-                font-size: 1.2rem;
-                padding: 1rem;
-            }
         }";
 
     html! {
         style {
             (maud::PreEscaped(
                 [BASE_STYLES, NAVIGATION, CONTAINER_STYLES, SCENE_STYLES,
-                 TEXTBOX_STYLES, CHARACTER_STYLES, CHOICE_STYLES, RESPONSIVE]
+                 TEXTBOX_STYLES, CHARACTER_STYLES, CHOICE_STYLES]
                 .join("")
             ))
         }
@@ -388,25 +353,22 @@ pub fn render_novel(
     let named_multilinear_info = named_multilinear_info.as_ref();
 
     let dialogs = parse_map(pk_path, &mut settings_context)?;
-    let (scenes, sections) = process_dialog(&dialogs[choice], &mut player_settings, start_level);
+    let (mut scenes, sections) =
-
+        process_dialog(&dialogs[choice], &mut player_settings, start_level);
-    let mut choices_html = html! {};
 
     if let Some(_named_multilinear_info) = named_multilinear_info {
-        choices_html = html! {
+        let choices_html = html! {
             div class="choices-section" {
                 @for (i, dialog_sequence) in dialogs.iter().enumerate() {
                     @if let Some(block) = dialog_sequence.blocks.first() {
-                        div class="choice-box" {
-                            @if !block.name.is_empty() {
-                                div class="choice-name" {
-                                    (block.name)
-                                }
-                            }
                         form method="POST" {
                             input type="hidden" name="progress" value=(progress);
                             input type="hidden" name="choice" value=(i);
                             button type="submit" class="choice-button" {
+                                fieldset class="choice-box" {
+                                    @if !block.name.is_empty() {
+                                        legend class="choice-name" { (block.name) }
+                                    }
                                     (block.lines[0].text)
                                 }
                             }
@@ -415,9 +377,11 @@ pub fn render_novel(
                 }
             }
         };
+
+        scenes.push(choices_html);
     }
 
-    let html = generate_html(scenes, sections, choices_html);
+    let html = generate_html(scenes, sections);
     let _ = write!(stream, "{}", html.into_string());
 
     Ok(())