diff --git a/lib/default-config.ts b/lib/default-config.ts
index eb1f37790..8946702c6 100644
--- a/lib/default-config.ts
+++ b/lib/default-config.ts
@@ -306,6 +306,175 @@ const defaultConfig = {
],
},
},
+ grid: {
+ layout: {
+ sm: [
+ {
+ w: 10,
+ h: 3,
+ x: 0,
+ y: 0,
+ minW: 3,
+ minH: 2,
+ maxW: 10,
+ maxH: 50,
+ i: 'teitoku-panel',
+ },
+ {
+ w: 5,
+ h: 8,
+ x: 0,
+ y: 3,
+ minW: 1,
+ minH: 3,
+ maxW: 10,
+ maxH: 50,
+ i: 'resource-panel',
+ },
+ {
+ w: 5,
+ h: 36,
+ x: 0,
+ y: 11,
+ minW: 3,
+ minH: 9,
+ maxW: 10,
+ maxH: 50,
+ i: 'miniship',
+ },
+ {
+ w: 5,
+ h: 6,
+ x: 5,
+ y: 3,
+ minW: 2,
+ minH: 6,
+ maxW: 10,
+ maxH: 50,
+ i: 'repair-panel',
+ },
+ {
+ w: 5,
+ h: 6,
+ x: 5,
+ y: 9,
+ minW: 2,
+ minH: 6,
+ maxW: 10,
+ maxH: 50,
+ i: 'construction-panel',
+ },
+ {
+ w: 5,
+ h: 7,
+ x: 5,
+ y: 15,
+ minW: 3,
+ minH: 5,
+ maxW: 10,
+ maxH: 50,
+ i: 'expedition-panel',
+ },
+ {
+ w: 5,
+ h: 13,
+ x: 5,
+ y: 23,
+ minW: 3,
+ minH: 5,
+ maxW: 10,
+ maxH: 50,
+ i: 'task-panel',
+ },
+ ],
+ lg: [
+ {
+ w: 27,
+ h: 58,
+ x: 0,
+ y: 0,
+ i: 'kan-game-wrapper',
+ },
+ {
+ w: 10,
+ h: 3,
+ x: 0,
+ y: 58,
+ minW: 3,
+ minH: 2,
+ maxW: 20,
+ maxH: 50,
+ i: 'teitoku-panel',
+ },
+ {
+ w: 5,
+ h: 9,
+ x: 0,
+ y: 61,
+ minW: 1,
+ minH: 3,
+ maxW: 20,
+ maxH: 50,
+ i: 'resource-panel',
+ },
+ {
+ w: 12,
+ h: 60,
+ x: 27,
+ y: 0,
+ minW: 3,
+ minH: 9,
+ maxW: 40,
+ maxH: 120,
+ i: 'poi-main',
+ },
+ {
+ w: 5,
+ h: 12,
+ x: 0,
+ y: 70,
+ minW: 2,
+ minH: 6,
+ maxW: 10,
+ maxH: 50,
+ i: 'repair-panel',
+ },
+ {
+ w: 5,
+ h: 12,
+ x: 6,
+ y: 70,
+ minW: 2,
+ minH: 6,
+ maxW: 10,
+ maxH: 50,
+ i: 'construction-panel',
+ },
+ {
+ w: 5,
+ h: 9,
+ x: 6,
+ y: 61,
+ minW: 3,
+ minH: 5,
+ maxW: 20,
+ maxH: 50,
+ i: 'expedition-panel',
+ },
+ {
+ w: 8,
+ h: 24,
+ x: 11,
+ y: 58,
+ minW: 3,
+ minH: 5,
+ maxW: 20,
+ maxH: 50,
+ i: 'task-panel',
+ },
+ ],
+ },
+ },
},
proxy: {
socks5: {
diff --git a/views/app.es b/views/app.es
index 181209970..b44be6cb0 100644
--- a/views/app.es
+++ b/views/app.es
@@ -5,10 +5,11 @@ import ReactDOM from 'react-dom'
import { connect, Provider } from 'react-redux'
import { webFrame } from 'electron'
import * as remote from '@electron/remote'
-import { get } from 'lodash'
+import { get, pick, isEqual } from 'lodash'
import { I18nextProvider } from 'react-i18next'
import { ThemeProvider } from 'styled-components'
import { ResizeSensor, Popover } from '@blueprintjs/core'
+import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
import '../assets/css/app.css'
import '../assets/css/global.css'
@@ -25,6 +26,13 @@ import i18next from './env-parts/i18next'
import { darkTheme, lightTheme } from './theme'
import { POPOVER_MODIFIERS } from './utils/tools'
+import { ExpeditionPanel } from './components/main/parts/expedition-panel'
+import { TaskPanel } from './components/main/parts/task-panel'
+import { ResourcePanel } from './components/main/parts/resource-panel'
+import { AdmiralPanel } from './components/main/parts/admiral-panel'
+import { RepairPanel } from './components/main/parts/repair-panel'
+import { ConstructionPanel } from './components/main/parts/construction-panel'
+
const config = remote.require('./lib/config')
// Disable OSX zoom
@@ -41,10 +49,28 @@ require('./services/alert')
Popover.defaultProps.modifiers = POPOVER_MODIFIERS
Popover.defaultProps.boundary = 'viewport'
+// Override maxsize
+const defaultGridLayout = config.getDefault('poi.grid.layout')
+
+function isPositionEqual(pos1, pos2) {
+ const configKey = ['x', 'y', 'h', 'w', 'i', 'minW', 'maxW', 'minH', 'maxH']
+
+ return isEqual(pick(pos1, configKey), pick(pos2, configKey))
+}
+
+function isLayoutsEqual(layout1, layout2) {
+ return Object.keys(layout1)
+ .map((i) => isPositionEqual(layout1[i], layout2[i]))
+ .reduce((a, b) => a && b)
+}
+
@connect((state) => ({
isHorizontal: get(state, 'config.poi.layout.mode', 'horizontal') === 'horizontal',
reversed: get(state, 'config.poi.layout.reverse', false),
isolateGameWindow: get(state, 'config.poi.layout.isolate', false),
+ grid: get(state, 'config.poi.layout.grid', false),
+ gridLayouts: get(state, 'config.poi.grid.layout', defaultGridLayout),
+ editable: get(state, 'config.poi.layout.editable', false),
theme: get(state, 'config.poi.appearance.theme', 'dark'),
}))
class Poi extends Component {
@@ -69,8 +95,84 @@ class Poi extends Component {
})
}
+ onGridLayoutChange = (layout, layouts) => {
+ if (!isLayoutsEqual(layouts, config.get('poi.grid.layout'))) {
+ config.set('poi.grid.layout', layouts)
+ }
+ }
+
render() {
- const { isHorizontal, reversed, theme } = this.props
+ const { isHorizontal, reversed, theme, grid } = this.props
+ if (grid) {
+ return (
+
+ <>
+ {config.get(
+ 'poi.appearance.customtitlebar',
+ process.platform === 'win32' || process.platform === 'linux',
+ ) && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
return (
<>
diff --git a/views/components/settings/display/layout-config.es b/views/components/settings/display/layout-config.es
index b066ff34b..ea71fce32 100644
--- a/views/components/settings/display/layout-config.es
+++ b/views/components/settings/display/layout-config.es
@@ -31,6 +31,11 @@ const SVG = {
),
+ grid: (
+
+ ),
singleTab: (