wheel-spinner
wheel-spinner copied to clipboard
[feat] Allow wheel to accept choices via query string URL
I'd like to be able to save a wheel with my customizations and then set the default choices by passing in a URL parameter:
https://wheelofnames.com/jmj-a7b?choices=Leo,Fred,Monica,Jane
This would set up the wheel with the following choices: Leo Fred Monica Jane
Great idea
Keeping the security aspects aside, a simple approach to get started would be:
At ./static/WheelConfig.js line 20
// this.names = [
// 'Hamburger', 'Lasagna', 'Fish and chips', 'فلافل - Falafel',
// '炒麵 - Chow mein', 'Tortilla española', 'Crêpes', 'Pierogi', 'Feijoada',
// 'ผัดไทย - Pad thai', 'Döner kebab', 'Phở'
// ];
// Run something like: http://localhost:port/?names=Leo,Fred,Monica,Jane
this.names = window.location.search.match(/names=(.[^&]+)/i)[1].split(',');
I just started looking at the code, and seems like, at code loads the default config, and then relies upon LocalStorage "LastWheelConfig" so the code shared above will only work at the initial load.
There are more better alternatives like use of hash based routing and change the LocalStorage based on hash change. Also a better more secured query string or hash route parser can be used to load the whole config using query string params.
It could also be a base64 encoded string that can be deserialized, and one way to share the wheels would be to share the urls with whole config as base64 encoded string.
However, be careful with user provided input and regex it could be very insecure. The sample code is just an example.