search

scribble-rs / scribble.rs

A skribbl.io alternative - Play at https://scribblers.fly.dev
BSD 3-Clause "New" or "Revised" License
431 stars 185 forks source link

Eraser and fill tool should have a visual difference to pen #155

Closed glauni closed 3 years ago

glauni commented 3 years ago

Currently the mouse marker doesnt change when selecting the eraser, would be nice to also see an eraser-like-marker when it's selected.

Bios-Marcel commented 3 years ago

I didn't quite find a satisfying solution for this yet. By using a rubber icon you never really know where it'll erase. Maybe a white circle with an R or an E in it? As you can change the ruber sizes as well? Even so, the tiny rubber wouldn't be big enough to see it's a rubber. Do you have an idea?

Bios-Marcel commented 3 years ago

Another problem I faced with this in the past is the cursor size limit. It was something along the lines of 40 pixels I think. At least on chromium, firefox though wasn't really a problem. Maybe we could do something with JS and CSS here to ease this.

glauni commented 3 years ago

Hmm, didnt think about that at first. Maybe a circle with an E/R will do it, just to give some kind of hint towards that you're actually erasing. JS & CSS might be an alternative, ill check that out and let you know if i find something that could work.

You could also make the cursor white when erasing, the colors change already with the selection of a color - the only problem would be the default painting color which currently is white.

Bios-Marcel commented 3 years ago

Well, there isn't any difference between erasing and painting with white as of now, since the canvas is white anyways.

Bios-Marcel commented 3 years ago

So, this is the first step: 08b99da

However, I noticed the cursor scaling is kind of buggy. Mostly noticeable when zooming the page. Been trying to solve this, but couldn't quite figure it out. Either way, at some point you run into cursor size issues again. On Chromium earlier than Firefox. Maybe it'd be smart to limit the canvas size to the base size. This would also give people with bigger screens a bigger chat and scoreboard. I am assuming 1600x900 is big enough, at leat compared to skribbl.io, which has 840x630~ pixels.

Regarding the fill tool icon, I wasn't too sure about just using the existing bucket. Maybe I should replace the bucket icon and get a new pencil icon as well, since that's literally a unicode character :sweat:

Bios-Marcel commented 3 years ago

Managed to get the fill icon working ...

Follow up issue #185