feat(zomm): implemented

app/Schema/Config/Config.d.ts

@@ -31,4 +31,5 @@ export interface RawConfig {
   meleeItemTemplatesCombatTechniqueFilter?: string
   rangedItemTemplatesCombatTechniqueFilter?: string
   enableAnimations?: boolean
+  zoomLevel?: number
 }

app/Schema/Config/Config.schema.json

@@ -102,6 +102,9 @@
         },
         "enableAnimations": {
           "type": "boolean"
+        },
+        "zoomLevel": {
+          "type": "number"
         }
       },
       "required": [

package.json

@@ -11,16 +11,18 @@
   "license": "MPL-2.0",
   "main": "app/main.js",
   "dependencies": {
-    "@glennsl/bs-json": "5.0.2",
     "adm-zip": "^0.5.1",
+    "@glennsl/bs-json": "^5.0.4",
     "ajv": "6.12.6",
     "bs-platform": "8.3.2",
     "electron-devtools-installer": "3.1.1",
+    "electron": "^11.4.10",
     "electron-log": "4.2.4",
     "electron-updater": "4.3.1",
     "electron-window-state": "5.0.3",
     "moment": "2.25.3",
     "mousetrap": "1.6.5",
+    "rc-slider": "^9.7.2",
     "react": "16.13.1",
     "react-custom-scrollbars": "4.2.1",
     "react-dom": "16.13.1",
@@ -57,10 +59,12 @@
     "@types/semver": "7.3.4",
     "@typescript-eslint/eslint-plugin": "4.7.0",
     "@typescript-eslint/parser": "4.7.0",
+    "css-loader": "^5.2.6",
     "custom-env": "2.0.1",
     "dotenv": "8.2.0",
-    "electron": "^13.0.1",
+    "electron": "^13.1.6",
     "electron-builder": "22.9.1",
+    "electron-devtools-installer": "git+https://github.com/MarshallOfSound/electron-devtools-installer.git",
     "electron-notarize": "0.3.0",
     "eslint": "7.13.0",
     "eslint-plugin-react": "7.21.5",
@@ -75,6 +79,7 @@
     "standard-version": "^9.3.1",
     "ts-jest": "26.4.4",
     "ts-loader": "8.0.11",
+    "style-loader": "^3.0.0",
     "typescript": "3.8.3",
     "webpack": "5.4.0",
     "webpack-cli": "4.2.0"

src/App/Actions/ConfigActions.ts

@@ -39,3 +39,52 @@ export interface SwitchEnableAnimationsAction {
 export const switchEnableAnimations = (): SwitchEnableAnimationsAction => ({
   type: ActionTypes.SWITCH_ENABLE_ANIMATIONS,
 })
+
+export interface GetZoomLevelAction {
+  type: ActionTypes.GET_ZOOM_LEVEL
+  payload: {
+    zoomLevel: number
+  }
+}
+
+export const getZoomLevel = (zoomLevel: number): GetZoomLevelAction => ({
+  type: ActionTypes.GET_ZOOM_LEVEL,
+  payload: {
+    zoomLevel,
+  },
+})
+
+export interface SetZoomLevelAction {
+  type: ActionTypes.SET_ZOOM_LEVEL
+  payload: {
+    zoomLevel: number
+  }
+}
+
+export const setZoomLevel = (zoomLevel: number): SetZoomLevelAction => ({
+  type: ActionTypes.SET_ZOOM_LEVEL,
+  payload: {
+    zoomLevel,
+  },
+})
+
+export interface MoveZoomLevelAction {
+  type: ActionTypes.MOVE_ZOOM_LEVEL
+  payload: {
+    zoom: "in" | "out"
+  }
+}
+
+export const zoomInAction = (): MoveZoomLevelAction => ({
+  type: ActionTypes.MOVE_ZOOM_LEVEL,
+  payload: {
+    zoom: "in",
+  },
+})
+
+export const zoomOutAction = (): MoveZoomLevelAction => ({
+  type: ActionTypes.MOVE_ZOOM_LEVEL,
+  payload: {
+    zoom: "out",
+  },
+})

src/App/Actions/RaceActions.ts

@@ -66,4 +66,4 @@ export const setFilterText = (filterText: string): SetRacesFilterTextAction => (
   payload: {
     filterText,
   },
-})
+})

src/App/Constants/ActionTypes.ts

@@ -975,6 +975,12 @@ export type SET_ITEM_TEMPLATES_FILTER_TEXT = "SET_ITEM_TEMPLATES_FILTER_TEXT"
 export const SET_ZONE_ARMOR_FILTER_TEXT = "SET_ZONE_ARMOR_FILTER_TEXT"
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type SET_ZONE_ARMOR_FILTER_TEXT = "SET_ZONE_ARMOR_FILTER_TEXT"
+export const GET_ZOOM_LEVEL = "GET_ZOOM_LEVEL"
+export type GET_ZOOM_LEVEL = "GET_ZOOM_LEVEL"
+export const SET_ZOOM_LEVEL = "SET_ZOOM_LEVEL"
+export type SET_ZOOM_LEVEL = "SET_ZOOM_LEVEL"
+export const MOVE_ZOOM_LEVEL = "MOVE_ZOOM_LEVEL"
+export type MOVE_ZOOM_LEVEL = "MOVE_ZOOM_LEVEL"
 
 export const LOAD_RAW_INGAME_DATA = "LOAD_RAW_INGAME_DATA"
 // eslint-disable-next-line @typescript-eslint/no-redeclare

src/App/Containers/SettingsContainer.ts

@@ -9,7 +9,7 @@ import { AppStateRecord } from "../Models/AppState"
 import { Locale, Theme } from "../Models/Config"
 import { getUserSelectableSupportedLanguages } from "../Selectors/localeSelectors"
 import { getFallbackLocaleId, getFallbackLocaleType, getLocaleId, getLocaleType } from "../Selectors/stateSelectors"
-import { areAnimationsEnabled, getIsEditingHeroAfterCreationPhaseEnabled, getTheme } from "../Selectors/uisettingsSelectors"
+import { areAnimationsEnabled, getIsEditingHeroAfterCreationPhaseEnabled, getTheme, getZoomLevel } from "../Selectors/uisettingsSelectors"
 import { isUpdaterEnabled } from "../Utilities/CheckForUpdatesRenderer"
 import { Settings, SettingsDispatchProps, SettingsOwnProps, SettingsStateProps } from "../Views/Settings/Settings"
 
@@ -23,6 +23,7 @@ const mapStateToProps = (state: AppStateRecord): SettingsStateProps => ({
   theme: getTheme (state),
   languages: getUserSelectableSupportedLanguages (state),
   isCheckForUpdatesDisabled: !isUpdaterEnabled (),
+  zoomLevel: getZoomLevel (state),
 })
 
 const mapDispatchToProps = (dispatch: ReduxDispatch): SettingsDispatchProps => ({
@@ -46,6 +47,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch): SettingsDispatchProps => (
   switchEnableAnimations () {
     dispatch (ConfigActions.switchEnableAnimations ())
   },
+  setZoomLevel (zoomLevel) {
+    dispatch (ConfigActions.setZoomLevel(zoomLevel))
+  }
 })
 
 const connectSettings =

src/App/Models/Config.ts

@@ -176,6 +176,7 @@ export interface Config {
   meleeItemTemplatesCombatTechniqueFilter: Maybe<MeleeCombatTechniqueId>
   rangedItemTemplatesCombatTechniqueFilter: Maybe<RangedCombatTechniqueId>
   enableAnimations: Maybe<boolean>
+  zoomLevel: number
 }
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -211,4 +212,5 @@ export const Config =
                 meleeItemTemplatesCombatTechniqueFilter: Nothing,
                 rangedItemTemplatesCombatTechniqueFilter: Nothing,
                 enableAnimations: Just (false),
+                zoomLevel: 100,
               })

src/App/Models/UISettingsState.ts

@@ -34,6 +34,7 @@ export interface UISettingsState {
   meleeItemTemplatesCombatTechniqueFilter: Maybe<MeleeCombatTechniqueId>
   rangedItemTemplatesCombatTechniqueFilter: Maybe<RangedCombatTechniqueId>
   enableAnimations: boolean
+  zoomLevel: number
 }
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -67,6 +68,7 @@ export const UISettingsState =
                 meleeItemTemplatesCombatTechniqueFilter: Nothing,
                 rangedItemTemplatesCombatTechniqueFilter: Nothing,
                 enableAnimations: true,
+                zoomLevel: 100,
               })
 
 export const UISettingsStateL = makeLenses (UISettingsState)

src/App/Models/Wiki/L10n.ts

@@ -153,6 +153,7 @@ export const L10n =
                 "settings.nonewversionavailable.title": "",
                 "settings.nonewversionavailable.message": "",
                 "settings.downloadingupdate.title": "",
+                "settings.zoomlevel.title": "",
 
                 "heroes.filters.origin.allheroes": "",
                 "heroes.filters.origin.ownheroes": "",

src/App/Reducers/uiSettingsReducer.ts

@@ -1,10 +1,11 @@
+import { webFrame } from "electron"
 import { not } from "../../Data/Bool"
 import { cnst, ident } from "../../Data/Function"
-import { over, set } from "../../Data/Lens"
+import { over, set, view } from "../../Data/Lens"
 import { fromJust, fromMaybe, isJust } from "../../Data/Maybe"
 import { Record } from "../../Data/Record"
 import { SetCombatTechniquesSortOrderAction } from "../Actions/CombatTechniquesActions"
-import { SetThemeAction, SwitchEnableActiveItemHintsAction, SwitchEnableAnimationsAction, SwitchEnableEditingHeroAfterCreationPhaseAction } from "../Actions/ConfigActions"
+import { GetZoomLevelAction, MoveZoomLevelAction, SetThemeAction, SetZoomLevelAction, SwitchEnableActiveItemHintsAction, SwitchEnableAnimationsAction, SwitchEnableEditingHeroAfterCreationPhaseAction } from "../Actions/ConfigActions"
 import { SetCulturesSortOrderAction, SetCulturesVisibilityFilterAction } from "../Actions/CultureActions"
 import { SwitchDisAdvRatingVisibilityAction } from "../Actions/DisAdvActions"
 import { SetItemsSortOrderAction, SetMeleeItemTemplatesCombatTechniqueFilterAction, SetRangedItemTemplatesCombatTechniqueFilterAction } from "../Actions/EquipmentActions"
@@ -20,6 +21,7 @@ import { SetSpellsSortOrderAction } from "../Actions/SpellsActions"
 import * as ActionTypes from "../Constants/ActionTypes"
 import { Config, Theme } from "../Models/Config"
 import { UISettingsState, UISettingsStateL } from "../Models/UISettingsState"
+import { zoomLevels } from "../Views/Settings/Settings"
 
 type Action = ReceiveInitialDataAction
             | SetCombatTechniquesSortOrderAction
@@ -47,6 +49,9 @@ type Action = ReceiveInitialDataAction
             | SetMeleeItemTemplatesCombatTechniqueFilterAction
             | SetRangedItemTemplatesCombatTechniqueFilterAction
             | SwitchEnableAnimationsAction
+            | GetZoomLevelAction
+            | SetZoomLevelAction
+            | MoveZoomLevelAction
 
 const CA = Config.A
 
@@ -130,6 +135,7 @@ export const uiSettingsReducer =
             rangedItemTemplatesCombatTechniqueFilter:
               CA.rangedItemTemplatesCombatTechniqueFilter (config),
             enableAnimations: fromMaybe (true) (CA.enableAnimations (config)),
+            zoomLevel: CA.zoomLevel (config)
           }))
         }
 
@@ -193,7 +199,45 @@ export const uiSettingsReducer =
       case ActionTypes.SWITCH_ENABLE_ANIMATIONS:
         return over (UISettingsStateL.enableAnimations) (not)
 
+      case ActionTypes.GET_ZOOM_LEVEL:
+        let factor = webFrame.getZoomFactor();
+        return set (UISettingsStateL.zoomLevel) (factor * 100)
+
+      case ActionTypes.SET_ZOOM_LEVEL:
+        webFrame.setZoomFactor(action.payload.zoomLevel / 100);
+        return set (UISettingsStateL.zoomLevel) (action.payload.zoomLevel)
+
+      case ActionTypes.MOVE_ZOOM_LEVEL:
+        return function(state) {
+          let oldIndex = zoomLevels.findIndex(function(e) { e == view (UISettingsStateL.zoomLevel) (state) } )
+          switch (action.payload.zoom) {
+            case "in":
+              switch(oldIndex) {
+                case -1:
+                  return state
+                case zoomLevels.length - 1:
+                  return state
+                default:
+                  let newLevel = zoomLevels[oldIndex + 1]
+                  webFrame.setZoomFactor(newLevel / 100);
+                  return set (UISettingsStateL.zoomLevel) (newLevel) (state)
+              }
+
+            case "out":
+              switch(oldIndex) {
+                case -1:
+                  return state
+                case 0:
+                  return state
+                default:
+                  let newLevel = zoomLevels[oldIndex - 1]
+                  webFrame.setZoomFactor(newLevel / 100);
+                  return set (UISettingsStateL.zoomLevel) (newLevel) (state)
+              }
+          } 
+        }
+
       default:
         return ident
     }
-  }
+  }

src/App/Selectors/uisettingsSelectors.ts

@@ -90,3 +90,6 @@ export const getRangedItemTemplateCombatTechniqueFilter =
 
 export const areAnimationsEnabled =
   pipe (ASA.ui, UISA.settings, UISSA.enableAnimations)
+
+export const getZoomLevel =
+  pipe (ASA.ui, UISA.settings, UISSA.zoomLevel)

src/App/Utilities/Raw/JSON/Config.ts

@@ -182,6 +182,7 @@ export const parseConfig = async () => {
                                  ),
                                enableAnimations:
                                  Maybe (validated_data.enableAnimations),
+                               zoomLevel: validated_data.zoomLevel ?? 100,
                              }))
                            }
 

src/App/Views/Settings/Settings.scss

@@ -0,0 +1,54 @@
+// body to make this more specific than the library
+body {
+  .rc-slider-mark-text {
+    color: var(--text-color);
+  }
+
+  .rc-slider-mark-text-active {
+    color: var(--selection-color);
+  }
+
+  .rc-slider-rail {
+    background-color: var(--accent-color);
+    height: 2px;
+  }
+
+  .rc-slider-handle {
+    background-color: var(--background-color);
+    border-color: var(--accent-color);
+    width: 0px;
+    height: 0px;
+    border: none;
+  }
+  .rc-slider-handle::before {
+    display: block;
+    background: var(--background-color);
+    border: 1px solid var(--accent-color);
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: -5px;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg); 
+  }
+  .rc-slider-handle:hover::before {
+    border-color: var(--link);
+  }
+
+  .rc-slider-dot {
+    background-color: var(--text-color);
+    border-color: var(--accent-color);
+    border-radius: 0;
+    width: 4px;
+    bottom: 1px;
+    margin-left: -2px;
+    width: 4px;
+    height: 4px;
+    transform: rotate(45deg);
+  }
+
+  // .rc-slider-handle:hover {
+  //   border-color: var(--link);
+  // }
+}