Merge pull request #760 from Aktanusa/gh-pages

Push dev to be in line with gh-pages

.eslintrc.js

@@ -15,12 +15,24 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 12,
   },
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['src/**/*.{ts,tsx}'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      rules: {
+        'import/extensions': 'off', // To allow importing .ts without errors
+        'import/no-unresolved': 'off', // To allow importing .ts without errors
+      },
+    },
+  ],
   ignorePatterns: ['*CookieMonster*.js', 'dist/*', 'node_modules/*'],
   rules: {
-    'import/no-mutable-exports': 'off',
+    'import/no-mutable-exports': 'off', // We need to this throughout Cookie Monster
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
-    'func-names': 'off',
-    'prefer-destructuring': ['error', { object: true, array: false }],
+    'func-names': 'off', // To allow unnamed arrow functions
+    'prefer-destructuring': ['error', { object: true, array: false }], // Importing arrays and then destructuring them seems to fail
     'max-len': [
       1,
       {

package.json

@@ -44,13 +44,17 @@
     },
     "homepage": "https://github.com/Aktanusa/CookieMonster#readme",
     "devDependencies": {
-        "eslint": "^7.19.0",
+        "@typescript-eslint/eslint-plugin": "^4.21.0",
+        "@typescript-eslint/parser": "^4.21.0",
+        "eslint": "^7.23.0",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-prettier": "^3.3.1",
         "npm-run-all": "^4.1.5",
         "prettier": "2.2.1",
+        "ts-loader": "^8.1.0",
+        "typescript": "^4.2.3",
         "webpack": "^5.24.4",
         "webpack-cli": "^4.5.0"
     },

src/Config/SaveLoadReload/SaveLoadReloadSettings.js

@@ -1,4 +1,4 @@
-import ConfigDefault from '../../Data/SettingsDefault';
+import ConfigDefault from '../../Data/SettingsDefault.ts';
 import ConfigData from '../../Data/SettingsData';
 import { CMOptions } from '../VariablesAndData';
 import save from '../../InitSaveLoad/save';

src/Data/Gamedata.ts

@@ -1,7 +1,7 @@
 /** Data copied directly from the game */
 
 /** Array of the names of all fortune cookies obtainable from the ticker */
-export const Fortunes = [
+export const Fortunes: string[] = [
   'Fortune #001',
   'Fortune #002',
   'Fortune #003',
@@ -28,7 +28,7 @@ export const Fortunes = [
 ];
 
 /** Array of the names of all Halloween cookies */
-export const HalloCookies = [
+export const HalloCookies: string[] = [
   'Skull cookies',
   'Ghost cookies',
   'Bat cookies',
@@ -39,7 +39,7 @@ export const HalloCookies = [
 ];
 
 /** Array of the names of all Christmas cookies */
-export const ChristCookies = [
+export const ChristCookies: string[] = [
   'Christmas tree biscuits',
   'Snowflake biscuits',
   'Snowman biscuits',
@@ -50,7 +50,7 @@ export const ChristCookies = [
 ];
 
 /** Array of the names of all Valentine cookies */
-export const ValCookies = [
+export const ValCookies: string[] = [
   'Pure heart biscuits',
   'Ardent heart biscuits',
   'Sour heart biscuits',
@@ -61,7 +61,7 @@ export const ValCookies = [
 ];
 
 /** Array of the names of all plant drops */
-export const PlantDrops = [
+export const PlantDrops: string[] = [
   'Elderwort biscuits',
   'Bakeberry cookies',
   'Duketater cookies',
@@ -72,7 +72,7 @@ export const PlantDrops = [
 ];
 
 /** All possible effects plants and other items can have with a display-title */
-export const Effects = {
+export const Effects: { [index: string]: string } = {
   buildingCost: 'Building prices',
   click: 'Cookies per click',
   cps: 'Total CPS',

src/Data/Scales.ts

@@ -1,10 +1,10 @@
 /** Data related directly to the scales used by Cookie Monster */
 
 /** Array of abbreviations used in the "Metric" scale */
-export const metric = ['', '', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+export const metric: string[] = ['', '', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
 
 /** Array of abbreviations used in the "Short" scale */
-export const shortScale = [
+export const shortScale: string[] = [
   '',
   '',
   'M',
@@ -34,7 +34,7 @@ export const shortScale = [
 ];
 
 /** Array of abbreviations used in the "Abbreviated Short" scale */
-export const shortScaleAbbreviated = [
+export const shortScaleAbbreviated: string[] = [
   '',
   'K',
   'M',

src/Data/Sectionheaders.ts

@@ -1,7 +1,7 @@
 /** Data related to the display titles of certain sections in menu screens */
 
 /** Display titles of the headers of the Cookie Monster settings section */
-export const ConfigGroups = {
+export const ConfigGroups: { [index: string]: string } = {
   Favourite: 'Favourite Settings',
   Calculation: 'Calculation',
   Notation: 'Notation',
@@ -14,7 +14,7 @@ export const ConfigGroups = {
 };
 
 /** Display titles of the headers of the notification section of the Cookie Monster settings */
-export const ConfigGroupsNotification = {
+export const ConfigGroupsNotification: { [index: string]: string } = {
   NotificationGeneral: 'General Notifications',
   NotificationGC: 'Golden Cookie',
   NotificationFC: 'Fortune Cookie',

src/Data/SettingClasses.js

@@ -1,53 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/** This describes all forms of settings used by Cookie Monster */
-
-/** The basic setting class */
-export class Setting {
-  constructor(type, group) {
-    this.type = type;
-    this.group = group;
-  }
-}
-
-/** The standard toggle setting class */
-export class SettingStandard extends Setting {
-  constructor(type, group, label, desc, toggle, func = null) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    this.toggle = toggle;
-    if (func) {
-      this.func = func;
-    }
-  }
-}
-/** The colour picker setting class */
-export class SettingColours extends Setting {
-  constructor(type, group, desc) {
-    super(type, group);
-    this.desc = desc;
-  }
-}
-
-/** The volume level setting class */
-export class SettingVolume extends Setting {
-  constructor(type, group, label, desc) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    for (let i = 0; i < 101; i++) {
-      this.label[i] = `${i}%`;
-    }
-  }
-}
-
-/** The number input setting class */
-export class SettingInputNumber extends Setting {
-  constructor(type, group, label, desc, min, max) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    this.min = min;
-    this.max = max;
-  }
-}

src/Data/SettingClasses/BaseSetting.ts

@@ -0,0 +1,11 @@
+/** The basic setting class */
+export default class Setting {
+  type: string;
+
+  group: string;
+
+  constructor(type: string, group: string) {
+    this.type = type;
+    this.group = group;
+  }
+}

src/Data/SettingClasses/SettingColours.ts

@@ -0,0 +1,11 @@
+import Setting from './BaseSetting';
+
+/** The colour picker setting class */
+export default class SettingColours extends Setting {
+  desc: string;
+
+  constructor(type: string, group: string, desc: string) {
+    super(type, group);
+    this.desc = desc;
+  }
+}

src/Data/SettingClasses/SettingInputNumber.ts

@@ -0,0 +1,27 @@
+import Setting from './BaseSetting';
+
+/** The number input setting class */
+export default class SettingInputNumber extends Setting {
+  label: string[];
+
+  desc: string;
+
+  min: number;
+
+  max: number;
+
+  constructor(
+    type: string,
+    group: string,
+    label: string[],
+    desc: string,
+    min: number,
+    max: number,
+  ) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    this.min = min;
+    this.max = max;
+  }
+}

src/Data/SettingClasses/SettingStandard.ts

@@ -0,0 +1,29 @@
+import Setting from './BaseSetting';
+
+/** The standard toggle setting class */
+export default class SettingStandard extends Setting {
+  label: string[];
+
+  desc: string;
+
+  toggle: boolean;
+
+  func: () => void;
+
+  constructor(
+    type: string,
+    group: string,
+    label: string[],
+    desc: string,
+    toggle: boolean,
+    func?: () => void,
+  ) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    this.toggle = toggle;
+    if (func !== undefined) {
+      this.func = func;
+    }
+  }
+}

src/Data/SettingClasses/SettingVolume.ts

@@ -0,0 +1,17 @@
+import Setting from './BaseSetting';
+
+/** The volume level setting class */
+export default class SettingVolume extends Setting {
+  label: string[];
+
+  desc: string;
+
+  constructor(type: string, group: string, label: string[], desc: string) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    for (let i = 0; i < 101; i++) {
+      this.label[i] = `${i}%`;
+    }
+  }
+}

src/Data/SettingsData.js

@@ -14,12 +14,10 @@ import UpdateUpgrades from '../Disp/BuildingsUpgrades/Upgrades';
 import RefreshScale from '../Disp/HelperFunctions/RefreshScale';
 import { UpdateFavicon } from '../Disp/TabTitle/FavIcon';
 import { SimDoSims } from '../Sim/VariablesAndData';
-import {
-  SettingStandard,
-  SettingColours,
-  SettingVolume,
-  SettingInputNumber,
-} from './SettingClasses';
+import SettingColours from './SettingClasses/SettingColours.ts';
+import SettingInputNumber from './SettingClasses/SettingInputNumber.ts';
+import SettingStandard from './SettingClasses/SettingStandard.ts';
+import SettingVolume from './SettingClasses/SettingVolume.ts';
 
 /** This includes all options of CookieMonster and their relevant data */
 const Config = {
@@ -529,7 +527,7 @@ const Config = {
     'Statistics',
     ['Missing Achievements OFF', 'Missing Normal Achievements ON'],
     'Shows missing normal achievements in statistics menu.',
-    false,
+    true,
   ),
   UpStats: new SettingStandard(
     'bool',

src/Data/SettingsDefault.ts

@@ -1,5 +1,7 @@
 /** This array describes all default settings */
-const ConfigDefault = {
+const ConfigDefault: {
+  [index: string]: string | number | { [index: string]: number };
+} = {
   CPSMode: 1,
   AvgCPSHist: 3,
   AvgClicksHist: 0,

src/Disp/BeautifyAndFormatting/BeautifyFormatting.js

@@ -1,7 +1,11 @@
 /** General functions to format or beautify strings */
 
 import { CMOptions } from '../../Config/VariablesAndData';
-import { metric, shortScale, shortScaleAbbreviated } from '../../Data/Scales';
+import {
+  metric,
+  shortScale,
+  shortScaleAbbreviated,
+} from '../../Data/Scales.ts';
 import { BackupFunctions } from '../../Main/VariablesAndData';
 import {
   ColourGreen,

src/Disp/BuildingsUpgrades/UpgradeBar.js

@@ -67,7 +67,7 @@ export default function CreateUpgradeBar() {
   const UpgradeBar = document.createElement('div');
   UpgradeBar.id = 'CMUpgradeBar';
   UpgradeBar.style.width = '100%';
-  UpgradeBar.style.backgroundColour = 'black';
+  UpgradeBar.style.backgroundColor = 'black';
   UpgradeBar.style.textAlign = 'center';
   UpgradeBar.style.fontWeight = 'bold';
   UpgradeBar.style.display = 'none';

src/Disp/Dragon/Dragon.js

@@ -19,7 +19,9 @@ export function AddAuraInfo(aura) {
     const timeToRecover = FormatTime(
       priceOfChange / (bonusCPS + Game.cookiesPs),
     );
-    const bonusCPSPercentage = Beautify((bonusCPS / Game.cookiesPs) * 100);
+    let bonusCPSPercentage;
+    if (Game.cookiesPs === 0) bonusCPSPercentage = Beautify(Infinity);
+    else bonusCPSPercentage = Beautify((bonusCPS / Game.cookiesPs) * 100);
 
     l('dragonAuraInfo').style.minHeight = '60px';
     l('dragonAuraInfo').style.margin = '8px';

src/Disp/InfoBars/BottomBar.js

@@ -6,7 +6,7 @@ import {
   CacheObjects100,
 } from '../../Cache/VariablesAndData';
 import { CMOptions } from '../../Config/VariablesAndData';
-import { VersionMajor, VersionMinor } from '../../Data/Moddata';
+import { VersionMajor, VersionMinor } from '../../Data/Moddata.ts';
 import {
   Beautify,
   FormatTime,
@@ -32,7 +32,7 @@ export function CreateBotBar() {
   BotBar.style.width = '100%';
   BotBar.style.position = 'absolute';
   BotBar.style.display = 'none';
-  BotBar.style.backgroundColour = '#262224';
+  BotBar.style.backgroundColor = '#262224';
   BotBar.style.backgroundImage = 'linear-gradient(to bottom, #4d4548, #000000)';
   BotBar.style.borderTop = '1px solid black';
   BotBar.style.overflow = 'auto';

src/Disp/InfoBars/TimerBar.js

@@ -23,7 +23,7 @@ export function CreateTimerBar() {
   TimerBar.style.height = '0px';
   TimerBar.style.fontSize = '10px';
   TimerBar.style.fontWeight = 'bold';
-  TimerBar.style.backgroundColour = 'black';
+  TimerBar.style.backgroundColor = 'black';
 
   // Create standard Golden Cookie bar
   const CMTimerBarGC = CreateTimer('CMTimerBarGC', 'Next Cookie', [

src/Disp/MenuSections/Info/InfoPage.js

@@ -2,7 +2,7 @@
 
 import { ToggleHeader } from '../../../Config/ToggleSetting';
 import { CMOptions } from '../../../Config/VariablesAndData';
-import { LatestReleaseNotes, ModDescription } from '../../../Data/Moddata';
+import { LatestReleaseNotes, ModDescription } from '../../../Data/Moddata.ts';
 
 /**
  * This function adds stats created by CookieMonster to the stats page

src/Disp/MenuSections/Settings/CreateOption.js

@@ -7,7 +7,7 @@ import {
   ToggleConfigVolume,
 } from '../../../Config/ToggleSetting';
 import { CMOptions } from '../../../Config/VariablesAndData';
-import {} from '../../../Data/Sectionheaders';
+import {} from '../../../Data/Sectionheaders.ts';
 import Config from '../../../Data/SettingsData';
 import RefreshScale from '../../HelperFunctions/RefreshScale';
 import UpdateColours from '../../HelperFunctions/UpdateColours';

src/Disp/MenuSections/Settings/SettingsPage.js

@@ -3,9 +3,9 @@ import { CMOptions } from '../../../Config/VariablesAndData';
 import {
   ConfigGroups,
   ConfigGroupsNotification,
-} from '../../../Data/Sectionheaders';
+} from '../../../Data/Sectionheaders.ts';
 import Config from '../../../Data/SettingsData';
-import ConfigDefault from '../../../Data/SettingsDefault';
+import ConfigDefault from '../../../Data/SettingsDefault.ts';
 import { FavouriteSettings } from '../../VariablesAndData';
 import CreatePrefHeader from './CreateHeader';
 import CreatePrefOption from './CreateOption';

src/Disp/MenuSections/Statistics/AddStatsPage.js

@@ -3,7 +3,7 @@
 import { AddMissingUpgrades } from './CreateMissingUpgrades';
 import * as CreateSections from './CreateStatsSections';
 import * as CreateElements from './CreateDOMElements';
-import * as GameData from '../../../Data/Gamedata';
+import * as GameData from '../../../Data/Gamedata.ts';
 import { CMOptions } from '../../../Config/VariablesAndData';
 
 import {

src/Disp/MenuSections/Statistics/CreateMissingAchievements.js

@@ -55,7 +55,7 @@ export default function AddMissingAchievements() {
   if (CMOptions.MissingAchievements) {
     Object.values(achievs.children).forEach((achievsCrate) => {
       if (!achievsCrate.className.includes('enabled')) {
-        const id = achievsCrate.onclick.toString().match(/(?<=\[).*(?=\])/g)[0];
+        const id = achievsCrate.onclick.toString().split(/\[(.*)\]/gi)[1];
         const { icon } = Game.AchievementsById[id];
         // eslint-disable-next-line no-param-reassign
         achievsCrate.style.backgroundPosition = `${-icon[0] * 48}px ${

src/Disp/MenuSections/Statistics/CreateStatsSections.js

@@ -1,6 +1,6 @@
 /** Functions to create the individual sections of the Statistics page */
 
-import * as GameData from '../../../Data/Gamedata';
+import * as GameData from '../../../Data/Gamedata.ts';
 import { MaxChainCookieReward } from '../../../Cache/Stats/ChainCookies';
 import {
   CacheAvgCPSWithChoEgg,

src/InitSaveLoad/init.js

@@ -1,4 +1,4 @@
-import { VersionMajor, VersionMinor } from '../Data/Moddata';
+import { VersionMajor, VersionMinor } from '../Data/Moddata.ts';
 import CMDrawHook from '../Disp/DrawHook';
 import CMClickHook from '../Main/ClickHook';
 import InitializeCookieMonster from '../Main/Initialization';

src/InitSaveLoad/load.js

@@ -1,5 +1,5 @@
 import { LoadConfig } from '../Config/SaveLoadReload/SaveLoadReloadSettings';
-import { VersionMajor, VersionMinor } from '../Data/Moddata';
+import { VersionMajor, VersionMinor } from '../Data/Moddata.ts';
 import { FavouriteSettings } from '../Disp/VariablesAndData';
 import InitData from '../Sim/InitializeData/InitData';
 

src/InitSaveLoad/save.js

@@ -1,5 +1,5 @@
 import { CMOptions } from '../Config/VariablesAndData';
-import { VersionMajor, VersionMinor } from '../Data/Moddata';
+import { VersionMajor, VersionMinor } from '../Data/Moddata.ts';
 import { FavouriteSettings } from '../Disp/VariablesAndData';
 
 /**

src/Main/Initialization.js

@@ -1,7 +1,7 @@
 import InitCache from '../Cache/CacheInit';
 import { CacheStatsCookies } from '../Cache/Stats/Stats';
 import { LoadConfig } from '../Config/SaveLoadReload/SaveLoadReloadSettings';
-import { VersionMajor, VersionMinor } from '../Data/Moddata';
+import { VersionMajor, VersionMinor } from '../Data/Moddata.ts';
 import CreateUpgradeBar from '../Disp/BuildingsUpgrades/UpgradeBar';
 import { CreateBotBar } from '../Disp/InfoBars/BottomBar';
 import { CreateTimerBar } from '../Disp/InfoBars/TimerBar';

src/Sim/Calculations/CheckOtherAchiev.js

@@ -1,4 +1,4 @@
-import { ChristCookies, HalloCookies } from '../../Data/Gamedata';
+import { ChristCookies, HalloCookies } from '../../Data/Gamedata.ts';
 import SimHas from '../ReplacedGameFunctions/SimHas';
 import SimHasAchiev from '../ReplacedGameFunctions/SimHasAchiev';
 import SimWin from '../SimulationData/SimWin';

src/Sim/SimulationEvents/GodChange.js

@@ -17,6 +17,7 @@ import {
  * @returns {number} 	CM.Sim.cookiesPs - Game.cookiesPs   The bonus cps and the price of the change
  */
 export default function CalculateChangeGod(god, slot) {
+  if (!Game.Objects.Temple.minigameLoaded) return 0;
   CopyData();
   const { minigame } = Game.Objects.Temple;
   const CurrentSlot = minigame.godsById[god].slot;

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "ES2020",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "target": "ES6",
+    "strictNullChecks": true,
+  }
+}

webpack.config.js

@@ -7,11 +7,18 @@ module.exports = function (env) {
     optimization: {
       minimize: !!env.production,
     },
-    entry: {
-      CookieMonster: {
-        import: './src/CookieMonster.js',
-        filename: './CookieMonster.js',
-      },
+    entry: './src/CookieMonster.js',
+    resolve: {
+      extensions: ['.ts', '.js'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
     },
     output: {
       filename: 'CookieMonster.js',