@digilogiclabs/saas-factory-ui 2.8.0 → 2.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -30759,17 +30759,13 @@ function DiceRoller({
30759
30759
  const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
30760
30760
  const frames = simulateDice(w, h, effectiveSize, starts, clampedCount);
30761
30761
  for (let i = 0; i < clampedCount; i++) {
30762
- if (sides === 6) {
30763
- writeCubeRotation(
30764
- i,
30765
- (Math.random() - 0.5) * 720,
30766
- (Math.random() - 0.5) * 720,
30767
- (Math.random() - 0.5) * 720,
30768
- false
30769
- );
30770
- } else {
30771
- writeCubeRotation(i, 0, 0, (Math.random() - 0.5) * 720, false);
30772
- }
30762
+ writeCubeRotation(
30763
+ i,
30764
+ (Math.random() - 0.5) * 720,
30765
+ (Math.random() - 0.5) * 720,
30766
+ (Math.random() - 0.5) * 720,
30767
+ false
30768
+ );
30773
30769
  const el = dieWrapperRefs.current[i];
30774
30770
  if (el) el.style.transition = "none";
30775
30771
  const shadow = shadowRefs.current[i];
@@ -30830,8 +30826,10 @@ function DiceRoller({
30830
30826
  const lz = (Math.random() > 0.5 ? 1 : -1) * 360;
30831
30827
  writeCubeRotation(i, lx, ly, lz, true, tilt);
30832
30828
  } else {
30829
+ const lx = (Math.random() > 0.5 ? 1 : -1) * 720;
30830
+ const ly = (Math.random() > 0.5 ? 1 : -1) * 360;
30833
30831
  const lz = (Math.random() > 0.5 ? 1 : -1) * 720 + tilt;
30834
- writeCubeRotation(i, 0, 0, lz, true);
30832
+ writeCubeRotation(i, lx, ly, lz, true);
30835
30833
  }
30836
30834
  }
30837
30835
  });
@@ -30990,60 +30988,157 @@ function DiceRoller({
30990
30988
  )) : (() => {
30991
30989
  const shape = POLY_SHAPES[sides];
30992
30990
  const shown = results?.[d] ?? sides;
30993
- return /* @__PURE__ */ jsxs86(
30994
- "svg",
30995
- {
30996
- viewBox: "0 0 100 100",
30997
- width: "100%",
30998
- height: "100%",
30999
- style: { display: "block", overflow: "visible" },
31000
- "aria-hidden": "true",
31001
- children: [
31002
- /* @__PURE__ */ jsx113(
31003
- "polygon",
31004
- {
31005
- points: shape.points,
31006
- fill: colors.face,
31007
- stroke: colors.faceBorder,
31008
- strokeWidth: 2.5,
31009
- strokeLinejoin: "round",
31010
- style: { transition: "fill 0.3s, stroke 0.3s" }
31011
- }
31012
- ),
31013
- /* @__PURE__ */ jsx113(
31014
- "polygon",
31015
- {
31016
- points: shape.points,
31017
- fill: "none",
31018
- stroke: colors.faceBorder,
31019
- strokeWidth: 1.5,
31020
- strokeLinejoin: "round",
31021
- opacity: 0.55,
31022
- transform: "translate(50 50) scale(0.76) translate(-50 -50)"
31023
- }
31024
- ),
31025
- /* @__PURE__ */ jsx113(
31026
- "text",
31027
- {
31028
- ref: getNumeralSetter(d),
31029
- x: 50,
31030
- y: shape.textY,
31031
- textAnchor: "middle",
31032
- dominantBaseline: "central",
31033
- fontSize: 100 * shape.fontScale,
31034
- fontWeight: 800,
31035
- fill: colors.pip,
31036
- style: {
31037
- fontVariantNumeric: "tabular-nums",
31038
- transition: "fill 0.3s",
31039
- userSelect: "none"
31040
- },
31041
- children: formatDieValue(shown, sides)
31042
- }
31043
- )
31044
- ]
31045
- }
31046
- );
30991
+ const depth = effectiveSize * 0.18;
30992
+ const edgeLayers = 16;
30993
+ const cardFaceStyle = {
30994
+ position: "absolute",
30995
+ inset: 0,
30996
+ display: "block",
30997
+ overflow: "visible",
30998
+ backfaceVisibility: "hidden"
30999
+ };
31000
+ return /* @__PURE__ */ jsxs86(Fragment30, { children: [
31001
+ Array.from({ length: edgeLayers }, (_2, li) => {
31002
+ const z = -depth / 2 + depth * (li + 0.5) / edgeLayers;
31003
+ return /* @__PURE__ */ jsxs86(
31004
+ "svg",
31005
+ {
31006
+ viewBox: "0 0 100 100",
31007
+ width: "100%",
31008
+ height: "100%",
31009
+ style: {
31010
+ position: "absolute",
31011
+ inset: 0,
31012
+ display: "block",
31013
+ overflow: "visible",
31014
+ transform: `translateZ(${z}px)`
31015
+ },
31016
+ "aria-hidden": "true",
31017
+ children: [
31018
+ /* @__PURE__ */ jsx113(
31019
+ "polygon",
31020
+ {
31021
+ points: shape.points,
31022
+ fill: colors.face
31023
+ }
31024
+ ),
31025
+ /* @__PURE__ */ jsx113(
31026
+ "polygon",
31027
+ {
31028
+ points: shape.points,
31029
+ fill: "#000",
31030
+ opacity: 0.22
31031
+ }
31032
+ )
31033
+ ]
31034
+ },
31035
+ li
31036
+ );
31037
+ }),
31038
+ /* @__PURE__ */ jsxs86(
31039
+ "svg",
31040
+ {
31041
+ viewBox: "0 0 100 100",
31042
+ width: "100%",
31043
+ height: "100%",
31044
+ style: {
31045
+ ...cardFaceStyle,
31046
+ transform: `translateZ(${depth / 2}px)`
31047
+ },
31048
+ "aria-hidden": "true",
31049
+ children: [
31050
+ /* @__PURE__ */ jsx113(
31051
+ "polygon",
31052
+ {
31053
+ points: shape.points,
31054
+ fill: colors.face,
31055
+ stroke: colors.faceBorder,
31056
+ strokeWidth: 2.5,
31057
+ strokeLinejoin: "round",
31058
+ style: { transition: "fill 0.3s, stroke 0.3s" }
31059
+ }
31060
+ ),
31061
+ /* @__PURE__ */ jsx113(
31062
+ "polygon",
31063
+ {
31064
+ points: shape.points,
31065
+ fill: "none",
31066
+ stroke: colors.faceBorder,
31067
+ strokeWidth: 1.5,
31068
+ strokeLinejoin: "round",
31069
+ opacity: 0.55,
31070
+ transform: "translate(50 50) scale(0.76) translate(-50 -50)"
31071
+ }
31072
+ ),
31073
+ /* @__PURE__ */ jsx113(
31074
+ "text",
31075
+ {
31076
+ ref: getNumeralSetter(d),
31077
+ x: 50,
31078
+ y: shape.textY,
31079
+ textAnchor: "middle",
31080
+ dominantBaseline: "central",
31081
+ fontSize: 100 * shape.fontScale,
31082
+ fontWeight: 800,
31083
+ fill: colors.pip,
31084
+ style: {
31085
+ fontVariantNumeric: "tabular-nums",
31086
+ transition: "fill 0.3s",
31087
+ userSelect: "none"
31088
+ },
31089
+ children: formatDieValue(shown, sides)
31090
+ }
31091
+ )
31092
+ ]
31093
+ }
31094
+ ),
31095
+ /* @__PURE__ */ jsxs86(
31096
+ "svg",
31097
+ {
31098
+ viewBox: "0 0 100 100",
31099
+ width: "100%",
31100
+ height: "100%",
31101
+ style: {
31102
+ ...cardFaceStyle,
31103
+ transform: `rotateY(180deg) translateZ(${depth / 2}px)`
31104
+ },
31105
+ "aria-hidden": "true",
31106
+ children: [
31107
+ /* @__PURE__ */ jsx113(
31108
+ "polygon",
31109
+ {
31110
+ points: shape.points,
31111
+ fill: colors.face,
31112
+ stroke: colors.faceBorder,
31113
+ strokeWidth: 2.5,
31114
+ strokeLinejoin: "round",
31115
+ style: { transition: "fill 0.3s, stroke 0.3s" }
31116
+ }
31117
+ ),
31118
+ /* @__PURE__ */ jsx113(
31119
+ "polygon",
31120
+ {
31121
+ points: shape.points,
31122
+ fill: "none",
31123
+ stroke: colors.faceBorder,
31124
+ strokeWidth: 1.5,
31125
+ strokeLinejoin: "round",
31126
+ opacity: 0.55,
31127
+ transform: "translate(50 50) scale(0.76) translate(-50 -50)"
31128
+ }
31129
+ ),
31130
+ /* @__PURE__ */ jsx113(
31131
+ "polygon",
31132
+ {
31133
+ points: shape.points,
31134
+ fill: "#000",
31135
+ opacity: 0.14
31136
+ }
31137
+ )
31138
+ ]
31139
+ }
31140
+ )
31141
+ ] });
31047
31142
  })()
31048
31143
  }
31049
31144
  )