add board config input form components

packages/vue-client/src/components/GameCreation/BadukConfigForm.vue

@@ -1,38 +1,37 @@
 import { Grid } from '../../../../shared/src/lib/grid';
 <script setup lang="ts">
-import { type GridBadukConfig } from "@ogfcommunity/variants-shared";
+import { BoardConfig, NewBadukConfig } from "@ogfcommunity/variants-shared";
+import BoardConfigForm from "./BoardConfigForms/BoardConfigForm.vue";
 
 const props = defineProps<{
-  initialConfig: {
-    komi: number;
-    board: { type: "grid"; width: number; height: number };
-  };
+  initialConfig: NewBadukConfig;
+  gridOnly?: boolean;
 }>();
-// the type here is ugly atm, but I will fix this when I add input forms for the new board patterns
-const config: GridBadukConfig = {
+const config: NewBadukConfig = {
   komi: props.initialConfig.komi,
-  board: {
-    type: "grid",
-    width: props.initialConfig.board.width,
-    height: props.initialConfig.board.height,
-  },
+  board: { ...props.initialConfig.board },
 };
 
 const emit = defineEmits<{
-  (e: "configChanged", config: GridBadukConfig): void;
+  (e: "configChanged", config: NewBadukConfig): void;
 }>();
 
 function emitConfigChange() {
   emit("configChanged", config);
 }
+
+function setBoardConfig(boardConfig: BoardConfig): void {
+  config.board = boardConfig;
+  emitConfigChange();
+}
 </script>
 
 <template>
   <form @change="emitConfigChange" class="config-form-column">
-    <label>Width</label>
-    <input type="number" min="1" v-model="config.board.width" />
-    <label>Height</label>
-    <input type="number" min="1" v-model="config.board.height" />
+    <BoardConfigForm
+      @config-changed="setBoardConfig($event)"
+      v-bind:grid-only="$props.gridOnly"
+    />
     <label>Komi</label>
     <input type="number" step="0.5" v-model="config.komi" />
   </form>

packages/vue-client/src/components/GameCreation/BoardConfigForms/BoardConfigForm.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { BoardConfig, BoardPattern } from "@ogfcommunity/variants-shared";
+import { type Ref, ref } from "vue";
+import GridBoardConfigForm from "./GridBoardConfigForm.vue";
+import RhombitrihexagonalBoardConfigForm from "./RhombitrihexagonalBoardConfigForm.vue";
+import CircularBoardConfigForm from "./CircularBoardConfigForm.vue";
+import TrihexagonalConfigForm from "./TrihexagonalConfigForm.vue";
+import SierpinskyBoardConfigForm from "./SierpinskyBoardConfigForm.vue";
+
+const props = defineProps<{ gridOnly?: boolean }>();
+
+const board_type: Ref<string> = ref(BoardPattern.Grid);
+
+// TODO: respect initial board config as defined by variant
+
+const emit = defineEmits<{
+  (e: "configChanged", config: BoardConfig): void;
+}>();
+
+function emitConfigChange(config: BoardConfig) {
+  emit("configChanged", config);
+}
+</script>
+
+<template>
+  <div class="config-form-column">
+    <template v-if="$props.gridOnly !== true">
+      <label>Pattern</label>
+      <select v-model="board_type" style="width: fit-content">
+        <option :value="BoardPattern.Grid">Rectangular</option>
+        <option :value="BoardPattern.Polygonal">Polygonal</option>
+        <option :value="BoardPattern.Circular">Circular</option>
+        <option :value="BoardPattern.Trihexagonal">Trihexagonal</option>
+        <option :value="BoardPattern.Sierpinsky">Sierpinsky Triangle</option>
+      </select>
+    </template>
+    <GridBoardConfigForm
+      v-if="board_type === BoardPattern.Grid"
+      @config-changed="emitConfigChange"
+    />
+    <RhombitrihexagonalBoardConfigForm
+      v-if="board_type === BoardPattern.Polygonal"
+      @config-changed="emitConfigChange"
+    />
+    <CircularBoardConfigForm
+      v-if="board_type === BoardPattern.Circular"
+      @config-changed="emitConfigChange"
+    />
+    <TrihexagonalConfigForm
+      v-if="board_type === BoardPattern.Trihexagonal"
+      @config-changed="emitConfigChange"
+    />
+    <SierpinskyBoardConfigForm
+      v-if="board_type === BoardPattern.Sierpinsky"
+      @config-changed="emitConfigChange"
+    />
+  </div>
+</template>

packages/vue-client/src/components/GameCreation/BoardConfigForms/CircularBoardConfigForm.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { CircularBoardConfig } from "@ogfcommunity/variants-shared";
+import { ref } from "vue";
+
+const defaultConfig: CircularBoardConfig = {
+  type: "circular",
+  rings: 9,
+  nodesPerRing: 9,
+};
+
+const props = defineProps<{ initialConfig?: CircularBoardConfig }>();
+
+const config = ref(props.initialConfig ?? defaultConfig);
+
+const emit = defineEmits<{
+  (e: "configChanged", config: CircularBoardConfig): void;
+}>();
+
+function emitConfigChange() {
+  emit("configChanged", config.value);
+}
+
+if (!props.initialConfig) {
+  emitConfigChange();
+}
+</script>
+
+<template>
+  <form @change="emitConfigChange" class="config-form-column">
+    <label>Nodes per Ring</label>
+    <input type="number" min="3" v-model="config.nodesPerRing" />
+    <label>Number of Rings</label>
+    <input type="number" min="3" v-model="config.rings" />
+  </form>
+</template>

packages/vue-client/src/components/GameCreation/BoardConfigForms/GridBoardConfigForm.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { GridBoardConfig } from "@ogfcommunity/variants-shared";
+import { ref } from "vue";
+
+const defaultConfig: GridBoardConfig = {
+  type: "grid",
+  width: 19,
+  height: 19,
+};
+
+const props = defineProps<{ initialConfig?: GridBoardConfig }>();
+
+const config = ref(props.initialConfig ?? defaultConfig);
+
+const emit = defineEmits<{
+  (e: "configChanged", config: GridBoardConfig): void;
+}>();
+
+function emitConfigChange() {
+  emit("configChanged", config.value);
+}
+
+if (!props.initialConfig) {
+  emitConfigChange();
+}
+</script>
+
+<template>
+  <form @change="emitConfigChange" class="config-form-column">
+    <div class=""></div>
+    <label>Width</label>
+    <input type="number" min="1" v-model="config.width" />
+    <label>Height</label>
+    <input type="number" min="1" v-model="config.height" />
+  </form>
+</template>

packages/vue-client/src/components/GameCreation/BoardConfigForms/RhombitrihexagonalBoardConfigForm.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { RhombitrihexagonalBoardConfig } from "@ogfcommunity/variants-shared";
+import { ref } from "vue";
+
+const defaultConfig: RhombitrihexagonalBoardConfig = {
+  type: "polygonal",
+  size: 4,
+};
+
+const props = defineProps<{ initialConfig?: RhombitrihexagonalBoardConfig }>();
+
+const config = ref(props.initialConfig ?? defaultConfig);
+
+const emit = defineEmits<{
+  (e: "configChanged", config: RhombitrihexagonalBoardConfig): void;
+}>();
+
+function emitConfigChange() {
+  emit("configChanged", config.value);
+}
+
+if (!props.initialConfig) {
+  emitConfigChange();
+}
+</script>
+
+<template>
+  <form @change="emitConfigChange" class="config-form-column">
+    <label>Size</label>
+    <input type="number" min="1" max="6" v-model="config.size" />
+  </form>
+</template>

packages/vue-client/src/components/GameCreation/BoardConfigForms/SierpinskyBoardConfigForm.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { SierpinskyBoardConfig } from "@ogfcommunity/variants-shared";
+import { ref } from "vue";
+
+const defaultConfig: SierpinskyBoardConfig = {
+  type: "sierpinsky",
+  size: 3,
+};
+
+const props = defineProps<{ initialConfig?: SierpinskyBoardConfig }>();
+
+const config = ref(props.initialConfig ?? defaultConfig);
+
+const emit = defineEmits<{
+  (e: "configChanged", config: SierpinskyBoardConfig): void;
+}>();
+
+function emitConfigChange() {
+  emit("configChanged", config.value);
+}
+
+if (!props.initialConfig) {
+  emitConfigChange();
+}
+</script>
+
+<template>
+  <form @change="emitConfigChange" class="config-form-column">
+    <label>Size</label>
+    <input type="number" min="1" max="6" v-model="config.size" />
+  </form>
+</template>

packages/vue-client/src/components/GameCreation/BoardConfigForms/TrihexagonalConfigForm.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { TrihexagonalBoardConfig } from "@ogfcommunity/variants-shared";
+import { ref } from "vue";
+
+const defaultConfig: TrihexagonalBoardConfig = {
+  type: "trihexagonal",
+  size: 8,
+};
+
+const props = defineProps<{ initialConfig?: TrihexagonalBoardConfig }>();
+
+const config = ref(props.initialConfig ?? defaultConfig);
+
+const emit = defineEmits<{
+  (e: "configChanged", config: TrihexagonalBoardConfig): void;
+}>();
+
+function emitConfigChange() {
+  emit("configChanged", config.value);
+}
+
+if (!props.initialConfig) {
+  emitConfigChange();
+}
+</script>
+
+<template>
+  <form @change="emitConfigChange" class="config-form-column">
+    <label>Size</label>
+    <input type="number" min="1" v-model="config.size" />
+  </form>
+</template>

packages/vue-client/src/components/GameCreation/GridBadukConfigForm.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  NewBadukConfig,
+  NewGridBadukConfig,
+} from "@ogfcommunity/variants-shared";
+import BadukConfigForm from "./BadukConfigForm.vue";
+
+const props = defineProps<{
+  initialConfig: NewGridBadukConfig;
+}>();
+
+const emit = defineEmits<{
+  (e: "configChanged", config: NewBadukConfig): void;
+}>();
+
+function emitConfigChange(config: NewBadukConfig) {
+  emit("configChanged", config);
+}
+</script>
+
+<template>
+  <BadukConfigForm
+    v-bind:initial-config="$props.initialConfig"
+    v-bind:grid-only="true"
+    @config-changed="emitConfigChange"
+  />
+</template>

packages/vue-client/src/components/boards/MulticolorGraphBoard.vue

@@ -41,12 +41,16 @@ function positionHovered(index: number) {
 const viewBox = computed(() => {
   const xPositions = intersections.map((i) => i.position.X);
   const yPositions = intersections.map((i) => i.position.Y);
-  const minX = Math.min(...xPositions) - 1;
-  const minY = Math.min(...yPositions) - 1;
-  const width = Math.max(...xPositions) - Math.min(...xPositions) + 2;
-  const height = Math.max(...yPositions) - Math.min(...yPositions) + 2;
-  const vb = `${minX} ${minY} ${width} ${height}`;
-  return vb;
+  const minX = Math.min(...xPositions);
+  const minY = Math.min(...yPositions);
+  const width = Math.max(...xPositions) - Math.min(...xPositions);
+  const height = Math.max(...yPositions) - Math.min(...yPositions);
+  return {
+    minX: minX,
+    minY: minY,
+    width: width,
+    height: height,
+  };
 });
 </script>
 
@@ -56,13 +60,15 @@ const viewBox = computed(() => {
     xmlns="http://www.w3.org/2000/svg"
     width="100%"
     height="100%"
-    v-bind:viewBox="viewBox"
+    v-bind:viewBox="`${viewBox.minX - 1} ${viewBox.minY - 1} ${
+      viewBox.width + 2
+    } ${viewBox.height + 2}`"
   >
     <rect
-      x="-0.5"
-      y="-0.5"
-      width="100%"
-      height="100%"
+      v-bind:x="viewBox.minX - 0.5"
+      v-bind:y="viewBox.minY - 0.5"
+      v-bind:width="viewBox.width + 1"
+      v-bind:height="viewBox.height + 1"
       :fill="background_color ?? '#dcb35c'"
     />
 

packages/vue-client/src/config_form_map.ts

@@ -3,6 +3,7 @@ import BadukConfigForm from "@/components/GameCreation/BadukConfigForm.vue";
 import BadukWithAbstractBoardConfigForm from "@/components/GameCreation/BadukWithAbstractBoardConfigForm.vue";
 import ParalleGoConfigForm from "@/components/GameCreation/ParallelGoConfigForm.vue";
 import DriftGoConfigFormVue from "./components/GameCreation/DriftGoConfigForm.vue";
+import GridBadukConfigForm from "./components/GameCreation/GridBadukConfigForm.vue";
 
 export const config_form_map: {
   [variant: string]: Component<{ initialConfig: object }>;
@@ -13,11 +14,11 @@ export const config_form_map: {
   parallel: ParalleGoConfigForm,
   capture: BadukConfigForm,
   tetris: BadukConfigForm,
-  pyramid: BadukConfigForm,
+  pyramid: GridBadukConfigForm,
   "thue-morse": BadukConfigForm,
-  freeze: BadukConfigForm,
-  keima: BadukConfigForm,
+  freeze: GridBadukConfigForm,
+  keima: GridBadukConfigForm,
   "one color": BadukConfigForm,
   drift: DriftGoConfigFormVue,
-  quantum: BadukConfigForm,
+  quantum: GridBadukConfigForm,
 };