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.