സൗജന്യ കോയിൻ ഫ്ലിപ്പ് & സ്പിൻ വീൽ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

coin flip, spin wheel, option picker എന്നീ മൂന്ന് മോഡുകളും ജയിക്കുന്ന ഫലം സൃഷ്ടിക്കാൻ ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ Web Crypto API (crypto.getRandomValues) ഉപയോഗിക്കുന്നു, പിന്നെ CSS transforms, requestAnimationFrame ഉപയോഗിച്ച് പൂർണ്ണമായും ക്ലയന്റ്-സൈഡിൽ ആനിമേഷൻ നടത്തുന്നു. ഒരു ഘട്ടത്തിലും ഒരു സെർവറും ഉൾപ്പെട്ടിട്ടില്ല.

1. 1
   Web Crypto വിജയിയെ തിരഞ്ഞെടുക്കുന്നു

   ഏത് ആനിമേഷനും ആരംഭിക്കുന്നതിന് മുമ്പ്, crypto.getRandomValues ഒരു ക്രിപ്റ്റോഗ്രാഫിക്കലി റാൻഡം 32-ബിറ്റ് ഇന്റിജർ കൊണ്ട് ഒരു Uint32Array നിറയ്ക്കുന്നു. ഒരു മോഡുലോ ഓപ്പറേഷൻ അതിനെ ഓപ്ഷനുകളുടെ എണ്ണത്തിലേക്ക് (heads/tails-ന് 2, wheel അല്ലെങ്കിൽ picker-ന് N) മാപ്പ് ചെയ്യുന്നു, അതിനാൽ ഓരോ ഫലത്തിനും കൃത്യമായി തുല്യ സാധ്യതയുണ്ട്.
2. 2
   ഫലത്തിൽ ഇറങ്ങാൻ ഭ്രമണ കോൺ കണക്കാക്കുന്നു

   നാണയത്തിന്, ശരിയായ വശം മുകളിലായി അവസാനിക്കുന്ന ഏറ്റവും ചെറിയ അധിക ഭ്രമണം (നിലവിലെ ശേഖരിച്ച കോണിന് മുകളിൽ) — 0°-ൽ heads, 180°-ൽ tails — കോഡ് കണക്കാക്കുന്നു, പിന്നെ ഇത് ഒരു യഥാർത്ഥ വീഴ്ചയായി തോന്നാൻ 5 പൂർണ്ണ ചുറ്റലുകൾ ചേർക്കുന്നു. വീൽ ഇതേ ചെയ്യുന്നു: ജയിക്കുന്ന സ്ലൈസ് പോയിന്ററിന് കീഴിൽ കൊണ്ടുവരുന്ന ആംഗിൾ ഓഫ്സെറ്റ് കണ്ടെത്തുന്നു, 6 പൂർണ്ണ ഭ്രമണങ്ങൾ ചേർക്കുന്നു, പോയിന്റർ എപ്പോഴും സ്ലൈസിന്റെ കൃത്യം മധ്യത്തിൽ നിർത്താതിരിക്കാൻ ഒരു ചെറിയ ക്രമരഹിത ജിറ്റർ പ്രയോഗിക്കുന്നു.
3. 3
   CSS ട്രാൻസിഷനുകളും requestAnimationFrame-ഉം ആനിമേഷൻ നടത്തുന്നു

   നാണയവും വീലും ഒരൊറ്റ ശേഖരിച്ച ഭ്രമണ മൂല്യത്തിൽ പ്രയോഗിച്ച cubic-bezier ഈസിംഗ് കർവുള്ള CSS transform വഴി ആനിമേറ്റ് ചെയ്യുന്നു — ആംഗിൾ സെറ്റ് ചെയ്ത ശേഷം ഫ്രെയിം-അടിസ്ഥാന JavaScript ആവശ്യമില്ല. ഓപ്ഷൻ പിക്കർ പകരം requestAnimationFrame ഉപയോഗിക്കുന്നു: ഓരോ ഫ്രെയിമിലും, ക്വാഡ്രാറ്റിക്കായി വളരുന്ന ഒരു ഇടവേള ഹൈലൈറ്റ് മുന്നോട്ട് നീക്കണോ എന്ന് നിശ്ചയിക്കുന്നു, മുൻകൂട്ടി നിശ്ചയിച്ച വിജയിയിൽ എപ്പോഴും നിർത്തുന്ന ഒരു സ്ലോട്ട്-മെഷീൻ ഡീസെലറേഷൻ നിർമ്മിക്കുന്നു.
4. 4
   ഫലം വെളിപ്പെടുത്തി സെഷൻ ചരിത്രത്തിൽ ലോഗ് ചെയ്യുന്നു

   ആനിമേഷൻ പൂർത്തിയാകുമ്പോൾ (നാണയത്തിന് 1.3 സെ, വീലിന് 4.3 സെ) ഒരു setTimeout ട്രിഗർ ചെയ്ത് ഫലം സ്റ്റേറ്റിലേക്ക് എഴുതുന്നു. നാണയ മോഡ് heads/tails കൗണ്ടുകളോടെ 24 ഫ്ലിപ്പുകൾ വരെയുള്ള ഒരു തുടർച്ചയായ സെഷൻ ചരിത്രം സൂക്ഷിക്കുന്നു. prefers-reduced-motion പ്രവർത്തനക്ഷമമാക്കിയ ഉപയോക്താക്കൾ ആനിമേഷൻ പൂർണ്ണമായും ഒഴിവാക്കി ഉടനടി ഫലം കാണുന്നു.

അനുബന്ധ ടൂളുകൾ