3d-dice / dice-ui Goto Github PK

Setting the scale in DiceBox configuration has no effect...

To replicate this issue, just use the kitchen sink demo you published to CodeSandbox, change the scale to something other than the default (e.g. 9) like so:

let Box = new DiceBox("#dice-box", {
  assetPath: "/public/assets/dice-box/",
  theme: "default",
  offscreen: true,
  scale: 9
});

Notice that the scale is NOT applied and there's no visual difference from the default of 6.

IF however you change the scale via the Box Controls to a value of 9 then you can clearly see the size difference.

It would appear therefore that the scale config parameter is ignored.

NOTE: This may be a case of mis-use or invalid configuration. The documentation is notably sparse regarding how to configure the DicePicker so this is my "best guess" based on the documentation as written.

When I attempt to include the dice-picker addon it results in an error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'target')
    at new dicePicker (dicePicker.js:59:27)
    at index.js:107:22
dicePicker @ dicePicker.js:59
(anonymous) @ index.js:107

As a setup all I've done is attempt to create a new DickPicker when the Box.init() promise resolves - exactly the way DisplayResults is created...

Box.init().then(async (world) => {
   ...
   const dicePicker = new DicePicker();

   const Display = new DisplayResults('#dice-box');
   ...
});

The error seems to indicate that the target is undefined (despite the documentation indicating that it defaults to document.body) however I've also tried setting the target via options to { target: 'body' } with the same results.

Finally, I've also tried targeting a custom element: {target: '#picker-div'} and in this case the picker DOES display without exception however it is not relative to the target element I specified (in this case I would have expected it to display within the div I specified so that I can control placement and visibility however it seems to be positioned absolutely on the page... (perhaps a separate issue?) similar to the way Dice-Box gets generated within its target (again so that I can control when/where it is displayed...)

Hey there,

I'm implementing your 3d dice module into a static SvelteKit project, and have hit the following error adding the DisplayResults module.

(node:5057) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
08:36:11 [vite] Error when evaluating SSR module /src/routes/game/+page.svelte: failed to import "@3d-dice/dice-ui"
|- /home/adam/projects/dice-party/node_modules/.pnpm/@[email protected]/node_modules/@3d-dice/dice-ui/src/index.js:1
export { default as DisplayResults } from './displayResults'
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1197:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)
    at async nodeImport (file:///home/adam/projects/dice-party/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-df561101.js:56019:17)

I tried a dirty fix of just adding "type": "module", to the package.json, but that brought about some other errors.

It would be extremely nice if there was some way to modify (even just a little) of the UI for the Box Controls.

As a starter (and my biggest issue at the moment) is simply a way to override the labels for "Open Controls" and "Close Controls".

While these may well be appropriate for a very narrow scenario, when integrating this into my own project it raises the question "Controls for WHAT exactly"? Dice is only one aspect of my use-case. If I could somehow change this in say the config options I could instead have the labels "Open Dice Config" and "Close Dice Config" or similar.

Setting the scale in DiceBox configuration has no effect...

To replicate this issue, just use the kitchen sink demo you published to CodeSandbox, change the scale to something other than the default (e.g. 9) like so:

let Box = new DiceBox("#dice-box", {
  assetPath: "/public/assets/dice-box/",
  theme: "default",
  offscreen: true,
  scale: 9
});

Notice that the scale is NOT applied and there's no visual difference from the default of 6.

IF however you change the scale via the Box Controls to a value of 9 then you can clearly see the size difference.

It would appear therefore that the scale config parameter is ignored.

At the moment when your roll includes a modifier the DisplayResult component properly displays the modified total however there's no indication in the calculation that there was a modifier at play, it simply shows the dice rolled = total.

This is particularly noticeable when you roll a single die with modifier. For example Roll('1d20', { modifier: 3 } results in "16 = 19" (when the die roll is 16 which is mathematically nonsense at best and also confusing.

It would be preferable to display some notion of the modifier eg "16 +3 = 19"