diff --git a/assets/img/femaleneighbor.png b/assets/img/femaleneighbor.png new file mode 100644 index 0000000..15a6bcf Binary files /dev/null and b/assets/img/femaleneighbor.png differ diff --git a/index.html b/index.html index 19160f5..f610202 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -

+

Sleepwalker

@@ -27,9 +27,10 @@

alt="Hack Club" />
- GitHub + GitHub +
- GitHub + GitHub
+ + + + diff --git a/scripts/data.js b/scripts/data.js new file mode 100644 index 0000000..4a290d2 --- /dev/null +++ b/scripts/data.js @@ -0,0 +1,16 @@ +let gameRunning = false; +let inputSelected = false; +let event = 1; +let lastGameInput = 0; + +let quests = []; +const inventory = [["candy", 2]]; + +const people = { + "oldmanneighbor": { + name: "Old Man Henry" + }, + "femaleneighbor": { + name: "House Resident" + } +} \ No newline at end of file diff --git a/scripts/inventory.js b/scripts/inventory.js new file mode 100644 index 0000000..1070970 --- /dev/null +++ b/scripts/inventory.js @@ -0,0 +1,76 @@ +const inventoryImages = { + "key": "https://ih1.redbubble.net/image.2797266866.2128/bg,f8f8f8-flat,750x,075,f-pad,750x1000,f8f8f8.jpg", + "wallet": "https://www.megavoxels.com/wp-content/uploads/2024/07/Pixel-Art-Flower-5.webp", + "lamp": "https://www.megavoxels.com/wp-content/uploads/2024/07/how-to-make-pixel-art-candy-6.webp", + "plate": "https://img.freepik.com/premium-vector/apple-pixel-art-style_553915-88.jpg", + "silverware": "https://img.freepik.com/premium-vector/apple-pixel-art-style_553915-88.jpg", + "soap": "https://cloud-lhqcn70mv-hack-club-bot.vercel.app/0image.png", + "chair:": "https://cloud-lhqcn70mv-hack-club-bot.vercel.app/0image.png", + "candy": "" +} + +function isInInventory(item) { + for (let i = 0; i < inventory.length; i++) { + if (inventory[i][0] === item) { + return true; + } + } +} + +function addItemToInventory(item, amount) { + if (amount === undefined) amount = 1; + for (let i = 0; i < inventory.length; i++) { + if (inventory[i][0] === item) { + inventory[i][1] += amount; + return; + } + } + inventory.push([item, 1]); + newLine(`Added ${amount} ${item}(s)`); +} + +function removeItemFromInventory(item, amount) { + if (amount === undefined) amount = 1; + for (let i = 0; i < inventory.length; i++) { + if (inventory[i][0] === item) { + inventory[i][1] -= amount; + if (inventory[i][1] === 0) { + inventory.splice(i, 1); + } + newLine(`Removed ${amount} ${item}(s)`); + return; + } + } + newLine("You don't a(n) " + item); +} + +function showInventoryDialog() { + let inventoryBox = document.createElement("div"); + newLine(`Inventory: ${(inventory.length === 0) ? " is empty" : ""}`); + + + inventoryBox.classList.add("dialog"); + + for (let i = 0; i < inventory.length; i++) { + let container = document.createElement("div"); + container.style.display = "inline-block"; + let itemInfo = document.createElement("p"); + + let item = inventory[i][0]; + let quantity = inventory[i][1]; + let itemImage = document.createElement("img"); + + itemInfo.innerText = `${item} x${quantity}`; + + itemImage.src = inventoryImages[item]; + itemImage.style.width = "100px"; + itemImage.style.height = "100px"; + itemImage.style.margin = "10px"; + container.append(itemInfo) + container.append(itemImage); + inventoryBox.append(container); + } + + document.querySelector(".lines").append(inventoryBox); + return inventoryBox; + } \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index f9d75f1..7f56000 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,219 +1,174 @@ -let gameRunning = false; -let inputSelected = false; -let event = 1; - -// Terminal code -let commandHistory = []; -let commandHistoryIndex = 0; -let inputElement = document.querySelector(".terminal-input"); -inputElement.value = ""; -inputElement.focus(); - -document.querySelector(".terminal-input").addEventListener("keydown", (e) => { - if (e.keyCode == 38 || e.keyCode == 40) { - commandHistory.push(""); - if (commandHistory.length == 0) return; - if (e.keyCode == 38) { - if (commandHistory[commandHistoryIndex - 1]) commandHistoryIndex--; - } - else { - if (commandHistoryIndex + 1 < commandHistory.length) commandHistoryIndex++; - else { - inputElement.value = ""; - commandHistory.pop(); - return; - } - } - inputElement.value = commandHistory[commandHistoryIndex]; - commandHistory.pop(); - } - if (e.keyCode != 13) return; - - let input = inputElement.value; - inputElement.value = ""; - - commandHistory.push(input); - commandHistoryIndex = commandHistory.length; - - let inputLine = document.createElement("div"); - - inputLine.innerHTML = `you@sleepwalker.quest:~$ ${input}`; - newLine(inputLine.innerHTML); - - let keywords = input.split(" "); - - runCommand(keywords, input); -}); - -function runCommand(keywords, input) { - if (gameRunning == false) { - switch (keywords[0]) { - case "help": - newLine("List of commands:"); - newLine("start: starts the game"); - newLine("clear: clears the terminal"); - newLine("about: shows info about the game"); - newLine("time: shows the current time"); - newLine("color : changes the color of the terminal text"); - break; - case "clear": - clearTerminal(); - break; - case "start": - startGame(); - break; - case "about": - newLine( - "Welcome to Sleepwalker, a text adventure game developed in 24 hours for Hackclub Counterspell, Washington DC." - ); - break; - case "time": - newLine(new Date()); - break; - case "color": - console.log(keywords[1]); - document.documentElement.style.setProperty('--terminal-text-color', keywords[1]); - break; - case "testdialog": - newDialog("https://cdn.pixabay.com/photo/2024/02/28/07/42/european-shorthair-8601492_640.jpg", "Kitty:", "Meow!"); - break; - case "nevergonna": - window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; - default: - newLine("could not find command " + input + ""); - newLine("try the command help to see possible commands"); - } - } else { - switch (keywords[0]) { - case "1": - gameInput(1); - break; - case "2": - gameInput(2); - break; - case "3": - gameInput(3); - break; - } - } -} - -function newLine(content, className, styles) { - let newLine = document.createElement("span"); - newLine.classList.add("line"); - if (className) newLine.classList.add(className); - newLine.innerHTML = content; - document.querySelector(".lines").append(newLine); - let shell = document.getElementById("shell"); - shell.scrollTop = shell.scrollHeight; - return newLine; -} - -function newDialog(image, speaker, text, className) { - let newLine = document.createElement("div"); - let textContainer = document.createElement("div"); - let speakerImage = document.createElement("img"); - let speakerName = document.createElement("p"); - let dialogText = document.createElement("p"); - - speakerImage.src = image; - speakerImage.style.width = "150px"; - speakerImage.style.height = "150px"; - speakerName.innerHTML = speaker; - dialogText.innerHTML = text; - - - if (className) newLine.classList.add(className); - newLine.classList.add("dialog"); - newLine.style.display = "grid"; - newLine.style.gridTemplateColumns = "150px auto"; - - newLine.append(speakerImage); - newLine.append(textContainer); - textContainer.append(speakerName); - textContainer.append(dialogText); - - document.querySelector(".lines").append(newLine); - - return newLine; -} - -function clearTerminal() { - document.querySelector(".lines").innerHTML = ""; -} +console.log("Main script loaded ✅"); function startGame() { gameRunning = true; newLine( - 'Welcome to Sleepwalker! You will get options on what to say or do, and you can choose between them by simply typing "1", "2", or "3" to select the options with those numbers.' -); + 'Welcome to Sleepwalker! You will get options on what to say or do, and you can choose between them by simply typing "1", "2", or "3" to select the options with those numbers.' + ); newLine( - 'You wake up, and you notice you are laying on the ground and not in a bed. You look around your room and notice your room is very out of order and it appears some things have been knocked over. You realize that you seem to have been sleepwalking.
You decide to investigate, which room would you like to check out?

Press "1" to check out your bedroom.
Press "2" to check out your kitchen.
Press "3" to check out your bathroom.' -); - - + 'You wake up and notice you are lying on the ground and not in bed. You look around your room and notice it\'s very out of order. Some of the large furniture has been knocked over. You realize that you must have been sleepwalking.
You decide to investigate further. Which room would you like to check out?

Press "1" to stay in your bedrooom.
Press "2" to check out your kitchen.
Press "3" to check out your bathroom.' + ); } function gameInput(number) { -let input = number - inputSelected = true - console.log(`Input ${number} has been selected`) - if (event=="death") { - endGame() - }else { - gameEvent(event, input) - } + let input = number; + lastGameInput = input; + inputSelected = true; + console.log(`Input ${number} has been selected`); + if (event == "death") { + endGame(); + } else { + gameEvent(event, input); + } } -function gameEvent(eventNumber, input){ +function gameEvent(eventNumber, input) { if (eventNumber == 1) { - if (input == 1){ + if (input == 1) { newLine( - 'As you walk around your bedroom, you see your lamp is knocked over, and your desk is a mess. You seem to be missing your wallet, as well as your spare house key.
What would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the bathroom.
Press "3" to leave the house' - ) - event++ -} else if (input == 2){ - newLine( - 'You see shattered pots and plates are on the floors. The silverware drawers are empty, and all your chairs seem to be missing. You notice a bag of flour has been spilled on the ground, and there are multiple sets of footsteps.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the kitchen.
Press "3" to leave the house' - ) - event++ -} else if (input == 3){ - newLine( - 'As you walk into the bathroom, you notice that your toiletries are spilled all over the floor, and the paintings that were on your wall appear to be on the floor.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the kitchen.
Press "3" to leave the house' - ) - event++ -} -}else if (eventNumber == 2) { - if (input == 1){ + 'As you walk around your bedroom, you see your lamp is knocked over, and your desk is a mess. You seem to be missing your wallet, as well as your spare house key.
What would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the kitchen.
Press "3" to leave the house' + ); + addQuest("You", "Find the wallet you lost while sleepwalking", "wallet", 1); + addQuest("You", "Find the key you lost while sleepwalking", "key", 1); + event++; + } else if (input == 2) { + newLine( + 'There are shards of fine china and dented pots strewn across the floor. The silverware drawers are empty, and all your chairs seem to be missing. You notice a bag of flour spilled on the ground, and there are multiple sets of footsteps in the fine white powder.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the kitchen.
Press "3" to leave the house' + ); + addQuest("You", "Get new plates to replace tthe ones you broke", "plates", 2); + event++; + } else if (input == 3) { + newLine( + 'As you walk into the bathroom, you notice that your toiletries are spilled all over the floor, and the paintings that were one on your wall are on the floor.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the kitchen.
Press "3" to leave the house' + ); + event++; + } + } else if (eventNumber == 2) { + if (input == 1) { + newLine( + 'As you walk around your bedroom you see your lamp is knocked over, and your desk is messy. You seem to be missing your wallet, as well as your spare key.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the bathroom.
Press "3" to leave the house' + ); + } else if (input == 2) { + newLine( + 'You see shattered pots and plates are on the floors, silverware is empty, and your chairs seem to be all missing. You notice a bag of flour has been spilled on the ground, and there is multiple sets of footsteps.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the kitchen.
Press "3" to leave the house' + ); + } else if (input == 3) { + newLine( + "After investigating all the rooms in your house, you decide to go outside and ask your neighbour, who often likes to sit on the porch and ask him what happened. You know he is retired and does not work, but he does not appear to be home. You knock on the door several times and eventually he comes out. After he sees you, he talks to you.
" + ); + newDialog( + "assets/img/oldmanneighbor.png", + "
Old Man Neighbour", + "
You have no right to show your face around here after what you did last night!" + ); + newLine( + 'How do you respond?

Press "1" to say "I am so sorry, I think I was sleepwalking last night, what happened?"
Press "2" to say "What the hell are you talking about, old man?' + ); + event++; + } + } else if (eventNumber == 3) { + if (input == 1) { + newDialog( + "assets/img/oldmanneighbor.png", + "
Old Man Neighbour:", + "
You showed up at my house at three in the morning and threw a chair at my window! Sleepwalking or not, you will need to pay for the damages!" + ); + newLine( + '
How do you respond:

Press "1" to say "Of course I will pay you back, but do you know if I did anything else when I was sleepwalking?"
Press "2" to say "We can talk about payment later, but do you know if I did anything else while I was sleepwalking?"' + ); + event++; + } else if (input == 2) { + newDialog( + "assets/img/oldmanneighbor.png", + "
Old Man Neighbour", + "Don't be snarky with me, you know damn well you broke my window last night! I'm calling the cops!" + ); + newLine( + "
He slams the door in your face and refuses to answer any questions you yell at his locked door." + ); + newLine( + '
You have lost the game. Press "1" to reset. You will need to run the command "start" again.
', + "red" + ); + event = "death"; + } + } else if (eventNumber == 4) { + newDialog( + "assets/img/oldmanneighbor.png", + "
Old Man Neighbour", + "I believe you went over that way afterward, I was tired and not paying very much attention though. You can go check it out, but I expect you to come back and pay me later! OH by the way I think you dropped your key at my house when you were here" + + ); + addItemToInventory("key") newLine( - 'As you walk around your bedroom you see your lamp is knocked over, and your desk is messy. You seem to be missing your wallet, as well as your spare key.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the bathroom.
Press "3" to leave the house' - ) -} else if (input == 2){ -newLine( - 'You see shattered pots and plates are on the floors, silverware is empty, and your chairs seem to be all missing. You notice a bag of flour has been spilled on the ground, and there is multiple sets of footsteps.
Where would you like to investigate next?

Press "1" to check out the bedroom.
Press "2" to check out the bathroom.
Press "3" to leave the house' - ) -} else if (input == 3){ -newLine( - 'After investigating all the rooms in your house, you decide to go outside and ask your neighbour, who often likes to sit on the porch and ask him what happened. You know he is retired and does not work, but he does not appear to be home. You knock on the door several times and eventually he comes out. After he sees you, he says, "You have no right to show your face around here after what you did last night!".
How do you respond?

Press "1" to say "I am so sorry, I think I was sleepwalking last night, what happened?"
Press "2" to say "What the hell are you talking about, old man?"' - ) - event++ -} -}else if (eventNumber == 3){ - if (input==1){ - newDialog("assets/img/oldmanneighbor.png", "
Old Man Neighbour:", "
You showed up at my house at three in the morning and threw a chair at my window! Sleepwalking or not, you will need to pay for the damages!"); - newLine('
How do you respond:

Press "1" to say "Of course I will pay you back, but do you know if I did anything else when I was sleepwalking?"
Press "2" to say "We can talk about payment later, but do you know if I did anything else while I was sleepwalking?"') - event++ - }else if (input == 2) { - newDialog("assets/img/oldmanneighbor.png", "
Old Man Neighbour:", "
Don't be snarky with me, you know damn well you broke my window last night! I'm calling the cops!"); - newLine("
He slams the door in your face and refuses to answer any questions you yell at his locked door.") - newLine('
You have lost the game. Press "1" to reset. You will need to run the command "start" again.
', "red") - event = "death" -} -}else if (eventNumber==4){ - newDialog("assets/img/oldmanneighbor.png", "
Old Man Neighbour:", "
I believe you went over that way afterward, I was tired and not paying very much attention though. You can go check it out, but I expect you to come back and pay me later!"); + '
You start walking in the direction he pointed, and as you walk, you feel the area is vaguely familiar, but you can not put your finger on it. “I must be starting to remember parts of my sleepwalking”, You think to yourself.
After some walking, you come across a stream and you see a tree branch that you could use to cross the stream. You also see a bridge in the distance, but it appears to be a few minutes walk away. What would you like to do?

Press "1" to cross the thin tree branch
Press "2" to walk to the bridge then cross it.' + ); + event++; + } else if (eventNumber == 5) { + if (input == 1) { + newLine( + "
As you cross the tree branch, it snaps beneath your weight. You fall into the stream, and the current takes you far from your home." + ); + newLine( + '
You have lost the game. Press "1" to reset. You will need to run the command "start" again.
', + "red" + ); + event = "death"; + } else if (input == 2) { + newLine( + "You cross the stream and get to another house. You start to have a foggy memory of your dream, and you definitely remember this house. You walk up to the house and knock on the door
" + ); + newDialog("assets/img/femaleneighbor.png","House Resident:", "Who are you, and what do you want?"); + newLine( + '
What would you like to say:

Press "1" to say "Why are you so upset?"
Press "2" to say "Did you see me around here last night?"' + ); + event++; + } + } else if (eventNumber == 6) { + if (input == 1) { + newDialog( + "assets/img/femaleneighbor.png", + "
House Resident:", + "
Someone ripped all the plants out of my garden last night and stole them!" + ); + newLine( + '
How would you like to respond:

Press "1" to say "I have been sleep walking recently and was told I came over here, the person who tore out your plants might have been me..."
Press "2" to say "I am sorry to hear that, hope you can find who did it." ' + ); + event++; + } else if (input == 2) { + newDialog( + "assets/img/femaleneighbor.png","
House Resident:", + "SOMEONE came to my house and ripped up and stole all the plants from my garden last night, do you know who that was?" + ); + newLine( + '
How would you like to respond:

Press "1" to say "Sorry, I think that might have been me..."
Press "2" to say "Nope, was not me, I will let you know if I hear anything about it." ' + ); + event++; + } + } else if (eventNumber == 7) { + if (input == 1) { + newDialog( + "assets/img/femaleneighbor.png","
House Resident:", + "WHAT THE HELL! You are going to stay here for the rest of the day, and replant for me, or I will be calling the cops!" + ); + newLine( + '
You have lost the game. Press "1" to reset. You will need to run the command "start" again.
', + "red" + ); + // the new person dialog doesnt work + event = "death"; + } else if (input == 2) { + newDialog( + "assets/img/femaleneighbor.png","
House Resident:", + "
Ok, but you better let me know if you find out anything. And it'd be great if you could get me some plants to replace the ones that were stolen." + ); + addQuest("femaleneighbor", "Find some plants to replace the ones you stole", "plants", 4); // uh if you select this dialog you dont admit you stole anything so this does not make sense + newLine("
You continue heading down the trail"); + } + } } +function endGame() { + gameRunning = false; + event = 1; + clearTerminal(); } -function endGame(){ - gameRunning=false - clearTerminal() -} \ No newline at end of file diff --git a/scripts/quests.js b/scripts/quests.js new file mode 100644 index 0000000..1717cf2 --- /dev/null +++ b/scripts/quests.js @@ -0,0 +1,51 @@ +function addQuest(personFor, text, item, amount) { + newLine("Added new quest! Press \"q\" to see it"); + quests.push([personFor, text, item, amount]) +} + +function giveItems(person, item, amount) { + if (!personNeedsItem(person, item)) { + newLine(`${person} doesn't want your useless ${item}.`) + } + // TO-DO: give person as much as they need or as much as you have. if all complete, finish quest +} + +function personNeedsItem(person, item) { + for (let i = 0; i < quests.length; i++) { + if (quests[i][0] == person && quests[i][2] == item) { + return true; + } + } + return false; +} + +function showQuestsDialog(image, speaker, text, className) { + let questsBox = document.createElement("div"); + newLine(`Quests: ${(inventory.length === 0) ? " you have none" : ""}`); + + let newLine = document.createElement("div"); + let textContainer = document.createElement("div"); + let speakerImage = document.createElement("img"); + let speakerName = document.createElement("p"); + let dialogText = document.createElement("p"); + + speakerImage.src = image; + speakerImage.style.width = "150px"; + speakerImage.style.height = "150px"; + speakerName.innerHTML = speaker; + dialogText.innerHTML = text; + + if (className) newLine.classList.add(className); + newLine.classList.add("dialog"); + newLine.style.display = "grid"; + newLine.style.gridTemplateColumns = "150px auto"; + + newLine.append(speakerImage); + newLine.append(textContainer); + textContainer.append(speakerName); + textContainer.append(dialogText); + + document.querySelector(".lines").append(newLine); + + return newLine; +} \ No newline at end of file diff --git a/scripts/shell.js b/scripts/shell.js new file mode 100644 index 0000000..318ac7d --- /dev/null +++ b/scripts/shell.js @@ -0,0 +1,229 @@ +console.log("Shell script loaded ✅"); + +// Terminal code +let commandHistory = []; +let commandHistoryIndex = 0; +let inputElement = document.querySelector(".terminal-input"); +inputElement.value = ""; +inputElement.focus(); + +document.querySelector(".terminal-input").addEventListener("keydown", (e) => { + if (e.keyCode == 38 || e.keyCode == 40) { + commandHistory.push(""); + if (commandHistory.length == 0) return; + if (e.keyCode == 38) { + if (commandHistory[commandHistoryIndex - 1]) commandHistoryIndex--; + } else { + if (commandHistoryIndex + 1 < commandHistory.length) + commandHistoryIndex++; + else { + inputElement.value = ""; + commandHistory.pop(); + return; + } + } + inputElement.value = commandHistory[commandHistoryIndex]; + commandHistory.pop(); + } + if (e.keyCode != 13) return; + + let input = inputElement.value; + inputElement.value = ""; + + commandHistory.push(input); + commandHistoryIndex = commandHistory.length; + + let inputLine = document.createElement("div"); + + inputLine.innerHTML = `you@sleepwalker.quest:~$ ${input}`; + newLine(inputLine.innerHTML); + + let keywords = input.split(" "); + + runCommand(keywords, input); +}); + +function runCommand(keywords, input) { + if (gameRunning == false) { + switch (keywords[0]) { + case "help": + newLine("List of commands:"); + newLine("start: starts the game"); + newLine("clear: clears the terminal"); + newLine("about: shows info about the game"); + newLine("time: shows the current time"); + newLine("sudo rm -rf /: gives free cookies"); + newLine("fetch: shows system info"); + newLine("background : changes the background color"); + newLine( + "color : changes the color of the terminal text" + ); + break; + case "clear": + clearTerminal(); + break; + case "start": + startGame(); + break; + case "about": + newLine( + "Welcome to Sleepwalker, a text adventure game developed in 24 hours for Hackclub Counterspell, Washington DC." + ); + break; + case "time": + newLine(new Date()); + break; + case "echo": + newLine(keywords.slice(1).join(" ")); + break; + case "fetch": + case "fastfetch": + case "neofetch": + printNeofetch(); + break; + case "color": + console.log(keywords[1]); + document.documentElement.style.setProperty( + "--terminal-text-color", + keywords[1] + ); + break; + case "background": + document.documentElement.style.setProperty( + "--background-color", + keywords[1] + ); + break; + case "testdialog": + newDialog( + "https://cdn.pixabay.com/photo/2024/02/28/07/42/european-shorthair-8601492_640.jpg", + "Kitty:", + "Meow!" + ); + break; + case "nevergonna": + window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; + case "sudo": + if (keywords[1] == "rm" && keywords[2] == "-rf" && keywords[3] == "/") { + document.body.remove(); + } + default: + newLine("could not find command " + input + ""); + newLine("try the command help to see possible commands"); + } + } else { + switch (keywords[0]) { + case "help": + newLine("what?: repeats the last text"); + newLine("i: shows inventory"); + newLine("q: shows quests"); + newLine("trash : removes item from inventory"); + case "what?": + event--; + gameEvent(event, lastGameInput); + break; + case "i": + showInventoryDialog(); + break; + case "trash": + if (keywords[1] === undefined) { + newLine("Trash what?"); + return; + } + removeItemFromInventory(keywords[1], keywords[2]); + break; + case "1": + gameInput(1); + break; + case "2": + gameInput(2); + break; + case "3": + gameInput(3); + break; + case "give" +e(); + break; + default: + newLine( + "Invalid input. Please type a number to select an option. > Pr, or 'what?' to have the last text repeatedess '1', '2', or '3'." + ); + } + } +} + +function newLine(content, className, styles) { + let newLine = document.createElement("span"); + newLine.classList.add("line"); + if (className) newLine.classList.add(className); + newLine.innerHTML = content; + document.querySelector(".lines").append(newLine); + let shell = document.getElementById("shell"); + shell.scrollTop = shell.scrollHeight; + return newLine; +} + +function newDialog(image, speaker, text, className) { + let newLine = document.createElement("div"); + let textContainer = document.createElement("div"); + let speakerImage = document.createElement("img"); + let speakerName = document.createElement("p"); + let dialogText = document.createElement("p"); + + speakerImage.src = image; + speakerImage.style.width = "150px"; + speakerImage.style.height = "150px"; + speakerName.innerHTML = speaker; + dialogText.innerHTML = text; + + if (className) newLine.classList.add(className); + newLine.classList.add("dialog"); + newLine.style.display = "grid"; + newLine.style.gridTemplateColumns = "150px auto"; + + newLine.append(speakerImage); + newLine.append(textContainer); + textContainer.append(speakerName); + textContainer.append(dialogText); + + document.querySelector(".lines").append(newLine); + + return newLine; +} + +function newPersonDialog(person, text) { + newDialog(`assets/img/${person}.png`, people[person].name, text); +} + +function clearTerminal() { + document.querySelector(".lines").innerHTML = ""; +} + +function printNeofetch() { + newLine( + ` + .%% OS: sleepwalker.quest
+ %%%%%..%% Host: Browser
+ %%::...%% JS: ES6
+ %%::...%% Font: BigBlueTerminal
+ %%%::..%%% Time: ${new Date().toLocaleTimeString()}
+ %%:::::..%%% : Date: ${new Date().toLocaleDateString()}
+ %%:::==%% .:.
+%%:::::..%% : .
+%%:::::..%% .::::. :
+%%:::::..%% ::
+%%::===..%%
+%%:::::::::%%%
+%%:::::::==%%% %%
+%%:::::=======%% %%%..%%
+%%:::::=======%% %%%..%%
+ %%:::::==:::..%%%%+ %%%%...%%
+ %%===:::::::::....=%%%%%%%%%....===%%
+ %%%====::::::::::.........::==%%%
+ %%=========:::::::::-====%%
+ %%=========:::::::::-====%%
+ %%%%%=============#%%%%
+ .%%%%%%%%%%%%%.
+ `.replace(/ /g, " ") + ); +} diff --git a/styles/style.css b/styles/style.css index 0b48522..e5c3471 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,5 +1,6 @@ :root { --terminal-text-color: #39ff14; + --background-color: #012; } @font-face { @@ -27,7 +28,7 @@ } body { - background-color: #012; + background-color: var(--background-color); color: #fff; font-family: "BigBlueTerminal", monospace; } @@ -40,7 +41,7 @@ h1 { .shell { box-sizing: margin-box; padding: 20px; - height: 70vh; + height: 80vh; width: 100vw; overflow-y: scroll; } @@ -106,14 +107,12 @@ span.line { display: flex; justify-content: center; align-items: center; + transition: .2s; } -/* + .dev-profile-icon:hover { - margin: 0 auto; - display: flex; - justify-content: center; - align-items: center; -} */ + transform: scale(1.1); +} .pfp { border-radius: 50%;