From ec51e904d54b7e2e22ae79a25efa11c81d301a3f Mon Sep 17 00:00:00 2001
From: Aaron Fischer <aaron.fischer@marbis.net>
Date: Tue, 15 Aug 2017 16:45:43 +0200
Subject: [PATCH] Add speech bubbles

---
 src/assets/styles.css | 22 +++++++++++++++++++---
 src/index.html        |  8 +++++++-
 src/main.js           |  8 +++++++-
 src/muri.js           | 22 ++++++++++++++++++++++
 4 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 src/muri.js

diff --git a/src/assets/styles.css b/src/assets/styles.css
index fce0104..68f6daf 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -19,10 +19,17 @@ p {
     color: gray;
 }
 
-canvas {
-    background-color: white;
-    margin: auto;
+#content {
     display: block;
+}
+#content > div {
+    position: relative;
+    width: 800px;
+    margin: auto;
+}
+
+canvas {
+    background-color: black;
     border: 1px solid #5f5f7b;
     image-rendering: -moz-crisp-edges;
     image-rendering: -webkit-crisp-edges;
@@ -30,3 +37,12 @@ canvas {
     width: 800px;
     height: 400px;
 }
+
+#bubble {
+    color: white;
+    top: 320px;
+    left: 70px;
+    display: block;
+    position: absolute;
+    text-align: left;
+}
diff --git a/src/index.html b/src/index.html
index 4b1470d..be52c56 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,8 +3,14 @@
 <h1>murí</h1>
 <p>a js13kgame by <a href="https://aaron-fischer.net/">Aaron Fischer</a> (2017)</p>
 
-<canvas width="100" height="50" id="js13k-2017"></canvas>
+<div id="content">
+  <div>
+    <canvas width="100" height="50" id="js13k-2017"></canvas>
+    <div id="bubble" style="display: none;">Uh ...</div>
+  </div>
+</div>
 <p id="loading">loading game ...</p>
 
 <script src="vendor/kontra.js"></script>
+<script src="muri.js"></script>
 <script src="main.js"></script>
diff --git a/src/main.js b/src/main.js
index 4c8e221..244c78e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,7 +56,13 @@
 
         if (kontra.store.get('current-room') === null)
             kontra.store.set('current-room', 'stasis_dark');
-            
+
+        muri.talk([
+            'Uh ...',
+            'Where I am? ...',
+            'It is so dark in here, I can\'t even see my bare hands. I can\'t remember a thing and my brain hurts so bad. What happened here?'
+        ], [40, 20]);
+
         var rooms = {
             stasis_dark: kontra.sprite({x: 0, y: 0, image: kontra.assets.images.room_stasis_dark}),
             stasis: kontra.sprite({x: 0, y: 0, image: kontra.assets.images.room_stasis})
diff --git a/src/muri.js b/src/muri.js
new file mode 100644
index 0000000..65e463b
--- /dev/null
+++ b/src/muri.js
@@ -0,0 +1,22 @@
+var muri = {
+    bubble: function(text, position=[2, 7], delay=3, callback=false) {
+        var bubble = document.getElementById('bubble');
+        bubble.style.display = '';
+        bubble.style.left = position[0]*8;
+        bubble.style.top = position[1]*8;
+        bubble.innerHTML = text;
+        setTimeout(function() {
+            bubble.style.display = 'none';
+            if (callback !== false) callback.call();
+        }, delay*1000);
+    },
+
+    talk: function(texts, position) {
+        if (texts.length === 0) return;
+        var text = texts.shift();
+        var delay = Math.ceil(text.length/13);
+        this.bubble(text, position, delay, function() {
+            muri.talk(texts, position);
+        });
+    }
+};