Add speech bubbles

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;
+}

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>

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})

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);
+        });
+    }
+};