CubeOS is complete!

CubeOs is fully finalized! Just at the nick of time too.

From last devlog, I’ve added 2 new apps and made a complete overhaul to background, among other things. Song choice of the playlist got completely changed too.

Fully completed all media queries for phones and tablets.

This means in total CubeOS has 6 apps, a music player, and a dope ass background. And you can view it anywhere, essentially.

I had fun!

Optimization on the way!!

All files are now CDNs (except audio), and I have started to make the website more accessible towards mobile devices. Currently what you’re seeing is the media query for tablets. Phones get more tricky.

Also I added in images for the icons of the 2 apps that didn’t get one.

Next Up

• If I can, I would add a percentage to the volume slider so you can tell numerically how high the volume is.
• Make and finish the media query for phones
• Maybe add in a new app?? Who knows.

Will I make it to the end of Lock-in?

I hope so! I need 8 more hrs to complete the required 10hrs and the make-up hours I have to do. I have been ignoring or putting less attention to some responsibilities for this, I can’t afford to not pass….

2 more days!

Notepad app added!

Unfortunately the icon looks trash! The actual window too! I’ll fix that don’t worry. You can download what you wrote, and to get a clean slate, press the ‘refresh’ button. SOMEHOW, this was easier to do than the music player, make it make sense.
Well then again all you’re doing in converting a string into a .txt file. oh well.

Plans for Week 4

I’m in a hour deficit of ~5hrs or more? So I have to devote a lot of time to optimizing code, updating styling, and making the website accessible for other kinds of devices. CubeOS is anti-phone :(

I don’t know how everything is going to work out, I have most of the weekend booked so I really have to push myself to make everything be complete.

Completed all recommendation articles, and added in a new app showcasing some of my art and a link to my youtube channel (yes I have one). As suggested, I am trying to compress assets, made the close button sticky, and made tabs change z-index depending on which one you clicked.

As for making the stylings more flashy, I’ll rather worry about that for week 4, as I’m thinking of doing optimizations the whole week, because I’m still adding things.

And I like to write down code by the line whenever looking up a template so as to understand how said template works, and the music player took a huge chunk of time to do so straight up that’s why I have so many coding hours. I’m also very mediocre with web dev, this isn’t my first project, it is the most ambitious though.

Icon for 3rd app isn’t yet decided but that’s going to change soon.

Yes I know my website is very un-optimized, yes I know there isn’t much use to it, I gave up on the roulette idea, yes I know things can look at be slightly better but I’m not a web-coding wizard, and I’m trying my best.

Fully functional music player has now been added! It mostly follows a template from GeeksforGeeks, after spending nearly 3 hours looking for other tutorials. It’s not that stylish, but I’ve been thinking of making the music player stand out more compared to everything else, break away from the white theme. Maybe make it grey. I don’t know.

And with that over, I can fully focus on creating apps to make the experience more fun. The project size is becoming a bit bloated tho… mostly because of the images and audio files but the coding files also, I wonder if there’s a way to optimize whatever sphaghetti my JS file has.. for another time though, everything works.

Next step, create the articles for all the games I’m going to talk about.

First app has now been fully finished, and now onto the next! First app has a gif of fire as a background to showcase how strong I feel about fighting games.
My second app is just a recommendation list of games alongside a synopsis of sorts to convince people to check those games out. I wanted to make the ‘articles’ of the games be on separate tabs so I made an ul element act like the app icons for said tabs. I haven’t figured out what kind of icon to make this app, maybe I’ll draw it.
Alongside all of that, I’m considering adding in a music player. I don’t know how will that work out, but we’ll see!

To resolve my issue of not getting the desktop apps to work, I decided to look at the source code of other WebOS submissions to see how their apps functioned.
Turns out, the app icon logic provided in the WebOS jam may not at all work, as everyone (from what I saw) either has their own solution to this or reusing the javascript logic of opening and closing div elements. I did the latter, and everything is going smoothly. Finally!
Now to customize these apps. I’m gonna put in more than one.

My only big issue is that if I’m going to keep reusing the same logic over and over again, then a huge chunk of my JS file is going to be taken up with variables and the same addEventListeners. Does anyone know if it’s possible to make the code more compact? If you want to see what I’m talking about, go to the JS file in the repository and scroll until you see a comment saying “OPEN AND CLOSE DIV ELEMENTS.”

That’s all I have to show off… for now!

I can’t figure out how step 4 works. And I need to hand in something for lock in. This is why you don’t slouch on computer programming. I’ll figure something out tomorrow. If I’m able to.
I changed the welcome screen a slight bit.

Did step 4!!! But the app isn’t working as intended !! I am mentally drained and I gotta ask questions but that’s for tmrw!! Since im doing sidequest ill ship it right now and fix it later

So far, I’ve only gotten to step 3 out 5 of the tutorial. So there’s only the homepage to see. I’ll expand on what the project can do once I get the steps over with, and hopefully it becomes something real good.