Hacktoberfest 2019 Day 5
I feel like helping Jedulz, today! I've been thinking about his fishy game, it's pretty good so far, but I'm feeling like the game might have a huge issue if you want to play on mobile: your finger would cover up your fish and you wouldn't be able to tell the size of it.
I hope Apple doesn't mind me doing this, but for a solution, I was thinking about how they solve this issue in iOS:
It would be hard to see where I would be placing the cursor because my finger would be covering that space. However, Apple placed this feature in iOS where this magnifying glass shows you the area that supposed to be covered by your finger. I think that would be nice to have for the fishy game. I just don't know how I would accomplish something like that in HTML5, CSS, or JavaScript.
I spent about an hour searching for a solution. Eventually, I ran into this stackoverflow question asking how to code a magnifier to use the canvas as a source and that lead me to this JSFiddle for the magnifier. Which was exactly what I was trying to find! I can even put use CSS to have the second canvas have rounded edges and be slightly transparent.
Alright, I went and forked fishy and got started on the new feature. I know I'm breaking the rules on my blog by waiting until after midnight to post this blog update, but I was on a role. I managed to get that mobile view port going on the game. He had touch events set up in his code, so I didn't have to do any fancy mobile device detection. All I had to do was put the code to draw that mobile view port on the touchstart and touchmove events, and code to hide that view port on touchend.
I gave it a test on my desktop Chrome. You can simulate touchscreen devices with ctrl+shift+m, or clicking the icon in the ctrl+shift+i (or right click on the page and select inspect) developer tool bar. The icon is a phone with a tablet, and it should be called "toggle device toolbar". It allows to test your site on different devices without needing to host your site somewhere so your phone can get to it. It's also nice if you don't have the physical device you want to use to test your site. I did notice that the mobile view port doesn't get updated unless you're moving, but I'm hoping that users won't be able to be as still as a computer mouse on the screen.
Anyway, I created a Pull Request to send my code over to Jedulz's master branch for the game. There's no conflicts with the master branch, but I have no idea if he has made any progress on the game since his last commit. Well, that's three Pull Requests down and only one more to go! I hope that Pull Requests don't have to be accepted to be counted towards the shirt, just in case he declines my code. I know if my Pull Requests are marked as spam or if the repository is marked as conflicting with the events rules, then it won't be counted. I think I'm good on that front, but I'll have to wait if that Pull Request to my own repository counted. They're not reviewing any of my Pull Requests until I get four or more, so I'll just have to see what happens when I get all my Pull Requests.
I hope Apple doesn't mind me doing this, but for a solution, I was thinking about how they solve this issue in iOS:
I spent about an hour searching for a solution. Eventually, I ran into this stackoverflow question asking how to code a magnifier to use the canvas as a source and that lead me to this JSFiddle for the magnifier. Which was exactly what I was trying to find! I can even put use CSS to have the second canvas have rounded edges and be slightly transparent.
Alright, I went and forked fishy and got started on the new feature. I know I'm breaking the rules on my blog by waiting until after midnight to post this blog update, but I was on a role. I managed to get that mobile view port going on the game. He had touch events set up in his code, so I didn't have to do any fancy mobile device detection. All I had to do was put the code to draw that mobile view port on the touchstart and touchmove events, and code to hide that view port on touchend.
I gave it a test on my desktop Chrome. You can simulate touchscreen devices with ctrl+shift+m, or clicking the icon in the ctrl+shift+i (or right click on the page and select inspect) developer tool bar. The icon is a phone with a tablet, and it should be called "toggle device toolbar". It allows to test your site on different devices without needing to host your site somewhere so your phone can get to it. It's also nice if you don't have the physical device you want to use to test your site. I did notice that the mobile view port doesn't get updated unless you're moving, but I'm hoping that users won't be able to be as still as a computer mouse on the screen.
Anyway, I created a Pull Request to send my code over to Jedulz's master branch for the game. There's no conflicts with the master branch, but I have no idea if he has made any progress on the game since his last commit. Well, that's three Pull Requests down and only one more to go! I hope that Pull Requests don't have to be accepted to be counted towards the shirt, just in case he declines my code. I know if my Pull Requests are marked as spam or if the repository is marked as conflicting with the events rules, then it won't be counted. I think I'm good on that front, but I'll have to wait if that Pull Request to my own repository counted. They're not reviewing any of my Pull Requests until I get four or more, so I'll just have to see what happens when I get all my Pull Requests.
Comments
Post a Comment