Devlog #9

ALRIGHT SO ITS THE LAST DAY TO SHIP ON STARDANCE SO HERE IT IS:

What’s New:

• Added Adaptive View Bounds
• A Calculator App

The Adaptive View Bounds:

This is basically just view bounds which ensure the windows don’t go out of the viewport, and it automatically adapts to the size of each window, so it works on any device and there’s no trial and error to be done with pixel-specific view bounds.

The Calculator App:

It’s a calculator. And the design is based on an actual old calculator I have at home (thats why the screen is dark green). So you can do all the regular functions.

Weak Points:

• It only supports equations with 2 numbers.
• You don’t actually see the decimal point until you enter the next digit. Not a bug exactly, but it might be confusing and look like a bug.

Challenges:

• The View Bounds
  I really did not understand how to make the code behind adaptive view bounds and clamping windows work. So I spent 1 or 2 hours minimum getting ChatGPT and Gemini to teach me core functions like Math.max() and how to incorporate it, and I actually noted it down in a book. So yeah, that took a bunch of time.

• The Calculator itself
  I sort of jumped head-first into this without really knowing how to make a calculator. So I made the design. And then started working on functionality…which is when I realized I have no idea how to do this. So, I watched guides. And managed to make it functional while keeping the original UI identity.

What I learned:

Well firstly and most importantly, I FINALLY LEARNED WHAT AN array IS! It’s actually EXTREMELY helpful. And fun. And secondly, of course, drag logic, clamping logic, and all the functions and how to use them when it comes to that aspect of making a WebOS.

Alright, so I’m definitely going to keep working on thos after stardance (I have IDEAS!). I’ll probably add a

• Weather App
• Space App
• Some sort of game
• A Relseiðr calculator
• A magical dictionary
• A bunch of other fun stuff

So, here’s the new calculator. I had a lot of fun making CometOS and I’m definitely continuing it. Until next time!

Devlog #8

Ok, so this is the FIRST devlog after the ship. Not really happy about how the ship went but oh well. Anyway, so, I added stuff:

• A Settings App
• Upgrades to the UI
• Worked on a sort of dictionary for all the new stuff that I’m introducing (after all, it is CometOS)

The Settings App:

Ok, so one of the major themes in the feedback I got was there needed to be more apps (since its an OS). So, I added a settings app, as just a basic, customization app. So, you can change the background image, and there’s a bit of design choices as well. I kept it so you need to scroll down to see all the images (some people won’t agree with this, but personally, I really like it. The scrolling feels more interactive and is required for a window size that looks really, really good). Also, the borders of the buttons turn blue when selected, and there obviously also a shadow indication that its a button when you hover over it.

UI changes:

So this was actually pretty small but looked really cool. I’ve seen on some sites there are just these little elements that blur the background behind them. While I was tinkering with css for the button shading I realized there was a style of filter: blur(). From there I found out about backdrop-filter: blur() and used that in the CometOS welcome window and the top and bottom bars.

The dictionary app (name needs workshopping)

So this is basically just because CometOS is about a fictional character in a fantasy world, so there needed to be an app that dealt with some words and terms used in other partts of the website (specifically the family tree). I felt there needed to be something to explain it, so, I added this. Its not done, so far I’m just done with one of the Relseiðr pages. Currently this is just hidden with display: none so I can work on functionality first.

Challenges:

There were really only a few challenges this time. The largest one was actually just getting the seperate visual cues which go (oh, this is interactive!) for the button and the image inside. Because I kept accidentally giving the button’s new classList to the image. And thats when I realized event.target and event.currentTarget were different and made for this…..

On a side note, omg, display: inline-flex is so helpful!

What I’ll work on next:

I have now realized that since I’m adding so many apps, I need to add proper, adaptive view bounds. Before this I was using local pixel-specific bounds which were adapted to my viewport, and just not putting it on github, because I had already put in the work for those view bounds a few months ago, and it worked really well for me.

So, anyway, I have now decided I need proper view bounds, so definitely going to work on that.

Also, heres the new Settings app, and the beginning of the dictionary app.

Devlog #7

So, I thought it was ready to be shipped, but it wasn’t. In the final checks, I found out that because I had used pixel - specific drag bounds, while it worked perfectly on my laptop, it didn’t on anyone else’s (since other devices have different viewports, different areas. Some have longer lengths or widths than others, leading drag bounds to potentially be in the middle of the screen).

I tinkered with it for a while (enlisting a bit of AI help) , but then realized that there was something about the new code that was messing up the notebook app (the sidebar stuck to the edge of the viewport). And, since there was about only one week left (and exams are starting soon), I decided to not accidentally mess up anything else, and so, deleted the drag bounds - I mean, better to be able to drag windows anywhere than have bounds that completely restrict it, right? -

The good part is that even if the window goes out of the viewport somehow, you can just reload the screen to get it all back, which has no real downside since notes autosave.

So anyway, now, we are actually, finally ready to ship!

This was what was happening to the notebook app btw

Devlog #6

We are FINALLY DONE and ready for the FIRST SHIP!
Here’s whats new:

• Added information bubbles for each and every character in the family tree, which can be easily opened and closed.

• Fixed the selection for icons in the bottom bar:
  The green highlighted background would also highlight the areas where there were padding which we didn’t want because the icons would then be off center. Fixed this by adding a new transparent div in the middle, so padding is no longer required.

Challenges:

• Fixing the icon selection bug. I played around with box-size for a bit but then chose to just add a transparent div between icons.

• Getting the information window to move along with the family tree window (as that is draggable). After a lot of testing, I realized I could just keep it inside the div but in positioning, its overflowing, so with an overflow: auto tag, it’s now set up and working!

This is a screenshot of how the info bubble would break because it wasn’t in the same div:

Devlog #5

Ok, so, update:

• Created the family tree
• Improved feel of the app (through a visual sign when you hover over a character button)
• Fully initialized the window for the family tree app (made it closable, draggable, opens with an icon, added drag bounds).

Challenges:

• The family tree image kept going above the icons used to drag and close the window. I put them in a different and experimented with different ways for SOOOO long - turned out I was just missing a position: absolute tag….
• There was also a small bug where the buttons would go under the image instead of on it.

Here are some pictures of the bugs, since it’s pretty hard to explain:

Devlog #4

I’ve started the next app - an interactive family tree. Since CometOS is based around Comet, I figured I should add a family tree.

So this app is going to have clickable buttons for each member of the family, to give some info. Basically, its a massive lore drop.

Here’s the wireframe for the app, and also an entire page I spent planning it because I ran into a few problems…

Devlog #3

What’s new:

1. Added a bottom bar to store content selection options
2. Added a notes app which is editable (and stored in javascript)-you can add your own notes.
3. Added a save feature to the notes app-log back in anytime and the note is still there. YOU WOULD NOT BELIEVE HOW LONG THIS TOOK (but, I learned how to save things in localStorage).
4. Fixed a bug where was at the bottom of the and the .js file and .css file weren’t loading in the live server.
5. Fixed the bug where you lose the handle and the window gets stuck at the top/bottom of the page by making it so you can click through the top and bottom bar.

Challenges:

1. I spent a whole afternoon trying to come up with a clever way to avoid putting html in my .js file (because it looked messy), only to end up putting it in my .js file…..
   MOVING ON,
2. There was some really weird stuff happening with saving notes. Like, I would write stuff, and it would be saved, but in different ’s? So only one was actually editable and the rest were all floating under it.
3. Started to debug in a live server instead of as a file. The html and css files weren’t loading in. I spent so long trying to figure out why, and then realized that should be at the top of the body, not at the bottom (You know, like an actual head. Wow, thats pretty self-explanatory).

So then, I fixed that and to check if it was working or not, made the background hot pink in css.(AND IT WORKED! And I will never be able to forget that image).

What’s next:
Ok, so next, I still have to finish a few things.

1. Make it so that you can’t drag windows past a certain limit (to prevent the background image scrolling and multiplying - learned how to clamp draggable elements to the viewport!).
2. START STEP 5!
   So since this entire webOS is based around a fictional character-Comet, I think I’ll make an interactive family tree. So, each person has buttons and that leads you to a brief description about them (and lore. LOTS of lore).

This is how the webOS looked in the test. I’m still not sure how the top bar also turned light pink, but, cool I guess

Devlog#2

Done with step 3. So now I can open, close and move around the welcome screen window.

The cross acts as the close button, and you click and drag the hand part of the window to move it around. So I’ve updated the CometOS text in the top bar to open this window - hence it looks a lot more like a button.

I think for the next windows and apps I’m going to make the open button in a side bar.

And I finally figured out what classes are!

So yeah, for now thats it, but I think by the end of step 4 its going to be a massive update with a lot more things.

Devlog #1

So this is CometOS which is from the mission WebOS 1. It revolves around a fictional character - the Sorceress (in-training) Comet, set in the fictional world of Alarica.

So far I’ve finished uptil step 2. So the top bar can track time, and also battery levels and gives custom messages based on the battery.

Right now that’s pretty much it but I can’t wait to expand the project and develop the world and everything.