Add custom names for White/Black

Closes #89
johnridesabike · Jan 1, 2024 · 1e64c3d · 1e64c3d
1 parent 77207ac
commit 1e64c3d
Show file tree

Hide file tree

Showing 16 changed files with 718 additions and 116 deletions.
diff --git a/__tests__/__snapshots__/Pairing_test.bs.js.snap b/__tests__/__snapshots__/Pairing_test.bs.js.snap
diff --git a/src/Data/Data_Config.res b/src/Data/Data_Config.res
@@ -29,10 +29,14 @@ module ByeValue = {
   let decode = json => Js.Json.decodeNumber(json)->Option.getExn->fromFloat
 }
 
+type alias = option<string>
+
 type t = {
   avoidPairs: Data_Id.Pair.Set.t,
   byeValue: ByeValue.t,
   lastBackup: Js.Date.t,
+  whiteAlias: alias,
+  blackAlias: alias,
 }
 
 let decode = json => {
@@ -45,18 +49,51 @@ let decode = json => {
     ->Option.flatMap(Js.Json.decodeString)
     ->Option.getExn
     ->Js.Date.fromString,
+    whiteAlias: d->Js.Dict.get("whiteAlias")->Option.flatMap(Js.Json.decodeString),
+    blackAlias: d->Js.Dict.get("blackAlias")->Option.flatMap(Js.Json.decodeString),
   }
 }
 
+let encodeAlias = o =>
+  switch o {
+  | None => Js.Json.null
+  | Some(s) => Js.Json.string(s)
+  }
+
 let encode = data =>
   Js.Dict.fromArray([
     ("avoidPairs", data.avoidPairs->Data_Id.Pair.Set.encode),
     ("byeValue", data.byeValue->ByeValue.encode),
     ("lastBackup", data.lastBackup->Js.Date.toJSONUnsafe->Js.Json.string),
+    ("whiteAlias", encodeAlias(data.whiteAlias)),
+    ("blackAlias", encodeAlias(data.blackAlias)),
   ])->Js.Json.object_
 
 let default = {
   byeValue: Full,
   avoidPairs: Belt.Set.make(~id=Data_Id.Pair.id),
   lastBackup: Js.Date.fromFloat(0.0),
+  whiteAlias: None,
+  blackAlias: None,
 }
+
+let aliasEmpty = None
+let alias = s =>
+  switch s {
+  | "" => None
+  | s => Some(s)
+  }
+
+let aliasToStringWhite = t =>
+  switch t.whiteAlias {
+  | None => "White"
+  | Some(s) => s
+  }
+
+let aliasToStringBlack = t =>
+  switch t.blackAlias {
+  | None => "Black"
+  | Some(s) => s
+  }
+
+let aliasToOption = o => o
diff --git a/src/Data/Data_Config.resi b/src/Data/Data_Config.resi
@@ -13,13 +13,27 @@ module ByeValue: {
   let fromFloat: float => t
 }
 
+type alias
+
 type t = {
   avoidPairs: Data_Id.Pair.Set.t,
   byeValue: ByeValue.t,
   lastBackup: Js.Date.t,
+  whiteAlias: alias,
+  blackAlias: alias,
 }
 
 let decode: Js.Json.t => t
 let encode: t => Js.Json.t
 
 let default: t
+
+/** An empty alias uses "White" or "Black" for player names. */
+let aliasEmpty: alias
+
+/** An empty string produces an empty alias. */
+let alias: string => alias
+
+let aliasToStringWhite: t => string
+let aliasToStringBlack: t => string
+let aliasToOption: alias => option<string>
diff --git a/src/Db.res b/src/Db.res
@@ -131,6 +131,8 @@ type actionConfig =
   | SetByeValue(Data.Config.ByeValue.t)
   | SetState(Data.Config.t)
   | SetLastBackup(Js.Date.t)
+  | SetWhiteAlias(string)
+  | SetBlackAlias(string)
 
 let configReducer = (state: Data.Config.t, action): Data.Config.t => {
   switch action {
@@ -149,6 +151,8 @@ let configReducer = (state: Data.Config.t, action): Data.Config.t => {
   | SetAvoidPairs(avoidPairs) => {...state, avoidPairs}
   | SetByeValue(byeValue) => {...state, byeValue}
   | SetLastBackup(lastBackup) => {...state, lastBackup}
+  | SetWhiteAlias(s) => {...state, whiteAlias: Data.Config.alias(s)}
+  | SetBlackAlias(s) => {...state, blackAlias: Data.Config.alias(s)}
   | SetState(state) => state
   }
 }

diff --git a/src/Db.resi b/src/Db.resi
@@ -38,6 +38,8 @@ type actionConfig =
   | SetByeValue(Data.Config.ByeValue.t)
   | SetState(Data.Config.t)
   | SetLastBackup(Js.Date.t)
+  | SetWhiteAlias(string)
+  | SetBlackAlias(string)
 
 let useConfig: unit => (Data.Config.t, actionConfig => unit)
 

diff --git a/src/HelpDialogs.res b/src/HelpDialogs.res
@@ -17,7 +17,7 @@ module BaseDialog = {
 
 module Pairing = {
   @react.component
-  let make = (~state, ~ariaLabel) =>
+  let make = (~state, ~config, ~ariaLabel) =>
     <BaseDialog state ariaLabel>
       <p>
         {`A Swiss-system tournament is effective when you carefully pair players according to
@@ -35,7 +35,11 @@ module Pairing = {
             of ratings. (This gives the chance for an upset!)`->React.string}
         </li>
         <li>
-          {`Players should each alternate playing black or white pieces. To facilitate this, each
+          {`Players should each alternate playing `->React.string}
+          {Data.Config.aliasToStringWhite(config)->React.string}
+          {` and `->React.string}
+          {Data.Config.aliasToStringBlack(config)->React.string}
+          {` pieces. To facilitate this, each
             player should be paired with someone who is due the opposite color that they are due.`->React.string}
         </li>
       </ol>

diff --git a/src/HelpDialogs.resi b/src/HelpDialogs.resi
@@ -8,7 +8,7 @@
 
 module Pairing: {
   @react.component
-  let make: (~state: Hooks.boolState, ~ariaLabel: string) => React.element
+  let make: (~state: Hooks.boolState, ~config: Data.Config.t, ~ariaLabel: string) => React.element
 }
 
 module SwissTournament: {

diff --git a/src/PageOptions.res b/src/PageOptions.res
@@ -387,7 +387,7 @@ let make = (~windowDispatch=_ => ()) => {
   }
   <Window.Body windowDispatch>
     <div className="content-area">
-      <h2> {React.string("Bye  settings")} </h2>
+      <h2> {React.string("Bye settings")} </h2>
       <form>
         <p className="caption-30">
           {React.string("Select the default score given to a player who takes a bye.")}
@@ -434,6 +434,38 @@ let make = (~windowDispatch=_ => ()) => {
           </label>
         </div>
       </form>
+      <h2> {React.string("Player labels")} </h2>
+      <form>
+        <p className="caption-30"> {React.string("Use custom labels for opposing players.")} </p>
+        <label className="body-20">
+          {React.string("Player 1: ")}
+          <input
+            type_="text"
+            placeholder={Config.aliasToStringWhite(Config.default)}
+            value={switch Config.aliasToOption(config.whiteAlias) {
+            | None => ""
+            | Some(s) => s
+            }}
+            onChange={event => {
+              configDispatch(SetWhiteAlias((event->ReactEvent.Form.target)["value"]))
+            }}
+          />
+        </label>
+        <label className="body-20">
+          {React.string("Player 2: ")}
+          <input
+            type_="text"
+            placeholder={Config.aliasToStringBlack(Config.default)}
+            value={switch Config.aliasToOption(config.blackAlias) {
+            | None => ""
+            | Some(s) => s
+            }}
+            onChange={event => {
+              configDispatch(SetBlackAlias((event->ReactEvent.Form.target)["value"]))
+            }}
+          />
+        </label>
+      </form>
       <h2> {React.string("Manage data")} </h2>
       <p className="caption-20">
         {React.string("Last export: ")}

diff --git a/src/PageTournament/PageRound.res b/src/PageTournament/PageRound.res
@@ -11,7 +11,7 @@ module Id = Data.Id
 
 module PlayerMatchInfo = {
   @react.component
-  let make = (~player, ~origRating, ~newRating, ~getPlayer, ~scoreData, ~players, ~avoidPairs) => {
+  let make = (~player, ~origRating, ~newRating, ~getPlayer, ~scoreData, ~players, ~config) => {
     let {
       player,
       hasBye,
@@ -27,7 +27,7 @@ module PlayerMatchInfo = {
       ~players,
       ~origRating,
       ~newRating,
-      ~avoidPairs,
+      ~config,
     )
     <dl className="player-card">
       <h3> {player->Player.fullName->React.string} </h3>
@@ -65,7 +65,7 @@ module MatchRow = {
     ~scoreData,
     ~tournament: LoadTournament.t,
     ~className="",
-    ~avoidPairs,
+    ~config: Config.t,
   ) => {
     let {tourney, setTourney, players, getPlayer, playersDispatch, _} = tournament
     let {roundList, _} = tourney
@@ -215,15 +215,23 @@ module MatchRow = {
             onBlur=setMatchResultBlur
             onChange=setMatchResultChange>
             <option value={Match.Result.toString(NotSet)}> {React.string("Select winner")} </option>
-            <option value={Match.Result.toString(WhiteWon)}> {React.string("White won")} </option>
-            <option value={Match.Result.toString(BlackWon)}> {React.string("Black won")} </option>
+            <option value={Match.Result.toString(WhiteWon)}>
+              {React.string(Data.Config.aliasToStringWhite(config))}
+              {React.string(" won")}
+            </option>
+            <option value={Match.Result.toString(BlackWon)}>
+              {React.string(Data.Config.aliasToStringBlack(config))}
+              {React.string(" won")}
+            </option>
             <option value={Match.Result.toString(Draw)}> {React.string("Draw")} </option>
             <option value={Match.Result.toString(Aborted)}> {React.string("Aborted")} </option>
             <option value={Match.Result.toString(WhiteAborted)}>
-              {React.string("White Aborted")}
+              {React.string(Data.Config.aliasToStringWhite(config))}
+              {React.string(" Aborted")}
             </option>
             <option value={Match.Result.toString(BlackAborted)}>
-              {React.string("Black Aborted")}
+              {React.string(Data.Config.aliasToStringBlack(config))}
+              {React.string(" Aborted")}
             </option>
           </select>
         </Utils.TestId>
@@ -288,7 +296,7 @@ module MatchRow = {
                     getPlayer
                     scoreData
                     players
-                    avoidPairs
+                    config
                   />
                 </Utils.Panel>
                 <Utils.Panel>
@@ -299,7 +307,7 @@ module MatchRow = {
                     getPlayer
                     scoreData
                     players
-                    avoidPairs
+                    config
                   />
                 </Utils.Panel>
               </Utils.PanelContainer>
@@ -322,7 +330,7 @@ module RoundTable = {
     ~tournament,
     ~scoreData=?,
   ) => {
-    let ({Config.avoidPairs: avoidPairs, _}, _) = Db.useConfig()
+    let (config, _) = Db.useConfig()
     <table className="pageround__table">
       {if Js.Array.length(matches) == 0 {
         React.null
@@ -337,16 +345,22 @@ module RoundTable = {
               <th className="pageround__row-id" scope="col"> {React.string("#")} </th>
               <th scope="col">
                 <Externals.VisuallyHidden>
-                  {React.string("White result")}
+                  {React.string(Data.Config.aliasToStringWhite(config))}
+                  {React.string(" result")}
                 </Externals.VisuallyHidden>
               </th>
-              <th className="row__player" scope="col"> {React.string("White")} </th>
+              <th className="row__player" scope="col">
+                {React.string(Config.aliasToStringWhite(config))}
+              </th>
               <th scope="col">
                 <Externals.VisuallyHidden>
-                  {React.string("Black result")}
+                  {React.string(Data.Config.aliasToStringBlack(config))}
+                  {React.string(" result")}
                 </Externals.VisuallyHidden>
               </th>
-              <th className="row__player" scope="col"> {React.string("Black")} </th>
+              <th className="row__player" scope="col">
+                {React.string(Config.aliasToStringBlack(config))}
+              </th>
               <th className="row__result" scope="col" colSpan=2>
                 {React.string("Match result")}
               </th>
@@ -374,7 +388,7 @@ module RoundTable = {
             scoreData
             tournament
             className="pageround__tr"
-            avoidPairs
+            config
           />
         )->React.array}
       </tbody>