poi-plugin-reload-game-button 0.3.0

package/README.md

@@ -0,0 +1,31 @@
+# poi-plugin-reload-game-button
+
+## 中文
+
+适用于 poi 的触摸友好悬浮按钮插件，用来只重新载入游戏本体。
+
+这个按钮调用 poi 现有的 `gameReload()` 逻辑。如果该逻辑无法加载，会回退到与 poi 相同的
+webview JavaScript 重新载入方式。
+
+悬浮窗默认显示在窗口右侧。拖动顶部标题栏可以移动，拖动右下角可以调整大小，位置和尺寸会
+保存到 `localStorage`。
+
+点击悬浮窗右上角关闭按钮可以隐藏它。隐藏后，在 poi 的插件主页打开本插件，点击“显示悬浮窗”
+即可重新打开。
+
+仓库地址：https://github.com/DuskWhite/poi-plugin-reload-game-button
+
+## English
+
+A touch-friendly floating panel plugin for poi that reloads only the game frame.
+
+The button calls poi's existing `gameReload()` helper. If that helper cannot be loaded, it falls back
+to the same webview JavaScript used by poi.
+
+The panel starts on the right side of the window. Drag the top handle to move it, and drag the
+bottom-right corner to resize it. Position and size are saved in `localStorage`.
+
+Use the close button in the panel header to hide it. Open the plugin page from poi's plugin list and
+click "Show floating panel" to bring it back.
+
+Repository: https://github.com/DuskWhite/poi-plugin-reload-game-button

package/i18n/en-US.json

@@ -0,0 +1,10 @@
+{
+  "title": "Reload Game Button",
+  "description": "A touch-friendly floating button for reloading only the game frame.",
+  "showPanel": "Show floating panel",
+  "reloadGame": "Reload game",
+  "repository": "Repository",
+  "panelVisible": "Floating panel is visible.",
+  "panelHidden": "Floating panel is hidden.",
+  "close": "Close"
+}

package/i18n/zh-CN.json

@@ -0,0 +1,10 @@
+{
+  "title": "重新载入游戏",
+  "description": "适合触摸屏使用的悬浮按钮，只重新载入游戏本体。",
+  "showPanel": "显示悬浮窗",
+  "reloadGame": "重新载入游戏",
+  "repository": "仓库地址",
+  "panelVisible": "悬浮窗已显示。",
+  "panelHidden": "悬浮窗已隐藏。",
+  "close": "关闭"
+}

package/index.js

@@ -0,0 +1,454 @@
+'use strict'
+
+const PLUGIN_ID = 'poi-plugin-reload-game-button'
+const PANEL_ID = 'poi-reload-game-panel'
+const STYLE_ID = 'poi-reload-game-button-style'
+const STORAGE_KEY = 'poi-plugin-reload-game-button:panel-state'
+const CLOSED_STORAGE_KEY = 'poi-plugin-reload-game-button:panel-closed'
+const SHOW_PANEL_EVENT = 'poi-plugin-reload-game-button:show-panel'
+const RELOAD_GAME_EVENT = 'poi-plugin-reload-game-button:reload-game'
+const RELOAD_TITLE = '重新载入游戏'
+
+const DEFAULT_STATE = {
+  width: 168,
+  height: 78,
+  top: null,
+  left: null,
+}
+
+let observer = null
+let retryTimer = null
+
+function reloadGameFallback() {
+  const { getStore } = require('views/create-store')
+  getStore('layout.webview.ref')?.executeJavaScript(`
+  var doc;
+  if (document.getElementById('game_frame')) {
+    doc = document.getElementById('game_frame').contentDocument;
+  } else {
+    doc = document;
+  }
+
+  var game = doc.getElementById('htmlWrap');
+  if (game) {
+    game.contentWindow.location.reload()
+  }
+  `)
+}
+
+function reloadGame() {
+  try {
+    const { gameReload } = require('views/services/utils')
+    gameReload()
+  } catch (error) {
+    console.warn(`${PLUGIN_ID}: falling back to inline reload`, error)
+    reloadGameFallback()
+  }
+}
+
+function readPanelState() {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) {
+      return { ...DEFAULT_STATE }
+    }
+
+    const parsed = JSON.parse(raw)
+    return {
+      width: Number.isFinite(parsed.width) ? parsed.width : DEFAULT_STATE.width,
+      height: Number.isFinite(parsed.height) ? parsed.height : DEFAULT_STATE.height,
+      top: Number.isFinite(parsed.top) ? parsed.top : DEFAULT_STATE.top,
+      left: Number.isFinite(parsed.left) ? parsed.left : DEFAULT_STATE.left,
+    }
+  } catch (error) {
+    console.warn(`${PLUGIN_ID}: failed to read panel state`, error)
+    return { ...DEFAULT_STATE }
+  }
+}
+
+function writePanelState(panel) {
+  const rect = panel.getBoundingClientRect()
+  const state = {
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+    top: Math.round(rect.top),
+    left: Math.round(rect.left),
+  }
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+}
+
+function isPanelClosed() {
+  return window.localStorage.getItem(CLOSED_STORAGE_KEY) === 'true'
+}
+
+function setPanelClosed(closed) {
+  window.localStorage.setItem(CLOSED_STORAGE_KEY, closed ? 'true' : 'false')
+}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function clampPanel(panel) {
+  const rect = panel.getBoundingClientRect()
+  const left = clamp(rect.left, 0, Math.max(0, window.innerWidth - rect.width))
+  const top = clamp(rect.top, 0, Math.max(0, window.innerHeight - rect.height))
+  panel.style.left = `${Math.round(left)}px`
+  panel.style.top = `${Math.round(top)}px`
+  panel.style.right = 'auto'
+}
+
+function applyPanelState(panel) {
+  const state = readPanelState()
+  const width = clamp(state.width, 120, Math.max(120, window.innerWidth))
+  const height = clamp(state.height, 58, Math.max(58, window.innerHeight))
+
+  panel.style.width = `${Math.round(width)}px`
+  panel.style.height = `${Math.round(height)}px`
+
+  if (state.left == null || state.top == null) {
+    panel.style.right = '14px'
+    panel.style.left = 'auto'
+    panel.style.top = `${Math.round((window.innerHeight - height) / 2)}px`
+  } else {
+    panel.style.left = `${Math.round(state.left)}px`
+    panel.style.top = `${Math.round(state.top)}px`
+    panel.style.right = 'auto'
+  }
+
+  window.requestAnimationFrame(() => clampPanel(panel))
+}
+
+function ensureStyle() {
+  if (document.getElementById(STYLE_ID)) {
+    return
+  }
+
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = `
+    #${PANEL_ID} {
+      backdrop-filter: blur(12px);
+      background: rgba(35, 40, 48, 0.88);
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+      box-sizing: border-box;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      min-height: 58px;
+      min-width: 120px;
+      overflow: hidden;
+      position: fixed;
+      z-index: 2147483000;
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-handle {
+      align-items: center;
+      background: rgba(255, 255, 255, 0.1);
+      cursor: move;
+      display: flex;
+      flex: 0 0 22px;
+      font-size: 11px;
+      font-weight: 600;
+      justify-content: center;
+      letter-spacing: 0;
+      line-height: 22px;
+      touch-action: none;
+      user-select: none;
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-title {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-close {
+      align-items: center;
+      background: transparent;
+      border: 0;
+      color: rgba(255, 255, 255, 0.86);
+      cursor: pointer;
+      display: flex;
+      flex: 0 0 26px;
+      font-size: 17px;
+      height: 22px;
+      justify-content: center;
+      line-height: 1;
+      padding: 0;
+      touch-action: manipulation;
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-close:active {
+      background: rgba(255, 255, 255, 0.12);
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-button {
+      align-items: center;
+      background: #d9822b;
+      border: 0;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      flex: 1 1 auto;
+      font-size: 18px;
+      font-weight: 700;
+      justify-content: center;
+      letter-spacing: 0;
+      line-height: 1.2;
+      min-height: 36px;
+      padding: 8px 12px;
+      text-align: center;
+      touch-action: manipulation;
+      user-select: none;
+      width: 100%;
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-button:active {
+      background: #bf7326;
+    }
+
+    #${PANEL_ID} .poi-reload-game-panel-resizer {
+      border-bottom: 12px solid rgba(255, 255, 255, 0.72);
+      border-left: 12px solid transparent;
+      bottom: 4px;
+      cursor: nwse-resize;
+      height: 0;
+      position: absolute;
+      right: 4px;
+      touch-action: none;
+      width: 0;
+    }
+  `
+  document.head.appendChild(style)
+}
+
+function createPanel() {
+  const panel = document.createElement('div')
+  panel.id = PANEL_ID
+
+  const handle = document.createElement('div')
+  handle.className = 'poi-reload-game-panel-handle'
+
+  const title = document.createElement('div')
+  title.className = 'poi-reload-game-panel-title'
+  title.textContent = 'Reload'
+
+  const close = document.createElement('button')
+  close.type = 'button'
+  close.className = 'poi-reload-game-panel-close'
+  close.title = '关闭'
+  close.setAttribute('aria-label', '关闭')
+  close.textContent = '×'
+  close.addEventListener('pointerdown', (event) => {
+    event.stopPropagation()
+  })
+  close.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    closePanel(panel)
+  })
+
+  handle.appendChild(title)
+  handle.appendChild(close)
+
+  const button = document.createElement('button')
+  button.type = 'button'
+  button.className = 'poi-reload-game-panel-button'
+  button.title = RELOAD_TITLE
+  button.setAttribute('aria-label', RELOAD_TITLE)
+  button.textContent = RELOAD_TITLE
+  button.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    reloadGame()
+  })
+
+  const resizer = document.createElement('div')
+  resizer.className = 'poi-reload-game-panel-resizer'
+
+  panel.appendChild(handle)
+  panel.appendChild(button)
+  panel.appendChild(resizer)
+
+  makePanelDraggable(panel, handle)
+  makePanelResizable(panel, resizer)
+  applyPanelState(panel)
+
+  return panel
+}
+
+function closePanel(panel) {
+  writePanelState(panel)
+  setPanelClosed(true)
+  panel.remove()
+}
+
+function makePanelDraggable(panel, handle) {
+  handle.addEventListener('pointerdown', (event) => {
+    event.preventDefault()
+    panel.setPointerCapture?.(event.pointerId)
+
+    const rect = panel.getBoundingClientRect()
+    const startX = event.clientX
+    const startY = event.clientY
+    const startLeft = rect.left
+    const startTop = rect.top
+
+    const onMove = (moveEvent) => {
+      const left = startLeft + moveEvent.clientX - startX
+      const top = startTop + moveEvent.clientY - startY
+      panel.style.left = `${Math.round(left)}px`
+      panel.style.top = `${Math.round(top)}px`
+      panel.style.right = 'auto'
+      clampPanel(panel)
+    }
+
+    const onEnd = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onEnd)
+      window.removeEventListener('pointercancel', onEnd)
+      writePanelState(panel)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onEnd)
+    window.addEventListener('pointercancel', onEnd)
+  })
+}
+
+function makePanelResizable(panel, resizer) {
+  resizer.addEventListener('pointerdown', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    panel.setPointerCapture?.(event.pointerId)
+
+    const rect = panel.getBoundingClientRect()
+    const startX = event.clientX
+    const startY = event.clientY
+    const startWidth = rect.width
+    const startHeight = rect.height
+
+    const onMove = (moveEvent) => {
+      const width = clamp(startWidth + moveEvent.clientX - startX, 120, window.innerWidth)
+      const height = clamp(startHeight + moveEvent.clientY - startY, 58, window.innerHeight)
+      panel.style.width = `${Math.round(width)}px`
+      panel.style.height = `${Math.round(height)}px`
+      clampPanel(panel)
+    }
+
+    const onEnd = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onEnd)
+      window.removeEventListener('pointercancel', onEnd)
+      writePanelState(panel)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onEnd)
+    window.addEventListener('pointercancel', onEnd)
+  })
+}
+
+function injectPanel() {
+  if (!document.body) {
+    return false
+  }
+
+  if (isPanelClosed()) {
+    return false
+  }
+
+  if (document.getElementById(PANEL_ID)) {
+    return true
+  }
+
+  ensureStyle()
+  document.body.appendChild(createPanel())
+  return true
+}
+
+function showPanel() {
+  setPanelClosed(false)
+  injectPanel()
+  const panel = document.getElementById(PANEL_ID)
+  if (panel) {
+    clampPanel(panel)
+    writePanelState(panel)
+  }
+}
+
+function startObserver() {
+  if (observer || !document.body) {
+    return
+  }
+
+  observer = new MutationObserver(() => {
+    injectPanel()
+  })
+  observer.observe(document.body, {
+    childList: true,
+  })
+}
+
+function startRetryTimer() {
+  if (retryTimer) {
+    return
+  }
+
+  retryTimer = window.setInterval(() => {
+    if (injectPanel() && retryTimer) {
+      window.clearInterval(retryTimer)
+      retryTimer = null
+    }
+    startObserver()
+  }, 1000)
+}
+
+function pluginDidLoad() {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', pluginDidLoad, { once: true })
+    return
+  }
+
+  injectPanel()
+  startObserver()
+  startRetryTimer()
+  window.addEventListener('resize', handleWindowResize)
+  window.addEventListener(SHOW_PANEL_EVENT, showPanel)
+  window.addEventListener(RELOAD_GAME_EVENT, reloadGame)
+}
+
+function handleWindowResize() {
+  const panel = document.getElementById(PANEL_ID)
+  if (panel) {
+    clampPanel(panel)
+    writePanelState(panel)
+  }
+}
+
+function pluginWillUnload() {
+  document.removeEventListener('DOMContentLoaded', pluginDidLoad)
+  window.removeEventListener('resize', handleWindowResize)
+  window.removeEventListener(SHOW_PANEL_EVENT, showPanel)
+  window.removeEventListener(RELOAD_GAME_EVENT, reloadGame)
+  document.getElementById(PANEL_ID)?.remove()
+  document.getElementById(STYLE_ID)?.remove()
+
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+
+  if (retryTimer) {
+    window.clearInterval(retryTimer)
+    retryTimer = null
+  }
+}
+
+module.exports = {
+  pluginDidLoad,
+  pluginWillUnload,
+  reactClass: (props) => require('./views').reactClass(props),
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "poi-plugin-reload-game-button",
+  "version": "0.3.0",
+  "description": "Adds a touch-friendly floating reload-game panel to poi.",
+  "main": "index.js",
+  "files": [
+    "README.md",
+    "index.js",
+    "views",
+    "i18n"
+  ],
+  "scripts": {
+    "test": "node test.js"
+  },
+  "keywords": [
+    "kancolle",
+    "poi",
+    "plugin",
+    "poi-plugin",
+    "reload",
+    "touch"
+  ],
+  "author": "DuskWhite",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DuskWhite/poi-plugin-reload-game-button.git"
+  },
+  "homepage": "https://github.com/DuskWhite/poi-plugin-reload-game-button#readme",
+  "bugs": {
+    "url": "https://github.com/DuskWhite/poi-plugin-reload-game-button/issues"
+  },
+  "license": "MIT",
+  "poiPlugin": {
+    "title": "重新载入游戏",
+    "description": "适合触摸屏使用的悬浮按钮，只重新载入游戏本体。",
+    "icon": "fa/refresh",
+    "priority": 10000,
+    "i18nDir": "i18n"
+  }
+}

package/views/index.js

@@ -0,0 +1,107 @@
+'use strict'
+
+const React = require('react')
+const { Button, Callout, Intent } = require('@blueprintjs/core')
+const { useTranslation } = require('react-i18next')
+
+const SHOW_PANEL_EVENT = 'poi-plugin-reload-game-button:show-panel'
+const RELOAD_GAME_EVENT = 'poi-plugin-reload-game-button:reload-game'
+const PANEL_ID = 'poi-reload-game-panel'
+const REPOSITORY_URL = 'https://github.com/DuskWhite/poi-plugin-reload-game-button'
+
+function tt(t, key, fallback) {
+  const translated = t(key)
+  return translated === key ? fallback : translated
+}
+
+function reactClass() {
+  const { t } = useTranslation('poi-plugin-reload-game-button')
+  const [visible, setVisible] = React.useState(() => Boolean(document.getElementById(PANEL_ID)))
+
+  React.useEffect(() => {
+    const updateVisible = () => setVisible(Boolean(document.getElementById(PANEL_ID)))
+    const timer = window.setInterval(updateVisible, 1000)
+    window.addEventListener(SHOW_PANEL_EVENT, updateVisible)
+    return () => {
+      window.clearInterval(timer)
+      window.removeEventListener(SHOW_PANEL_EVENT, updateVisible)
+    }
+  }, [])
+
+  const showPanel = () => {
+    window.dispatchEvent(new Event(SHOW_PANEL_EVENT))
+    window.setTimeout(() => setVisible(Boolean(document.getElementById(PANEL_ID))), 0)
+  }
+
+  const reloadGame = () => {
+    window.dispatchEvent(new Event(RELOAD_GAME_EVENT))
+  }
+
+  return React.createElement(
+    'div',
+    { style: { padding: 12 } },
+    React.createElement(
+      Callout,
+      {
+        intent: Intent.PRIMARY,
+        title: tt(t, 'title', '重新载入游戏'),
+      },
+      tt(t, 'description', '适合触摸屏使用的悬浮按钮，只重新载入游戏本体。'),
+    ),
+    React.createElement(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          gap: 8,
+          marginTop: 12,
+        },
+      },
+      React.createElement(
+        Button,
+        {
+          icon: 'widget',
+          intent: Intent.PRIMARY,
+          large: true,
+          onClick: showPanel,
+        },
+        tt(t, 'showPanel', '显示悬浮窗'),
+      ),
+      React.createElement(
+        Button,
+        {
+          icon: 'refresh',
+          intent: Intent.WARNING,
+          large: true,
+          onClick: reloadGame,
+        },
+        tt(t, 'reloadGame', '重新载入游戏'),
+      ),
+    ),
+    React.createElement(
+      'div',
+      { style: { marginTop: 10, opacity: 0.78 } },
+      visible
+        ? tt(t, 'panelVisible', '悬浮窗已显示。')
+        : tt(t, 'panelHidden', '悬浮窗已隐藏。'),
+    ),
+    React.createElement(
+      'div',
+      { style: { marginTop: 10 } },
+      `${tt(t, 'repository', '仓库地址')}: `,
+      React.createElement(
+        'a',
+        {
+          href: REPOSITORY_URL,
+          onClick: (event) => {
+            event.preventDefault()
+            require('electron').shell.openExternal(REPOSITORY_URL)
+          },
+        },
+        REPOSITORY_URL,
+      ),
+    ),
+  )
+}
+
+exports.reactClass = reactClass