feat(widget): Delve grid

src/web/overlay/OverlayWindow.vue

@@ -27,6 +27,7 @@ import PriceCheckWindow from '@/web/price-check/PriceCheckWindow'
 import WidgetDebug from './WidgetDebug'
 import WidgetMapCheck from '@/web/map-check/WidgetMapCheck'
 import WidgetImageStrip from './WidgetImageStrip'
+import WidgetDelveGrid from './WidgetDelveGrid'
 import { registerOtherServices } from '../other-services'
 import { FOCUS_CHANGE, VISIBILITY } from '@/ipc/ipc-event'
 import { Config } from '@/web/Config'
@@ -39,7 +40,8 @@ export default {
     WidgetPriceCheck: PriceCheckWindow,
     WidgetDebug,
     WidgetMapCheck,
-    WidgetImageStrip
+    WidgetImageStrip,
+    WidgetDelveGrid
   },
   provide () {
     return { wm: this }

src/web/overlay/WidgetDelveGrid.vue

@@ -0,0 +1,55 @@
+<template>
+  <widget :config="{ anchor }" move-handles="none" readonly :removable="false">
+    <div class="relative overflow-hidden"
+      :style="{
+        width: `${anchor.width}px`,
+        height: `${anchor.height}px`,
+        background: 'rgba(255,255,255,0.1)'
+      }">
+      <div
+        class="absolute"
+        :style="{
+          top: `${(anchor.height - anchor.cell * 9) / 2}px`,
+          left: `${(anchor.width - anchor.cell * 11) / 2}px`
+        }">
+          <div v-for="i in 9" :key="i" class="flex">
+            <div v-for="j in 11" :key="j"
+              class="border border-gray-600"
+              :style="cellSize" />
+          </div>
+        </div>
+    </div>
+  </widget>
+</template>
+
+<script>
+import Widget from './Widget'
+
+export default {
+  components: { Widget },
+  inject: ['wm'],
+  computed: {
+    anchor () {
+      const height = Math.round(this.wm.height * 808 / 1080)
+      const width = Math.round(height * 1030 / 808)
+      const top = Math.round(this.wm.height * 67 / 1080)
+      const cell = Math.round(this.wm.height * 97 / 1080)
+
+      return {
+        pos: 'tc',
+        y: (top / this.wm.height) * 100,
+        x: 50,
+        height,
+        width,
+        cell
+      }
+    },
+    cellSize () {
+      return {
+        width: `${this.anchor.cell}px`,
+        height: `${this.anchor.cell}px`
+      }
+    }
+  }
+}
+</script>