Angular Web Components

5 dés — 600 px

Physique rigide Rapier WASM · Rendu Three.js WebGL · Gravité, rebonds, friction, collisions entre dés.

Plateau rectangulaire — rect

Attribut rect : piste remplacée par un plateau dont le ratio correspond aux dimensions du composant. Vue par défaut Az=0°, El=15°. Capacité ~40 D6.

Exemples complémentaires

D4 avec textures PNG — face-config

Chaque face utilise une texture PNG générée dans public/textures/d4/, référencée par chemin relatif dans la clé background.

{
  "4": {
    "1": { "background": "/textures/d4/face-001.png" },
    "2": { "background": "/textures/d4/face-002.png" },
    "3": { "background": "/textures/d4/face-003.png" },
    "4": { "background": "/textures/d4/face-004.png" }
  }
}

D12 couleurs custom · police Courier New

Une couleur #RRGGBBAA par face, police Courier New via text.fontFamily. Attribut HTML : face-config (kebab-case). La clé default applique un style commun à toutes les faces ; les clés numériques le surchargent face par face.

{
  "12": {
    "default": {
      "text": { "fontFamily": "Courier New", "fontWeight": "bold", "color": "#ffffff" }
    },
    "1":  { "background": "#c0392bff" },
    "2":  { "background": "#e67e22ff" },
    "3":  { "background": "#f39c12ff" },
    "4":  { "background": "#2ecc71ff" },
    "5":  { "background": "#1abc9cff" },
    "6":  { "background": "#3498dbff" },
    "7":  { "background": "#9b59b6ff" },
    "8":  { "background": "#e91e63ff" },
    "9":  { "background": "#00bcdaff" },
    "10": { "background": "#ff5722ff" },
    "11": { "background": "#607d8bff" },
    "12": { "background": "#ffd700ff", "text": { "color": "#1a1a1a" } }
  }
}

Intégration dans n'importe quel projet

Copier wc-elements.js et utiliser la balise directement :

<script src="wc-elements.js"></script>

<!-- Un seul dé -->
<wc-dice size="300"></wc-dice>

<!-- Plusieurs dés -->
<wc-dice size="600" count="5"></wc-dice>