Serious CAT Corp.

a very serious cat corporation

Oh... Serious Cat Corp., what wouldn't I do for you? SCC, besides its very serious nature, is a simple game project with a character selection mechanism, and it was supposed to have mobs, a player and interactables, so it would actually be considered a game. But due to the motivation for making it, it will remain incomplete. I have made peace with that. Almost.

This project is my darling. Initially, it was created to teach programming to a friend of mine, and it had several versions. I wanted to teach her from the basics to the intermediate level, the usage of tools, vanilla JavaScript, vanilla CSS, HTML, frameworks like React, everything related to web development. It was a whole curriculum disguised as a cat game.

What it is

Henry, a brown cat in a dark blue suit with an orange tie, holding a briefcase — **Fig. 2** - Henry: “Sometimes tired, sometimes serious, sometimes angry. But always working.”

Ross, a yellow cat with a grey shirt, purple suspenders and a bow tie — **Fig. 3** - Ross, the boss: “You're five minutes lat- What? Yeah... My shirt has pockets, so what? Don't change the subject!”

Hamyr, a brown cat in a blue blazer and red tie, pointing at something — **Fig. 4** - Hamyr: “Unlock to see.”

SCC is a game about cats who run a very competent corporation, especially when the subject is fish treats. There is a character selection screen, there are illustrations, there are sounds, and there is the skeleton of a game loop that was waiting for mobs and interactables that never arrived. It is the kind of project where you can see the bones of something bigger under the skin of something small.

The design, the lessons, the illustrations and the code were all made from scratch by me. All the assets are mine, except the music theme, which is credited in the repository. I drew the cats several times until I got something decent — Henry, Ross and Hamyr are the three who made it (, and ) — made three different templates in Illustrator, recorded some sounds with my mouth in Audacity for the buttons, and started to code. It was a lot of work for a teaching project, and I would do it again.

Why it exists

Page one of the handout, with HTML exercises about tags, DOM and elements — **Fig. 5** - Page 1 of the handout: the first HTML exercises, in Portuguese.

Page two of the handout, with exercises about documents, stories and tools — **Fig. 6** - Page 2: still HTML, now with a small story to build.

I wanted to teach her from the basics to the intermediate, the usage of tools, vanilla JS, vanilla CSS, HTML, frameworks like React, everything related to web development. I also made an handout to teach her, and I still have some pages ( and ). Some of the old files I could find are in the miscellaneous folder, just for the sake of nostalgia and entertainment. Opening that folder is like finding a box of photographs from a version of yourself who did not know what a bundler was yet.

I consider it finished because I do not think I will ever touch it again, at least for a long time. To continue, I would need to rewrite the react-not-react code, since it does not use components at all. I wanted first to teach the core in a simple way, without components, so she could see what the browser was actually doing before React hid it behind a component tree. It was a pedagogical decision that became a technical debt, but I am still proud of it.

The react-not-react part

The first version of the cat card, with the name, the quote and a favorite stuff list — **Fig. 7** - Fluffly's first card, still without React.

The same cat card running inside a browser window titled React Two — **Fig. 8** - The same card running in the React version.

The project uses React, but not in the way React wants to be used. There are no components. The code manipulates the DOM directly, with the kind of enthusiasm that only someone who has not yet discovered useState can have. I did it on purpose, because I wanted to teach the core first. You cannot appreciate why React exists until you have manually updated a DOM node and forgotten to update another one. That is the lesson. That is the whole lesson.

It is also good to mention that this project is really old and can have some problems running on newer versions of React. If you try to run it today and something explodes, please know that it exploded with love. The code is a museum piece now. It deserves a glass dome with a little plaque.

Why I love it

A rough black ink sketch of a cat wearing a tie — **Fig. 9** - One of the first sketches of the cat model.

A finished drawing of a brown cat in a suit with a blue tie — **Fig. 10** - Some intermediate version.

Despite all the mess this project is, I love it, and I think it is beautiful enough to be here. It is not the most technically impressive thing I have made. It is not the most useful. It does not have a clean architecture or a test suite or a deployment pipeline. But it has a soul and a good reason.

I wish you the best, dear friend Michelle. I hope you still remember at least one of those lessons, and I hope life is treating you kindly. The repository is here: DrayanInterfaceDesigner/serious-cat-corp-v03. It is incomplete, it is old, and it is one of my favorite things I have ever made.