fix lint errors on ts/scss

src/components/_mobile/collection/Attack.tsx

@@ -1,10 +1,11 @@
 import { Typography } from '@mui/material';
 import React from 'react';
+
+import { CardBase, CardComponent, Flavor, Unique, Rarity } from './CardBase';
 import { Attack } from "../../common/definitions";
 import { AttackIcon, ElementIcon, Name } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Flavor, Unique, Rarity } from './CardBase';
 
 const AttackCard: CardBase<Attack> = (props) => {
   const { card } = props;

src/components/_mobile/collection/Battlegear.tsx

@@ -1,10 +1,11 @@
 import { Typography } from '@mui/material';
 import React from 'react';
-import { BattlegearIcon, Name } from '../../Snippets';
+
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from './CardBase';
 import { Battlegear } from '../../common/definitions';
+import { BattlegearIcon, Name } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Unique, Flavor, Rarity } from './CardBase';
 
 const BattlegearCard: CardBase<Battlegear> = (props) => {
   const { card } = props;

src/components/_mobile/collection/Creature.tsx

@@ -1,10 +1,11 @@
 import { Typography, styled } from '@mui/material';
 import React from 'react';
+
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from "./CardBase";
 import { Creature } from "../../common/definitions";
 import { Name, TribeIcon, MugicIcon, ElementIcon, DisciplineIcon } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Unique, Flavor, Rarity } from "./CardBase";
 
 const TribeLine = ({ card }: {card: Creature}) => {
   let types = card.gsx$types;

src/components/_mobile/collection/Location.tsx

@@ -1,10 +1,11 @@
 import { Typography } from '@mui/material';
 import React from 'react';
+
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from './CardBase';
 import { Location } from '../../common/definitions';
 import { InitiativeIcon, LocationIcon, Name } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Unique, Flavor, Rarity } from './CardBase';
 
 const LocationCard: CardBase<Location> = (props) => {
   const { card } = props;

src/components/_mobile/collection/Mugic.tsx

@@ -1,10 +1,11 @@
 import { Typography } from "@mui/material";
 import React from "react";
+
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from "./CardBase";
 import { Mugic } from "../../common/definitions";
 import { Name, TribeIcon, MugicIcon } from "../../Snippets";
 import { abilityText } from "../../Snippets/abilityText";
 import { uniqueText } from "../../Snippets/uniqueText";
-import { CardBase, CardComponent, Unique, Flavor, Rarity } from "./CardBase";
 
 
 const MugicCounter = ({ card }: { card: Mugic }) => {

src/components/collection/collection.scss

@@ -338,13 +338,13 @@
   }
 
   .entries {
+    text-align: left;
+    width: 100%;
 
     input[type="button"] {
       margin: 0 0 2% 1%;
     }
 
-    text-align: left;
-    width: 100%;
   }
 
   .list-nav-top {

src/components/entercode/EnterTheCode.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Interactive } from 'react-interactive';
-import API from '../SpreadsheetData';
-import { Loading } from '../Snippets';
-import style from '../../styles/style';
 import useDigitInput from 'react-digit-input';
+import { Interactive } from 'react-interactive';
+import { Link } from 'react-router-dom';
+
+import style from '../../styles/style';
+import { Loading } from '../Snippets';
+import API from '../SpreadsheetData';
+
 
 const s = Object.create(style);
 s.input = {

src/components/entercode/PackSimulator.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import { Interactive } from 'react-interactive';
+import { Link } from 'react-router-dom';
+
 import { setupDB, generate, blankCard } from "./generate";
-import API from '../SpreadsheetData';
-import { Loading } from '../Snippets';
 import s from '../../styles/style';
+import { Loading } from '../Snippets';
+import API from '../SpreadsheetData';
 
 export default function PackSimulator () {
   const [loaded, setLoaded] = useState(false);

src/components/mugicplayer/mugicparser.ts

@@ -1,17 +1,17 @@
 export class Note {
-    pitch: string;
-    octave: number;
-    time: number;
-    duration: number;
-    velocity: number;
+  pitch: string;
+  octave: number;
+  time: number;
+  duration: number;
+  velocity: number;
 
-    constructor(duration: number, time: number, value: {pitch: string, octave: number}, velocity?: number) {
-      this.duration = duration;
-      this.time = time;
-      this.pitch = value.pitch;
-      this.octave = value.octave;
-      if (velocity) this.velocity = velocity;
-    }
+  constructor(duration: number, time: number, value: {pitch: string, octave: number}, velocity?: number) {
+    this.duration = duration;
+    this.time = time;
+    this.pitch = value.pitch;
+    this.octave = value.octave;
+    if (velocity) this.velocity = velocity;
+  }
     
 }
 

src/components/mugicplayer/mugicplayer.ts

@@ -30,65 +30,65 @@ class Note_Value extends Note {
 }
 
 export class MugicPlayer {
-    private static instance: MugicPlayer;
-    private synth: Synth;
-    private part: Part;
+  private static instance: MugicPlayer;
+  private synth: Synth;
+  private part: Part;
 
-    // Singleton
-    static getInstance() {
-      if (!MugicPlayer.instance) MugicPlayer.instance = new MugicPlayer();
-      return MugicPlayer.instance;
-    }
+  // Singleton
+  static getInstance() {
+    if (!MugicPlayer.instance) MugicPlayer.instance = new MugicPlayer();
+    return MugicPlayer.instance;
+  }
 
-    constructor() {
-      const options = {
-        frequency: 440,
-        oscillator: {
-          type: "sine" as any
-        },
-        envelope: {
-          attack: 0.40,
-          decay: 0.10,
-          release: 0.5,
-          sustain: 1,
-          attackCurve: "cosine" as EnvelopeCurve,
-          releaseCurve: "exponential" as EnvelopeCurve,
-          decayCurve: "exponential" as BasicEnvelopeCurve
-        },
-        pitchDecay: 0.05
-      };
-      this.synth = new Synth(options).toDestination();
-      Transport.bpm.value = 140;
-    }
+  constructor() {
+    const options = {
+      frequency: 440,
+      oscillator: {
+        type: "sine" as any
+      },
+      envelope: {
+        attack: 0.40,
+        decay: 0.10,
+        release: 0.5,
+        sustain: 1,
+        attackCurve: "cosine" as EnvelopeCurve,
+        releaseCurve: "exponential" as EnvelopeCurve,
+        decayCurve: "exponential" as BasicEnvelopeCurve
+      },
+      pitchDecay: 0.05
+    };
+    this.synth = new Synth(options).toDestination();
+    Transport.bpm.value = 140;
+  }
 
-    /**
+  /**
      * Composes and plays a tune parsed from the Mugic entry
      * @input the string of Mugic notes
      */
-    // Example: Canon of Casuality
-    // 2Eb 2F 2D   2G 2Bb 1A   3D
-    //     up down up up  down up
-    play(input: string) {
-      Transport.stop();
-      if (this.part) this.part.dispose();
+  // Example: Canon of Casuality
+  // 2Eb 2F 2D   2G 2Bb 1A   3D
+  //     up down up up  down up
+  play(input: string) {
+    Transport.stop();
+    if (this.part) this.part.dispose();
 
-      try {
-        const tune = parseTune(input).map(note => new Note_Value(note));
-        this.part = new Part(
-          (time, val) => {
-            this.synth.triggerAttackRelease(val.pitch, val.duration, time, val.velocity);
-          },
-          tune.map((n) => n.value)
-        ).start();
+    try {
+      const tune = parseTune(input).map(note => new Note_Value(note));
+      this.part = new Part(
+        (time, val) => {
+          this.synth.triggerAttackRelease(val.pitch, val.duration, time, val.velocity);
+        },
+        tune.map((n) => n.value)
+      ).start();
     
-        Transport.start();
-      }
-      catch (error) {
-        console.log(error);
-        // TODO show user the error
-        return;
-      }
-
+      Transport.start();
+    }
+    catch (error) {
+      console.log(error);
+      // TODO show user the error
+      return;
     }
 
+  }
+
 }

src/components/mugicplayer/playbutton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { debounced } from '../debounce';
+
 import { MugicPlayer } from './mugicplayer';
+import { debounced } from '../debounce';
 const player = MugicPlayer.getInstance();
 
 export default (props: any) => {

src/components/portal/portal.scss

@@ -297,9 +297,6 @@
 
   /* The Modal (background) */
   .modal {
-    &.hidden {
-      display: none;
-    }
     position: fixed; /* Stay in place */
     z-index: 10; /* Sit on top */
     padding-top: 50px;
@@ -310,6 +307,10 @@
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+
+    &.hidden {
+      display: none;
+    }
   }
   
   /* Modal Content (image) */