cloudTwelve

I made the chips an equippable tool! I learned about using tools, which would have been really useful when I tried making a fighting game (I made the tool UI from scratch, lol). Still need to make it so that the chips are only in your inventory when they're picked up (and only for food chips, which are only in use ~1 time in the story).

Filled in the map with filler houses, and added the exterior of the corner store! I learned a bunch of stuff about Roblox Physics, like the use of LinearVelocity and AngularVelocity to make something move without scripts. As the video shows, LinearVelocity (with the vector set to 0,0,0) keeps the square on top of the Corner Store floating, and Angular Velocity (with the vector set to 0,1,0 to make the object rotate in the Y direction) applies a torque in the Y direction to make the square spin. Both LV and AV need an Attachment on a part in order to work, and when I made the square a part of a Model, for some reason LV and AV didn't function.

The map is looking much better now, like a game you'd actually play!
:D
Now to add corner stores and other places to find snacks + get snack money ...

I built the food bank and added a ProximityPrompt (basically the Press E to Interact button) to the area with arrows. It doesn't have a script yet, but that's progress! Also, somehow all the doors broke... I have no idea why, I've changed nothing :(. Next on the list is to fix the doors inshaAllah, and then figure out where to put the shops and snack sources!

Scripted the time cycle to begin after the player presses play -- the in-game time starts at 4:00, and stops at 6:00. I made the cycle faster for the video, it's actually a lot slower and takes ~15 minutes to go from 4:00 to 6:00, a solid amount of time to gather and give snacks. Something I learned is not to mix up functions (which, when used like methods, have a colon before them) and properties or events, which are accessed with a period.

finally understand why I can't post devlogs! The video was too long (side note: there's a watermark bc I compressed the video using free software) ... I've written this devlog at least 3 times already :)

Anyways, I worked on getting the GUI made and functional + looking good, which took around 30-45 minutes. I learned the importance of spell-checking (me when Transaperncy) as well as the fact that you need to make sure you play your Tweening animations (using :Play() -- this goes for any animation).

The rest of my time was spent making the player's house, including the player's father's rig, complete with a sleeping animation (what I said earlier about animations applies here too -- put it on a track with :LoadAnimation(), then play the track).

I started working on the rest of the map (have a house done and some road) and then decided to try devlogging again.

Next up (inshaAllah) is map fixing and then story scripting!

made the animation of the initial title sequence -- now the GUI is next inshaAllah!

Continued the map development, started time of day scripting, and made the pickle chip snack parody.

Made the basic HTML/CSS of the first page of the popup.

Made the beginning of the player character's house! Map development is hard... even harder when I still haven't done too much scripting :/. Next steps (inshaAllah) are to finish the house, build the rest of the map, then script the story.

Took me waaaaay too much time, but I made a door model that opens/closes!
I also did some changes to the map, the white room i'm in is the base for the player's house.

Made the banner and icon for Timepiece, also began the pop-up coding.
... while I was writing this and complaining about the pop-up not cooperating, I remembered that I forgot to link the stylesheet as popup.css (I put styles.css out of habit).
Now the popup's an acceptable size! Next on the list is to get it to onboard the user and store initial values for the website and time. (after that, inshaAllah, is actually implementing the blocking)

I made it so that when a player joins the game, they spawn as this chill guy. This can be done by making a custom character (Rig Builder) and placing it in StarterPlayer, naming the rig StarterCharacter.
cool!

made some of the map (there's still quite a bit...)

Yup, it was a simple fix... I forgot to link the JS in the HTML, what a relief!
Anyways, I got the letters to (sorta) appear, which is good! I'm trying to make them scroll like on a cryptography wheel (seen in this video), just need to add the (transition) property.

Video that inspired this: https://www.youtube.com/watch?v=HIrDMR6CaHY&t=4s
If Dr. Seuss Made Programming Videos by Hyperplexed

I've added the input and the basic layout of the Caesar cipher-maker, but the JS doesn't want to work for the input (on change, nothing is outputted) or for the numbers (they won't change with arrow clicks).

I used Flexbox to center the items.

Made the basic outline of the website, including containers (needed for toppings) and some variables. I also chose a color palette:
--black: #1B2021;
--dark-gray: #30343F;
--green: #399E5A;
--white: #EDF4ED;
--pink-accent: #E54F6D;

Wait, is that it? YESSSS!!! The goal-setting functionality has been implemented, which means that the basic functions of the site are now complete.
I learned that localStorage can only store strings, not great since I wanted to store a list, but using JSON.stringify to string an object (and JSON.parse to get the object back) was helpful.

Made the structure of the goal input area, still need to figure out how to store goals, submit/save goals, etc.

This devlog isn't as definite as I'd like it to be, I started work on the Add Goal part of the site but got sidetracked and implemented the reset site data button.

Currently, the design for the goals is finished but the input is not, and the reset-data function works.

Made the title customizable (with no HTML input tag!). It also saves.
Actually, i'm super proud I figured out how to do this without AI (unless Google AI summaries count, the ones at the top of the page? hmm) or tutorials, just Stack Overflow.

Things I've learned:
- element.textContent has whitespace at the end? I used trim() so that there was no need to press backspace too many times
- I had to make sure to put a boolean stating whether the title was currently being edited -- otherwise, multiple clicks on the title would create multiple keydown (basically listening to the keyboard for keypresses) listeners, so when a key was pressed, it registered multiple times. yipes...

Created the second page and the link to the first page, now just need to make the second page function --> planned function is a goal list that you can add to, and then a list of created timers that you can (optionally) have alongside the goals.

idea! --> be able to reuse past timers, click Start on a past timer in Timer History

Made the animation for the dashboard button!

Implemented the option to change the timer size in the settings (lightbox).
[still need to fix the delete data thing, inshaAllah, rn it's just a button]

Lesson! -- learned that you need to use event.target.value to get the value of the drop-down when someone chooses something within it

The buttons to change the website's aesthetic are functioning! Now to change the colors associated with each aesthetic, which involves decisions...

(by the way, each aesthetic collage was made by me using Canva!)

Woohoo, the initial render of the aesthetic worked! The buttons to change the aesthetic won't work, however, so I need to figure that out.
After that, inshaAllah, I also need to figure out the glassmorphism (if any) for the buttons and the colors of the individual aesthetics' timers.

Finally finished the timer functionality! The timer's customizable, resettable, and pausable.

Next up (inshaAllah) is making the backgrounds and implementing the changing aesthetic functionality.

Made it so that the timer input couldn't have minutes or seconds greater than 60.

... for some reason it wouldn't let me show a devlog, so I also worked on getting the timer to work, no visible progress yet there.

Learned the importance of DOMContentLoaded --- had some issues where the showLightbox function would not want to work since the button it was attached to had not yet been loaded, so JS returned null. Google was a big help (and so far, no project-specific ChatGPT so there's a win!!!).

Now the settings lightbox shows and can be x-ed out.

Updates:
- added and positioned buttons
- imported icons (Font Awesome)
- started work on lightbox, settings, and general design

Something funny:
- Forgot that absolute was for position and not display, had issues getting the X button positioned correctly in the settings lightbox because I wrote display: absolute and not position: absolute.

Been working on the Settings lightbox, don't yet have the function to display/hide it, it's not yet visible in the image. Planning to have the site have a lot of glassmorphism/shininess to emphasize its aesthetic-ness.

Woohoo! Added formatting, so now this actually looks like a timer app.
Reused some code from an older project (pomoblocko) for the footer with the links to charities, had a small issue since I forgot to link the JS file...

Made GitHub repo, started HTML
outlined fonts for each style:
- Sleek BW -- Inter
- Cottagecore -- Playfair Display
- y2k -- LXGW Marker Gothic
- vintage -- Savate
- soft girl -- Caveat
formatting? none so far...