cyber-dice/dist/cjs/index.js

Dice animation library

"use strict";var e=require("react");const n=({size:n,isAnimation:t=!1,animationEndHandler:i,children:a})=>{e.useEffect((()=>{n&&document.documentElement.style.setProperty("--dice-size",`${n}px`)}),[]);const r=t?"dice dice__anim":"dice";return e.createElement("div",{className:"container",onAnimationEnd:i},e.createElement("div",{className:r},a))};var t,i;!function(e){e.FRONT="front",e.BACK="back",e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom"}(t||(t={})),function(e){e.FIRST="first",e.SECOND="second",e.THIRD="third",e.FOURTH="fourth",e.FIFTH="fifth",e.SIXTH="sixth"}(i||(i={}));const a=({fontSize:n="50px",position:i=t.FRONT,text:a="",textColor:r="#000",bgColor:c="#f2f3f1"})=>{const o={color:r,fontSize:n},s={backgroundColor:c};return e.createElement("div",{style:s,className:`side face__${i} side__${i}`},e.createElement("span",{style:o,className:"side__text"},a))},r=e=>e<1?1:e>6?6:e,c=[[t.FRONT,t.TOP,t.LEFT,t.RIGHT,t.BOTTOM,t.BACK],[t.RIGHT,t.FRONT,t.BOTTOM,t.TOP,t.BACK,t.LEFT],[t.TOP,t.LEFT,t.FRONT,t.BACK,t.RIGHT,t.BOTTOM],[t.BOTTOM,t.LEFT,t.BACK,t.FRONT,t.RIGHT,t.TOP],[t.RIGHT,t.BACK,t.TOP,t.BOTTOM,t.FRONT,t.LEFT],[t.BACK,t.BOTTOM,t.LEFT,t.RIGHT,t.TOP,t.FRONT]],o=[i.FIRST,i.SECOND,i.THIRD,i.FOURTH,i.FIFTH,i.SIXTH];!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('/* ***** variables ***** */\n:root {\n  --dice-size: 80px;\n}\n\n/* ***** functions ***** */\n/* ***** styles ***** */\n.container {\n  width: calc(var(--dice-size) * 2);\n  height: calc(var(--dice-size) * 2);\n  perspective: 700px;\n  perspective-origin: center center;\n  background: transparent;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.dice,\n.face {\n  width: var(--dice-size);\n  height: var(--dice-size);\n  border-radius: 5px;\n}\n\n.dice {\n  position: relative;\n  transform-style: preserve-3d;\n  animation: none;\n}\n\n.dice__anim {\n  animation: rotate 2s;\n  animation-timing-function: cubic-bezier(0, 0.28, 0.5, 1.04);\n}\n\n.dice__color {\n  background-color: #ffffff;\n}\n\n/* ***** dice face ***** */\n.face {\n  position: absolute;\n  box-sizing: border-box;\n  list-style: none;\n  padding: calc(var(--dice-size) * 0.1);\n  margin: 0;\n  box-shadow: inset 0 calc(var(--dice-size) * 0.03) rgba(90, 90, 90, 0.6), inset 0 calc(calc(var(--dice-size) * 0.03) * -1) rgba(90, 90, 90, 0.6), inset calc(var(--dice-size) * 0.03) 0 rgba(90, 90, 90, 0.6), inset calc(calc(var(--dice-size) * 0.03) * -1) 0 rgba(90, 90, 90, 0.6);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  justify-items: center;\n  align-items: center;\n}\n\n.face__first {\n  grid-template-areas: ". . ." ". a ." ". . .";\n}\n\n.face__second {\n  grid-template-areas: "a . ." ". . ." ". . b";\n}\n\n.face__third {\n  grid-template-areas: "a . ." ". c ." ". . b";\n}\n\n.face__fourth {\n  grid-template-areas: "a . d" ". . ." "c . b";\n}\n\n.face__fifth {\n  grid-template-areas: "a . d" ". e ." "c . b";\n}\n\n.face__sixth {\n  grid-template-areas: "a . d" "e . f" "c . b";\n}\n\n/* ***** dice face position ***** */\n.face__front {\n  transform: translateZ(calc(var(--dice-size) / 2));\n}\n\n.face__back {\n  transform: translateZ(calc(calc(var(--dice-size) / 2) * -1));\n}\n\n.face__left {\n  transform: translateX(calc(calc(var(--dice-size) / 2) * -1)) rotateY(-90deg);\n}\n\n.face__right {\n  transform: translateX(calc(var(--dice-size) / 2)) rotateY(90deg);\n}\n\n.face__top {\n  transform: translateY(calc(calc(var(--dice-size) / 2) * -1)) rotateX(90deg);\n}\n\n.face__bottom {\n  transform: translateY(calc(var(--dice-size) / 2)) rotateX(-90deg);\n}\n\n/* ***** dice point ***** */\n.face__point {\n  width: calc((var(--dice-size) - 2 * var(--dice-size) * 0.1 - 2 * var(--dice-size) * 0.05) / 3 - 2 * var(--dice-size) * 0.03);\n  height: calc((var(--dice-size) - 2 * var(--dice-size) * 0.1 - 2 * var(--dice-size) * 0.05) / 3 - 2 * var(--dice-size) * 0.03);\n  border-radius: 50%;\n}\n\n.point__color {\n  background-color: rgba(0, 0, 0, 0.8);\n}\n\n.point__first {\n  grid-area: a;\n}\n\n.point__second {\n  grid-area: b;\n}\n\n.point__third {\n  grid-area: c;\n}\n\n.point__fourth {\n  grid-area: d;\n}\n\n.point__fifth {\n  grid-area: e;\n}\n\n.point__sixth {\n  grid-area: f;\n}\n\n/* ***** cube sides ***** */\n.side {\n  width: var(--dice-size);\n  height: var(--dice-size);\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid rgb(0, 0, 0);\n  box-sizing: border-box;\n}\n\n/* ***** animation ***** */\n@keyframes rotate {\n  0% {\n    transform: rotateX(0deg) rotateY(0deg) rotateZ(-90deg);\n  }\n  100% {\n    transform: rotateY(-360deg) rotateZ(720deg) rotateX(360deg);\n  }\n}');const s=({pointsCount:n,face:i,position:a=t.FRONT})=>e.createElement("ul",{className:`face face__${i} face__${a} dice__color`},o.map(((t,i)=>{if(i<n)return e.createElement("li",{key:t,className:`face__point point__${t} point__color`})})));exports.CubeWithAnimation=({randomNumber:t,isAnimation:i,animationEndHandler:o,size:s,sides:d})=>{const l=r(t),f=c[l-1];return e.createElement(n,{size:s,isAnimation:i,animationEndHandler:o},d.map(((n,t)=>e.createElement(a,{key:t,position:f[t],text:n.text,fontSize:n.fontSize,textColor:n.textColor,bgColor:n.bgColor}))))},exports.Dice=({randomNumber:t,size:i})=>{const a=r(t),c=a-1;return e.createElement(n,{size:i},e.createElement(s,{pointsCount:a,face:o[c]}))},exports.DiceWithAnimation=({randomNumber:t,isAnimation:i,animationEndHandler:a,size:d,faces:l=o})=>{const f=r(t),m=c[f-1];return e.createElement(n,{size:d,isAnimation:i,animationEndHandler:a},l.map(((n,t)=>e.createElement(s,{key:t,pointsCount:o.findIndex((e=>e===n))+1,face:n,position:m[t]}))))};
//# sourceMappingURL=index.js.map