var height, name, disabled = false, queue = []; class Command { constructor(regex, exec, example) { // The regex that checks if the writte message is that command this.regex = regex; // A function that is called when the command matches the regex // 1 parameter: the match this.exec = exec; } } var commands = [ new Command( /open\s[a-z\.\/]+/i, function(match) { // Get URL var url = match.split(" ")[1]; // Makes it easier to type links, not having to use https://www var shortcuts = { google: "https://www.google.com", wikipedia: "https://www.wikipedia.org", sololearn: "https://www.sololearn.com" }; if (shortcuts[url.toLowerCase()]) url = shortcuts[url]; // Automatically add https://www. to the url if (!url.startsWith("https://") && !url.startsWith("www.")) url = `https:\//www.${url}`; if (!url.startsWith("https://")) url = `https:/\/${url}`; // Confirm that the user wants to leave showMessage(`Are you sure you want to open ${url}?`, "bot") .then(function() { confirmInput("Are you sure?") .then(function() { // Redirect to the link window.location.assign(url); }) .catch(function() { showMessage("Okay", "bot") }); }); } ), new Command( /(what'?s the time\??|what time is it\??)/i, function(match) { // Get the hours and minutes and show them var date = new Date(); showMessage(`It is ${date.getHours()}:${date.getMinutes()}`, "bot"); } ), new Command( /(what (day|date) is it|what('?s| is) the date)( today)?\??/i, function(match) { var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var nums = ["", "st", "nd", "rd"]; var date = new Date(); if (nums[date.getDate()]) var num = nums[date.getDate()]; else var num = "th"; showMessage(`It is ${days[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate() + num}`, "bot"); } ), new Command( /(exit|clear|start|home|commands|what can i (say|ask( you)?|write|type)\??)/i, function(match) { if ($("main").text == match) alert("You are already at the home screen"); $("main").empty(); showWelcomeScreen(); } ), new Command( /(hello|hey|hi).*/i, function(match) { if (!name) { // Prompt for the users name showMessage("Hello, what's your name?", "bot") .then(function() { promptInput("Please type your name") .then(function(input) { // If the user typed their name, say hello name = input; showMessage(`Hello, ${name}`, "bot"); }) .catch(function() { showMessage("I guess that's okay too..", "bot"); }); }); } else { showMessage(`Hello, ${name}`, "bot"); } } ), new Command( /(what'?s|what is|calculate) [\d+*/().-]+\??/i, function(match) { // Get calculation var calc = match.split(" ")[1]; // Calculate using eval() (it is safe because of the regex) showMessage(`The answer is ${eval(calc)}`, "bot"); } ), new Command( /my name is [a-z]+/i, function(match) { // Get the name var newName = match.split(" ")[3]; // If the user already has a name if (name) { showMessage(`Is your new name "${newName}"?`, "bot") .then(function() { confirmInput("Do you want to change your name?") .then(function() { name = newName; showMessage(`Hello, ${name}`, "bot"); }) .catch(function() { showMessage(`Okay, ${name}`, "bot"); }); }); } else { name = n; showMessage(`Hello, ${name}`, "bot"); } } ), new Command( /flip a coin/i, function(match) { // Reply with either "Heads" or "Tails" showMessage(["Heads", "Tails"][rand(2)], "bot") } ), new Command( /random number( from)? (\d+)\s?(to|-)\s?(\d+)/i, function(match) { var min = parseInt(match.match(/\d+/g)[0]); var max = parseInt(match.match(/\d+/g)[1]); if (min >= max) { showMessage("Max must be greater than min!", "bot"); return; } var num = rand(max - min + 1) + min showMessage(num, "bot"); } ) ]; function rand(n) { return Math.floor(Math.random() * n); } $(function() { showWelcomeScreen(); // Call sendMessage() when enter is pressed $("#input").keypress(function(event) { // Check if the key pressed was enter if ((event.which || event.keyCode) == 13) sendMessage(); }); }); function confirmInput(text) { // Create input box var inputContainer = $(`

${text}

`); // Create buttons and append them var yesBtn = $(""); var noBtn = $(""); $(inputContainer).append(noBtn); $(inputContainer).append(yesBtn); // Show and animate the element $("main").append(inputContainer); $(inputContainer).animate({ opacity: "1", top: "0" }, 400); return new Promise(function(resolve, reject) { noBtn.click(function() { hideInput(inputContainer) .then(reject); }); yesBtn.click(function() { hideInput(inputContainer) .then(resolve); }); }); } function promptInput(text) { // Create input box var inputContainer = $("

"); // Create input buttons and append them var input = $(``); var cancelBtn = $(""); var submitBtn = $(""); $(inputContainer).append(input); $(inputContainer).append(cancelBtn); $(inputContainer).append(submitBtn); // Show and animate the element $("main").append(inputContainer); $(inputContainer).animate({ opacity: "1", top: "0" }, 400); return new Promise(function(resolve, reject) { cancelBtn.click(function() { hideInput(inputContainer) .then(reject); }); submitBtn.click(function() { hideInput(inputContainer) .then(function() { if ($(input).val() === "") reject(); resolve($(input).val()); }); }); }); } function hideInput(elem) { // Animate element $(elem).animate({ opacity: "0", top: "10px" }, 400); // Completely remove the element after animating setTimeout(function() { elem.remove(); }, 400); return new Promise(function(resolve, reject) { setTimeout(resolve, 400); }); } // Show start screen with animation function showWelcomeScreen() { $("#start").css("opacity", "1"); // Animate each element with fade and y-position with breaks in between var i = 0; var interval = setInterval(function() { // If element doesn't exist, stop the interval if ($("#start > p").eq(i).length === 0) clearInterval(interval); // Animate element by removing top offset and making it visible $("#start > p").eq(i).animate({ opacity: "1", top: "0" }, 400); i++; }, 400); } // Hide start screen with animation function hideWelcomeScreen() { if ($("#start").css("opacity") === "0") return new Promise(function(resolve, reject) { resolve(); }); // Animate element by changing the top offset and hiding it $("#start").animate({ opacity: "0", top: "-10px" }, 400); // After the animation is complete, reset the CSS of the elements setTimeout(function() { $("#start").css("top", "10px"); $("#start > p").each(function() { $(this).css("opacity", "0"); $(this).css("top", "10px") }); }, 401); // Get the height so it knows when to scroll up height = $("main").height(); // Return a promise and resolve it after the animation is completed return new Promise(function(resolve, reject) { setTimeout(resolve, 400); }); } function sendMessage() { // Get input message var message = $("#input").val(); // If the input is temporarily disabled, add the message to the queue where it will be executed later if (disabled) { queue.push(message); return; } // Empty input $("#input").val(""); hideWelcomeScreen() .then(function() { // Show the message showMessage(message, "user") .then(function() { // Check if a command matches the message and execute it var command = false; commands.forEach(function(cmd) { if (message.match(cmd.regex)) { cmd.exec(message); command = true; } }); // If no commands were executed if (!command) { // Check if the help message has been said before var helpmsg = false; $(".botmsg").each(function() { if (/Try asking "What can I say\?"
or leave a suggestion in the comments/.test($(this).html())) helpmsg = true; }); // If not, show the help message, else just a shorter version if (helpmsg) showMessage("Sorry, I don't understand you.", "bot"); else showMessage("Sorry, I don't understand you.
Try asking \"What can I say?\"
or leave a suggestion in the comments", "bot"); } }); }); } // Shows the message the user or the bot has written with animation function showMessage(msg, sender) { // Create element with the message and append it var elem = $(`

${msg}

`); $("main").append(elem); // Animate the element elem.children().animate({ opacity: "1", top: "0" }, 400); // If the scroll height > the height, start scrolling automatically if (sender == "bot" && $("main").prop('scrollHeight') > height) { // Get the current top position and - 100 from it $("main").animate({ top: (parseInt($("main").css("top").replace("px", "")) - 100) + "px" }, 400); height += 100; } // Return a promise and resolve it after the animation is completed return new Promise(function(resolve, reject) { setTimeout(resolve, 400); }); }

Virtual assistant