New Client: stable (#8426)

* try to freeze content object

* deep freeze the content object, start to implement stable

* freeze at the /common level

* go back to freezing content only on the client

* use deep-frezze-strict to support phantomjs

* use own version of deepFreeze

* update comment about deepFreeze

test/client/unit/specs/libs/deepFreeze.spec.js

@@ -0,0 +1,25 @@
+import deepFreeze from 'client/libs/deepFreeze';
+
+describe('deepFreeze', () => {
+  it('works as expected', () => {
+    let obj = {
+      a: 1,
+      b () {
+        return this.a;
+      },
+      nested: {
+        c: 2,
+        nestedTwice: {
+          d: 1,
+        },
+      },
+    };
+
+    let result = deepFreeze(obj);
+    expect(result).to.equal(obj);
+
+    expect(Object.isFrozen(obj)).to.equal(true);
+    expect(Object.isFrozen(obj.nested)).to.equal(true);
+    expect(Object.isFrozen(obj.nested.nestedTwice)).to.equal(true);
+  });
+});

website/client/components/inventory/stable.vue

@@ -1,8 +1,52 @@
 <template lang="pug">
-h2 {{ $t('stable') }}
+.ui.grid
+  .four.wide.column
+    h2 Pets
+    ul
+      li(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)") {{pet}}
+
+  .four.wide.column
+    h2 Magic Potions Pets
+    ul
+      li(v-for="pet in listAnimals('pet', content.dropEggs, content.premiumHatchingPotions)") {{pet}}
+
+  .four.wide.column
+    h2 Quest Pets
+    ul
+      li(v-for="pet in listAnimals('pet', content.questEggs, content.dropHatchingPotions)") {{pet}}
+
+  //.four.wide.column
+    h2 Rare Pets
+    ul
+      li(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)") {{pet}}
+
+    ul.row Mounts
+    ul.row Quest Mounts
+    ul.row Rare Mounts
+
 </template>
 
 <script>
+import { mapState } from '../../store';
+import { each } from 'lodash';
+
 export default {
+  computed: {
+    ...mapState(['content']),
+  },
+  methods: {
+    listAnimals (type, eggSource, potionSource) {
+      let animals = [];
+
+      each(eggSource, (egg) => {
+        each(potionSource, (potion) => {
+          let animalKey = `${egg.key}-${potion.key}`;
+          animals.push(this.content[`${type}Info`][animalKey].text());
+        });
+      });
+
+      return animals;
+    },
+  },
 };
 </script>

website/client/libs/deepFreeze.js

@@ -0,0 +1,20 @@
+// Code taken from https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+// and adapted
+export default function deepFreeze (obj) {
+  // Retrieve the property names defined on obj
+  const propNames = Object.getOwnPropertyNames(obj);
+  const propNamesLength = propNames.length;
+
+  // Freeze properties before freezing self
+  for (let i = 0; i < propNamesLength; i++) {
+    const prop = obj[propNames[i]];
+
+    // Freeze prop if it is an object
+    if (typeof prop === 'object' && prop !== null) {
+      deepFreeze(prop);
+    }
+  }
+
+  // Freeze self (no-op if already frozen)
+  return Object.freeze(obj);
+}

website/client/store/state.js

@@ -1,7 +1,14 @@
+import deepFreeze from '../libs/deepFreeze';
+import content from '../../common/script/content/index';
+
 const state = {
   title: 'Habitica',
   user: null,
   tasks: null, // user tasks
+  // content data, frozen to prevent Vue from modifying it since it's static data that never changes
+  // TODO apply freezing to the entire codebase (the server) and not only to the client side?
+  // NOTE this takes about 10-15ms on a fast computer
+  content: deepFreeze(content),
 };
 
 export default state;

website/common/script/content/stable.js

@@ -112,4 +112,4 @@ module.exports = {
   specialMounts,
   petInfo,
   mountInfo,
-};
+};