Location mobile

src/components/_mobile/collection/Attack.tsx

@@ -4,7 +4,7 @@ import { Attack } from "../../common/definitions";
 import { AttackIcon, ElementIcon, Name, RarityIcon } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent } from './CardBase';
+import { CardBase, CardComponent, Flavor, Unique } from './CardBase';
 
 const AttackCard: CardBase<Attack> = (props) => {
   const { card } = props;
@@ -17,8 +17,8 @@ const AttackCard: CardBase<Attack> = (props) => {
     <CardComponent {...props}
       right={<>
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
-        {unique && <Typography>{unique}</Typography>}
+        {unique && <Unique>{unique}</Unique>}
-        {flavor && <Typography>{flavor}</Typography>}
+        {flavor && <Flavor>{flavor}</Flavor>}
       </>}
       left={<>
         <Name name={card.gsx$name} />
@@ -35,8 +35,8 @@ const AttackCard: CardBase<Attack> = (props) => {
       content={<>
         <Name name={card.gsx$name} />
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
-        {unique && <Typography>{unique}</Typography>}
+        {unique && <Unique>{unique}</Unique>}
-        {flavor && <Typography>{flavor}</Typography>}
+        {flavor && <Flavor>{flavor}</Flavor>}
         <Typography>Art By: {card.gsx$artist}</Typography>
       </>}
     />

src/components/_mobile/collection/Battlegear.tsx

@@ -4,7 +4,7 @@ import { BattlegearIcon, Name, RarityIcon } from '../../Snippets';
 import { Battlegear } from '../../common/definitions';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent } from './CardBase';
+import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
 
 const BattlegearCard: CardBase<Battlegear> = (props) => {
   const { card } = props;
@@ -21,19 +21,18 @@ const BattlegearCard: CardBase<Battlegear> = (props) => {
       </>}
       right={<>
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
-        {unique && <Typography>{unique}</Typography>}
+        {unique && <Unique>{unique}</Unique>}
-        {flavor && <Typography>{flavor}</Typography>}
+        {flavor && <Flavor>{flavor}</Flavor>}
       </>}
       content={<>
         <Name name={card.gsx$name} />
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
-        {unique && <Typography>{unique}</Typography>}
+        {unique && <Unique>{unique}</Unique>}
-        {flavor && <Typography>{flavor}</Typography>}
+        {flavor && <Flavor>{flavor}</Flavor>}
         <Typography>Art By: {card.gsx$artist}</Typography>
       </>}
     />
   );
-
 };
 
 export default BattlegearCard;

src/components/_mobile/collection/CardBase.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardMedia, CardContent } from '@mui/material';
+import { Box, Card, CardMedia, CardContent, Typography, styled } from '@mui/material';
 import React from 'react';
 
 import { Card as ChaoticCard } from "../../common/definitions";
@@ -28,6 +28,8 @@ type componentProps = chaoticCardProps<ChaoticCard> & {
 export const CardComponent = (
   { card, ext, extend, left, right, content }: componentProps
 ) => {
+  const loc = card.gsx$type === "Locations";
+
   return (ext === false)
     ? (
       <Card sx={{ display: 'flex' }}>
@@ -41,7 +43,7 @@ export const CardComponent = (
         <Box sx={{ display: 'flex', flexDirection: 'column', marginLeft: 1, width: "30%" }}>
           {left}
         </Box>
-        <Box sx={{ display: 'flex' }}>
+        <Box sx={{ display: 'block' }}>
           {right}
         </Box>
       </Card>
@@ -50,16 +52,27 @@ export const CardComponent = (
         <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: "flex-start" }}>
           <CardMedia
             component="img"
-            sx={{ width: "250px" }}
+            sx={{ width: (loc ? "350px" : "250px") }}
-            height="350"
+            height={loc ? "250" : "350"}
             image={API.cardImage(card)}
             alt={`${card.gsx$name} card`}
             onClick={() => extend("")}
           />
-          <CardContent sx={{ flex: '1 0', minWidth: "310px", width: "calc(100% - 250px)" }}>
+          <CardContent sx={{ 
+            flex: '1 0', minWidth: "310px", 
+            width: `calc(100% - ${loc ? " 350px" : "250px"})`
+          }}>
             {content}
           </CardContent>
         </Box>
       </Card>
     );
 };
+
+export const Unique = styled(Typography)(() => ({
+  fontWeight: "bold"
+}));
+
+export const Flavor = styled(Typography)(() => ({
+  fontStyle: "italic"
+}));

src/components/_mobile/collection/Location.tsx

@@ -0,0 +1,40 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+import { Location } from '../../common/definitions';
+import { InitiativeIcon, LocationIcon, Name, RarityIcon } from '../../Snippets';
+import { abilityText } from '../../Snippets/abilityText';
+import { uniqueText } from '../../Snippets/uniqueText';
+import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
+
+const LocationCard: CardBase<Location> = (props) => {
+  const { card } = props;
+  const ability = abilityText({ ability: card.gsx$ability });
+  const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
+  const flavor = card.gsx$flavortext;
+
+  return (
+    <CardComponent {...props}
+      left={<>
+        <Name name={card.gsx$name} />
+        <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Typography><LocationIcon /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
+        <Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
+      </>}
+      right={<>
+        <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
+        {unique && <Unique>{unique}</Unique>}
+        {flavor && <Flavor>{flavor}</Flavor>}
+      </>}
+      content={<>
+        <Name name={card.gsx$name} />
+        <Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
+        <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
+        {unique && <Unique>{unique}</Unique>}
+        {flavor && <Flavor>{flavor}</Flavor>}
+        <Typography>Art By: {card.gsx$artist}</Typography>
+      </>}
+    />
+  );
+};
+
+export default LocationCard;

src/components/_mobile/collection/collection.scss

@@ -1,24 +1,24 @@
 .icon14 {
+    width: 16px;
     height: 16px;
     vertical-align: middle;
 }
 
 .icon16 {
+    width: 16px;
     height: 16px;
 }
 
 .icon20 {
+    width: 20px;
     height: 20px;
 }
 
 .icon24 {
+    width: 24px;
     height: 24px;
 }
 
-.bigger {
-    font-size: 1.15rem;
-}
-
 .name {
     -webkit-user-select: all;
     -moz-user-select: all;

src/components/_mobile/collection/index.tsx

@@ -2,9 +2,10 @@ import {
   Box, Card, Checkbox, createTheme, FormControl, FormControlLabel, InputLabel, MenuItem, Pagination, Paper, Select, SelectChangeEvent, styled, ThemeProvider, Typography
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { Attack, Battlegear, Card as ChaoticCard } from '../../common/definitions';
+import { Attack, Battlegear, Location, Card as ChaoticCard } from '../../common/definitions';
 import AttackCard from './Attack';
 import BattlegearCard from './Battlegear';
+import LocationCard from './Location';
 import { chaoticCardProps, statsType } from './CardBase';
 import Search from './Search';
 
@@ -224,8 +225,12 @@ const CardList = ({ cards, selected, ext, ...props }: listProps) => {
         />);
       // case "Creatures":
       //   return (<Creature card={card} key={i} {...props}/>);
-      // case "Locations":
+      case "Locations":
-      //   return (<Location card={card} key={i} {...props}/>);
+        return (<LocationCard key={card.gsx$name+card.gsx$set}
+          card={card as Location}
+          ext={(card.gsx$name === selected || ext)}
+          {...props}
+        />);
       // case "Mugic":
       //   return (<Mugic card={card} key={i} {...props}/>);
       default:

src/components/collection/types/Location.js

@@ -1,7 +1,7 @@
 import { inject, observer } from 'mobx-react';
 import React from 'react';
 
-import { Ability, FlavorText, InitiativeIcon, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets';
+import { Ability, FlavorText, Initiative, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets';
 import API from '../../SpreadsheetData';
 
 @inject((stores, props, context) => props) @observer
@@ -17,7 +17,7 @@ export default class Location extends React.Component {
           <Name name={card.gsx$name} />
           <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
           <span><LocationIcon /> Location{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span><br />
-          <InitiativeIcon initiative={card.gsx$initiative} />
+          <Initiative initiative={card.gsx$initiative} />
         </div>
         <div className="right">
           <Ability ability={card.gsx$ability} />
@@ -31,7 +31,7 @@ export default class Location extends React.Component {
         <div className="fullcard"><img src={API.cardImage(card)} /></div>
         <div className="right">
           <Name name={card.gsx$name} />
-          <InitiativeIcon initiative={card.gsx$initiative} />
+          <Initiative initiative={card.gsx$initiative} />
           <Ability ability={card.gsx$ability} />
           <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <FlavorText flavortext={card.gsx$flavortext} />

src/components/portal/Single/Location.js

@@ -2,7 +2,7 @@ import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
 import Single from './_base';
-import { PageNotFound, InitiativeIcon } from '../../Snippets';
+import { PageNotFound, Initiative } from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleLocation extends React.Component {
@@ -40,7 +40,7 @@ export default class SingleLocation extends React.Component {
           {card_data.gsx$initiative && (
             <div>
               <strong>Initiative: </strong>
-              <InitiativeIcon initiative={card_data.gsx$initiative} notitle="true"/>
+              <Initiative initiative={card_data.gsx$initiative} notitle="true"/>
             </div>
           )}
         </>}
@@ -65,7 +65,7 @@ export default class SingleLocation extends React.Component {
             {card_data.gsx$initiative && (
               <div>
                 <strong>Initiative: </strong>
-                <InitiativeIcon initiative={card_data.gsx$initiative} notitle="true"/>
+                <Initiative initiative={card_data.gsx$initiative} notitle="true"/>
               </div>
             )}
           </>}