update mobile view

src/components/_mobile/collection/Search.tsx

@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import React, { FormEvent, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
+
 import search_api from '../../collection/search/search';
 import { ElementIcon, TribeIcon } from '../../Snippets';
 import API, { sets } from '../../SpreadsheetData/API';
@@ -46,6 +47,7 @@ const initInput = (() => {
     energy: { min: '', max: '' },
     mcbp: { min: '', max: '' },
     mull: { unique: false, loyal: false, legendary: false, mixed: false },
+    exclusive: { starter: false, printed: false, online: false },
     gender: { ambiguous: false, female: false, male: false }
   };
 })();
@@ -56,10 +58,11 @@ const initExpand = ({
   bpmc: true,
   types: true,
   rarity: false,
-  sets: false
+  sets: false,
+  exclusive: false,
 });
 
-const queryList = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"];
+const queryList = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender", "exclusive"];
 
 const inputReducer = (state: typeof initInput, newState: Partial<typeof initInput>) => {
   return { ...state, ...newState };
@@ -334,6 +337,26 @@ function Search ({ setContent, setInfo }) {
                 <FormGroup>{sets}</FormGroup>
               </AccordionDetails>
             </Accordion>
+            <Accordion expanded={expand.exclusive}
+              onChange={handleExpand("sets")}
+            >
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography>Exclusive</Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <FormGroup row>
+                  <FormControlLabel control={
+                    <Checkbox checked={input.exclusive.starter} onChange={handleChange("starter", "exclusive")} />
+                  } label="Starter" />
+                  <FormControlLabel control={
+                    <Checkbox checked={input.exclusive.printed} onChange={handleChange("printed", "exclusive")} />
+                  } label="Printed" />
+                  <FormControlLabel control={
+                    <Checkbox checked={input.exclusive.online} onChange={handleChange("online", "exclusive")} />
+                  } label="Online" />
+                </FormGroup>
+              </AccordionDetails>
+            </Accordion>
           </Box>
         </DialogContent>
         <DialogActions sx={{ justifyContent: "flex-start" }}>

src/components/_mobile/collection/index.tsx

@@ -3,7 +3,7 @@ import {
   Pagination, Paper, Select, SelectChangeEvent, Stack, styled, ThemeProvider, Typography, useMediaQuery
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { Attack, Battlegear, Card as ChaoticCard, Location, Mugic, Creature } from '../../common/definitions';
+
 import AttackCard from './Attack';
 import BattlegearCard from './Battlegear';
 import { chaoticCardProps, statsType } from './CardBase';
@@ -12,6 +12,7 @@ import LocationCard from './Location';
 import MugicCard from './Mugic';
 import NavMenu from './NavMenu';
 import Search from './Search';
+import { Attack, Battlegear, Card as ChaoticCard, Location, Mugic, Creature } from '../../common/definitions';
 
 import './collection.scss';
 
@@ -192,7 +193,8 @@ export default function Collection (_props) {
   return (<ThemeProvider theme={theme}>
     <Paper square sx={{ 
       minHeight: "100vh", height: "100%", 
-      padding: theme.spacing(1),
+      backgroundColor: '#323338',
+      padding: 0
       // backgroundColor: "hsl(0deg 0% 97%)"
     }}>
       <Search {...({ setContent, setInfo })} />
@@ -232,19 +234,23 @@ export default function Collection (_props) {
         </>)}
       </AppBar>
       <Box sx={{ 
-        ["@media (min-width:917px)"]: { height: "58px" },
-        ["@media (max-width:917px)"]: { height: "98px" },
+        ["@media (min-width:904px)"]: { height: "58px" },
+        ["@media (max-width:904px)"]: { height: "90px" },
         ["@media (max-width:612px)"]: { height: "132px" },
         ["@media (max-width:600px)"]: { height: "152px" }
       }}/>
       {info.text ? (
         <Typography style={{ textAlign: 'left' }}>{info.text}</Typography>
-      ) : (
+      ) : (<>
         <CardList
           cards={content.slice(n * (p-1), n * p)}
           extend={handleExtendSingle}
           {...({ selected, ext, stats, hideStats })}
         />
+        <Box sx={{ 
+          ["@media (max-width:922px)"]: { height: "80px" },
+        }}/>
+      </>
       )}
     </Paper>
   </ThemeProvider>);
@@ -298,5 +304,5 @@ const CardList = ({ cards, selected, ext, ...props }: listProps) => {
   });
 
   // Limitation of typescript - error TS2605
-  return <>{list}</>;
+  return <div style={{ backgroundColor: "#fff", padding: 8 }}>{list}</div>;
 };

src/components/collection/search/index.js

@@ -71,7 +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 },
+      exclusive: { starter: false, printed: false, online: false },
       gender: { ambiguous: false, female: false, male: false }
     };
     for (const key in API.sets) input.sets[key.toLowerCase()] = false;
@@ -169,6 +169,9 @@ export default class SearchCollection extends React.Component {
     this.cleanInput();
   }
 
+  handleExclusiveChange = (event) => {
+  }
+
   handleChange = (event, obj) => {
     const { target } = event;
     const value = target.type === 'checkbox' ? target.checked : target.value;
@@ -358,8 +361,9 @@ export default class SearchCollection extends React.Component {
             collapsed={this.collapsed}
             onClick={this.handleTriggerClick}
           >
-            <div className="centeredCheckBox centeredSpacing">
+            <div className="centeredCheckBox centeredSpacing" style={{ width: "80%" }}>
               <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="printed" checked={this.input.exclusive.printed} onChange={e => this.handleChange(e, "exclusive")} />Printed</label>
               <label className="mull"><input type="checkbox" name="online" checked={this.input.exclusive.online} onChange={e => this.handleChange(e, "exclusive")} />Online</label>
             </div>
           </CollapsibleWrapper>

src/components/collection/search/search.js

@@ -184,7 +184,7 @@ export default function search_api(input) {
   if (input.elements.none) {
     const { fire, air, earth, water } = input.elements;
 
-    // Note / None
+    //  None - Only (contains only selected elements)
     if (!input.elements.and) {
       // If any elements are present, then exclude them in the search
       if (fire || air || earth || water) {
@@ -211,6 +211,7 @@ export default function search_api(input) {
           .where(obj => (obj.gsx$elements == ''));
       }
     }
+    // None - Not (does not contain selected elements)
     else {
       attackResults = attackResults
         .where((obj) => (fire ? obj.gsx$fire != "" : obj.gsx$fire == ""))
@@ -244,10 +245,12 @@ export default function search_api(input) {
       }
     }
     if (elementsList.length > 0) {
+      // Must contain at least these elements
       if (input.elements.and) {
         creatureResults = creatureResults.find({ 'gsx$elements': { '$and': elementsList }});
         attackResults = attackResults.find({ '$and': elementsList2 });
       }
+      // Can contain any of these elements
       else {
         creatureResults = creatureResults.find({ 'gsx$elements': { '$or': elementsList }});
         attackResults = attackResults.find({ '$or': elementsList2 });
@@ -402,6 +405,16 @@ export default function search_api(input) {
     mugicResults = mugicResults.find({ 'gsx$exclusive': { '$regex': exclusive }});
   }
 
+  // Printed
+  if (input.exclusive.printed) {
+    const exclusive = new RegExp("online", 'i');
+    attackResults = attackResults.where((obj) => !exclusive.test(obj.gsx$exclusive));
+    battlegearResults = battlegearResults.where((obj) => !exclusive.test(obj.gsx$exclusive));
+    creatureResults = creatureResults.where((obj) => !exclusive.test(obj.gsx$exclusive));
+    locationResults = locationResults.where((obj) => !exclusive.test(obj.gsx$exclusive));
+    mugicResults = mugicResults.where((obj) => !exclusive.test(obj.gsx$exclusive));
+  }
+
   // Exclusive - Online
   if (input.exclusive.online) {
     const exclusive = new RegExp("online", 'i');