feat(Select): Add ruler settings to select UI

CHANGELOG.md

@@ -24,6 +24,9 @@ tech changes will usually be stripped from release notes for the public
 
 ### Changed
 
+-   Select tool:
+    -   now integrates all the ruler toggles in its UI as well
+    -   these toggles are synced with the ones in the ruler
 -   Spell tool:
     -   now renders hexes instead of squares in Hex grid mode
     -   step size changed to 1 in Hex grid mode

client/src/game/ui/tools/SelectTool.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { onMounted, toRef } from "vue";
+import { useI18n } from "vue-i18n";
 
 import type { GlobalPoint } from "../../../core/geometry";
 import { rotateAroundPoint } from "../../../core/math";
 import type { Polygon } from "../../shapes/variants/polygon";
 import { selectedSystem } from "../../systems/selected";
+import { rulerTool } from "../../tools/variants/ruler";
 import { selectTool } from "../../tools/variants/select";
 import { selectToolState } from "../../tools/variants/select/state";
 
+const { t } = useI18n();
+
 const { $, _$ } = selectToolState;
 
 const selected = selectTool.isActiveTool;
@@ -47,6 +51,16 @@ function removePoint(): void {
     const selection = selectedSystem.get({ includeComposites: false })[0] as Polygon;
     selection.removePoint(getGlobalRefPoint(selection));
 }
+
+function toggle(event: MouseEvent): void {
+    const state = (event.target as HTMLButtonElement).getAttribute("aria-pressed") ?? "false";
+    rulerTool.showPublic.value = state === "false";
+}
+
+function toggleGridMode(event: MouseEvent): void {
+    const state = (event.target as HTMLButtonElement).getAttribute("aria-pressed") ?? "false";
+    rulerTool.gridMode.value = state === "false";
+}
 </script>
 
 <template>
@@ -58,6 +72,12 @@ function removePoint(): void {
 
     <div v-if="selected && $.hasSelection" class="tool-detail">
         <button :aria-pressed="$.showRuler" @click="toggleShowRuler">Show ruler</button>
+        <button :aria-pressed="rulerTool.showPublic.value" :disabled="!$.showRuler" @click="toggle">
+            {{ t("game.ui.tools.RulerTool.share") }}
+        </button>
+        <button :aria-pressed="rulerTool.gridMode.value" :disabled="!$.showRuler" @click="toggleGridMode">
+            Grid Mode
+        </button>
     </div>
 </template>
 
@@ -99,6 +119,10 @@ button {
     position: relative;
     outline: none;
 
+    &:disabled {
+        opacity: 0.5;
+    }
+
     &:hover {
         &::before {
             box-shadow: 0 0 0.5em #333;