From b652ca68866dd0bdaba0ac3a03982627fe446a1f Mon Sep 17 00:00:00 2001
From: Dylan Chong <dylan.chong@icloud.com>
Date: Wed, 20 Sep 2023 20:21:11 +1200
Subject: [PATCH] Add JSON import

---
 src/components/App.vue            |   4 +
 src/components/BoardSelector.vue  |  19 ++-
 src/components/BunchingEffect.vue |   3 +-
 src/components/HandImporter.vue   | 195 ++++++++++++++++++++++++++++++
 src/components/RangeEditor.vue    |  48 +++-----
 src/components/SideBar.vue        |  13 +-
 src/range-utils.ts                |  67 ++++++++++
 src/store.ts                      |  62 +++++++++-
 src/style.css                     |   4 +
 src/utils.ts                      |  11 ++
 10 files changed, 383 insertions(+), 43 deletions(-)
 create mode 100644 src/components/HandImporter.vue
 create mode 100644 src/range-utils.ts

diff --git a/src/components/App.vue b/src/components/App.vue
index 1cf7d36..525f2e1 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -24,6 +24,9 @@
           </div>
         </div>
 
+        <div v-show="store.sideView === 'hand-importer'">
+          <HandImporter />
+        </div>
         <div v-show="store.sideView === 'oop-range'">
           <RangeEditor :player="0" />
         </div>
@@ -70,6 +73,7 @@ import BunchingEffect from "./BunchingEffect.vue";
 import RunSolver from "./RunSolver.vue";
 import AboutPage from "./AboutPage.vue";
 import ResultViewer from "./ResultViewer.vue";
+import HandImporter from "./HandImporter.vue";
 
 const store = useStore();
 const header = computed(() => store.headers[store.sideView].join(" > "));
diff --git a/src/components/BoardSelector.vue b/src/components/BoardSelector.vue
index c948bd1..61412a2 100644
--- a/src/components/BoardSelector.vue
+++ b/src/components/BoardSelector.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useConfigStore } from "../store";
 import { cardText, parseCardString } from "../utils";
 import BoardSelectorCard from "./BoardSelectorCard.vue";
@@ -46,7 +46,13 @@ import BoardSelectorCard from "./BoardSelectorCard.vue";
 const config = useConfigStore();
 const boardText = ref("");
 
-const toggleCard = (cardId: number, updateText = true) => {
+watch(
+  () => config.board,
+  () => setBoardTextFromButtons(),
+  { deep: true }
+);
+
+const toggleCard = (cardId: number) => {
   if (config.board.includes(cardId)) {
     config.board = config.board.filter((card) => card !== cardId);
   } else if (config.board.length < 5) {
@@ -55,10 +61,6 @@ const toggleCard = (cardId: number, updateText = true) => {
       config.board.sort((a, b) => b - a);
     }
   }
-
-  if (updateText) {
-    setBoardTextFromButtons();
-  }
 };
 
 const setBoardTextFromButtons = () => {
@@ -80,13 +82,11 @@ const onBoardTextChange = () => {
     .map(parseCardString)
     .filter((cardId): cardId is number => cardId !== null);
 
-  new Set(cardIds).forEach((cardId) => toggleCard(cardId, false));
-  setBoardTextFromButtons();
+  new Set(cardIds).forEach((cardId) => toggleCard(cardId));
 };
 
 const clearBoard = () => {
   config.board = [];
-  setBoardTextFromButtons();
 };
 
 const generateRandomBoard = () => {
@@ -100,6 +100,5 @@ const generateRandomBoard = () => {
   }
 
   config.board.sort((a, b) => b - a);
-  setBoardTextFromButtons();
 };
 </script>
diff --git a/src/components/BunchingEffect.vue b/src/components/BunchingEffect.vue
index 069e087..18ab57c 100644
--- a/src/components/BunchingEffect.vue
+++ b/src/components/BunchingEffect.vue
@@ -202,7 +202,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useStore, useConfigStore } from "../store";
-import { trimRegex, rangeRegex, cardText } from "../utils";
+import { cardText } from "../utils";
+import { trimRegex, rangeRegex } from "../range-utils";
 import * as invokes from "../invokes";
 
 import RangeEditor from "./RangeEditor.vue";
diff --git a/src/components/HandImporter.vue b/src/components/HandImporter.vue
new file mode 100644
index 0000000..386912f
--- /dev/null
+++ b/src/components/HandImporter.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="mt-1 w-[52rem]">
+    <textarea
+      v-model="importText"
+      class="block w-full h-[36rem] px-2 py-1 rounded-lg textarea text-sm font-mono"
+      @change="onImportTextChanged"
+      spellcheck="false"
+    />
+
+    <div class="w-full">
+      <button class="button-base button-blue mt-3 mr-3" @click="importHand">
+        Import
+      </button>
+      <span v-if="importDoneText" class="mt-1">{{ importDoneText }}</span>
+      <span v-if="importTextError" class="mt-1 text-red-500">
+        {{ 'Error: ' + importTextError }}
+      </span>
+    </div>
+
+    <div class="mt-2">
+      Note: If the import has missing values, the current value will be used.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Config, configKeys, useConfigStore, useStore } from "../store";
+import { cardText, parseCardString, Position, Validation } from "../utils";
+import { setRange, validateRange } from "../range-utils";
+import * as invokes from "../invokes";
+
+type NonValidatedHandJSON = Record<string, any>;
+type HandJSON = {
+  oopRange: string;
+  ipRange: string;
+  config: Omit<Config, "board"> & { board: string[] };
+};
+
+const INVALID_BOARD_ERROR = `Invalid '.config.board'. Set board cards manually for an example.`;
+
+const config = useConfigStore();
+const store = useStore();
+
+const importText = ref("{\n  \n}");
+const importTextError = ref("");
+const importDoneText = ref("");
+
+watch(
+  () => store.ranges,
+  () => generateImportText(),
+  { deep: true }
+);
+watch(
+  () => Object.values(config),
+  () => generateImportText(),
+  { deep: true }
+);
+
+const generateImportText = async () => {
+  const configObj = Object.fromEntries(
+    Object.entries(config).filter(
+      ([key, _value]) => configKeys.indexOf(key) !== -1
+    )
+  );
+
+  const importObj = {
+    oopRange: await invokes.rangeToString(Position.OOP),
+    ipRange: await invokes.rangeToString(Position.IP),
+    config: {
+      ...configObj,
+      board: config.board.map((cardId) => {
+        const { rank, suitLetter } = cardText(cardId);
+        return rank + suitLetter;
+      }),
+    },
+  };
+
+  importText.value = JSON.stringify(importObj, null, 2);
+};
+
+const onImportTextChanged = () => {
+  importDoneText.value = "";
+  validateImportTextAndDisplayError();
+};
+
+const validateConfigPrimitives = (importConfig: any): Validation => {
+  if (typeof importConfig !== "object")
+    return {
+      success: false,
+      error: `Expected '.config' to be an object but got ${typeof importConfig}`,
+    };
+
+  for (const key of configKeys) {
+    const newValue = importConfig[key];
+    const existingValue = (config as any)[key];
+    if (existingValue === null || existingValue === undefined) continue;
+    if (typeof existingValue === typeof newValue) continue;
+
+    if (key === "board") return { success: false, error: INVALID_BOARD_ERROR };
+    else
+      return {
+        success: false,
+        error: `Expected '.config.${key}' to be ${typeof importConfig} but got ${typeof newValue}`,
+      };
+  }
+
+  return { success: true };
+};
+
+const validateBoard = (board: any): Validation => {
+  if (!Array.isArray(board))
+    return { success: false, error: INVALID_BOARD_ERROR };
+  const boardArr = board as any[];
+
+  for (const i in boardArr) {
+    const card = boardArr[i];
+    if (typeof card !== "string") {
+      return { success: false, error: INVALID_BOARD_ERROR };
+    }
+
+    const parsedCard = parseCardString(card);
+    if (parsedCard === null) {
+      return { success: false, error: INVALID_BOARD_ERROR };
+    }
+  }
+
+  return { success: true };
+};
+
+const parseJson = (
+  json: string
+): Validation<{ json?: NonValidatedHandJSON }> => {
+  try {
+    return { success: true, json: JSON.parse(json) };
+  } catch (e) {
+    const message = (e as Error).message;
+    return { success: false, error: message };
+  }
+};
+
+const validateImportTextAndDisplayError = (): Validation<{
+  json?: HandJSON;
+}> => {
+  importTextError.value = "";
+
+  const validation = validateImportText();
+  if (validation.success) return validation;
+
+  importTextError.value = validation.error as string;
+  return validation;
+};
+
+const validateImportText = (): Validation<{ json?: HandJSON }> => {
+  const parseValidation = parseJson(importText.value);
+  if (!parseValidation.success) return parseValidation;
+
+  const importJson = parseValidation.json;
+  if (typeof importJson !== "object")
+    return { success: false, error: "Not a valid JSON object" };
+
+  const validateFns: (() => Validation)[] = [
+    () => validateConfigPrimitives(config),
+    () => validateBoard(importJson.config?.board),
+    () => validateRange(importJson.oopRange, "oopRange"),
+    () => validateRange(importJson.ipRange, "ipRange"),
+  ];
+  for (const validate of validateFns) {
+    const validation = validate();
+    if (!validation.success) return validation;
+  }
+
+  importJson.config.board = importJson.config.board.map(parseCardString);
+
+  return { success: true, json: importJson as HandJSON };
+};
+
+const importHand = async () => {
+  const validation = validateImportTextAndDisplayError();
+  if (!validation.success) return;
+  const importJson = validation.json as HandJSON;
+
+  for (const key in importJson.config) {
+    const newValue = (importJson.config as Record<string, any>)[key];
+    (config as any)[key] = newValue;
+  }
+
+  await setRange(Position.OOP, importJson.oopRange, store);
+  await setRange(Position.IP, importJson.ipRange, store);
+
+  importDoneText.value = "Done!";
+};
+
+generateImportText();
+</script>
diff --git a/src/components/RangeEditor.vue b/src/components/RangeEditor.vue
index 4e5628e..486beb8 100644
--- a/src/components/RangeEditor.vue
+++ b/src/components/RangeEditor.vue
@@ -135,9 +135,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useStore } from "../store";
-import { ranks, trimRegex, rangeRegex } from "../utils";
+import { Position, ranks } from "../utils";
+import { setRange, validateRange } from "../range-utils";
 import * as invokes from "../invokes";
 
 import DbItemPicker from "./DbItemPicker.vue";
@@ -147,7 +148,7 @@ const yellow500 = "#eab308";
 type DraggingMode = "none" | "enabling" | "disabling";
 
 const props = withDefaults(
-  defineProps<{ player: number; defaultText?: string }>(),
+  defineProps<{ player: Position; defaultText?: string }>(),
   { defaultText: "" }
 );
 
@@ -164,6 +165,12 @@ const numCombos = ref(0);
 
 let draggingMode: DraggingMode = "none";
 
+watch(
+  () => store.ranges,
+  () => onUpdate(),
+  { deep: true }
+);
+
 const cellText = (row: number, col: number) => {
   const r1 = 13 - Math.min(row, col);
   const r2 = 13 - Math.max(row, col);
@@ -188,36 +195,22 @@ const update = async (row: number, col: number, weight: number) => {
   const idx = 13 * (row - 1) + col - 1;
   await invokes.rangeUpdate(props.player, row, col, weight / 100);
   store.ranges[props.player][idx] = weight;
-  await onUpdate();
 };
 
 const onRangeTextChange = async () => {
-  const trimmed = rangeText.value.replace(trimRegex, "$1").trim();
-  const ranges = trimmed.split(",");
-
-  if (ranges[ranges.length - 1] === "") {
-    ranges.pop();
+  const validation = validateRange(rangeText.value);
+  if (!validation.success) {
+    rangeTextError.value = `Failed to parse range: ${validation.error}`;
   }
 
-  for (const range of ranges) {
-    if (!rangeRegex.test(range)) {
-      rangeTextError.value = `Failed to parse range: ${
-        range || "(empty string)"
-      }`;
-      return;
-    }
-  }
-
-  const errorString = await invokes.rangeFromString(props.player, trimmed);
+  const assignmentValidation = await setRange(
+    props.player,
+    rangeText.value,
+    store
+  );
 
-  if (errorString) {
-    rangeTextError.value = errorString;
-  } else {
-    const weights = await invokes.rangeGetWeights(props.player);
-    for (let i = 0; i < 13 * 13; ++i) {
-      store.ranges[props.player][i] = weights[i] * 100;
-    }
-    await onUpdate();
+  if (!assignmentValidation.success) {
+    rangeTextError.value = assignmentValidation.error;
   }
 };
 
@@ -263,7 +256,6 @@ const invertRange = async () => {
   for (let i = 0; i < 13 * 13; ++i) {
     store.ranges[props.player][i] = 100 - store.ranges[props.player][i];
   }
-  await onUpdate();
 };
 
 const loadRange = (rangeStr: unknown) => {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 6cd7811..800ccc1 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -1,19 +1,26 @@
 <template>
   <aside class="flex flex-col shrink-0 w-56 my-4 overflow-y-auto border-r-2">
+    <button
+      :class="itemStyle('hand-importer')"
+      @click="store.sideView = 'hand-importer'"
+    >
+      Import / Export
+    </button>
+
     <button
       :class="itemStyle('oop-range')"
       @click="store.sideView = 'oop-range'"
     >
       OOP Range
       <span class="flex my-2 justify-center">
-        <RangeMiniViewer :player="0" />
+        <RangeMiniViewer :player="Position.OOP" />
       </span>
     </button>
 
     <button :class="itemStyle('ip-range')" @click="store.sideView = 'ip-range'">
       IP Range
       <span class="flex my-2 justify-center">
-        <RangeMiniViewer :player="1" />
+        <RangeMiniViewer :player="Position.IP" />
       </span>
     </button>
 
@@ -59,7 +66,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { SideView, useStore, useConfigStore } from "../store";
-import { cardText } from "../utils";
+import { Position, cardText } from "../utils";
 
 import RangeMiniViewer from "./RangeMiniViewer.vue";
 
diff --git a/src/range-utils.ts b/src/range-utils.ts
new file mode 100644
index 0000000..0fae225
--- /dev/null
+++ b/src/range-utils.ts
@@ -0,0 +1,67 @@
+import { Position, Validation } from "./utils";
+import * as invokes from "./invokes";
+import { useStore } from "./store";
+
+type Store = ReturnType<typeof useStore>;
+
+const rankPat = "[AaKkQqJjTt2-9]";
+const comboPat = `(?:(?:${rankPat}{2}[os]?)|(?:(?:${rankPat}[cdhs]){2}))`;
+const weightPat = "(?:(?:[01](\\.\\d*)?)|(?:\\.\\d+))";
+export const trimRegex = /\s*([-:,])\s*/g;
+export const rangeRegex = new RegExp(
+  `^(?<range>${comboPat}(?:\\+|(?:-${comboPat}))?)(?::(?<weight>${weightPat}))?$`
+);
+
+const trimRange = (rangeString: string) =>
+  rangeString.replace(trimRegex, "$1").trim();
+
+export const validateRange = (
+  rangeString: any,
+  keyForError = "range"
+): Validation => {
+  if (typeof rangeString !== "string")
+    return {
+      success: false,
+      error: `Expected '${keyForError}' to be a string but got '${typeof rangeString}`,
+    };
+
+  const trimmed = trimRange(rangeString);
+  const ranges = trimmed.split(",");
+
+  if (ranges[ranges.length - 1] === "") ranges.pop();
+
+  for (const range of ranges) {
+    if (!rangeRegex.test(range)) {
+      return {
+        success: false,
+        error: `'${range}' is not a valid range. For an example of a valid range, assign a range manually.`,
+      };
+    }
+  }
+
+  return { success: true };
+};
+
+export const setRange = async (
+  player: Position,
+  rangeString: string,
+  store: Store
+): Promise<Validation> => {
+  const trimmed = rangeString.replace(trimRegex, "$1").trim();
+  const validation = validateRange(rangeString);
+  if (!validation.success) return validation;
+
+  const error = await invokes.rangeFromString(player, trimmed);
+  if (error) return { success: false, error };
+
+  await loadRangeToStore(player, store);
+
+  return { success: true };
+};
+
+const loadRangeToStore = async (player: number, store: Store) => {
+  const weights = await invokes.rangeGetWeights(player);
+  for (let i = 0; i < 13 * 13; ++i) {
+    store.ranges[player][i] = weights[i] * 100;
+  }
+};
diff --git a/src/store.ts b/src/store.ts
index 09970c3..7e8d7a1 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -4,6 +4,7 @@ import { sanitizeBetString } from "./utils";
 export type NavView = "solver" | "results";
 
 export type SideView =
+  | "hand-importer"
   | "oop-range"
   | "ip-range"
   | "board"
@@ -12,6 +13,64 @@ export type SideView =
   | "run-solver"
   | "about";
 
+export type Config = {
+  board: number[];
+  startingPot: number;
+  effectiveStack: number;
+  rakePercent: number;
+  rakeCap: number;
+  donkOption: boolean;
+  oopFlopBet: string;
+  oopFlopRaise: string;
+  oopTurnBet: string;
+  oopTurnRaise: string;
+  oopTurnDonk: string;
+  oopRiverBet: string;
+  oopRiverRaise: string;
+  oopRiverDonk: string;
+  ipFlopBet: string;
+  ipFlopRaise: string;
+  ipTurnBet: string;
+  ipTurnRaise: string;
+  ipRiverBet: string;
+  ipRiverRaise: string;
+  addAllInThreshold: number;
+  forceAllInThreshold: number;
+  mergingThreshold: number;
+  expectedBoardLength: number;
+  addedLines: string;
+  removedLines: string;
+};
+
+export const configKeys = [
+  "board",
+  "startingPot",
+  "effectiveStack",
+  "rakePercent",
+  "rakeCap",
+  "donkOption",
+  "oopFlopBet",
+  "oopFlopRaise",
+  "oopTurnBet",
+  "oopTurnRaise",
+  "oopTurnDonk",
+  "oopRiverBet",
+  "oopRiverRaise",
+  "oopRiverDonk",
+  "ipFlopBet",
+  "ipFlopRaise",
+  "ipTurnBet",
+  "ipTurnRaise",
+  "ipRiverBet",
+  "ipRiverRaise",
+  "addAllInThreshold",
+  "forceAllInThreshold",
+  "mergingThreshold",
+  "expectedBoardLength",
+  "addedLines",
+  "removedLines",
+];
+
 export const saveConfigTmp = () => {
   const config = useConfigStore();
   const tmpConfig = useTmpConfigStore();
@@ -86,6 +145,7 @@ export const useStore = defineStore("app", {
     sideView: "oop-range" as SideView,
     headers: {
       about: ["About"],
+      "hand-importer": ["Import / Export"],
       "oop-range": ["OOP Range"],
       "ip-range": ["IP Range"],
       board: ["Board"],
@@ -120,7 +180,7 @@ export const useStore = defineStore("app", {
 });
 
 export const useConfigStore = defineStore("config", {
-  state: () => ({
+  state: (): Config => ({
     board: [] as number[],
     startingPot: 20,
     effectiveStack: 100,
diff --git a/src/style.css b/src/style.css
index 153814f..515c440 100644
--- a/src/style.css
+++ b/src/style.css
@@ -36,6 +36,10 @@ input.input-error {
   @apply !ring-1 !ring-red-600 !border-red-600 !bg-red-50;
 }
 
+textarea.textarea-error {
+  @apply !ring-1 !ring-red-600 !border-red-600 !bg-red-50;
+}
+
 .text-shadow {
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }
diff --git a/src/utils.ts b/src/utils.ts
index b8d8d72..de53eef 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,8 @@
+// TODO clean up types with generitc type and casts
+export type Validation<Contents = {}> =
+  | ({ success: true } & Contents)
+  | { success: false; error: string };
+
 export const ranks = [
   "2",
   "3",
@@ -26,6 +31,12 @@ export const rangeRegex = new RegExp(
   `^(?<range>${comboPat}(?:\\+|(?:-${comboPat}))?)(?::(?<weight>${weightPat}))?$`
 );
 
+/** TODO use this everywhere instead of num */
+export enum Position {
+  OOP = 0,
+  IP = 1,
+}
+
 const suitClasses = [
   "text-green-600",
   "text-blue-600",