Georg/ai.interactive.fiction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Document markup and improve choice tags

Browse Source
This commit is contained in:
Georg Tomitsch
2026-05-17 15:52:41 +02:00
parent c2fb27b6b8
commit 2c54498ee2
52 changed files with 3485 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+296 -39
View File
@@ -116,17 +116,17 @@ body.switched {
--book-height: 799px;
--book-scale: 1;
--page-line-count: 25;
--book-page-top: 7.35%;
--book-page-bottom: 14.15%;
--book-page-top: 4.00%;
--book-page-bottom: 19%;
--book-page-height: calc(100% - var(--book-page-top) - var(--book-page-bottom));
--book-left-page-left: 10.7%;
--book-left-page-width: 33.75%;
--book-right-page-right: 14.85%;
--book-right-page-width: 32.65%;
--book-left-page-left: 14%;
--book-left-page-width: 34.9%;
--book-right-page-right: 14%;
--book-right-page-width: 34%;
--book-page-perspective: 3200px;
--book-left-page-transform: none;
--book-right-page-transform: none;
--story-line-height: calc((var(--book-height) * 0.785) / var(--page-line-count));
--story-line-height: calc((var(--book-height) * 0.77) / var(--page-line-count));
--story-font-size: calc(var(--story-line-height) / 1.45);
font-size: calc(var(--book-height)/(34 * 1.5));
--img-aspect-ratio: 1.779;
@@ -342,13 +342,14 @@ ol.choice {
position: absolute;
right: 0;
left: 0;
top: -0.6rem;
top: 0.45rem;
user-select: none;
transition: color 0.6s, background 0.6s;
font-size: 0.82rem;
}
#controls [disabled] {
color: #999;
color: #8f806a;
}
#controls input[type=range] {
@@ -458,7 +459,8 @@ ol.choice {
margin: 0 auto;
padding: 0;
overflow: hidden;
background: transparent;
background: rgba(218, 188, 130, 0.18);
background-blend-mode: multiply;
}
.story-image-block img {
@@ -466,8 +468,9 @@ ol.choice {
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
filter: contrast(1.05);
mix-blend-mode: color-burn;
/* filter: grayscale(0.72) sepia(0.18) contrast(1.22) brightness(0.96); */
opacity: 0.94;
}
.story-image-landscape,
@@ -641,7 +644,7 @@ ol.choice {
top: 0px;
left: 0px;
border: 1px none red;
background-color: #fff;
background-color: #d8bf89;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
@@ -693,28 +696,243 @@ ol.choice {
color: rgba(0, 0, 0, 0.62);
}
#lighting {
position: absolute;
top: -35%;
left: -35%;
width: 180%;
height: 180%;
animation: gradient-animation-shrink 1s 1;
background: radial-gradient(circle, rgba(255,240,182,0.1) 0%, rgba(255,237,165,0.2) 20%, rgba(0,0,0,0.9) 65%, rgba(0,0,0,0.9) 100%);
mix-blend-mode: color-burn;
pointer-events: none; /* makes the element ignore mouse events, and pass them to elements underneath */
z-index: 999; /* should be high enough to be on top of other elements */
#credits_button {
border: 0;
padding: 0;
margin: 0;
background: transparent;
color: rgba(0, 0, 0, 0.72);
font: inherit;
font-style: italic;
cursor: pointer;
pointer-events: auto;
}
@keyframes gradient-animation-grow {
0% { width: 180%; height: 180%; left: -35%; top: -35%; }
100% { width: 170%; height: 170%; left: -33%; top: -33%; }
}
#credits_button:hover {
color: rgba(0, 0, 0, 0.95);
}
@keyframes gradient-animation-shrink {
0% { width: 170%; height: 170%; left: -33%; top: -33%; }
100% { width: 180%; height: 180%; left: -35%; top: -35%; }
}
.credits-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: 4vh 4vw;
background: rgba(10, 7, 4, 0.52);
}
.credits-modal.visible {
display: flex;
}
.credits-dialog {
width: min(48rem, 92vw);
height: min(44rem, 88vh);
background: rgba(229, 205, 155, 0.96);
color: rgba(24, 18, 12, 0.92);
border: 1px solid rgba(42, 31, 18, 0.45);
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45);
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.credits-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid rgba(42, 31, 18, 0.28);
padding-bottom: 0.55rem;
}
.credits-dialog-header h2 {
margin: 0;
font-size: 1.35rem;
font-style: italic;
}
#credits_close {
border: 1px solid rgba(42, 31, 18, 0.5);
background: rgba(255, 246, 220, 0.35);
color: rgba(24, 18, 12, 0.9);
font: inherit;
padding: 0.18rem 0.7rem;
cursor: pointer;
}
.credits-logo-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.55rem;
}
.credits-logo-row a {
color: rgba(31, 23, 15, 0.88);
text-decoration: none;
}
.credits-logo-row img {
display: block;
width: 1.3rem;
height: 1.3rem;
}
.credits-wordmark {
border: 1px solid rgba(42, 31, 18, 0.34);
padding: 0.08rem 0.45rem;
background: rgba(255, 246, 220, 0.24);
font-style: italic;
}
.story-popup-modal {
position: fixed;
inset: 0;
z-index: 1250;
display: none;
align-items: center;
justify-content: center;
padding: 4vh 4vw;
background: rgba(10, 7, 4, 0.42);
}
.story-popup-modal.visible {
display: flex;
}
.story-popup-dialog {
width: min(30rem, 88vw);
max-height: min(28rem, 80vh);
overflow: auto;
background: rgba(228, 202, 149, 0.97);
color: rgba(22, 16, 10, 0.94);
border: 1px solid rgba(42, 31, 18, 0.5);
box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, 0.42);
padding: 1.15rem 1.3rem 1rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
font-family: 'EB Garamond', var(--book-font), serif;
}
.story-popup-dialog h2 {
margin: 0;
font-size: 1.45rem;
font-style: italic;
line-height: 1.15;
}
#story_popup_message {
white-space: pre-wrap;
line-height: 1.35;
font-size: 1.05rem;
}
#story_popup_ok {
align-self: flex-end;
border: 1px solid rgba(42, 31, 18, 0.5);
background: rgba(255, 246, 220, 0.36);
color: rgba(24, 18, 12, 0.92);
font: inherit;
padding: 0.18rem 0.85rem;
cursor: pointer;
}
.credits-content {
flex: 1;
overflow: auto;
margin: 0;
padding: 0.8rem;
background: rgba(255, 246, 220, 0.2);
border: 1px solid rgba(42, 31, 18, 0.22);
white-space: pre-wrap;
font-family: "EB Garamond", serif;
font-size: 0.92rem;
line-height: 1.28;
}
#lighting {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
overflow: hidden;
}
#lighting::before,
#lighting::after {
content: "";
position: absolute;
inset: -18%;
pointer-events: none;
}
#lighting::before {
background:
radial-gradient(circle at 16% 5%,
rgba(255, 214, 150, 0.36) 0%,
rgba(210, 126, 64, 0.20) 14%,
rgba(120, 65, 38, 0.08) 34%,
rgba(60, 36, 24, 0.025) 58%,
rgba(60, 36, 24, 0) 76%);
mix-blend-mode: soft-light;
opacity: 0.42;
animation: candle-flicker 6.8s infinite ease-in-out;
will-change: opacity, transform, filter;
}
#lighting::after {
background:
radial-gradient(ellipse at center,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.035) 50%,
rgba(0, 0, 0, 0.18) 100%);
mix-blend-mode: multiply;
opacity: 0.24;
}
@keyframes candle-flicker {
0% {
opacity: 0.36;
filter: brightness(0.99) sepia(0.08) saturate(1.02);
transform: translate3d(0, 0, 0) scale(1);
}
18% {
opacity: 0.46;
filter: brightness(1.06) sepia(0.12) saturate(1.07);
transform: translate3d(0.18%, -0.08%, 0) scale(1.008);
}
31% {
opacity: 0.39;
filter: brightness(1.01) sepia(0.09) saturate(1.04);
transform: translate3d(-0.08%, 0.08%, 0) scale(1.003);
}
49% {
opacity: 0.5;
filter: brightness(1.08) sepia(0.14) saturate(1.08);
transform: translate3d(0.24%, -0.13%, 0) scale(1.011);
}
64% {
opacity: 0.41;
filter: brightness(1.02) sepia(0.1) saturate(1.04);
transform: translate3d(-0.12%, 0.1%, 0) scale(1.004);
}
81% {
opacity: 0.47;
filter: brightness(1.065) sepia(0.13) saturate(1.07);
transform: translate3d(0.14%, -0.06%, 0) scale(1.008);
}
100% {
opacity: 0.36;
filter: brightness(1) sepia(0.08) saturate(1.02);
transform: translate3d(0, 0, 0) scale(1);
}
}
/* Command history */
#command_history {
@@ -723,10 +941,10 @@ ol.choice {
font-size: 1rem;
line-height: 1.2;
margin-bottom: 1rem;
border-top: 1px solid #d1c8b9;
border-top: 1px solid #b69b68;
padding-top: 0.6rem;
scrollbar-width: thin;
scrollbar-color: #8b7765 rgba(255, 255, 255, 0.1);
scrollbar-color: #7b654a rgba(151, 111, 64, 0.12);
}
body:not([data-game-running="true"]) #command_history {
@@ -754,11 +972,11 @@ body:not([data-game-running="true"]) #command_history {
}
#command_history::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
background: rgba(151, 111, 64, 0.12);
}
#command_history::-webkit-scrollbar-thumb {
background-color: #8b7765;
background-color: #7b654a;
border-radius: 4px;
}
@@ -918,7 +1136,7 @@ html[data-process-state="playing-ready"] * {
/* Placeholder styling - lighter and italic, with padding to avoid cursor overlap */
#player_input::placeholder {
color: #aaa;
color: #8f806a;
font-style: italic;
padding-left: 15px; /* Add padding to move placeholder text to the right */
}
@@ -1044,7 +1262,7 @@ body:not([data-game-running="true"]) #command_input {
#start_prompt {
position: absolute;
inset: 0;
display: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
@@ -1053,11 +1271,13 @@ body:not([data-game-running="true"]) #command_input {
font-size: 34px;
font-style: italic;
color: rgba(45, 34, 24, 0.78);
opacity: 0;
pointer-events: none;
transition: opacity 260ms ease;
}
body:not([data-game-running="true"]) #start_prompt {
display: flex;
opacity: 1;
}
/* Options Modal Styling */
@@ -1214,6 +1434,43 @@ body:not([data-game-running="true"]) #start_prompt {
text-align: right;
}
.option-item .game-language-value {
min-width: 8rem;
text-align: right;
font-style: italic;
}
.volume-option {
justify-content: flex-start;
}
.volume-option label {
flex: 1 1 auto;
}
.volume-toggle {
width: 1.7rem;
height: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid black;
border-radius: 0.25rem;
background: transparent;
color: rgba(0,0,0,0.9);
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
}
.volume-toggle:hover {
background-color: rgba(0,0,0,0.06);
}
.volume-toggle.is-muted {
opacity: 0.55;
}
.provider-status-list {
margin: 0.5rem 0 1rem;
border: 1px solid #e9ddc8;