diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 585d966..35771f1 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,7 +6,6 @@ - @@ -49,6 +48,7 @@ + 1597348071361 @@ -298,13 +298,13 @@ - + - - + + - + \ No newline at end of file diff --git a/app.js b/app.js index 500d819..dfd3535 100644 --- a/app.js +++ b/app.js @@ -5,9 +5,6 @@ let kara = new Vue({ name: 'Kara', chatbox: null, isTyping: false, - templates: { - initialGreeting: "Hi! I'm Kara. :)" - }, addModal: { includeAll: false, keywords: '', @@ -41,8 +38,15 @@ let kara = new Vue({ ] }, mounted() { - this.initialGreeting(); + if (this.getSavedData() === false) { + this.initialGreeting(); + // Todo: add method to ask for and save username + } else { + this.welcomeBack(); + } + document.getElementById('chatinput').focus(); + document.title = this.name; }, methods: { addMessage(body, ai) { @@ -51,15 +55,43 @@ let kara = new Vue({ ai: ai, time: Date.now() }) + + this.updateStorage(); }, aiMessage(body) { this.addMessage(body, true); + + this.updateStorage(); }, userMessage(body) { this.addMessage(body, false); + + this.updateStorage(); }, initialGreeting() { - this.aiMessage(this.templates.initialGreeting); + this.aiMessage( + this.oneOf( + [ + "Hi! I'm " + this.name + ". :)", + "Hi, nice to meet you! My name is " + this.name + ". :)" + ] + ) + ); + + this.updateStorage(); + }, + welcomeBack() { + this.aiMessage( + this.oneOf( + [ + "Hi! Haven't heard of you in a while. :)", + "Welcome back! :)", + "Hey :) Good to see you :)", + ] + ) + ); + + this.updateStorage(); }, sendMessage() { if (this.chatbox.trim() === '') { @@ -70,6 +102,8 @@ let kara = new Vue({ this.scrollDown(); this.react(this.chatbox); this.chatbox = ''; + + this.updateStorage(); }, react(message) { this.isTyping = true; @@ -83,7 +117,7 @@ let kara = new Vue({ let answer = this.getAnswer(message); console.log(answer); - this.aiMessage(answer); + this.aiMessage(answer); this.scrollDown(); }, 3000); }, @@ -91,6 +125,8 @@ let kara = new Vue({ $('#chat-box').stop().animate({ scrollTop: $('#chat-box')[0].scrollHeight }, 800); + + this.updateStorage(); }, oneOf(answers) { let amountOfAnswers = answers.length; @@ -189,6 +225,34 @@ let kara = new Vue({ keywords: keywords, responses: responses }); + + this.addModal.includeAll = false; + this.addModal.keywords = ''; + this.addModal.responses = ['']; + + this.updateStorage(); + }, + updateStorage() { + localStorage.setItem('name', this.name); + localStorage.setItem('messages', JSON.stringify(this.messages)); + localStorage.setItem('answers', JSON.stringify(this.answers)); + }, + getSavedData() { + let savedName = localStorage.getItem('name') + + if (savedName === '') { + return false; + } + + this.name = localStorage.getItem('name'); + + let savedMessages = JSON.parse(localStorage.getItem('messages')); + this.messages = savedMessages ? savedMessages : []; + + let savedAnswers = JSON.parse(localStorage.getItem('answers')); + this.answers = savedAnswers ? savedAnswers : this.answers; + + this.scrollDown(); } } }) \ No newline at end of file diff --git a/index.html b/index.html index 4fc995a..e526f11 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - Kara + {{ this.name }}
@@ -100,6 +100,8 @@
+ +