/pictodice

3d Dice Rolling Experience built with latest Vue3/Nuxt3/Typescript

Primary LanguageVue

Pictodice

(WORK IN PROGRESS)

Universal app built using latest Vue3/Nuxt3/Typescript.

One codebase powering multiple deployments:

  • web
  • Android app store
  • iOS app store

www.pictodice.com

Highlights:

3d dice-rolling experience

  • Using ThreeJS and CannonJS physics
  • Responsive: dice 'table' adapts to match viewport or containment
  • Internal screenshot functionality

Users can create their own dice sets

  • Dice variants: SVG icons, custom text, photo upload
  • Will integrate with external API (ie noun project)
  • (under construction)

Product-browsing experience

  • Dynamic routes
  • Breadcrumbs
  • Animated views
  • Fully responsive

Native mobile

  • One codebase for web/Android/iOS
  • Uses Ionic Capacitor for bridging
  • Android and iOS builds are native packages that go through app store submission
  • Versioning across all deployments, with update management

CSS + UI Components

  • Tailwind CSS
  • Mix of DaisyUI and Headless UI
  • Modal abstraction with callback

Sensors

  • Device shake = roll the dice
  • Possible using orientation for dice perspective change

Typescript

  • Where it matters

Color Modes

  • Sync-to-System/Light/Dark/Sepia