samccone / fidgetspin.xyz

Fidget Spin

A progressive fidget spin app.

Play it live fidgetspin.xyz

Made by the amazing Susie Lu, Paul Irish, and Pavel Feldman, and Sam

Dev

yarn build # builds once

yarn watch # does typescript autorecompile
yarn watch-css # does autoprefixer autorecompile

yarn start # starts static server on 80

yarn run # to see other options

Travis will autodeploy to gh-pages when master is updated.

fidgetspin.xyz's Issues

edge / firefox mobile support issue(s)

All of the css filters are not working.

Also it looks like we are not getting pointer move events?

a11y: 'MAX RPM' in footer not large enough

For the white text on the #ff4f75 background, 12px font size is not big enough. It's also causing a slightly lower accessibility score on Lighthouse.

switch to pointer events for touch.. will enable desktop support.

number formatting in older safari is broken.

  const turnsText = turnCount.toLocaleString(undefined, { maximumFractionDigits: 0 });

looks like it has toLocaleString, but does nothing with maximumFractionDigits

[Feature Request] - Show last spin RPM

It'd be nice to see that last spin's RPM high point... maybe a faded list of recent ones in the background of the right side?

What's the License?

I want to try and make this a web component (https://webcomponents.org) as I think this would be an awesome example of something interactive that people could laugh at at presentations but also grep the internals of and understand the vision of web components via a fun, non-emoji based example.

Who the hell is using hand written SW

Disrespect to the users.

¯\_(ツ)_/¯

Website appears hacked

Looks like the domain has been turned in to a bizarre spam site, FYI @samccone

Spin counter inaccurately reflects number of completed spins.

The spin counter seems to display a rounded version of a fractional number of spins completed. Because of this, a user can produce e.g. 1999.9 spins and see a score of 2000, but not have 'The Chu' spinner unlocked. Since only full spins count toward the unlock goals, the displayed score ought to display it floored instead of rounding to the closer integer.

picker improvements

need to push a history entry so back button works as expected.
need to force scroll to be at the top every time it is launched.
need to retain spinner choice via appstate localstorage

autodeploy via travis hook

Doesn’t fully work in Safari

Desktop: can’t spin at all, all you can do is drag the image

prompt to reload when a new SW

https://github.com/samccone/moji-brush/blob/master/src/app.js#L5

The cubist spinner doesn't grant until 5001 spins

1. Spin spinner
2. Slow down close to 5000
3. Spin one spin at a time until 5000

expected result:

could go into spinner chooser and get new spinner

actual result:

new spinner still greyed out.

Add a compile script to inline css into the document at deploy time

More spinners

I guess this is obvious for such a young project, but: TOO FEW SPINNERS! Bashed through them (on PC) in very little time.

Besides simply adding more spinners it might be worth the thought whether to increase the intervals between unlocking the existing ones.

If welcome, I might also be interested in contributing one or two spinner design propositions myself.

long press shouldn't ask to download the spinner image

I tried to long press to stop the spinner and it asked me to download the image. Kind of confusing.

Reference tweet: https://mobile.twitter.com/patcito/status/872468456209346560

Fidget doesn't spin in Chrome mobile

I don't think the width issue, as mentioned in #6, will have an influence on this. It worked before (?).

Device width is not being recognized

As stated in the index.html file, the website should take the width of the device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

However, when I check the website in Google Chrome Version 58.0.3029.113 on an iPhone 6s, the width is not being recognized (see image below). A horizontal scrollbar is visible.

I'm not sure what's causing this problem, because when I check the website in Google Chrome (desktop) with Developer Tools responsive tool, it's showing the correct width (100% of the device width).

Add vibration

And maybe take in to account the accelerometer :)

Does not work in firefox

it seems I am unable to get this spinner to work in firefox or it is not supported for fireefox

[Feature Request] Highscore

I want top know if my max spin RPM is high compared to others. Currently 12346 35119 37025.