System-1 Mac WebOS

In this devlog we are going to cover exciting part.

1. We have successfully implemented a virus System.
2. Do defend off the virus there is the antivirus.
3. When tutorial is completed/skipped the virus warning will pop up after 5 sec and continue to pop up another time if you ignore them the webOS tab will be closed.
4. When clicked save in the alert it will ask you three puzzle each puzzle is unique and answerable.
5. When submitted without filling the choice or with wrong answer you lose one chance when all 3 chance are lost. The antivirus will close itself. When a second warning pops up you can attempt one more with 3 chance if you failed to solve all the puzzle the webOS will close itself.

So have fun. Try to find all the features and easter eggs in them.

In this devlog we going to cover bug fixes and new feature.

1. when creating a file without a proper name in the tutorial leads to the completion of the so made it work.
2. while fixing the first step when an invalid name is entered the system popped a alert but still the step is considered complete without actually creating a file so fixed it.
3. while fixing 2nd step clicking the okay in the alert box marked the step as completed so fixed it.
4. Added a Skip tutorial entirely for those person who don’t want to wait. It may also works as a escape route when the tutorial gets budded due to unknown reason.
5. So made some changes to the readme like adding the newly integrated stuff so within 1hr i am going to ship this project.

This is a very long devlog let me break it down for you.

1. I implement a music player which took a long time but what it can do is well play music hahaha good one ehh. It can play music have the ability to go format in duration using the slider and you can upload your own music here. But you can only play one music at a time.
2. Added a context menu now when right clicking the mouse button it opens up a context menu and you can click it to open up the respective window.
3. Added a full screen option which can be triggered if you double click the navbar/tools section. Toggle back by again double clicking it.
4. Added a date, month and day which can be seen when hovering the mouse over the time text.
5. Now the window can be resized by double clicking the head/title section and toggle back by double clicking it again.
6. Added shortcuts for the options ctrl + f opens a new file creation window and so on i will add this in the readme file.

Added a did you know section under special section.

1. When clicked it will pop up a dialog box stating the fact.
2. When clicked ok the dialog box will disappear.
3. When clicked next it will state another fact.

kinda cool right. hohaoaopa

Things i have made so far and is a great feat.

1. added a tutorial which works buts buggy.
2. When a step is shown the necessary things will get highlighted rest will not.
3. Only can advance the step when finishing it. Can’t just skip it. Some steps are just information which are meant to be skipped.

need to do -> FIX BUGSSS Goddamn.

I have created a working tutorial dialog box in the webOS now i need to add sound effects to make it real like the mascot is talking and want to make the focus work i gave the focus but i didn’t actually add a blur some css is messing with it. Need to figure it out.

Currently i have worked on Tutorial steps just wrote the steps and text message for it. Can not show them here due to policy of FT. Can check in github to see them all. Next i need to make the tutorial feels like tutorial.

In this devlog we going to cover two major milestone as of now which is great.

1. First of all i made the create file option in the folder so now we can able to create files inside the folder.
2. Made the created file to appear inside the folder not the outside of the folder which is a great feat for me as it gave me a bit challenge.
   Rest is small they are
3. Created a alert when we type the same name in the file creation in the folder.
   Now i need to distinguish between the desktop files and folder inside files when clicking so the os doesn’t get confused minor change to the id of the folder name will solve it.

Two things made within this timeframe:

1. Made a folder creation option so user can now create folders hohoo but sadly no function for it yet. Just can be clicked to open but it is still treated as a file need to fix it.
2. Made so that names that popup in default open can never be created again when trying to do so it will popup a error and prompts you to try a different name. Made this feature so that there won’t be confusion when two folders are the same name.
   Bug fix:
   When setting some files as not editable still when opening the file user can edit and i just found out that because in a event handler for dbl click to open files/folder changes it to true. so no matter what i set, it will be true when opened so changed it now.

Added a login page so user can log into the OS by providing the correct credentials.
Username = admin.
Password = 1234.
It will create the OS page in a new tab and close the login page tab from the chrome if you allowed popups.

In this devlog i have covered this.

1. Zoomed the screen to 2 so everything looks big and good which took a lot of time as i forced to change my calculation to account for the scaled window .
2. Made My About me section to look same in all tabs in the window.
3. Now you can delete your system folder do it and say what happens it is an intended feature.
4. Fixed some minor bugs with the workings.
5. Wrote Readme file which took a long time to write.
6. Now i have a main.html and index.html. Index.html opens the main.html for the new feature i added.

In this devlog i am covering three things.

1. First thing is i made a print button which lets you print the current window only files right now.
2. Second is i made a delete current button which deletes the current window and move it to the recycle bin you can retrieve it back if need in recycle bin.
3. I implemented a system page just like open page it shows the available files and folders to open by double clicking on them.
   Next thing is to add a Info about me in the page and readme.

This is a long devlog but let me short it out for you so that it is easy to understand.

1. Made drag to drop the file in the trash so the file gets deleted from desktop and gets added to the trash file and you can double click it to restore the deleted file.
2. Made a filter that is in view it only gets activated if the current focused window is a folder if it is file you can’t click the by name and by kind button it will be disabled.
3. Made a function so you can rename a file and some things can’t be renamed so it will just give a alert.
4. Made so that you can’t overlap the icons on top of each other if you stop dragging on top of an other icon it will snap to it’s original place.

Now you can create n amount of files and each file can be opened simultaneously before it was like only one file can be opened at once i changed it so each file gets it separate copy so data inside will also not be erased. Now need to add a alert when a same file is again created so never ever two files can have the same name.

Made the z-index work so whichever you click the last/open will come at top and drag/click moves it to top and you can open a file from the open button that is available in the file->open when clicked you see available files and folders you can double click them to open them i need to make the functionality for typing and opening.

I just made the new button functionality so now i can make a new file and can open it and while doing this so i just added two more feature init one is now i can close the current window(means last opened window) with close button and close all the windows using the close all function now i need to add a print functionality.

In this devlog i have created two things one is a modal to create a file in the system not yet implemented a file creation but alomost to it and a alert box if you didn’t write a name and clicked create so now i need to add the file that is created in the create button to the screen.

Added the loading animation so when first loaded the web page in browser the animation starts to play and after animation over it will show you the main page.
For this to work i made a minor change to the JS file cause i made calculation for icons and dragging assuming the div is block but when page first load there is nothing to reference cause width and children are hidden so instead i made a init() which will fire when the animations finishes.

Now i made the resize button work. How i did it is when pressed i will check it state which i gave in dataset named full if it is true it is in full state and if i click it again will revert it back to normal. I will have the original values stored in dataset so when reverting i will us it simply.

So when i was moving the top icon the icons below it shifts to top to fill the vacancy to add that i made so that when placing the icon on viewport i am also adding a invisible icon that is exact dimension of real icon so even when moved it the below icons doesn’t shift and instead of flexing the div i made a grid system i calculate maximum icons placed per col and after placing it the col gets filled i move to another col to fill the rest.

Now in this 20mins i made the opening and closing modal for a desk top icon. The UI is from SYSTEM CSS so it is easy to use as i need to copy the code from there and by writing a function boom now you can open and close functionality. The closing function is pretty simple as it finds the nearest parent with the class named window and will change the display to none. For opening it is where i used 200% of my brain i named desk top icons id as system-floder-icons so when double clicked i will take the id and remove the -icons from the id and i will end up with system-floder so with this id i can nvaigate another id same exact id which is the window itself so i can change it style from none to block some big brain time hehehe.

So i came to know about hack club rules about making a webOS and changed my changed my previous drag and drop code to the new hack club code so my net ai usage becomes 0% yayayay. And my friend who is also doing webOS gave a code i pasted it as a good boy it is just a animation that will make the website looks similar to cathode ray tube TV kinda brings back the retro vibe. Now i am trying to add a working folder structure init.

So in this devlog i have did two jobs one it to add a border-shadow since sometimes the text overlaps to the navbar and made the destop icons draggable which is the worst part i just iterate over and over until it looks good i have used claude for it tho. So basically when i click the icons i trigger the pointerdown so with that i know where is my icon relative to the cursor then i can move while moving i update the x and y pos to know where the user might drop it and i use grid system to put in place and that is it.

Added a current time in the top right corner or at the navbar which i had used a js function to extract current date into time and set an setinterval to update every 1 sec and added a trash can right now it is in center but will make a grid thing to store it. And i took so much try to finally get the macos font cause i am using tailwind css which is overriding the font in index.css so i said fuck it and i add the font to the body using the class in html itself no problem anymore,

I have created a navbar with tailwind CSS and macOS system 1 CSS. The macOS CSS has inbuilt functionality so i don’t need to reinvent the wheel instead i can call the function whenever i want so it behaves as intended without much hassle. Now need to design a basic homepage like placing icons and ability to move in a grid snap methd.