add exclusive to search

README.md

@@ -1,5 +1,5 @@
 ## Dev Instructions
-Have Nodejs ([node installation](https://nodejs.org/en/)) installed on your machine. Then navigate to the top level of the project in a run ``npm install``
+Have Nodejs >=16 ([node installation](https://nodejs.org/en/)) installed on your machine. Then navigate to the top level of the project in a run ``npm install --legacy-peer-deps``
 
 ### Development Running
 To run the website locally
@@ -12,5 +12,9 @@ To have your changes reflected on the live website, you first need to build/bund
 ```
 npm run build
 ```
+To test out the build locally
+```
+npx serve
+```
 
 Then pushing/merging these changes into master will update the website

build/vendor.js.LICENSE.txt

@@ -39,7 +39,7 @@ and limitations under the License.
  */
 
 /**
- * @mui/styled-engine v5.11.16
+ * @mui/styled-engine v5.13.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,7 +47,7 @@ and limitations under the License.
  */
 
 /**
- * @remix-run/router v1.5.0
+ * @remix-run/router v1.7.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -58,7 +58,7 @@ and limitations under the License.
  */
 
 /**
- * React Router DOM v6.10.0
+ * React Router DOM v6.14.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -69,7 +69,7 @@ and limitations under the License.
  */
 
 /**
- * React Router v6.10.0
+ * React Router v6.14.0
  *
  * Copyright (c) Remix Software Inc.
  *

src/components/collection/collection.scss

@@ -165,15 +165,6 @@
       justify-content: space-between;
     }
 
-    .setBox {
-      width: 80%;
-      float: right;
-    }
-
-    #sets {
-      width: 80%;
-    }
-
     .centeredButtons {
       display: flex;
       justify-content: center; /* align horizontal */

src/components/collection/search/index.js

@@ -3,9 +3,9 @@ import { observer, inject } from 'mobx-react';
 import React from 'react';
 import Collapsible from 'react-collapsible';
 
+import search_api from './search';
 import { Loading } from '../../Snippets';
 import API from '../../SpreadsheetData';
-import search_api from './search';
 
 @inject((stores, props, context) => props) @observer
 export default class SearchCollection extends React.Component {
@@ -13,7 +13,7 @@ export default class SearchCollection extends React.Component {
   @observable loading = false;
   @observable input;
   @observable collapsed;
-  list = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"];
+  list = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender", "exclusive"];
 
   constructor(props) {
     super(props);
@@ -39,12 +39,12 @@ export default class SearchCollection extends React.Component {
 
     if (collapsed) collapsed = JSON.parse(collapsed);
     else collapsed = {
-      disciplines: true,
       energy: true,
       bpmc: true,
       types: true,
       rarity: false,
-      sets: false
+      sets: false,
+      exclusive: false
     };
 
     this.collapsed = collapsed;
@@ -71,6 +71,7 @@ export default class SearchCollection extends React.Component {
       energy: { min: '', max: '' },
       mcbp: { min: '', max: '' },
       mull: { unique: false, loyal: false, legendary: false, mixed: false },
+      exclusive: { starter: false, online: false },
       gender: { ambiguous: false, female: false, male: false }
     };
     for (const key in API.sets) input.sets[key.toLowerCase()] = false;
@@ -287,24 +288,18 @@ export default class SearchCollection extends React.Component {
             <input type="button" value={this.input.elements.none ? "only" : "and"} className="and" disabled={this.input.elements.and} onClick={(e)=>{this.input.elements.and=true}} />
           </div>
           <hr />
-          <CollapsibleWrapper
-            type="disciplines"
-            title="Disciplines"
-            collapsed={this.collapsed}
-            onClick={this.handleTriggerClick} 
-          >
-            <div className="disciplines">
-              {disciplines}
-              <label>Max
-                <input 
-                  type="checkbox" name="max" 
-                  style={{ display: "inline", margin: "0px" }} 
-                  checked={this.input.disciplines.max} 
-                  onChange={e => this.handleChange(e, "disciplines")} 
-                />
-              </label>
-            </div>
-          </CollapsibleWrapper>
+          <div className="disciplines">
+            {disciplines}
+            <label>Max
+              <input 
+                type="checkbox" name="max" 
+                style={{ display: "inline", margin: "0px" }} 
+                checked={this.input.disciplines.max} 
+                onChange={e => this.handleChange(e, "disciplines")} 
+              />
+            </label>
+          </div>
+          <hr />
           <CollapsibleWrapper
             type="energy"
             title="Energy" 
@@ -353,13 +348,23 @@ export default class SearchCollection extends React.Component {
             collapsed={this.collapsed}
             onClick={this.handleTriggerClick} 
           >
-            <div className="setBox">
-              <div className="centeredCheckBox" id="sets">
-                {sets}
-              </div>
+            <div className="centeredCheckBox">
+              {sets}
+            </div>
+          </CollapsibleWrapper>
+          <CollapsibleWrapper
+            type="exclusive"
+            title="Exclusive"
+            collapsed={this.collapsed}
+            onClick={this.handleTriggerClick}
+          >
+            <div className="centeredCheckBox centeredSpacing">
+              <label className="mull"><input type="checkbox" name="starter" checked={this.input.exclusive.starter} onChange={e => this.handleChange(e, "exclusive")} />Starter</label>
+              <label className="mull"><input type="checkbox" name="online" checked={this.input.exclusive.online} onChange={e => this.handleChange(e, "exclusive")} />Online</label>
             </div>
           </CollapsibleWrapper>
           {/*<Collapsible trigger="Gender (fan content)">{gender}</Collapsible>*/}
+          <hr />
           <div className="centeredButtons">
             <input id="search" type="submit" value="Search" />
             <input id="search" type="button" value="Reset" onClick={this.reset} />

src/components/collection/search/search.js

@@ -351,7 +351,7 @@ export default function search_api(input) {
   if (setsList.length === 0) {
     // Only show prototype cards when explicitly selected
     const keys = Object.keys(input.sets);
-    if (!input.sets.proto) keys.splice(keys.indexOf("proto"));
+    if (!input.sets.proto && input.name.length === 0) keys.splice(keys.indexOf("proto"));
     for (const i in keys) {
       setsList.push({ '$eq': keys[i].toUpperCase() });
     }
@@ -392,6 +392,26 @@ export default function search_api(input) {
   //   mugicResults = mugicResults.limit(0);
   // }
 
+  // Exclusive - Starter
+  if (input.exclusive.starter) {
+    const exclusive = new RegExp("starter", 'i');
+    attackResults = attackResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    battlegearResults = battlegearResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    creatureResults = creatureResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    locationResults = locationResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    mugicResults = mugicResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+  }
+
+  // Exclusive - Online
+  if (input.exclusive.online) {
+    const exclusive = new RegExp("online", 'i');
+    attackResults = attackResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    battlegearResults = battlegearResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    creatureResults = creatureResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    locationResults = locationResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+    mugicResults = mugicResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
+  }
+
   // Merge data
   const types = !(input.types.attack | input.types.battlegear | input.types.creature | input.types.location | input.types.mugic);
 

src/components/common/definitions.ts

@@ -21,6 +21,7 @@ export interface BaseCard {
   gsx$ic?: string // imgur card
   gsx$if?: string // imgur fullart
   gsx$artist?: string
+  gsx$exclusive?: string
 }
 
 export interface Attack extends BaseCard {