@flummoxed

Day 4 of working on my Pokémon pomodoro website.

Drew a Sylveon focus animation! She looks adorable… I also abandoned my idea of making full-on animations because I would like to focus more on the developer side of things rather than hours of animation and art ;w;.

I added some drop-shadows to make the todo list look nicer and stand out more.
The add-todo now works with hitting the enter key (yay!) instead having to manually press the submit button.
I also added a option for Mimikyu as someone requested.
Next up is coding the functionality for switching Pokemon, as well as drawing the break animation. To avoid myself from crashing out, the break animation will be a Pokeball regardless of the Pokemon picked.

I though some more about upcoming features:

• Adding ambience sounds?
• Drawing different backgrounds?
• Allowing the user to customize break and focus times
• Add a long break function… (I don’t know how to do this one, but I’ll figure it out)
• User notes function

Day 3 of my Pomodoro website centered around Pokémon!

Four hours already?! That’s crazy.. anyways, I did a LOT of styling. A huge trouble for me was layout, as I’m still weak at CSS positioning… but don’t worry flex was here to save the day! Love you, flex styling! It is such an easy tool to use to align items and put them into columns correctly. Also, I got the background working.

The background-blend-mode property, an AWESOME property I used for a previous personal project (not on Hack Club! </3) helped me out here. And this will be crucial in allowing different themes because I don’t need to switch thru JS a million different images! I just need to change colors. I accidentally created a… decent background with a checkered pattern and a background-blend-mode property.

Okay, two last cool things:

• I styled the select property! This is a recent development within CSS that’s AWESOME, and you can see this in Screenshot 1. Usually you were forced to the platform-default select… which was boring. But with this one I could add Pokémon icons!
• Next, I started drawing an animation, and the first one will be Sylveon. AS you can see in Screenshot 1, Mabosstiff is the next planned one. Pikachu and others will be next.

So, my final question to you: What Pokémon do you want to see in this website? Just want to see the most popular ones to add to the lineup. Probably, I will have around 6-7 (unintentional) to start off with. I don’t want to add too many, at least for my OWN sanity…

Day 2

Got a to-do list working! And styled it as well. I am learning JavaScript through this which I think is pretty neat. The to-do list took some time, and I struggled w/ styling it and making the check work. I figured it out using the :before element to place a checkmark.

Pikachu is serving as a placeholder until I draw in animations.

Next up is more styling…. which I’ve already been doing. Figuring out flexbox and block and all of the positioning methods are weird! I think I want to add in themes for each Pokémon animation I add.

Day 1! TLDR: created a pokemon pomodoro website and started w/ basic timer functionality

Thought of making this project… a Pokémon pomodoro website!

There are a lot of these out on the web, but I wanted my own. It’s meant to be very simple, with some cute animations that play for each one.

I hope to add a lot of different ones as time goes on. I had a separate cursor project… but that requires a lot of research, so I might as well do this as someone with a lot more HTML/CSS experience!

So, for now:

• I coded the timer functionality. I was fighting user input, but for now I’m going to go with a very simple 25/5 timer. User input time will most likely be later as I mess with JavaScript. When you reset the timer, it resets to 25 minutes even if you’re on a break. So… no trying to cheat the breaks… unintended feature but a welcome one. Yes I had to fidget w/ this a lot because I am weak at JavaScript (learned some of it WAY too long ago).

Devlog #2: Successfully got .ani hotspot value

To read the .ani file, I had to go through a lot of trouble. .ani files are binary files, which means a a weird amount of struggle regarding reading them. And it’s not as simple as reading a .cur file, since .ani files are dynamic in their number of bytes.

After fighting the internet for an ani-file parser, and a LOT of struggle with that ani-file library… being outdated… I went in and edited the issues with the ani-file library, still struggled to get it working… and gave up eventually.

I resorted to Gemini to help me debug the issue. Got it working finally! A little note: did have to fight the AI as well to get it to work… but here it is! Now I have hotspot values for both .cur and .ani cursors… and the hard part is done I believe. (I hope I didn’t jinx myself…)

Devlog #1: Began writing a program to convert Windows cursors into usable Mac cursors

Here we go. I’ve been quite irritated at the inability to find cursors that run with Mousecape, a program built to change your cursor for mac. Most are built for Windows, which is easier to put in custom cursors with. I believe this has been done by some other people; however they didn’t work… perhaps due to my human error, so I thought it would be a good idea just… to build it myself. End goal is to make a website or app of some sorts to make it really easy.

A lot of research was required to start this one off. I had to do some research into .inf files (these help download .cur & .ani files into Windows systems) and .cape files (which are how Mousecape cursors are stored).

Now, the difference between .cur files and normal .png files is that .cur files store an additional value (a hotspot value, which tells at what exact point the cursor can click? That’s the best explanation I have right now). And to get this value, you need to parse through the binary file of a .cur file to specific bytes. Through those specific bytes (stored as these funny little things called little-endian numbers (?)) we get our x and y value of the hotspot. With this predetermined value set by the author of the cursorpack, I can now place that directly into the .cape value. Less hassle for the user!

With all of that out of the way, let me succinctly write what I have accomplished here:

• Wrote a Python script to get the values of the cursor hotspot from a .cur value, by taking the byte data and converting them into integers.
  
  Now, there was some struggle in getting .ani cursors (animated cursors!) to do the same thing (as you can see), and I haven’t exactly figured out what byte data things I need to do with that. (More research… I suppose :/) My next step tomorrow is to figure that out. Point is, that I got the .cur file to give me what I need. (I am quite aware of the rambling here, it is late and I will edit this log tomorrow.)