From 74ed1f9d09b5eeaf5c3b4fe958a6384731c43cf4 Mon Sep 17 00:00:00 2001 From: Matteo Settenvini Date: Mon, 2 Sep 2024 13:30:35 +0200 Subject: [PATCH] story: add intro --- src/story/main.ink | 36 ++++++++++++++---- src/styles/story.scss | 86 +++++++++++++++++++++---------------------- story/main.ink | 36 ++++++++++++++---- 3 files changed, 99 insertions(+), 59 deletions(-) diff --git a/src/story/main.ink b/src/story/main.ink index cdc9e3e..47367e5 100644 --- a/src/story/main.ink +++ b/src/story/main.ink @@ -15,14 +15,36 @@ This is a work of fiction. Names, characters, businesses, places, events, locale === intro === -The alarm clock tolls like hell's bells. += waking_up -C'mon. # CLASS: strong -Rise and shine. +The alarm clock unstoppably rings at {~six|seven|eight|nine} sharp, for it is Monday and you have to get up. Yes, it tolls for thee. It makes a ruckus like it were hell's bells. There's no escape, the only thing left: getting up for work. -I don't want to hear it! # CLASS: talker-sx +Rise and shine! -Don't you, now. # CLASS: talker-dx +- (opts) + * [Get dressed] You {~slip out of your pyjamas|jump off your bed|carefully stretch your arms} and {~put on some clothes|wisely decide to keep your webcam off for the day|rummage in the wardrobe|pick up a t-shirt and some jeans from the floor}. You feel marginally better. -> opts + * [Hit the bathroom] You {~wash your teeth|take a cold shower|relieve your bladder}. This makes you feel a tad better. -> opts + * [Drag yourself to the kitchen] You {~stumble|drag yourself|walk gingerly} to the kitchen and {~turn on the coffee machine|pick some fresh milk and müsli|fry some eggs and beacon}. Your mood improves somewhat. -> opts + * -> done +- (done) You feel ready to get on with the rest of your day. + +-> logging_in + += logging_in + +You sit down in front of your computer, {~coffee|tea|erva mate} firmly in hand. You boot it up, ready to tackle the stream of emails and messages that surely have accumulated during the last few days. + +Okay, booted. You are ready. + +* [Log in] -> first_troubles_ahead + +== first_troubles_ahead + +TODO: Example of conversation: + +I don't want to hear it! # CLASS: message-sx + +Don't you, now. # CLASS: message-dx * [Be nice.] ~ stat_empathy++ @@ -35,8 +57,8 @@ Don't you, now. # CLASS: talker-dx You have reached the end. -{ print_stat("{~empathy|love}", stat_empathy) } -{ print_stat("assertiveness", stat_assertiveness) } +{ print_stat("{~empathy|understanding|awareness}", stat_empathy) } +{ print_stat("{~assertiveness|decisiveness|resoluteness}", stat_assertiveness) } -> END diff --git a/src/styles/story.scss b/src/styles/story.scss index 58fa248..96c2da0 100644 --- a/src/styles/story.scss +++ b/src/styles/story.scss @@ -4,10 +4,10 @@ $portrait-bg: #efefef; -$postbox1-fg: white; -$postbox1-bg: #b65fcf; -$postbox2-fg: black; -$postbox2-bg: #b7e8c1; +$msgbox1-fg: white; +$msgbox1-bg: #b65fcf; +$msgbox2-fg: black; +$msgbox2-bg: #b7e8c1; // -------------------------- @@ -21,52 +21,48 @@ $postbox2-bg: #b7e8c1; font-weight: bold; } -.talker { +@mixin message($bg-color, $fg-color, $ltr: true) { position: relative; border-radius: 5pt; padding: 1ex; -} + background-color: $bg-color; + border: .5px solid color.scale($bg-color, $blackness: 30%); + color: $fg-color !important; -.portrait { - display: block; - position: absolute; - content: ''; - - background: $portrait-bg url('images/avatar.svg') center/60% no-repeat scroll; - border-radius: 50%; - border: .5px solid color.scale($portrait-bg, $blackness: 30%); - - top: 50%; - margin-top: -25px; - height: 50px; - width: 50px; -} - -.talker-sx { - @extend .talker; - background-color: $postbox1-bg; - border: .5px solid color.scale($postbox1-bg, $blackness: 30%); - color: $postbox1-fg; - margin-right: 10em; - - &::before { - @extend .portrait; - left: 100%; - margin-left: .5em; + @if $ltr { + margin-right: 10ex; + } @else { + margin-left: 10ex; } + + &::before /* small portrait */ { + display: block; + position: absolute; + content: ''; + + background: $portrait-bg url('images/avatar.svg') center/60% no-repeat scroll; + border-radius: 50%; + border: .5px solid color.scale($portrait-bg, $blackness: 30%); + + top: 50%; + margin-top: -25px; + height: 50px; + width: 50px; + + @if $ltr { + left: 100%; + margin-left: .5em; + } @else { + right: 100%; + margin-right: .5em; + } + } // ~ small portrait } -.talker-dx { - @extend .talker; - - background-color: $postbox2-bg; - border: .5px solid color.scale($postbox2-bg, $blackness: 30%); - color: $postbox2-fg; - margin-left: 10em; - - &::before { - @extend .portrait; - right: 100%; - margin-right: .5em; - } +.message-sx { + @include message($msgbox1-bg, $msgbox1-fg, $ltr: true); } + +.message-dx { + @include message($msgbox2-bg, $msgbox2-fg, $ltr: false); +} \ No newline at end of file diff --git a/story/main.ink b/story/main.ink index ff20127..47367e5 100644 --- a/story/main.ink +++ b/story/main.ink @@ -15,14 +15,36 @@ This is a work of fiction. Names, characters, businesses, places, events, locale === intro === -The alarm clock tolls like hell's bells. += waking_up -C'mon. # CLASS: strong -Rise and shine. +The alarm clock unstoppably rings at {~six|seven|eight|nine} sharp, for it is Monday and you have to get up. Yes, it tolls for thee. It makes a ruckus like it were hell's bells. There's no escape, the only thing left: getting up for work. -I don't want to hear it! # CLASS: talker-paul +Rise and shine! -Don't you, now. # CLASS: talker-mary +- (opts) + * [Get dressed] You {~slip out of your pyjamas|jump off your bed|carefully stretch your arms} and {~put on some clothes|wisely decide to keep your webcam off for the day|rummage in the wardrobe|pick up a t-shirt and some jeans from the floor}. You feel marginally better. -> opts + * [Hit the bathroom] You {~wash your teeth|take a cold shower|relieve your bladder}. This makes you feel a tad better. -> opts + * [Drag yourself to the kitchen] You {~stumble|drag yourself|walk gingerly} to the kitchen and {~turn on the coffee machine|pick some fresh milk and müsli|fry some eggs and beacon}. Your mood improves somewhat. -> opts + * -> done +- (done) You feel ready to get on with the rest of your day. + +-> logging_in + += logging_in + +You sit down in front of your computer, {~coffee|tea|erva mate} firmly in hand. You boot it up, ready to tackle the stream of emails and messages that surely have accumulated during the last few days. + +Okay, booted. You are ready. + +* [Log in] -> first_troubles_ahead + +== first_troubles_ahead + +TODO: Example of conversation: + +I don't want to hear it! # CLASS: message-sx + +Don't you, now. # CLASS: message-dx * [Be nice.] ~ stat_empathy++ @@ -35,8 +57,8 @@ Don't you, now. # CLASS: talker-mary You have reached the end. -{ print_stat("{~empathy|love}", stat_empathy) } -{ print_stat("assertiveness", stat_assertiveness) } +{ print_stat("{~empathy|understanding|awareness}", stat_empathy) } +{ print_stat("{~assertiveness|decisiveness|resoluteness}", stat_assertiveness) } -> END