From 67dfb3fdea9ccb953ade054f5bb67873531f981a Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Sun, 20 Sep 2020 03:54:50 +0200
Subject: [PATCH] Style for dice; Add rollDice; Fix Image-Messages;

---
 app.css    |  1 +
 app.js     | 31 +++++++++++++++++++++++++------
 index.html |  5 +++--
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/app.css b/app.css
index 165f628..3d5e419 100644
--- a/app.css
+++ b/app.css
@@ -33,6 +33,7 @@ img.message-image {
 	border-radius: 0 15px 15px 15px;
 
 	margin-bottom: 5px;
+	clear: top;
 }
 
 .bot-message {
diff --git a/app.js b/app.js
index 4d9f22a..0de3e97 100644
--- a/app.js
+++ b/app.js
@@ -294,6 +294,11 @@ let kara = new Vue({
                 return false;
             }
 
+            if (this.includesAllOf(keywords, ['roll', 'dice'])) {
+                this.rollDice();
+                return false;
+            }
+
             if (this.includesAllOf(keywords, ['clear', 'chat'])) {
                 this.clearChat();
                 return false;
@@ -447,6 +452,10 @@ let kara = new Vue({
                 this.startJeopardy();
             }
 
+            if (this.checkForCommands(message, 'dice')) {
+                this.rollDice();
+            }
+
             this.lastMessage = message;
         },
         checkForCommands(message, commands) {
@@ -530,8 +539,6 @@ let kara = new Vue({
 
             axios.get(url)
                 .then(function (response) {
-                    console.log(response);
-                    console.log(response.data[0].url);
                     vue.addImageMessage({
                         caption: '',
                         image: response.data[0].url
@@ -552,8 +559,6 @@ let kara = new Vue({
 
             axios.get(url)
                 .then(function (response) {
-                    console.log(response);
-                    console.log(response.data[0].url);
                     vue.addImageMessage({
                         caption: '',
                         image: response.data[0].url
@@ -574,8 +579,6 @@ let kara = new Vue({
 
             axios.get(url)
                 .then(function (response) {
-                    console.log(response);
-                    console.log(response.data[0].url);
                     vue.addImageMessage({
                         caption: '',
                         image: 'https://random.birb.pw/img/' + response.data.file
@@ -675,6 +678,22 @@ let kara = new Vue({
 
             this.updateStorage();
         },
+        rollDice() {
+            let dice = Math.random()*6;
+
+            if (dice < 1) {
+                dice = 1;
+            } else {
+                dice = Math.floor(dice);
+            }
+
+            this.addImageMessage({
+                body: dice + '!',
+                src: 'img/' + dice + '.png'
+            }, true);
+
+            this.updateStorage();
+        },
 
         // Notes
         saveNote(message) {
diff --git a/index.html b/index.html
index 4e29da5..607fcce 100644
--- a/index.html
+++ b/index.html
@@ -34,10 +34,11 @@
     <div id="chat-box">
         <template v-for="message in messages">
             <div :class="'message' + (message.bot === true ? ' bot-message float-left' : ' user-message float-right') + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-if="message.body">
+                <template v-if="message.src">
+                    <img :src="message.src" :alt="message.body" class="message-image"/><br/>
+                </template>
                 {{ message.body }}
-                <br/>
             </div>
-            <img :src="message.src" :alt="message.body" class="message-image" v-if="message.src"/>
         </template>
         <div class="message bot-message typing float-left" v-if="isTyping">
             <div class="spinner-grow text-secondary" role="status">