Added custom cursor

[eviterin]

Context (Problem, Motivation, Solution)

Silly little cursor update.

Describe Your Changes

Three types of cursors have been added. Default - active if no other cursor is active On-hover - active when hovering a component with a className that includes 'cursor-hover' Clicked - active when left mouse button is down

Updated the modalElements base class to include 'cursor-hover' so now all cards and buttons should have this. Placeholder art added. If to be changed, then paths need to be updated in globals.css. File type must be PNG, SVG, GIF or CUR and dimension need be either 32x32 or 64x64 px.

Checklist

• [x] I have performed a self-review of my code
• [ ] I ran make check and fixed resulting issues
• [ ] I ran the relevant tests and they all pass
• [ ] I wrote tests for my new features, or added regression tests for the bug I fixed

Testing

Hovered some components

[norswap]

Cute! But there's definitely an easier way to do this.

Imho, it would be better to create a list of elements that we consider interactive (a, button ... something else?) and apply the cursor to them (in globals.css):

button, a {
  cursor: url('/path/to/hover-cursor.png'), auto;
}

button:active, a:active {
  cursor: url('/path/to/clicked-cursor.png'), auto;
}

Then we need to apply the normal cursor to the root of the app:

.root {
  cursor: url('/path/to/normal-cursor.png'), auto;
}

Also in globals.css, then wrap the app (in _app.tsx) in <div className="root">

I think this should provide the same feature that you've built (or better because I don't get the cursor on some of the index page buttons for instance) in a way that's simpler and doesn't require us to annotate every instance of something hoverable/clickable and potentially miss some.

That being said ... we will still need to annotate the cards with those modifiers + use a custom pointer for drag and drop (closed fist?), those might require some custom JS.

I'd say let's try if the simpler method above works, then sync with @ultraviolet10 to see how this could be applied there. I don't think it'd be good to have custom cursors on the home page but not on the play page =)

(Also, probably lower priority than the rest, but we can keep this open while we figure it out, I like the idea.)

[norswap]

Closing this for now since it's very out of date, but it's definitely something we can bring in later!