Dice — אפליקציית PWA לקבלת החלטות יומיומית. 3 מצבים שונים תחת אינטרפייס אחד נקי: קוביות 3D, גלגל הגרלה, ובוחר רנדומלי. רנדומיות אמיתית קריפטוגרפית, אנימציות 3D ב-CSS pure, וצלילי גלגול עם Web Audio.
3 מצבים
1. קוביות 3D (CSS preserve-3d)
- 7 סוגי קוביות: D4 / D6 / D8 / D10 / D12 / D20 / D100
- עד 10 קוביות במכה אחת — ה-render עובר ל-small mode כשיש 5+ למניעת גלישה
- 6 פאות אמיתיות של cube עם
transform-style: preserve-3dו-backface-visibility: hidden - כל פאה ממוקמת ב-3D עם
rotateX/rotateY+translateZ(40px)(חצי גודל הקובייה) - Animation 1.4s עם 5 keyframes שמדמים גלגול אמיתי (rotateX 1440°, rotateY 720°, translateY -60px) ואז נחיתה על הערך הסופי
- D6 dot patterns מקוריים — grid 3×3 עם תבנית נקודות נכונה לכל ערך 1-6 (עם hidden dots)
- D4-D100 משתמשות ב-numeric face עם IBM Plex Mono גדול
2. גלגל הגרלה (SVG slices)
- אפשרויות מותאמות אישית (טקסטרא, אחת לשורה)
- SVG dynamic slices — Math.cos/sin + arc paths, צבע אוטומטי מ-8-color palette
- תוויות מסובבות עם
transform="rotate(...)"כדי שיתאימו לכיוון של כל slice - ספין 5-8 סיבובים מלאים + jitter עם
cubic-bezier(.18,.7,.2,1)3.5s — נחיתה איטית ודרמטית - חישוב מתמטי לתוצאה הסופית מתוך מערך הרוטציה הצברני
3. בוחר רנדומלי
- רשימה מותאמת אישית של פריטים (שמות, אפשרויות, כל מה שתרצה)
- Animation cycling של 18 רוחות פתע לפני התוצאה הסופית (1.5 שניות דרמטיות)
- אופציה: ללא חזרה — בחירות עוקבות יהיו שונות
- אופציה: אנימציה ארוכה — נטרל לקבלת בחירה מיידית
רנדומיות אמיתית
הכל משתמש ב-crypto.getRandomValues(new Uint32Array(1)) — לא ב-Math.random() הסטנדרטי. זה רנדומיות באיכות קריפטוגרפית, מתאים גם למשחקי D&D (איפה כל גלגול משנה את העלילה), וגם להגרלות "אמיתיות" שמרגישות הוגנות.
פיצ'רים נוספים
- Web Audio beep — אקורד 4 צלילים (140→220→180→380Hz) עם oscillator + gain envelope
- Vibration patterns ייחודיים לכל מצב: roll start, mid-animation, final reveal
- היסטוריית 50 גלגולים אחרונים ב-IndexedDB עם time index ו-DESC cursor
- Persisted settings — סוג קובייה, כמות, אפשרויות גלגל, אפשרויות בוחר נשמרים בין סשנים
- Mode persistence — חוזר לאותו טאב בו היית בפעם האחרונה
טכנולוגיות
- CSS preserve-3d + 6-face cube עם
transform: translateZ(±half)לכל פאה crypto.getRandomValuesלרנדומיות אמיתית- SVG dynamic arc paths עם Math trigonometry
- Web Audio API (oscillator + gain) ללא קבצי mp3
- Vibration API — patterns תקטיליים
- IndexedDB — history (autoIncrement, time-indexed) + settings
- Service Worker + PWA installable
עיצוב
פלטה ash-rose + cream + emerald accents — אסתטיקת חדר משחקים אלגנטי. נבדלת מ-mauve (Calc), dusty-rose (Mood), salmon (Voice) ע"י הגוון המאופק יותר עם accent ירוק נדיר. רקע cocoa-rose #181014 · ash-rose #c4a5a8 · cream #fef3c7 · emerald #34d399 כצבע משני.
טיפוגרפיה — Heebo + Frank Ruhl Libre לתוצאות הבוחר + IBM Plex Mono לכל המספרים (300 weight, tabular-nums). Glassmorphic surfaces, ambient ash-rose orbs נעות ברקע, dice עם inner shadow + light edge highlights לתחושת תלת-מימד אמיתית.
