story: add intro

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 
+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.
-Rise and shine.
 
-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("{~empathy|understanding|awareness}", stat_empathy) }
-{ print_stat("assertiveness", stat_assertiveness) }
+{ print_stat("{~assertiveness|decisiveness|resoluteness}", stat_assertiveness) }
 
 -> END
 

src/styles/story.scss

@@ -4,10 +4,10 @@
 
 $portrait-bg: #efefef;
 
-$postbox1-fg: white;
+$msgbox1-fg: white;
-$postbox1-bg: #b65fcf;
+$msgbox1-bg: #b65fcf;
-$postbox2-fg: black;
+$msgbox2-fg: black;
-$postbox2-bg: #b7e8c1;
+$msgbox2-bg: #b7e8c1;
 
 // --------------------------
 
@@ -21,13 +21,21 @@ $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 {
+    @if $ltr {
+        margin-right: 10ex;
+    } @else {
+        margin-left: 10ex;
+    }
+    
+    &::before /* small portrait */ {
         display: block;
         position: absolute;
         content: '';
@@ -40,33 +48,21 @@ $postbox2-bg: #b7e8c1;
         margin-top: -25px;
         height: 50px;
         width: 50px;
-}
 
-.talker-sx {
+        @if $ltr {
-    @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;
-    }
+        } @else {
-}
-
-.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;
         }
+    } // ~ small portrait
+}
+
+.message-sx {
+    @include message($msgbox1-bg, $msgbox1-fg, $ltr: true);
+}
+
+.message-dx {
+    @include message($msgbox2-bg, $msgbox2-fg, $ltr: false);
 }

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 
+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.
-Rise and shine.
 
-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("{~empathy|understanding|awareness}", stat_empathy) }
-{ print_stat("assertiveness", stat_assertiveness) }
+{ print_stat("{~assertiveness|decisiveness|resoluteness}", stat_assertiveness) }
 
 -> END