up version to 0.2.1, add game settings with option to disable separat…

…ing common stats, improve way to observe helper tabs switch
alexdymov · Nov 21, 2021 · 448f58e · 448f58e
1 parent 3de04ce
commit 448f58e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 m1pro Release History
 ================================
 
+### 21-Nov-2021 - **0.2.1**
+Игра:
+ - Добавлена настройка "Показывать общую статистику в отдельном блоке"
+
 ### 20-Nov-2021 - **0.2.0**
 Игра:
  - Общая статистка игры (тип и время игры, количество зрителей, раунд и налог на аренду) теперь выводится в дополнительном блоке справа.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "m1pro",
   "description": "Enhance UI/UX for https://monopoly-one.com",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": {
     "name": "Smoke",
     "email": "alex.dymov@gmail.com"

diff --git a/src/components/game-state.ts b/src/components/game-state.ts
@@ -4,6 +4,10 @@ import { AsyncStorage, GameField, GamePlayer, Gender, Rank, UserInfoLong, BanInf
 import merge from "lodash/merge";
 import { debug } from '../util/debug';
 
+class GameSettings {
+    splitCommonStats = true;
+}
+
 export class Player {
     nick: string;
     gender: Gender;
@@ -117,6 +121,15 @@ export default class GameState extends Vue {
     teamReverse = 0;
     firstHandledPacket = 0;
     gameOver = false;
+    settings: GameSettings = null;
+
+    created() {
+        const gameSettings = localStorage.getItem('game_settings');
+        this.settings = gameSettings ? JSON.parse(gameSettings) : new GameSettings();
+        this.$watch('settings', (v) => {
+            localStorage.setItem('game_settings', JSON.stringify(this.settings));
+        }, { deep: true });
+    }
 
     init(v: Vue) {
         this.storage = v;

diff --git a/src/hooks/game/game-stats.ts b/src/hooks/game/game-stats.ts
@@ -2,7 +2,6 @@ import merge from 'lodash/merge';
 import Vue from 'vue';
 import GameState from '../../components/game-state';
 import { debug } from '../../util/debug';
-import mutator from '../../util/mutator';
 
 class Ticker {
     game_time: string
@@ -53,7 +52,7 @@ export class GameStats {
         this.initExtraStatsTable();
         this.observeTabSwitch();
         window.onresize = (e) => {
-            this.render();
+            this.renderCommonStats();
         };
         this.state.$watch('gameOver', v => v && this.root.hide() && debug('gameover'));
     }
@@ -86,24 +85,40 @@ export class GameStats {
         this.rootOrig = this.jq.find('div.TableHelper-content > div');
         this.content = this.rootOrig.find('div.TableHelper-content-stat');
         this.title = this.rootOrig.find('div._matchtitle');
-        this.render();
+        this.renderCommonStats();
     }
 
     private observeTabSwitch() {
-        mutator.mutateAdded(this.rootOrig.parent(), el => {
-            if (!el.has('div._matchtitle').length)
-                return;
-            if (this.allRenderedSeparately) {
-                this.title.remove();
-                this.content.remove();
+        this.base.$watch('tab', v => {
+            switch (v) {
+                case 0:
+                    if (this.allRenderedSeparately) {
+                        this.title.remove();
+                        this.content.remove();
+                    }
+                    this.loadCommonStatsElements();
+                    this.initExtraStatsTable();
+                    break;
+                case 1:
+                    this.jq.find('div.TableHelper-content-options').append(
+                        jQuery(`
+                            <div class="form2-row">
+                                <div class="form2-checkbox">
+                                    <input type="checkbox" class="switcher" id="table-opt-split-common-stats"> <label for="table-opt-split-common-stats">Показывать общую статистику в отдельном блоке</label>
+                                </div>
+                            </div>
+                            `)
+                            .find('input').prop('checked', this.state.settings.splitCommonStats).on('change', (e) => {
+                                this.state.settings.splitCommonStats = e.delegateTarget.checked;
+                                this.renderCommonStats();
+                            }).end())
+                    break;
             }
-            this.loadCommonStatsElements();
-            this.initExtraStatsTable();
         });
     }
 
-    private render() {
-        const renderSeparately = this.isEnoughWidth();
+    private renderCommonStats() {
+        const renderSeparately = this.isEnoughWidth() && this.state.settings.splitCommonStats;
         const ctr = renderSeparately ? this.stats : this.rootOrig;
         const rerender = renderSeparately !== this.allRenderedSeparately;
         renderSeparately && !this.state.gameOver && this.root.show() || this.root.hide();