From ef7e1bbb90497efac5f4e2a00de3663da8169a67 Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Wed, 24 Jun 2020 12:14:57 +0300
Subject: [PATCH] map checker preview version

---
 src/ipc/main-process-bindings.ts              |  6 ++
 src/ipc/types.ts                              | 17 +++-
 src/web/map-check/MapStatButton.vue           | 68 ++++++++++++++
 src/web/map-check/WidgetMapCheck.vue          | 92 +++++++++++++++++++
 src/web/map-check/prepare-map-stats.ts        | 26 ++++++
 src/web/overlay/OverlayWindow.vue             | 13 ++-
 src/web/overlay/Widget.vue                    |  2 +-
 src/web/price-check/PriceCheckWindow.vue      | 10 +-
 .../price-check/filters/FilterModifier.vue    |  8 +-
 src/web/router.ts                             |  5 +
 src/web/settings/SettingsWindow.vue           |  1 +
 src/web/settings/maps.vue                     | 20 ++++
 .../ItemModifierText.vue}                     | 14 ++-
 13 files changed, 260 insertions(+), 22 deletions(-)
 create mode 100644 src/web/map-check/MapStatButton.vue
 create mode 100644 src/web/map-check/WidgetMapCheck.vue
 create mode 100644 src/web/map-check/prepare-map-stats.ts
 create mode 100644 src/web/settings/maps.vue
 rename src/web/{price-check/filters/FilteStatText.vue => ui/ItemModifierText.vue} (74%)

diff --git a/src/ipc/main-process-bindings.ts b/src/ipc/main-process-bindings.ts
index 350748f8..02f2fb82 100644
--- a/src/ipc/main-process-bindings.ts
+++ b/src/ipc/main-process-bindings.ts
@@ -16,6 +16,12 @@ class MainProcessBinding extends EventTarget {
         this.selfEmitPriceCheck(data)
       })
 
+      electron.ipcRenderer.on(ipcEvent.MAP_CHECK, (e, data) => {
+        this.dispatchEvent(new CustomEvent(ipcEvent.MAP_CHECK, {
+          detail: data
+        }))
+      })
+
       electron.ipcRenderer.on(ipcEvent.LEAGUE_SELECTED, (e, leagueId) => {
         this.dispatchEvent(new CustomEvent(ipcEvent.LEAGUE_SELECTED, {
           detail: leagueId
diff --git a/src/ipc/types.ts b/src/ipc/types.ts
index 6d864653..bf5a334a 100644
--- a/src/ipc/types.ts
+++ b/src/ipc/types.ts
@@ -112,7 +112,22 @@ export const defaultConfig: Config = {
       wmZorder: 3,
       wmFlags: ['hide-on-blur', 'skip-menu'],
       selectedStats: [
-        // { text: '' }
+        {
+          text: 'Slaying Enemies close together has a #% chance to attract monsters from Beyond',
+          markedAs: 'desirable'
+        },
+        {
+          text: '#% maximum Player Resistances',
+          markedAs: 'warning'
+        },
+        {
+          text: 'Monsters reflect #% of Physical Damage',
+          markedAs: 'danger'
+        },
+        {
+          text: 'Area contains two Unique Bosses',
+          markedAs: 'desirable'
+        }
       ]
     },
     // --- DEFAULT ---
diff --git a/src/web/map-check/MapStatButton.vue b/src/web/map-check/MapStatButton.vue
new file mode 100644
index 00000000..497647cd
--- /dev/null
+++ b/src/web/map-check/MapStatButton.vue
@@ -0,0 +1,68 @@
+<template>
+  <button @click="handleClick"
+    class="px-2 leading-none py-2 m-0 text-left flex items-center"
+    :class="state === 'danger' ? 'bg-red-700'
+          : state === 'warning' ? 'bg-orange-600'
+          : state === 'desirable' ? 'bg-green-700'
+          : 'hover:bg-gray-700'">
+    <template>
+      <i v-if="!state"
+        class="inline-block mr-2" style="min-width: 1rem;">{{ '\u2009' }}</i>
+      <i v-else
+        class="fas mr-2 text-center" style="min-width: 1rem;"
+        :class="state === 'danger' ? 'fa-skull-crossbones'
+          : state === 'warning' ? 'fa-exclamation-triangle'
+          : 'fa-check'"></i>
+    </template>
+    <item-modifier-text :text="stat.text" :roll="stat.roll" class="truncate" />
+  </button>
+</template>
+
+<script>
+import ItemModifierText from '../ui/ItemModifierText'
+import { Config } from '@/web/Config'
+
+export default {
+  components: { ItemModifierText },
+  props: {
+    stat: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    state () {
+      return this.entryInSelected && this.entryInSelected.markedAs
+    },
+    entryInSelected () {
+      return this.config.selectedStats.find(_ => _.text === this.stat.ref)
+    },
+    config () {
+      return Config.store.widgets.find(widget => widget.wmType === 'map-check')
+    }
+  },
+  methods: {
+    handleClick () {
+      if (!this.entryInSelected) {
+        this.config.selectedStats.push({
+          text: this.stat.ref,
+          markedAs: 'danger'
+        })
+        return
+      }
+
+      switch (this.entryInSelected.markedAs) {
+        case 'danger':
+          this.entryInSelected.markedAs = 'warning'
+          break
+        case 'warning':
+          this.entryInSelected.markedAs = 'desirable'
+          break
+        case 'desirable':
+          this.config.selectedStats = this.config.selectedStats.filter(selected => selected !== this.entryInSelected)
+          break
+      }
+    }
+  }
+}
+</script>
diff --git a/src/web/map-check/WidgetMapCheck.vue b/src/web/map-check/WidgetMapCheck.vue
new file mode 100644
index 00000000..9666a407
--- /dev/null
+++ b/src/web/map-check/WidgetMapCheck.vue
@@ -0,0 +1,92 @@
+<template>
+  <widget :config="{ ...config, anchor }" move-handles="none" readonly :removable="false">
+    <div class="bg-gray-800 text-gray-200" style="min-width: 320px;" :style="{ 'max-width': `${wm.width - wm.poeUiWidth}px` }">
+      <div class="bg-gray-900 py-1 px-4 text-center">{{ mapName }}</div>
+      <div v-if="!item" class="px-8 py-2">
+        Item under cursor is not a map.
+      </div>
+      <div v-else class="py-2 pr-8 flex flex-col">
+        <map-stat-button v-for="stat in mapStats" :key="stat.text"
+          :stat="stat" />
+      </div>
+      <div class="px-8 py-2">
+        <span class="bg-gray-200 text-gray-800 rounded px-1">Preview Version</span><span> More features and configuration options to come in the next release</span>
+      </div>
+    </div>
+  </widget>
+</template>
+
+<script>
+import Widget from '../overlay/Widget'
+import { MainProcess } from '@/ipc/main-process-bindings'
+import { MAP_CHECK } from '@/ipc/ipc-event'
+import { parseClipboard, ItemCategory, ItemRarity } from '@/parser'
+import MapStatButton from './MapStatButton'
+import { prepareMapStats } from './prepare-map-stats'
+// import CheckPositionCircle from './CheckPositionCircle'
+
+export default {
+  components: {
+    Widget,
+    MapStatButton
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  created () {
+    MainProcess.addEventListener(MAP_CHECK, ({ detail: e }) => {
+      this.wm.show(this.config.wmId)
+      this.checkPosition = {
+        x: e.position.x - window.screenX,
+        y: e.position.y - window.screenY
+      }
+      this.item = null
+      const item = parseClipboard(e.clipboard)
+      if (item.category === ItemCategory.Map) {
+        this.item = item
+      }
+    })
+  },
+  inject: ['wm'],
+  data () {
+    this.config.wmWants = 'hide'
+
+    return {
+      checkPosition: { x: 1, y: 1 },
+      item: null
+    }
+  },
+  computed: {
+    anchor () {
+      const side = this.checkPosition.x > (this.wm.width / 2)
+        ? 'inventory'
+        : 'stash'
+
+      return {
+        pos: side === 'stash' ? 'cl' : 'cr',
+        y: 50,
+        x: side === 'stash'
+          ? (this.wm.poeUiWidth / this.wm.width) * 100
+          : ((this.wm.width - this.wm.poeUiWidth) / this.wm.width) * 100
+      }
+    },
+    mapName () {
+      if (!this.item) {
+        return 'Invalid item'
+      }
+
+      if (this.item.rarity === ItemRarity.Unique) {
+        return this.item.name || this.item.baseType
+      } else {
+        return this.item.baseType || this.item.name
+      }
+    },
+    mapStats () {
+      return prepareMapStats(this.item)
+    }
+  }
+}
+</script>
diff --git a/src/web/map-check/prepare-map-stats.ts b/src/web/map-check/prepare-map-stats.ts
new file mode 100644
index 00000000..f6767492
--- /dev/null
+++ b/src/web/map-check/prepare-map-stats.ts
@@ -0,0 +1,26 @@
+import { ParsedItem } from '@/parser/ParsedItem'
+import { getRollAsSingleNumber } from '@/parser/utils'
+
+type PreparedStat = {
+  text: string
+  ref: string
+  roll?: number
+}
+
+export function prepareMapStats (item: ParsedItem): PreparedStat[] {
+  return item.modifiers.map(mod => {
+    const prepared = {
+      text: mod.string,
+      ref: mod.stat.ref,
+      roll: mod.values && getRollAsSingleNumber(mod.values)
+    }
+
+    if (mod.negate) {
+      if (prepared.roll != null) {
+        prepared.roll = -1 * prepared.roll
+      }
+    }
+
+    return prepared
+  })
+}
diff --git a/src/web/overlay/OverlayWindow.vue b/src/web/overlay/OverlayWindow.vue
index 7b5492d8..aaafa659 100644
--- a/src/web/overlay/OverlayWindow.vue
+++ b/src/web/overlay/OverlayWindow.vue
@@ -44,7 +44,9 @@ export default {
       active: false,
       gameFocused: false,
       hideUI: false,
-      devicePixelRatio: null
+      devicePixelRatio: null,
+      width: window.innerWidth,
+      height: window.innerHeight
     }
   },
   watch: {
@@ -98,8 +100,10 @@ export default {
     })
     window.addEventListener('resize', () => {
       this.devicePixelRatio = window.devicePixelRatio
+      this.width = window.innerWidth
+      this.height = window.innerHeight
     })
-    this.devicePixelRatio = window.devicePixelRatio
+    this.devicePixelRatio = window.devicePixelRatio // trigger watcher
   },
   mounted () {
     this.$nextTick(() => {
@@ -134,6 +138,11 @@ export default {
       return this.widgets
         .filter(w => w.wmZorder !== 'exclusive')
         .sort((a, b) => b.wmZorder - a.wmZorder)[0] // guaranteed to always exist because of the 'widget-menu'
+    },
+    poeUiWidth () {
+      // sidebar is 370px at 800x600
+      const ratio = 370 / 600
+      return Math.round(this.height * ratio)
     }
   },
   methods: {
diff --git a/src/web/overlay/Widget.vue b/src/web/overlay/Widget.vue
index 4f1138db..c7c42308 100644
--- a/src/web/overlay/Widget.vue
+++ b/src/web/overlay/Widget.vue
@@ -10,7 +10,7 @@
             :class="$style.action">hide</button>
           <button v-if="!readonly" @click="toggleEdit"
             :class="[$style.action, { [$style.active]: isEditing }]">edit</button>
-          <button @click="toggleMove"
+          <button v-if="moveHandles !== 'none'" @click="toggleMove"
             :class="[$style.action, { [$style.active]: isMoving }]">move</button>
           <button v-if="removable" @mousedown="startRemoveTimer" @mouseup="cancelRemoveTimer" @mouseleave="cancelRemoveTimer"
             :class="[$style.action, $style.removable, { [$style.removing]: isRemoving }]">delete</button>
diff --git a/src/web/price-check/PriceCheckWindow.vue b/src/web/price-check/PriceCheckWindow.vue
index 2504d45c..0cb76a85 100644
--- a/src/web/price-check/PriceCheckWindow.vue
+++ b/src/web/price-check/PriceCheckWindow.vue
@@ -6,7 +6,7 @@
     'flex-row-reverse': clickPosition === 'inventory',
   }">
     <div v-if="!isBrowserShown" class="layout-column flex-shrink-0"
-      :style="{ width: poeUiWidth }">
+      :style="{ width: `${wm.poeUiWidth}px` }">
     </div>
     <div id="price-window" class="layout-column flex-shrink-0 text-gray-200" style="width: 460px;">
       <app-titlebar @close="closePriceCheck" :title="title">
@@ -110,15 +110,12 @@ export default {
     MainProcess.addEventListener(PRICE_CHECK_CANCELED, () => {
       this.wm.hide(this.config.wmId)
     })
-    window.addEventListener('resize', this.updatePoeUiWidth)
-    this.updatePoeUiWidth()
   },
   data () {
     this.config.wmWants = 'hide'
     this.config.wmFlags = ['hide-on-blur', 'skip-menu']
 
     return {
-      poeUiWidth: '1px',
       checkPosition: { x: 1, y: 1 },
       item: null,
       showTips: false
@@ -179,11 +176,6 @@ export default {
   methods: {
     closePriceCheck () {
       MainProcess.closeOverlay()
-    },
-    updatePoeUiWidth () {
-      // sidebar is 370px at 800x600
-      const ratio = 370 / 600
-      this.poeUiWidth = `${Math.round(window.innerHeight * ratio)}px`
     }
   }
 }
diff --git a/src/web/price-check/filters/FilterModifier.vue b/src/web/price-check/filters/FilterModifier.vue
index 34ebb2e4..e52c9393 100644
--- a/src/web/price-check/filters/FilterModifier.vue
+++ b/src/web/price-check/filters/FilterModifier.vue
@@ -7,8 +7,8 @@
           'fas fa-check-square': !filter.disabled
         }"></i>
         <div class="search-text flex-1 mr-1 relative flex min-w-0" style="line-height: 1rem;">
-          <span class="truncate"><filter-stat-text :filter="filter" /></span>
-          <span class="search-text-full"><filter-stat-text :filter="filter" /></span>
+          <span class="truncate"><item-modifier-text :text="filter.text" :roll="filter.roll" /></span>
+          <span class="search-text-full"><item-modifier-text :text="filter.text" :roll="filter.roll" /></span>
         </div>
       </button>
       <div class="flex">
@@ -76,10 +76,10 @@
 </template>
 
 <script>
-import FilterStatText from './FilteStatText'
+import ItemModifierText from '../../ui/ItemModifierText'
 
 export default {
-  components: { FilterStatText },
+  components: { ItemModifierText },
   props: {
     filter: {
       type: Object,
diff --git a/src/web/router.ts b/src/web/router.ts
index 219d40a8..7d24036b 100644
--- a/src/web/router.ts
+++ b/src/web/router.ts
@@ -30,6 +30,11 @@ export default new Router({
           path: 'debug',
           name: 'settings.debug',
           component: () => import(/* webpackChunkName: "settings" */ './settings/debug.vue')
+        },
+        {
+          path: 'maps',
+          name: 'settings.maps',
+          component: () => import(/* webpackChunkName: "settings" */ './settings/maps.vue')
         }
       ]
     }
diff --git a/src/web/settings/SettingsWindow.vue b/src/web/settings/SettingsWindow.vue
index cf23551f..a7c09a36 100644
--- a/src/web/settings/SettingsWindow.vue
+++ b/src/web/settings/SettingsWindow.vue
@@ -5,6 +5,7 @@
       <div class="px-2 pb-10 bg-gray-900 flex flex-col">
         <router-link :to="{ name: 'settings.hotkeys' }" class="menu-item">Hotkeys</router-link>
         <router-link :to="{ name: 'settings.general' }" class="menu-item">General</router-link>
+        <router-link :to="{ name: 'settings.maps' }" class="menu-item">Maps</router-link>
         <router-link :to="{ name: 'settings.debug' }" class="menu-item">Debug</router-link>
         <div style="min-width: 150px;"></div>
       </div>
diff --git a/src/web/settings/maps.vue b/src/web/settings/maps.vue
new file mode 100644
index 00000000..4953e1ae
--- /dev/null
+++ b/src/web/settings/maps.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="max-w-md p-2">
+    <div class="bg-gray-700 rounded px-2 py-1 mb-2 leading-none">
+      <i class="fas fa-info-circle"></i> You can click on stat to cycle through available marks: danger, warning, desirable, none.</div>
+
+    <span class="bg-gray-200 text-gray-800 rounded px-1">Preview Version</span><span> More features and configuration options to come in the next release</span>
+  </div>
+</template>
+
+<script>
+import { Config } from '@/web/Config'
+
+export default {
+  computed: {
+    config () {
+      return Config.store
+    }
+  }
+}
+</script>
diff --git a/src/web/price-check/filters/FilteStatText.vue b/src/web/ui/ItemModifierText.vue
similarity index 74%
rename from src/web/price-check/filters/FilteStatText.vue
rename to src/web/ui/ItemModifierText.vue
index d63be633..3273684c 100644
--- a/src/web/price-check/filters/FilteStatText.vue
+++ b/src/web/ui/ItemModifierText.vue
@@ -12,24 +12,28 @@
 <script>
 export default {
   props: {
-    filter: {
-      type: Object,
+    text: {
+      type: String,
       required: true
+    },
+    roll: {
+      type: Number,
+      default: undefined
     }
   },
   computed: {
     parts () {
       const res = []
-      this.filter.text.split(/(?<![#])[+-]?[#]/gm).forEach((text, idx, parts) => {
+      this.text.split(/(?<![#])[+-]?[#]/gm).forEach((text, idx, parts) => {
         if (text !== '') {
           res.push({ text })
         }
         if (idx !== (parts.length - 1)) {
-          if (this.filter.roll == null) {
+          if (this.roll == null) {
             res.push({ text: '#' })
           } else {
             res.push({
-              text: this.filter.roll,
+              text: this.roll,
               placeholder: true
             })
           }