|
|
let kara = new Vue({ |
|
|
el: '#kara', |
|
|
data: { |
|
|
features: { |
|
|
changeName: false, |
|
|
themes: false, |
|
|
setNameAtStart: true |
|
|
}, |
|
|
messages: [], |
|
|
lastMessage: null, |
|
|
lastMessageData: {}, |
|
|
name: 'Kara', |
|
|
location: null, |
|
|
chatbox: null, |
|
|
isTyping: false, |
|
|
askedForName: false, |
|
|
takeNote: false, |
|
|
username: '', |
|
|
themes: null, |
|
|
activeTheme: 'slate', |
|
|
addModal: { |
|
|
includeAll: false, |
|
|
keywords: '', |
|
|
responses: [ |
|
|
'Answer #1' |
|
|
] |
|
|
}, |
|
|
settingsModal: { |
|
|
name: null, |
|
|
username: null, |
|
|
location: '' |
|
|
}, |
|
|
notes: [], |
|
|
reactions: [] |
|
|
}, |
|
|
mounted() { |
|
|
this.getSavedData(); |
|
|
this.getReactions(); |
|
|
|
|
|
if (this.features.themes) { |
|
|
this.getBootswatchThemes(); |
|
|
} |
|
|
|
|
|
this.settingsModal = { |
|
|
name: this.name, |
|
|
username: this.username, |
|
|
location: this.location |
|
|
}; |
|
|
|
|
|
if (!this.username || this.username === "null") { |
|
|
this.initialGreeting(); |
|
|
|
|
|
if (this.features.setNameAtStart) { |
|
|
this.askForName(); |
|
|
} |
|
|
|
|
|
this.isTyping = false; |
|
|
} else { |
|
|
this.welcomeBack(); |
|
|
} |
|
|
|
|
|
document.getElementById('chatinput').focus(); |
|
|
document.title = this.name; |
|
|
|
|
|
this.scrollDown(); |
|
|
}, |
|
|
methods: { |
|
|
// Initial |
|
|
initialGreeting() { |
|
|
this.botMessage( |
|
|
this.oneOf( |
|
|
[ |
|
|
"Hi! I'm " + this.name + ". :)", |
|
|
"Hi, nice to meet you! My name is " + this.name + ". :)" |
|
|
] |
|
|
) |
|
|
); |
|
|
}, |
|
|
welcomeBack() { |
|
|
this.botMessage( |
|
|
this.oneOf( |
|
|
[ |
|
|
"Hi! Haven't heard of you in a while. :)", |
|
|
"Welcome back! :)", |
|
|
"Hey :) Good to see you :)", |
|
|
] |
|
|
) |
|
|
); |
|
|
}, |
|
|
|
|
|
// Name |
|
|
askForName() { |
|
|
this.botMessage( |
|
|
this.oneOf([ |
|
|
'May i ask for your name?', |
|
|
'Whats your name? :)', |
|
|
'How can i call you?', |
|
|
'How did your developers call you? :)' |
|
|
]) |
|
|
); |
|
|
|
|
|
this.askedForName = true; |
|
|
}, |
|
|
setName(message) { |
|
|
this.username = message.trim(); |
|
|
this.settingsModal.username = this.username; |
|
|
this.askedForName = false; |
|
|
|
|
|
this.botMessage( |
|
|
this.oneOf([ |
|
|
"That's a beautiful name!", |
|
|
"Okay, i'll call you " + this.username + " from now on :)", |
|
|
"Nice to meet you, " + this.username + ". :D" |
|
|
]) |
|
|
) |
|
|
}, |
|
|
|
|
|
// Messages / Chat |
|
|
addMessage(body, bot, me = false) { |
|
|
this.messages.push({ |
|
|
body: body, |
|
|
bot: bot, |
|
|
command: body.search('/') === 0, |
|
|
me: me, |
|
|
time: Date.now() |
|
|
}) |
|
|
}, |
|
|
botMessage(body) { |
|
|
this.addMessage(body, true); |
|
|
}, |
|
|
userMessage(body) { |
|
|
this.addMessage(body, false); |
|
|
this.lastMessage = body; |
|
|
|
|
|
this.updateStorage(); |
|
|
}, |
|
|
sendMessage() { |
|
|
if (this.chatbox.trim() === '') { |
|
|
return false; |
|
|
} |
|
|
|
|
|
if (this.chatbox.search('/me') !== 0) { |
|
|
this.userMessage(this.chatbox); |
|
|
} |
|
|
this.scrollDown(); |
|
|
this.react(this.chatbox); |
|
|
this.chatbox = ''; |
|
|
}, |
|
|
meMessage(message) { |
|
|
this.addMessage(this.username + ' ' + message, false, true); |
|
|
this.react(message, true); |
|
|
}, |
|
|
react(message, recursive = false) { |
|
|
this.isTyping = true; |
|
|
|
|
|
if (message.search('/') === 0 && !recursive) { |
|
|
setTimeout(() => { |
|
|
this.processCommands(message); |
|
|
|
|
|
this.isTyping = false; |
|
|
this.scrollDown(); |
|
|
}, 1000); |
|
|
} else { |
|
|
setTimeout(() => { |
|
|
// Check commands |
|
|
if (this.askedForName === true) { |
|
|
this.setName(message); |
|
|
} else if (this.takeNote === true) { |
|
|
this.saveNote(message); |
|
|
} else { |
|
|
let answer = this.getReaction(message); |
|
|
if (answer) { |
|
|
this.botMessage(answer); |
|
|
} |
|
|
|
|
|
this.updateStorage(); |
|
|
} |
|
|
|
|
|
this.isTyping = false; |
|
|
this.scrollDown(); |
|
|
}, 1800); |
|
|
} |
|
|
}, |
|
|
getReaction(message) { |
|
|
message = this.cleanupMessage(message); |
|
|
|
|
|
let keywords = message.split(' '); |
|
|
let answer = undefined; |
|
|
|
|
|
if (this.lastMessageData.joke && this.includesOneOf(keywords, ['another', 'more'])) { |
|
|
this.tellJoke(this.lastMessageData.category); |
|
|
return false; |
|
|
} |
|
|
|
|
|
this.lastMessageData = {}; |
|
|
|
|
|
if (this.includesAllOf(keywords, ['change', 'my', 'name'])) { |
|
|
this.askedForName = true; |
|
|
return "Please tell me how i should call you."; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['new', 'note']) || |
|
|
this.includesAllOf(keywords, ['new', 'task']) || |
|
|
this.includesAllOf(keywords, ['take', 'note']) || |
|
|
this.includesAllOf(keywords, ['save', 'to', 'clipboard']) |
|
|
) { |
|
|
this.takeNote = true; |
|
|
return this.oneOf([ |
|
|
"What do you wan't me to save for you?", |
|
|
"Tell me what you wan't to save.", |
|
|
"What is it you wan't to save?", |
|
|
]); |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['clear', 'chat'])) { |
|
|
this.clearChat(); |
|
|
return false; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['weather']) && |
|
|
this.includesOneOf(keywords, ['how', 'whats']) |
|
|
) { |
|
|
this.checkWeather(); |
|
|
return false; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['knock', 'joke'])) { |
|
|
this.tellJoke('knock-knock'); |
|
|
return false; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['joke']) && this.includesOneOf(keywords, ['coding', 'programming', 'code', 'it'])) { |
|
|
this.tellJoke('programming'); |
|
|
return false; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['tell', 'joke']) || |
|
|
this.includesAllOf(keywords, ['something', 'funny']) || |
|
|
this.includesAllOf(keywords, ['cheer', 'me', 'up']) |
|
|
) { |
|
|
this.tellJoke('general'); |
|
|
return false; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['whats', 'the', 'time']) || this.includesAllOf(keywords, ['how', 'late'])) { |
|
|
return "It's " + moment().format('LT'); |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['what', 'day', 'it'])) { |
|
|
return "It's " + moment().format('dddd') + "."; |
|
|
} |
|
|
|
|
|
if (this.includesAllOf(keywords, ['what', 'date', 'it']) || this.includesAllOf(keywords, ['whats', 'the', 'date'])) { |
|
|
return "It's " + moment().format('dddd') + ", " + moment().format('MMMM Do YYYY') + "."; |
|
|
} |
|
|
|
|
|
this.reactions.forEach((reactionOption) => { |
|
|
if (reactionOption.includeAll === true) { |
|
|
if (this.includesAllOf(keywords, reactionOption.keywords)) { |
|
|
answer = this.oneOf(reactionOption.responses); |
|
|
} |
|
|
} else { |
|
|
if (this.includesOneOf(keywords, reactionOption.keywords)) { |
|
|
answer = this.oneOf(reactionOption.responses); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
if (answer) { |
|
|
return answer; |
|
|
} |
|
|
|
|
|
return 'I don\'t know what to say..'; |
|
|
}, |
|
|
|
|
|
// Forms |
|
|
saveSettings() { |
|
|
this.name = this.settingsModal.name; |
|
|
this.username = this.settingsModal.username; |
|
|
this.location = this.settingsModal.location; |
|
|
this.updateStorage(); |
|
|
|
|
|
// this.botMessage('Settings saved! :)'); |
|
|
this.scrollDown(); |
|
|
}, |
|
|
|
|
|
// Commands |
|
|
processCommands(message) { |
|
|
if (this.checkForCommands(message, 'note')) { |
|
|
let noteToSave = this.checkForCommands(message, 'note'); |
|
|
this.saveNote(noteToSave); |
|
|
} |
|
|
|
|
|
if (this.checkForCommands(message, 'clear')) { |
|
|
this.clearChat(); |
|
|
} |
|
|
|
|
|
if (this.checkForCommands(message, 'weather')) { |
|
|
this.checkWeather() |
|
|
} |
|
|
|
|
|
if (this.checkForCommands(message, 'joke')) { |
|
|
this.tellJoke(this.checkForCommands(message, 'joke')) |
|
|
} |
|
|
|
|
|
if (this.checkForCommands(message, 'me')) { |
|
|
this.meMessage(this.checkForCommands(message, 'me')) |
|
|
} |
|
|
}, |
|
|
checkForCommands(message, commands) { |
|
|
if (!Array.isArray(commands)) { |
|
|
commands = [commands]; |
|
|
} |
|
|
|
|
|
let commandFound = false; |
|
|
let parameter = false; |
|
|
|
|
|
commands.forEach((command) => { |
|
|
if (commandFound) { |
|
|
return; |
|
|
} |
|
|
let commandString = '/' + command; |
|
|
|
|
|
if (message.search(commandString) === 0) { |
|
|
parameter = message.replace(commandString, '').trim(); |
|
|
commandFound = true; |
|
|
} |
|
|
}); |
|
|
|
|
|
return parameter ? parameter : commandFound; |
|
|
}, |
|
|
checkWeather() { |
|
|
let vue = this; |
|
|
|
|
|
if (!vue.location) { |
|
|
vue.botMessage('Please set your location in the settings. ⚙'); |
|
|
return; |
|
|
} |
|
|
|
|
|
let city = this.location.toLowerCase(); |
|
|
let url = 'http://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=8a1aa336da8899c1038bf6bd808d8961&units=metric'; |
|
|
|
|
|
axios.get(url) |
|
|
.then(function (response) { |
|
|
vue.botMessage('In ' + response.data.name + ' it\'s ' + response.data.main.temp.toFixed() + '°C with ' + response.data.weather[0].description + '.'); |
|
|
}) |
|
|
.catch(function (error) { |
|
|
alertify.notify(error, 'danger'); |
|
|
vue.botMessage('I couldn\'t check the weather for your location. 🤔'); |
|
|
}) |
|
|
|
|
|
this.updateStorage(); |
|
|
}, |
|
|
tellJoke(category) { |
|
|
let vue = this; |
|
|
let categorySet = false; |
|
|
|
|
|
if (category !== true && category !== false) { |
|
|
category = category.trim(); |
|
|
categorySet = true; |
|
|
} else { |
|
|
category = 'general' |
|
|
} |
|
|
|
|
|
let url = 'https://official-joke-api.appspot.com/jokes/' + category + '/random'; |
|
|
|
|
|
axios.get(url) |
|
|
.then(function (response) { |
|
|
let joke = response.data[0]; |
|
|
|
|
|
vue.botMessage(joke.setup); |
|
|
|
|
|
setTimeout(() => { |
|
|
vue.botMessage(joke.punchline); |
|
|
vue.scrollDown(); |
|
|
}, 3500); |
|
|
|
|
|
vue.lastMessageData = { |
|
|
joke: true, |
|
|
category: category |
|
|
}; |
|
|
}) |
|
|
.catch(function (error) { |
|
|
console.log(error); |
|
|
|
|
|
if (categorySet) { |
|
|
vue.botMessage("Sorry, i don't know any jokes about this topic.. 🙄"); |
|
|
} else { |
|
|
vue.botMessage("I can't remember any jokes right now, sorry. 😢"); |
|
|
} |
|
|
}); |
|
|
|
|
|
this.updateStorage(); |
|
|
}, |
|
|
|
|
|
// Notes |
|
|
saveNote(message) { |
|
|
this.takeNote = false; |
|
|
|
|
|
this.notes.push({ |
|
|
time: moment(), |
|
|
body: message, |
|
|
checked: false |
|
|
}); |
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
|
this.botMessage( |
|
|
this.oneOf([ |
|
|
"Saved! :)", |
|
|
"You can read and check your notes in the clipboard-section. :)" |
|
|
]) |
|
|
) |
|
|
}, |
|
|
clearNotes() { |
|
|
this.notes = []; |
|
|
|
|
|
this.botMessage( |
|
|
this.oneOf([ |
|
|
"Notes cleared. 🚮" |
|
|
]) |
|
|
); |
|
|
|
|
|
this.updateStorage(); |
|
|
}, |
|
|
|
|
|
// LocalStorage |
|
|
getSavedData() { |
|
|
let savedName = localStorage.getItem('name'); |
|
|
|
|
|
this.name = savedName ? savedName : this.name; |
|
|
|
|
|
let savedUsername = localStorage.getItem('username'); |
|
|
this.username = savedUsername ? savedUsername : null; |
|
|
|
|
|
let savedActiveTheme = localStorage.getItem('activeTheme'); |
|
|
this.activeTheme = savedActiveTheme ? savedActiveTheme : 'slate'; |
|
|
|
|
|
let savedMessages = JSON.parse(localStorage.getItem('messages')); |
|
|
this.messages = savedMessages ? savedMessages : []; |
|
|
|
|
|
let savedNotes = JSON.parse(localStorage.getItem('notes')); |
|
|
this.notes = savedNotes ? savedNotes : []; |
|
|
|
|
|
let savedLastMessage = JSON.parse(localStorage.getItem('lastMessage')); |
|
|
this.lastMessage = savedLastMessage ? savedLastMessage : null; |
|
|
|
|
|
let savedLocation = JSON.parse(localStorage.getItem('location')); |
|
|
this.location = savedLocation ? savedLocation : null; |
|
|
|
|
|
this.scrollDown(); |
|
|
}, |
|
|
updateStorage() { |
|
|
localStorage.setItem('name', this.name); |
|
|
localStorage.setItem('username', this.username); |
|
|
localStorage.setItem('activeTheme', this.activeTheme); |
|
|
localStorage.setItem('messages', JSON.stringify(this.messages)); |
|
|
localStorage.setItem('answers', JSON.stringify(this.reactions)); |
|
|
localStorage.setItem('notes', JSON.stringify(this.notes)); |
|
|
localStorage.setItem('lastMessage', JSON.stringify(this.lastMessage)); |
|
|
localStorage.setItem('location', JSON.stringify(this.location)); |
|
|
}, |
|
|
clearStorage() { |
|
|
localStorage.clear(); |
|
|
location.reload(); |
|
|
}, |
|
|
|
|
|
// Utility |
|
|
scrollDown() { |
|
|
$('#chat-box').stop().animate({ |
|
|
scrollTop: ($('#chat-box')[0].scrollHeight * 10) |
|
|
}, 800); |
|
|
}, |
|
|
oneOf(answers) { |
|
|
let amountOfAnswers = answers.length; |
|
|
let randomIndex = Math.floor(Math.random() * (amountOfAnswers)); |
|
|
|
|
|
return this.convertWildcards(answers[randomIndex]); |
|
|
}, |
|
|
convertWildcards(message) { |
|
|
message = message.replace('$name$', this.username); |
|
|
message = message.replace('$botname$', this.name); |
|
|
|
|
|
return message; |
|
|
}, |
|
|
cleanupMessage(message) { |
|
|
message = message.toLowerCase(); |
|
|
return message.replace('?', '') |
|
|
.replace('!', '') |
|
|
.replace('.', '') |
|
|
.replace(',', '') |
|
|
.replace('-', '') |
|
|
.replace('_', '') |
|
|
.replace('#', '') |
|
|
.replace('\'', '') |
|
|
.replace('"', '') |
|
|
.replace('+', '') |
|
|
.replace('*', '') |
|
|
.replace('§', '') |
|
|
.replace('$', '') |
|
|
.replace('%', '') |
|
|
.replace('&', '') |
|
|
.replace('/', '') |
|
|
.replace('(', '') |
|
|
.replace(')', '') |
|
|
.replace('=', '') |
|
|
.replace('\\', '') |
|
|
.replace('@', '') |
|
|
.replace('~', '') |
|
|
.replace('…', ''); |
|
|
}, |
|
|
clearChat() { |
|
|
this.messages = []; |
|
|
this.botMessage(this.oneOf([ |
|
|
'Chat cleared.', |
|
|
'Evidence destroyed.', |
|
|
'Mind cleared.', |
|
|
'Uhm.. i think forgot everything we ever talked about.. oops.', |
|
|
'A fresh start!', |
|
|
"You've got something to hide? Nevermind, gotcha fam. Chat is cleared now. 🐱👤" |
|
|
])); |
|
|
|
|
|
this.updateStorage(); |
|
|
}, |
|
|
includesOneOf(keywords, wordsToSearch) { |
|
|
let includes = false; |
|
|
|
|
|
wordsToSearch.forEach((searchWord) => { |
|
|
if (keywords.includes(searchWord)) { |
|
|
includes = true; |
|
|
} |
|
|
}) |
|
|
|
|
|
return includes; |
|
|
}, |
|
|
includesAllOf(keywords, wordsToSearch) { |
|
|
let includesAllkeywords = true; |
|
|
|
|
|
wordsToSearch.forEach((searchWord) => { |
|
|
if (!keywords.includes(searchWord)) { |
|
|
includesAllkeywords = false; |
|
|
} |
|
|
}) |
|
|
|
|
|
return includesAllkeywords; |
|
|
}, |
|
|
|
|
|
// Ajax calls for saving/receiving reactions & themes |
|
|
getBootswatchThemes() { |
|
|
let vue = this; |
|
|
|
|
|
axios.get('https://bootswatch.com/api/4.json') |
|
|
.then(function (response) { |
|
|
vue.themes = response.data.themes; |
|
|
}) |
|
|
.catch(function (error) { |
|
|
console.log(error); |
|
|
}) |
|
|
}, |
|
|
getReactions() { |
|
|
let vue = this; |
|
|
|
|
|
axios.get('/reactions/get').then((response) => { |
|
|
response.data.forEach((reaction) => { |
|
|
vue.reactions.push(JSON.parse(reaction.reaction)); |
|
|
}); |
|
|
}).catch((error) => { |
|
|
console.log(error); |
|
|
}); |
|
|
} |
|
|
} |
|
|
}) |
