adding a welcome
I tried to add a welcome today, cause without it, my website felt strange, we always need an ASCII-art welcome screen thingi. In my terminal (pc) it is sth showing my stats and pokimons, and I needed sth like that for my website too. First I used this to generate a nice welcome ASCII-art and then saved it inside a JSON just like orphie. Then I added a specific command for it returning Welcome and implemented some handling in the constructOutput() function. After it was working with ASCIITextFrame being .join, just like any other json thingi, I wanted to have a typewriter effect and I just wrapped it inside. At first it went quite well, but then I realized, that white spaces takes time to being typed out too and tried to modify my typewriter function to just simply skip the timeout for it, it was quite confusing, but I managed to make it async and create a delay using await. There was a problem though, I didnt want to delete my old function, soo I created a try catch block to keep it as backup. After doing all that I realized I could break each line apart and typewrite then simultaneously. I wrapped another .map inside a .map and wrapped the lines in a span and then joined the construction with a line break. This went perfectly, but now I need to do animateWelcome() differently. I decided on querySelectorAll and a forEach loop. Figuring out how to get the spans where uhh, alot of guessing. At some point I even wanted to give the spans inside the .welcome container a class, but then I found out how it functioned. Using for each was also fun, I wasnt quite sure about the syntax, but google helped very quickly. But because of the white space skipping, they werent all in sync, because the number of white space isnt the same. The effect created was beautiful though and I left it. While writing this devlog I also modified the typewriter function a lille so I can choose if I skip white space or not.
Anyways, enough yap, bye.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.