search

jonesnxt / kilordle

25 stars 20 forks source link

End screen #17

Closed toBeOfUse closed 2 years ago

toBeOfUse commented 2 years ago

I thought it would be nice if this game had an end screen, so I added one that generates a nice progress graph with HTML canvas:

image

The share button tries to copy the image to the clipboard and if it is prevented it tries to save the image.

I'm going to be honest, I haven't tested it out by playing a game start to finish, but there's a commented-out section of code in App.tsx that simulates the game being won and shows the EndScreen component visually responding correctly to the props being passed in. Also, I added a constant totalWords in that component that can be changed to test it with shorter games.

jonesnxt commented 2 years ago

Very cool, I'll do a review of it tomorrow and make a couple tweaks. Thanks for putting this together!

patarapolw commented 2 years ago

It would be nice if the share-able gets a mobile support (Vivo Android, to be exact), other than saving an Image file. Otherwise, the Image should be named according to finish time (in that time zone), like kilordle-2022-04-03-2141.png.

toBeOfUse commented 2 years ago

I might open a PR later to try out the navigator.share API, which I've never used or heard of but which seems to be supported on most mobile devices, change the filename like you suggested, and move the URL down a bit in the image