diff --git a/src/vn.rs b/src/vn.rs index 2dd2ab6..8b40477 100644 --- a/src/vn.rs +++ b/src/vn.rs @@ -36,13 +36,7 @@ fn navigation_controls(total_scenes: usize) -> Markup { } } -fn generate_html(mut scenes: Vec, sections: Vec, choices: Markup) -> Markup { - scenes.push(html! { - div class="choices-section" { - (choices) - } - }); - +fn generate_html(scenes: Vec, sections: Vec) -> Markup { 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 auto; + margin: 1vh 0; 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 choices_html = html! {}; + let (mut scenes, sections) = + process_dialog(&dialogs[choice], &mut player_settings, start_level); 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" { + 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(())