Merge pull request online-go#2834 from GreenAsJade/stone_font_scale_p…

…ref_support

"Stone font scale" preference

src/components/MiniGoban/MiniGoban.tsx

@@ -130,6 +130,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
                 height: props.height || (props.json ? props.json.height : 19),
                 last_move_opacity: last_move_opacity,
                 variation_stone_opacity: preferences.get("variation-stone-opacity"),
+                stone_font_scale: preferences.get("stone-font-scale"),
             },
             props.json,
         );

src/lib/configure-goban.tsx

@@ -107,6 +107,7 @@ export function configure_goban() {
         getShowVariationMoveNumbers: (): boolean => preferences.get("show-variation-move-numbers"),
         getMoveTreeNumbering: (): "none" | "move-number" | "move-coordinates" =>
             preferences.get("move-tree-numbering"),
+        getStoneFontScale: (): number => preferences.get("stone-font-scale"),
         getCDNReleaseBase: (): string => data.get("config.cdn_release", ""),
         getSoundEnabled: (): boolean => sfx.getVolume("master") > 0,
         getSoundVolume: (): number => sfx.getVolume("master"),

src/lib/preferences.ts

@@ -39,16 +39,17 @@ export const defaults = {
     "chat-mode": "main",
     "desktop-notifications": true,
     "desktop-notifications-require-interaction": false,
+    "dynamic-title": true,
+    "function-keys-enabled": false,
+    "game-list-threshold": 10,
     "dock-delay": 0, // seconds.
     "double-click-submit-correspondence": false,
     "double-click-submit-live": false,
     "last-move-opacity": 1.0,
     "variation-stone-opacity": 0.6,
     "variation-move-count": 10,
     "visual-undo-request-indicator": true,
-    "dynamic-title": true,
-    "function-keys-enabled": false,
-    "game-list-threshold": 10,
+    "stone-font-scale": 1.0,
     "goban-theme-black": null as null | string,
     "goban-theme-board": null as null | string,
     "goban-theme-white": null as null | string,

src/views/Game/Game.tsx

@@ -1125,6 +1125,7 @@ export function Game(): JSX.Element | null {
             draw_right_labels: label_position === "all" || label_position.indexOf("right") >= 0,
             draw_bottom_labels: label_position === "all" || label_position.indexOf("bottom") >= 0,
             variation_stone_opacity: preferences.get("variation-stone-opacity"),
+            stone_font_scale: preferences.get("stone-font-scale"),
             onScoreEstimationUpdated: () => {
                 goban.current?.redraw(true);
             },

src/views/Joseki/Joseki.tsx

@@ -26,6 +26,7 @@ import { RouteComponentProps, rr6ClassShim } from "@/lib/ogs-rr6-shims";
 import * as queryString from "query-string";
 
 import * as data from "@/lib/data";
+import * as preferences from "@/lib/preferences";
 import { _, interpolate, pgettext, npgettext } from "@/lib/translate";
 import { get, put, post } from "@/lib/requests";
 import { KBShortcut } from "@/components/KBShortcut";
@@ -329,6 +330,7 @@ class _Joseki extends React.Component<JosekiProps, JosekiState> {
             player_id: 0,
             server_socket: undefined,
             square_size: 20,
+            stone_font_scale: preferences.get("stone-font-scale"),
         };
 
         if (initial_position) {

src/views/LearningHub/InstructionalGoban.tsx

@@ -16,6 +16,7 @@
  */
 
 import * as React from "react";
+import * as preferences from "@/lib/preferences";
 import { createGoban, GobanRenderer } from "goban";
 import { sfx } from "@/lib/sfx";
 import { PersistentElement } from "@/components/PersistentElement";
@@ -78,6 +79,8 @@ export class InstructionalGoban extends React.Component<InstructionalGobanProps>
 
                 puzzle_opponent_move_mode: "automatic",
                 puzzle_player_move_mode: "free",
+                stone_font_scale: preferences.get("stone-font-scale"),
+
                 getPuzzlePlacementSetting: () => {
                     return { mode: "play" };
                 },

src/views/Settings/ThemePreferences.styl

@@ -23,23 +23,23 @@
         align-items: center;
         justify-content: center;
         align-content: center;
-        
+
         .title {
             display: inline-block;
             padding-right: 1rem;
         }
     }
-    
+
     .small.board {
         padding-left: 0;
     }
-    
+
     .MiniGoban.inline {
         height: 1.5rem;
         width: 10rem;
         margin-left: 3rem;
     }
-    
+
     div.with-sample-goban {
         .left {
             display: inline-flex;

src/views/Settings/ThemePreferences.tsx

@@ -80,6 +80,7 @@ export function ThemePreferences(): JSX.Element | null {
         "visual-undo-request-indicator",
     );
     const [last_move_opacity, _setLastMoveOpacity] = usePreference("last-move-opacity");
+    const [stone_font_scale, _setStoneFontScale] = usePreference("stone-font-scale");
     /*
     const [variation_stone_opacity, _setVariationStoneOpacity] =
         usePreference("variation-stone-opacity");
@@ -117,6 +118,14 @@ export function ThemePreferences(): JSX.Element | null {
         _setShowVariationMoveNumbers(tf);
     }, []);
 
+    function setStoneFontScale(ev: React.ChangeEvent<HTMLInputElement>) {
+        const value = parseFloat(ev.target.value);
+
+        if (value >= 0.3 && value <= 1.3) {
+            _setStoneFontScale(value);
+        }
+    }
+
     function setLastMoveOpacity(ev: React.ChangeEvent<HTMLInputElement>) {
         const value = parseFloat(ev.target.value);
 
@@ -143,6 +152,7 @@ export function ThemePreferences(): JSX.Element | null {
         (enable_svg ? "svg" : "canvas") +
         board_labeling +
         label_positioning +
+        stone_font_scale +
         //stone_removal_graphic +
         //removal_scale +
         visual_undo_request_indicator +
@@ -269,6 +279,46 @@ export function ThemePreferences(): JSX.Element | null {
                     checked={removal_scale < 1.0}
                 />
             </PreferenceLine>
+            <PreferenceLine
+                title={_("Stone font scale")}
+                description={_("Adjust the size of the font used to display symbols on stones.")}
+            >
+                <div className="with-sample-goban">
+                    <div className="left">
+                        <input
+                            type="range"
+                            step="0.05"
+                            min="0.3"
+                            max="1.3"
+                            onChange={setStoneFontScale}
+                            value={stone_font_scale}
+                        />
+                        <span>{stone_font_scale}</span>
+                    </div>
+
+                    <MiniGoban
+                        className="inline"
+                        key={stone_font_scale + "" + _refresh}
+                        json={{
+                            width: 3,
+                            height: 1,
+                            moves: [
+                                { x: 0, y: 0 },
+                                { x: 2, y: 0 },
+                            ],
+                            marks: {
+                                "1": "aa",
+                            },
+                        }}
+                        noLink={true}
+                        width={2}
+                        height={1}
+                        displayWidth={80}
+                        labels_positioning={"none"}
+                        sampleOptions={{}}
+                    />
+                </div>
+            </PreferenceLine>
 
             <PreferenceLine
                 title={_("Last move opacity")}