p/pukram-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework and impovement of choice boxes

Browse Source
This commit is contained in:
p11 2025-04-21 09:52:20 +02:00
parent 3ee388bca0
commit e69f64f952
1 changed files with 28 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/vn.rs
View File

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