Rework and impovement of choice boxes
This commit is contained in:
p11
parent
3ee388bca0
commit
e69f64f952
84
src/vn.rs
84
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 {
|
||||
scenes.push(html! {
|
||||
div class="choices-section" {
|
||||
(choices)
|
||||
}
|
||||
});
|
||||
|
||||
fn generate_html(scenes: Vec<Markup>, sections: Vec<Markup>) -> 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" {
|
||||
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(())
|
||||
|
||||
Loading…
Reference in New Issue
Block a user