@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.
package/dist/index.mjs CHANGED
@@ -30871,17 +30871,13 @@ function DiceRoller({
30871
30871
  const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
30872
30872
  const frames = simulateDice(w, h, effectiveSize, starts, clampedCount);
30873
30873
  for (let i = 0; i < clampedCount; i++) {
30874
- if (sides === 6) {
30875
- writeCubeRotation(
30876
- i,
30877
- (Math.random() - 0.5) * 720,
30878
- (Math.random() - 0.5) * 720,
30879
- (Math.random() - 0.5) * 720,
30880
- false
30881
- );
30882
- } else {
30883
- writeCubeRotation(i, 0, 0, (Math.random() - 0.5) * 720, false);
30884
- }
30874
+ writeCubeRotation(
30875
+ i,
30876
+ (Math.random() - 0.5) * 720,
30877
+ (Math.random() - 0.5) * 720,
30878
+ (Math.random() - 0.5) * 720,
30879
+ false
30880
+ );
30885
30881
  const el = dieWrapperRefs.current[i];
30886
30882
  if (el) el.style.transition = "none";
30887
30883
  const shadow = shadowRefs.current[i];
@@ -30942,8 +30938,10 @@ function DiceRoller({
30942
30938
  const lz = (Math.random() > 0.5 ? 1 : -1) * 360;
30943
30939
  writeCubeRotation(i, lx, ly, lz, true, tilt);
30944
30940
  } else {
30941
+ const lx = (Math.random() > 0.5 ? 1 : -1) * 720;
30942
+ const ly = (Math.random() > 0.5 ? 1 : -1) * 360;
30945
30943
  const lz = (Math.random() > 0.5 ? 1 : -1) * 720 + tilt;
30946
- writeCubeRotation(i, 0, 0, lz, true);
30944
+ writeCubeRotation(i, lx, ly, lz, true);
30947
30945
  }
30948
30946
  }
30949
30947
  });
@@ -31102,60 +31100,157 @@ function DiceRoller({
31102
31100
  )) : (() => {
31103
31101
  const shape = POLY_SHAPES[sides];
31104
31102
  const shown = results?.[d] ?? sides;
31105
- return /* @__PURE__ */ jsxs86(
31106
- "svg",
31107
- {
31108
- viewBox: "0 0 100 100",
31109
- width: "100%",
31110
- height: "100%",
31111
- style: { display: "block", overflow: "visible" },
31112
- "aria-hidden": "true",
31113
- children: [
31114
- /* @__PURE__ */ jsx114(
31115
- "polygon",
31116
- {
31117
- points: shape.points,
31118
- fill: colors.face,
31119
- stroke: colors.faceBorder,
31120
- strokeWidth: 2.5,
31121
- strokeLinejoin: "round",
31122
- style: { transition: "fill 0.3s, stroke 0.3s" }
31123
- }
31124
- ),
31125
- /* @__PURE__ */ jsx114(
31126
- "polygon",
31127
- {
31128
- points: shape.points,
31129
- fill: "none",
31130
- stroke: colors.faceBorder,
31131
- strokeWidth: 1.5,
31132
- strokeLinejoin: "round",
31133
- opacity: 0.55,
31134
- transform: "translate(50 50) scale(0.76) translate(-50 -50)"
31135
- }
31136
- ),
31137
- /* @__PURE__ */ jsx114(
31138
- "text",
31139
- {
31140
- ref: getNumeralSetter(d),
31141
- x: 50,
31142
- y: shape.textY,
31143
- textAnchor: "middle",
31144
- dominantBaseline: "central",
31145
- fontSize: 100 * shape.fontScale,
31146
- fontWeight: 800,
31147
- fill: colors.pip,
31148
- style: {
31149
- fontVariantNumeric: "tabular-nums",
31150
- transition: "fill 0.3s",
31151
- userSelect: "none"
31152
- },
31153
- children: formatDieValue(shown, sides)
31154
- }
31155
- )
31156
- ]
31157
- }
31158
- );
31103
+ const depth = effectiveSize * 0.18;
31104
+ const edgeLayers = 16;
31105
+ const cardFaceStyle = {
31106
+ position: "absolute",
31107
+ inset: 0,
31108
+ display: "block",
31109
+ overflow: "visible",
31110
+ backfaceVisibility: "hidden"
31111
+ };
31112
+ return /* @__PURE__ */ jsxs86(Fragment30, { children: [
31113
+ Array.from({ length: edgeLayers }, (_2, li) => {
31114
+ const z = -depth / 2 + depth * (li + 0.5) / edgeLayers;
31115
+ return /* @__PURE__ */ jsxs86(
31116
+ "svg",
31117
+ {
31118
+ viewBox: "0 0 100 100",
31119
+ width: "100%",
31120
+ height: "100%",
31121
+ style: {
31122
+ position: "absolute",
31123
+ inset: 0,
31124
+ display: "block",
31125
+ overflow: "visible",
31126
+ transform: `translateZ(${z}px)`
31127
+ },
31128
+ "aria-hidden": "true",
31129
+ children: [
31130
+ /* @__PURE__ */ jsx114(
31131
+ "polygon",
31132
+ {
31133
+ points: shape.points,
31134
+ fill: colors.face
31135
+ }
31136
+ ),
31137
+ /* @__PURE__ */ jsx114(
31138
+ "polygon",
31139
+ {
31140
+ points: shape.points,
31141
+ fill: "#000",
31142
+ opacity: 0.22
31143
+ }
31144
+ )
31145
+ ]
31146
+ },
31147
+ li
31148
+ );
31149
+ }),
31150
+ /* @__PURE__ */ jsxs86(
31151
+ "svg",
31152
+ {
31153
+ viewBox: "0 0 100 100",
31154
+ width: "100%",
31155
+ height: "100%",
31156
+ style: {
31157
+ ...cardFaceStyle,
31158
+ transform: `translateZ(${depth / 2}px)`
31159
+ },
31160
+ "aria-hidden": "true",
31161
+ children: [
31162
+ /* @__PURE__ */ jsx114(
31163
+ "polygon",
31164
+ {
31165
+ points: shape.points,
31166
+ fill: colors.face,
31167
+ stroke: colors.faceBorder,
31168
+ strokeWidth: 2.5,
31169
+ strokeLinejoin: "round",
31170
+ style: { transition: "fill 0.3s, stroke 0.3s" }
31171
+ }
31172
+ ),
31173
+ /* @__PURE__ */ jsx114(
31174
+ "polygon",
31175
+ {
31176
+ points: shape.points,
31177
+ fill: "none",
31178
+ stroke: colors.faceBorder,
31179
+ strokeWidth: 1.5,
31180
+ strokeLinejoin: "round",
31181
+ opacity: 0.55,
31182
+ transform: "translate(50 50) scale(0.76) translate(-50 -50)"
31183
+ }
31184
+ ),
31185
+ /* @__PURE__ */ jsx114(
31186
+ "text",
31187
+ {
31188
+ ref: getNumeralSetter(d),
31189
+ x: 50,
31190
+ y: shape.textY,
31191
+ textAnchor: "middle",
31192
+ dominantBaseline: "central",
31193
+ fontSize: 100 * shape.fontScale,
31194
+ fontWeight: 800,
31195
+ fill: colors.pip,
31196
+ style: {
31197
+ fontVariantNumeric: "tabular-nums",
31198
+ transition: "fill 0.3s",
31199
+ userSelect: "none"
31200
+ },
31201
+ children: formatDieValue(shown, sides)
31202
+ }
31203
+ )
31204
+ ]
31205
+ }
31206
+ ),
31207
+ /* @__PURE__ */ jsxs86(
31208
+ "svg",
31209
+ {
31210
+ viewBox: "0 0 100 100",
31211
+ width: "100%",
31212
+ height: "100%",
31213
+ style: {
31214
+ ...cardFaceStyle,
31215
+ transform: `rotateY(180deg) translateZ(${depth / 2}px)`
31216
+ },
31217
+ "aria-hidden": "true",
31218
+ children: [
31219
+ /* @__PURE__ */ jsx114(
31220
+ "polygon",
31221
+ {
31222
+ points: shape.points,
31223
+ fill: colors.face,
31224
+ stroke: colors.faceBorder,
31225
+ strokeWidth: 2.5,
31226
+ strokeLinejoin: "round",
31227
+ style: { transition: "fill 0.3s, stroke 0.3s" }
31228
+ }
31229
+ ),
31230
+ /* @__PURE__ */ jsx114(
31231
+ "polygon",
31232
+ {
31233
+ points: shape.points,
31234
+ fill: "none",
31235
+ stroke: colors.faceBorder,
31236
+ strokeWidth: 1.5,
31237
+ strokeLinejoin: "round",
31238
+ opacity: 0.55,
31239
+ transform: "translate(50 50) scale(0.76) translate(-50 -50)"
31240
+ }
31241
+ ),
31242
+ /* @__PURE__ */ jsx114(
31243
+ "polygon",
31244
+ {
31245
+ points: shape.points,
31246
+ fill: "#000",
31247
+ opacity: 0.14
31248
+ }
31249
+ )
31250
+ ]
31251
+ }
31252
+ )
31253
+ ] });
31159
31254
  })()
31160
31255
  }
31161
31256
  )