Coding Showcase
Showcase of the things I made for s0urce.io. The goal was to create a website that feels like an operating system with window management,
icons, etc. while having a hacker theme and giving it a "snappy" feel. For this project Svelte was used with the usual combination of HTML, CSS, JavaScript and Node.js for the backend.
Windows
The basic windows functionality as we know it from the usual operating systems. Open them from desktop icons, drag them around, focus them, resize them and close them.
Terminal
Shown here is the main part of the game: hacking other players. The terminal features some animations, an old CRT screen effect and text that is being typed out.
Chat System
The chat features a list of emojis that can be chosen from either the popup menu or by typing the name of the emoji. The text is automatically converted into images. This was achieved using caret positioning in a contenteditable div.
Inventory System
Drag & drop + double click functionality, such as the swapping of the users profile picture and dropping in a new item. Also, the search and category selection features of the inventory. This combines HTMLs drag & drop API with custom code.
User Profiles
You can click on any username in the game to view a players profile. Then you are able to see their profile picture, a shelf of items they want to display, their name, country and their description, which can be changed any time.
Country Wars
A game mode where players can fight against other countries. Here we have the lists of top players and countries, the shop where they can buy rewards and the previous seasons.
