Change dice font (#260)

* refactor: change geometries.ts to simplify options * feat: add settings to change dice font * fix: Enables picking dice font from system fonts --------- Co-authored-by: Jeremy Valentine <[email protected]>
javalent · Oct 27, 2023 · c16d3c0 · c16d3c0
1 parent d7ad78e
commit c16d3c0
Show file tree

Hide file tree

Showing 10 changed files with 619 additions and 30 deletions.
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
@@ -25,6 +25,7 @@ esbuild
         bundle: true,
         external: [
             "obsidian",
+            "get-fonts",
             "electron",
             "codemirror",
             "@codemirror/autocomplete",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-regular-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@popperjs/core": "^2.11.8",
         "@rollup/plugin-commonjs": "^15.1.0",
         "@rollup/plugin-node-resolve": "^9.0.0",
         "@rollup/plugin-typescript": "^6.0.0",

diff --git a/src/main.ts b/src/main.ts
@@ -159,6 +159,7 @@ interface DiceRollerSettings {
     scaler: number;
     diceColor: string;
     textColor: string;
+    textFont: string;
     showLeafOnStartup: boolean;
     customFormulas: string[];
 
@@ -195,6 +196,7 @@ export const DEFAULT_SETTINGS: DiceRollerSettings = {
     scaler: 1,
     diceColor: "#202020",
     textColor: "#ffffff",
+    textFont: "Arial",
     showLeafOnStartup: true,
     showDice: true,
     displayAsEmbed: true,
@@ -231,7 +233,8 @@ export default class DiceRollerPlugin extends Plugin {
             textColor: this.data.textColor,
             colorfulDice: this.data.colorfulDice,
             scaler: this.data.scaler,
-            renderTime: this.data.renderTime
+            renderTime: this.data.renderTime,
+            textFont: this.data.textFont,
         };
     }
     async onload() {

diff --git a/src/renderer/geometries.ts b/src/renderer/geometries.ts
@@ -22,10 +22,18 @@ const MATERIAL_OPTIONS = {
     shininess: 60,
     flatShading: true
 };
-const DEFAULT_DICE_OPTIONS = {
+const DEFAULT_DICE_OPTIONS: DiceOptions = {
     diceColor: "#202020",
-    textColor: "#ffffff"
+    textColor: "#ffffff",
+    textFont: "Arial",
 };
+
+interface DiceOptions {
+    diceColor: string;
+    textColor: string;
+    textFont: string;
+}
+
 export default abstract class DiceGeometry {
     body: Body;
     chamferGeometry: { vectors: Vector3[]; faces: any[][] };
@@ -76,7 +84,7 @@ export default abstract class DiceGeometry {
     constructor(
         public w: number,
         public h: number,
-        public options = {
+        public options: Partial<DiceOptions> = {
             diceColor: "#202020",
             textColor: "#aaaaaa"
         },
@@ -86,6 +94,8 @@ export default abstract class DiceGeometry {
             ...DEFAULT_DICE_OPTIONS,
             ...options
         };
+
+        this.fontFace = this.options.textFont;
     }
     setColor({
         diceColor,
@@ -454,7 +464,7 @@ class D20DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#171120", textColor: "#FF0000" },
+        options: Partial<DiceOptions> = { diceColor: "#171120", textColor: "#FF0000" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -504,7 +514,7 @@ class D12DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#7339BE", textColor: "#FFFFFF" },
+        options: Partial<DiceOptions> = { diceColor: "#7339BE", textColor: "#FFFFFF" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -571,7 +581,7 @@ class D10DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#c74749", textColor: "#FFFFFF" },
+        options: Partial<DiceOptions> = { diceColor: "#c74749", textColor: "#FFFFFF" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -622,7 +632,7 @@ class D100DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#7a2c2d", textColor: "#FFFFFF" },
+        options: Partial<DiceOptions> = { diceColor: "#7a2c2d", textColor: "#FFFFFF" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -668,7 +678,7 @@ class D8DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#5eb0c5", textColor: "#FFFFFF" },
+        options: Partial<DiceOptions> = { diceColor: "#5eb0c5", textColor: "#FFFFFF" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -705,7 +715,7 @@ class D6DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#d68316", textColor: "#FFFFFF" },
+        options: Partial<DiceOptions> = { diceColor: "#d68316", textColor: "#FFFFFF" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -772,7 +782,7 @@ class D4DiceGeometry extends DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = { diceColor: "#93b139", textColor: "#FFFFFF" },
+        options: Partial<DiceOptions> = { diceColor: "#93b139", textColor: "#FFFFFF" },
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -869,7 +879,7 @@ abstract class GenesysD12DiceGeometry extends GenesysDice {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -921,7 +931,7 @@ export class GenesysProficiencyDiceGeometry extends GenesysD12DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -949,7 +959,7 @@ export class GenesysChallengeDiceGeometry extends GenesysD12DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -991,7 +1001,7 @@ export class GenesysAbilityDiceGeometry extends GenesysD8DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -1003,7 +1013,7 @@ export class GenesysDifficultyDiceGeometry extends GenesysD8DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -1045,7 +1055,7 @@ export class GenesysBoostDiceGeometry extends GenesysD6DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);
@@ -1057,7 +1067,7 @@ export class GenesysSetbackDiceGeometry extends GenesysD6DiceGeometry {
     constructor(
         w: number,
         h: number,
-        options = DEFAULT_DICE_OPTIONS,
+        options: Partial<DiceOptions> = DEFAULT_DICE_OPTIONS,
         scaler: number
     ) {
         super(w, h, options, scaler);

diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts
@@ -61,6 +61,7 @@ export type RendererData = {
     colorfulDice: boolean;
     scaler: number;
     renderTime: number;
+    textFont: string;
 };
 
 export default class DiceRenderer extends Component {
@@ -110,7 +111,8 @@ export default class DiceRenderer extends Component {
         this.data = data;
         this.factory.width = this.WIDTH;
         this.factory.height = this.HEIGHT;
-        this.factory.updateDice();
+
+        this.factory.updateDice(this.data);
     }
     constructor(public data: RendererData) {
         super();
@@ -147,7 +149,8 @@ export default class DiceRenderer extends Component {
         diceColor: this.data.diceColor,
         textColor: this.data.textColor,
         colorfulDice: this.data.colorfulDice,
-        scaler: this.data.scaler
+        scaler: this.data.scaler,
+        textFont: this.data.textFont
     });
 
     onload() {
@@ -276,7 +279,7 @@ export default class DiceRenderer extends Component {
         this.factory.width = this.display.currentWidth;
         this.factory.height = this.display.currentHeight;
 
-        this.factory.updateDice();
+        this.factory.updateDice(this.data);
 
         this.cameraHeight.medium = this.cameraHeight.max / 1.5;
         this.cameraHeight.far = this.cameraHeight.max;
@@ -598,11 +601,13 @@ class LocalWorld {
     }
 }
 
+type FactoryData = Omit<RendererData, "renderTime">;
 class DiceFactory extends Component {
     dice: Record<string, DiceGeometry> = {};
     get colors() {
         const diceColor = this.options.diceColor;
         const textColor = this.options.textColor;
+        const textFont = this.options.textFont;
 
         // If we want colorful dice then just use the default colors in the geometry
         if (this.options.colorfulDice) {
@@ -611,23 +616,19 @@ class DiceFactory extends Component {
 
         return {
             diceColor,
-            textColor
+            textFont
         };
     }
     constructor(
         public width: number,
         public height: number,
-        public options: {
-            diceColor: string;
-            textColor: string;
-            scaler: number;
-            colorfulDice: boolean;
-        }
+        public options: FactoryData
     ) {
         super();
         this.buildDice();
     }
-    updateDice = debounce(() => {
+    updateDice = debounce((options: FactoryData) => {
+        this.options = { ...options };
         this.dispose();
         this.buildDice();
     }, 200);