feat: archon hunt panel (#872)

components/modalDialogs/Filters/ComponentsFilter.jsx

@@ -3,37 +3,36 @@ import baseComponents from '@/static/json/components.json';
 
 export default {
   computed: {
-    ...mapGetters('worldstate', {
-      rawCS: 'componentState',
-    }),
+    ...mapGetters('worldstate', ['componentState']),
     activeComponents: {
       get() {
-        return Object.keys(this.rawCS)
-          .map((component) => this.rawCS[component])
+        return Object.values(this.componentState)
           .filter(
             (component) =>
               component.display && (!baseComponents[component.key] || baseComponents[component.key].displayable)
           )
           .map((component) => component.key);
       },
       set(enabledComponents) {
-        Object.keys(this.rawCS).forEach((component) => {
-          this.$store.commit('worldstate/commitComponentDisplayMode', [
-            component,
-            enabledComponents.includes(component),
-          ]);
+        Object.keys(this.componentState).forEach((component) => {
+          if (this.componentState[component].display !== enabledComponents.includes(component)) {
+            this.$store.commit('worldstate/commitComponentDisplayMode', [
+              component,
+              enabledComponents.includes(component),
+            ]);
+          }
         });
       },
     },
     componentStates() {
-      return Object.keys(this.rawCS)
+      return Object.keys(this.componentState)
         .map((component) => {
           if (!baseComponents[component] || !baseComponents[component].displayable) {
             return false;
           }
           return {
-            text: this.rawCS[component].displayName,
-            value: this.rawCS[component].key,
+            text: this.componentState[component].displayName,
+            value: this.componentState[component].key,
           };
         })
         .filter((c) => c);

components/modalDialogs/Filters/FissureFilters.jsx

@@ -15,14 +15,13 @@ export default {
 
         return planets.filter((planet) => planet.state).map((planet) => planet.value);
       },
-      set() {},
-    },
-  },
-  methods: {
-    updateFissureStates(enabledFissures) {
-      Object.keys(this.fissureStates).forEach((planet) => {
-        this.$store.commit('worldstate/commitFissurePlanetState', [planet, enabledFissures.includes(planet)]);
-      });
+      set(enabledFissures) {
+        Object.keys(this.fissureStates).forEach((planet) => {
+          if (this.fissureStates[planet] !== enabledFissures.includes(planet)) {
+            this.$store.commit('worldstate/commitFissurePlanetState', [planet, enabledFissures.includes(planet)]);
+          }
+        });
+      },
     },
   },
   render() {
@@ -40,7 +39,6 @@ export default {
                 switches
                 stacked
                 class="settings-group fissure-setting-group"
-                input={(vals) => this.updateFissureStates(vals)}
               ></b-form-checkbox-group>
             </b-form-group>
           </div>

components/modalDialogs/Filters/NotificationFilters.jsx

@@ -97,8 +97,8 @@ export default {
             preserve-search={true}
             hide-selected={true}
             multiple={true}
-            select={this.toggleRewardState}
-            remove={this.toggleRewardState}
+            onSelect={this.toggleRewardState}
+            onRemove={this.toggleRewardState}
           />
           <hr />
           <Multiselect
@@ -112,8 +112,8 @@ export default {
             preserve-search={true}
             hide-selected={true}
             multiple={true}
-            select={this.toggleEventState}
-            remove={this.toggleEventState}
+            onSelect={this.toggleEventState}
+            onRemove={this.toggleEventState}
           />
           <hr />
           <Multiselect
@@ -127,8 +127,8 @@ export default {
             preserve-search={true}
             hide-selected={true}
             multiple={true}
-            select={this.toggleEventState}
-            remove={this.toggleEventState}
+            onSelect={this.toggleEventState}
+            onRemove={this.toggleEventState}
           />
           <hr />
           <Multiselect
@@ -142,8 +142,8 @@ export default {
             preserve-search={true}
             hide-selected={true}
             multiple={true}
-            select={this.toggleEventState}
-            remove={this.toggleEventState}
+            onSelect={this.toggleEventState}
+            onRemove={this.toggleEventState}
           />
         </div>
       </b-tab>

components/panels/SortiePanel.jsx

@@ -0,0 +1,115 @@
+import dayjs from 'dayjs';
+
+import HubImg from '@/components/HubImg.jsx';
+import TimeBadge from '@/components/TimeBadge.jsx';
+import HubPanelWrap from '@/components/HubPanelWrap.jsx';
+import { cdn } from '@/services/utilities';
+
+const corpus = cdn('svg/factions/corpus.svg');
+const corrupted = cdn('svg/factions/corrupted.svg');
+const grineer = cdn('svg/factions/grineer.svg');
+const infested = cdn('svg/factions/infested.svg');
+const sentient = cdn('svg/factions/sentient.svg');
+const narmer = cdn('svg/factions/narmer2.svg');
+
+const styles = {
+  inline: {
+    display: 'inline',
+  },
+  missionType: {
+    filter: 'invert(100%)',
+    'margin-top': '-3px',
+    'margin-right': '5px',
+    width: '25px',
+    height: '25px',
+  },
+};
+const tooltips = {
+  'v-b-tooltip.top': true,
+};
+
+export default {
+  name: 'SortiePanel',
+  components: {
+    TimeBadge,
+    HubImg,
+    HubPanelWrap,
+  },
+  props: {
+    sortie: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  computed: {
+    headertext() {
+      return this.$props.sortie?.missions?.length ? this.$t('sortie.hunt.header') : this.$t('sortie.header');
+    },
+    factionImg() {
+      const fImg = {
+        corpus,
+        grineer,
+        infested,
+        infestation: infested,
+        corrupted,
+        orokin: corrupted,
+        sentient,
+        narmer,
+      };
+      return fImg[this.$props.sortie?.faction?.toLowerCase()] || corrupted;
+    },
+    missions() {
+      return (this.$props.sortie?.variants?.length ? this.$props.sortie.variants : this.$props.sortie.missions) || [];
+    },
+  },
+  render() {
+    const now = dayjs().toISOString();
+    return (
+      <HubPanelWrap title={this.headertext} class="sortie">
+        <b-list-group>
+          <b-list-group-item style={styles.inline} class="list-group-item-borderless pb-0">
+            <span class="pull-left">
+              <h4 class="my-0">
+                <HubImg
+                  src={this.factionImg}
+                  name={this.sortie.faction}
+                  style={styles.missionType}
+                  width="20px"
+                  height="20px"
+                />
+                {this.sortie.boss}
+              </h4>
+            </span>
+            <TimeBadge starttime={now} endtime={this.sortie.expiry} interval={1000} />
+          </b-list-group-item>
+          {this.missions.map((mission, index) => {
+            return (
+              <b-list-group-item
+                key={`sortie-${index}`}
+                style={styles.inline}
+                class={{
+                  'list-group-item-borderless': index !== this.missions.length - 1,
+                  'pb-0': index !== this.missions.length - 1,
+                  'list-group-item-borderbottom': index === this.missions.length - 1,
+                }}
+              >
+                <div class="ml-3">
+                  <span class="pull-left pr-2">
+                    <b>
+                      {mission.missionType || mission.type} - {mission.node}
+                    </b>
+                  </span>
+                  <span {...tooltips} title={mission.modifierDescription} class="pull-left">
+                    {mission.modifier}
+                  </span>
+                </div>
+              </b-list-group-item>
+            );
+          })}
+        </b-list-group>
+      </HubPanelWrap>
+    );
+  },
+};

cypress/.eslintrc.yaml

@@ -1,6 +1,14 @@
 globals:
   cy: readonly
-  it: readonly
-  describe: readonly
-  beforeEach: readonly
-  expect: readonly
+env:
+  mocha: true
+  cypress/globals: true
+plugins:
+  - cypress
+rules:
+  cypress/no-assigning-return-values: error
+  cypress/no-unnecessary-waiting: 0
+  cypress/assertion-before-screenshot: warn
+  cypress/no-force: warn
+  cypress/no-async-tests: error
+  cypress/no-pause: error

cypress/e2e/openworld/load.spec.js

@@ -6,8 +6,8 @@ describe('Maps', () => {
     });
     describe(`${ow} map`, () => {
       it('should load', () => {
-        const map = cy.get('div.vue2leaflet-map');
-        map.should('exist');
+        cy.get('div.vue2leaflet-map').as('map');
+        cy.get('@map').should('exist');
         cy.get('div.leaflet-control-zoom').should('exist');
         cy.get('div.leaflet-control-layers').should('exist');
         cy.get('div.leaflet-pane.leaflet-map-pane').should('exist');
@@ -23,20 +23,20 @@ describe('Fish', () => {
     });
     describe(`${ow} fish data`, () => {
       it('should load', () => {
-        const table = cy.get('div.fish-info');
-        table.should('exist');
-        const rowtypes = table.find('[role=rowgroup]');
-        rowtypes.should('have.length', 2);
-        const head = rowtypes.get('thead');
-        head.should('exist');
+        cy.get('div.fish-info').as('fish');
+        cy.get('@fish').should('exist');
+        cy.get('@fish').find('[role=rowgroup]').as('rowtypes');
+        cy.get('@rowtypes').should('have.length', 2);
+        cy.get('@rowtypes').get('thead').as('head');
+        cy.get('@head').should('exist');
 
-        const rows = rowtypes.get('tbody');
-        rows.should('exist');
-        rows.children().should('have.length.gt', 10);
+        cy.get('@rowtypes').get('tbody').as('rows');
+        cy.get('@rows').should('exist');
+        cy.get('@rows').children().should('have.length.gt', 10);
 
-        const first = rows.children().get('tr:nth-of-type(1)');
-        first.should('exist');
-        first.children().should('have.length.gt', 13);
+        cy.get('@rows').children().get('tr:nth-of-type(1)').as('first');
+        cy.get('@first').should('exist');
+        cy.get('@first').children().should('have.length.gt', 13);
       });
     });
   });