Split app into multiple files and add routing

Needed to allow for multiple pages in same app.
follesoe · Apr 12, 2020 · eeab93e · eeab93e
1 parent 10a767c
commit eeab93e
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -34,7 +34,7 @@
       }
     </style>
   </head>
-  <body class="background-map">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,9 @@
 import React from 'react';
+import BattleGoalsDeck from './BattleGoalsDeck';
+import Card from './Card';
 import './App.css';
 
-class App extends React.Component {
+class ItemsApp extends React.Component {
   constructor(props) {
     super(props);
     this.state = { itemsDeckTo: 14 };
@@ -13,77 +15,20 @@ class App extends React.Component {
   }
   render() {
     return (
-      <div className="App">
-        <header className="m-8">
+      <div class="background-map h-screen">
+        <header>
           <label>
-            Available items: 
+            Available items:
             <input type="number" min="1" max="164" value={this.state.itemsDeckTo} onChange={this.handleChange} />
           </label>
         </header>
         <ItemsDeck to={this.state.itemsDeckTo} />
-        <BattleGoals />
+        <BattleGoalsDeck />
       </div>
     );
   }
 }
 
-class BattleGoals extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      deck: [],
-      shuffledDeck: [],
-      drawnDeck: []
-    };
-    this.drawCard = this.drawCard.bind(this);
-  }
-  componentDidMount() {
-    fetch(process.env.PUBLIC_URL + '/gloomhaven/data/battle-goals.js')
-      .then(res => res.json())
-      .then(
-        (result) => {
-          const deck = result.filter(c => c.name !== 'battlegoal-back');
-          this.setState({ 
-            deck: deck,
-            shuffledDeck: shuffleDeck(deck),
-            drawnDeck: []
-          });
-        },
-        (error) => {
-          console.error(error);
-        }
-      )
-  }
-  drawCard() {
-    const shuffledDeck = this.state.shuffledDeck.length > 0 ?
-      this.state.shuffledDeck : shuffleDeck(this.state.deck);
-
-    const drawnDeck = this.state.shuffledDeck.length > 0 ?
-      this.state.drawnDeck : [];
-
-    this.setState({
-      deck: this.state.deck,
-      drawnDeck: [shuffledDeck[0], ...drawnDeck],
-      shuffledDeck: [...shuffledDeck.slice(1)]
-    });
-  }
-  render() {
-    const drawnCards = this.state.drawnDeck.map((card) =>
-      <Card key={card.name} image={process.env.PUBLIC_URL + '/gloomhaven/images/' + card.image } name={card.name} />
-    );
-
-    return (
-      <div className="flex flex-wrap flex-row m-6">
-        <Card 
-          name="Draw Battle Card" 
-          onClick={this.drawCard}
-          image={process.env.PUBLIC_URL + '/gloomhaven/images/battle-goals/battlegoal-back.png' } />
-        {drawnCards}
-      </div>
-    )
-  }
-}
-
 class ItemsDeck extends React.Component {
   constructor(props) {
     super(props);
@@ -105,7 +50,7 @@ class ItemsDeck extends React.Component {
                 image: process.env.PUBLIC_URL + '/gloomhaven/images/' + card.image
               }
             });
-          this.setState({ 
+          this.setState({
             deck: cards
           });
         },
@@ -126,28 +71,4 @@ class ItemsDeck extends React.Component {
   }
 }
 
-function Card(props) {
-  function handleClick(e) {
-    e.preventDefault();
-    if (props.onClick) {
-      props.onClick(props.name);
-    }
-  }
-  return (
-    <div className="m-2 Card" onClick={handleClick}>
-      <img className="Card-face" src={props.image} alt={props.name} />
-    </div>
-  );
-}
-
-// Fisher–Yates shuffle
-function shuffleDeck(deck) {
-  var newDeck = [...deck];
-    for (let i = newDeck.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [newDeck[i], newDeck[j]] = [newDeck[j], newDeck[i]];
-    }
-  return newDeck;
-}
-
-export default App;
+export default ItemsApp;
diff --git a/src/AttackModifierDeck.js b/src/AttackModifierDeck.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import BattleGoalsDeck from './BattleGoalsDeck';
+
+class AttackModifierDeck extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div className="bg-greenscreen h-screen">
+        <BattleGoalsDeck />
+      </div>
+      )
+  }
+}
+
+export default AttackModifierDeck;
diff --git a/src/BattleGoalsDeck.js b/src/BattleGoalsDeck.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import Card from './Card';
+import './App.css';
+
+class BattleGoalsDeck extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      deck: [],
+      shuffledDeck: [],
+      drawnDeck: []
+    };
+    this.drawCard = this.drawCard.bind(this);
+  }
+  componentDidMount() {
+    fetch(process.env.PUBLIC_URL + '/gloomhaven/data/battle-goals.js')
+      .then(res => res.json())
+      .then(
+        (result) => {
+          const deck = result.filter(c => c.name !== 'battlegoal-back');
+          this.setState({
+            deck: deck,
+            shuffledDeck: shuffleDeck(deck),
+            drawnDeck: []
+          });
+        },
+        (error) => {
+          console.error(error);
+        }
+      )
+  }
+  drawCard() {
+    const shuffledDeck = this.state.shuffledDeck.length > 0 ?
+      this.state.shuffledDeck : shuffleDeck(this.state.deck);
+
+    const drawnDeck = this.state.shuffledDeck.length > 0 ?
+      this.state.drawnDeck : [];
+
+    this.setState({
+      deck: this.state.deck,
+      drawnDeck: [shuffledDeck[0], ...drawnDeck],
+      shuffledDeck: [...shuffledDeck.slice(1)]
+    });
+  }
+  render() {
+    const drawnCards = this.state.drawnDeck.map((card) =>
+      <Card key={card.name} image={process.env.PUBLIC_URL + '/gloomhaven/images/' + card.image } name={card.name} />
+    );
+
+    return (
+      <div className="flex flex-wrap flex-row">
+        <Card
+          name="Draw Battle Card"
+          onClick={this.drawCard}
+          image={process.env.PUBLIC_URL + '/gloomhaven/images/battle-goals/battlegoal-back.png' } />
+        {drawnCards}
+      </div>
+    )
+  }
+}
+
+// Fisher–Yates shuffle
+function shuffleDeck(deck) {
+  var newDeck = [...deck];
+    for (let i = newDeck.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [newDeck[i], newDeck[j]] = [newDeck[j], newDeck[i]];
+    }
+  return newDeck;
+}
+
+export default BattleGoalsDeck;