Merge pull request #2834 from GreenAsJade/stone_font_scale_pref_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")}