oh my god OH my GOD i imported babel twice and that is the reason for…

… the misery but now it is fixed oh my fucking god

dungeons_on_demand.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, redirect, request, flash, session
+from flask import Flask, render_template, redirect, request, flash, session, jsonify
 from dungeon_model import connect_to_db, db, DMs, Games, Rooms, Players, Player_Actions, Monster_Actions, Monsters
 # from passlib.context import CryptContext
 import requests
@@ -74,14 +74,10 @@ def create_new_game():
 #     give it a name
 #     return to game list showing the new game available
 
-@app.route('/a', methods=['GET'])
-def ndakje():
-    return 'b'
-
 @app.route('/new_room', methods=['GET'])
 def new_room_info():
     """serves form about new room to get info from DM"""
-    return render_template("monsters.html")
+    return render_template("base.html")
 
 @app.route('/show_monsters', methods=['POST'])
 def create_new_room():
@@ -140,8 +136,8 @@ def pull_monster_json():
     """pulls a new list of monsters according to DM request and displays them"""
 
     URL = 'https://api.open5e.com/monsters/?challenge_rating='
-    diff = 3
-    num = 3
+    diff = '3'
+    num = '3'
     call = URL + diff
     response = requests.get(call)
     response_json = json.loads(response.text)
@@ -168,21 +164,22 @@ def pull_monster_json():
             monst_info['bonus'] = 0
         # speed returns a dict with multiple values so parse out
         # monsters usually don't have all speeds so set to zero if not there
-        monst_info['speed'] = test_monster['speed'].get('walk', 0)
-        monst_info['burrow'] = test_monster['speed'].get('burrow', 0)
-        monst_info['swim'] = test_monster['speed'].get('swim', 0)
-        monst_info['fly'] = test_monster['speed'].get('fly', 0)
-        monst_info['hover'] = test_monster['speed'].get('hover', False)
+        monst_info['speed'] = monster['speed'].get('walk', 0)
+        monst_info['burrow'] = monster['speed'].get('burrow', 0)
+        monst_info['swim'] = monster['speed'].get('swim', 0)
+        monst_info['fly'] = monster['speed'].get('fly', 0)
+        monst_info['hover'] = monster['speed'].get('hover', False)
         monst_info['str'] = monster['strength']
         monst_info['dex'] = monster['dexterity']
         monst_info['con'] = monster['constitution']
         monst_info['int'] = monster['intelligence']
         monst_info['wis'] = monster['wisdom']
         monst_info['cha'] = monster['charisma']
         monst_info['room_id'] = session.get('room_id')
-        db.session.add(instantiate_monster(monst_info))
+        # db.session.add(instantiate_monster(monst_info))
         final_monst_list.append(monst_info)
-    db.session.commit()
+    #db.session.commit()
+    print(final_monst_list)
 
     return jsonify(final_monst_list)
 

static/js/monsterList.jsx

@@ -6,16 +6,18 @@ class MonsterCard extends React.Component {
 				<h2 id="hp">HP: {this.props.hp} </h2>
                 <p>Initiative: {this.props.initiative}<br />
                 AC: {this.props.ac}<br />
-                Hit dice: {this.props.dice_num}d{this.props.dice_type} + {this.props.bonus}<br />
+                Hit dice: {this.props.dice_num}d{this.props.dice_type} + {this.props.bonus}</p>
                 <table>
-                    <tr>
-                        <td>STR: {this.props.str}</td><td>DEX: {this.props.dex}</td><td>CON: {this.props.con}</td>
-                    </tr>
-                    <tr>
-                        <td>INT: {this.props.int}</td><td>WIS: {this.props.wis}</td><td>CHA: {this.props.cha}</td>
-                    </tr>
+                    <tbody>
+                        <tr>
+                            <td>STR: {this.props.str}</td><td>DEX: {this.props.dex}</td><td>CON: {this.props.con}</td>
+                        </tr>
+                        <tr>
+                            <td>INT: {this.props.int}</td><td>WIS: {this.props.wis}</td><td>CHA: {this.props.cha}</td>
+                        </tr>
+                    </tbody>
                 </table>
-                Speed: {this.props.speed} Swim: {this.props.swim}, Fly: {this.props.fly}, Hover? {this.props.hover}<br />
+                <p>Speed: {this.props.speed} Swim: {this.props.swim}, Fly: {this.props.fly}, Hover? {this.props.hover}<br />
                 Size: {this.props.size}
                 </p>
 			</div>
@@ -33,21 +35,21 @@ class MonsterCardContainer extends React.Component {
 	}
 
 	componentDidMount() {
-        console.log("calling the monster api");
 		let response = fetch('/monster_test');
-		respone.then((res) => res.json()).then((data) => {
-			console.log(data)
-			makeMonsterCards(data)
+        console.log("calling the monster api");
+		response.then((res) => res.json()).then((data) => {
+			this.makeMonsterCards(data)
         })
 	}
 
 	makeMonsterCards(monsterData) {
+        console.log('makemonstercards and data', monsterData)
 		let monsterCards = [];
         console.log("starting the for loop");
-		for (const currentMonst of MonsterData) {
+		for (const currentMonst of monsterData) {
           monsterCards.push(
           	<MonsterCard
-          		key={currentMonst.monster_id}
+          		key={currentMonst.type}
           		monster_id={currentMonst.monster_id}
           	    type={currentMonst.type}
           		hp={currentMonst.hp}
@@ -71,20 +73,21 @@ class MonsterCardContainer extends React.Component {
           );
           console.log("new monster card created");
         }
-	    this.setState(monsterCards: monsterCards);
+        console.log("monster cards!", monsterCards);
+	    this.setState({ monsterCards: monsterCards });
 	}
 
-  render() {
+    render() {
 		if (this.state.monsterCards.length === 0) {
 			return (
 				<div> Loading ... </div>
 			);
 		}
-    return (
-      <div>
-        {this.state.monsterCards}
-      </div>
-    );
+        return (
+          <div>
+            {this.state.monsterCards}
+          </div>
+        );
   }
 }
 

templates/base.html

@@ -2,48 +2,29 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>{% block TITLE %}{% endblock %}</title>
-    <link rel="stylesheet"
-      href="/static/whatever.css">
-    <script
-      src="https://code.jquery.com/jquery-3.4.1.js"
+    <title>Dungeons on Demand</title>
+    <link rel="stylesheet" href="/static/whatever.css">
+    <script src="https://code.jquery.com/jquery-3.4.1.js"
       integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
       crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"
-      crossorigin></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js" crossorigin></script>
   </head>
 <body>
     <div id="game">
-        <div id="navbar">
-            navbar goes here
-        </div>
-        <div id="monster_container">
-            monsters go here
-        </div>
-        <div id="player_container">
-            players go here
-        </div>
-        <div id="statistics_container">
-            stats go here
-        </div>
-        <div id="initiative_tracker">
-            initiative goes here
-        </div>
+        <div id="monster_container"></div>
     </div>
-    <!-- master component -->
-    <!-- navbar component -->
-    <script src="/static/js/monsterList.jsx" type="text/jsx"></script>
-    <!-- player component -->
-    <!-- statistics component -->
-    <!-- initiative component -->
   <br>
   <br>
 <footer>
   Dungeons On Demand is a Yelling Viv Production, in cooperation with Hackbright Academy Labs. All rights reserved, all liabilities foisted on you, the person reading this. Goodnight, sweet prince, and a flight of angels sing thee to thy rest.
 </footer>
 </body>
+<!-- master component -->
+<!-- navbar component -->
+<script src="/static/js/monsterList.jsx" type="text/jsx"></script>
+<!-- player component -->
+<!-- statistics component -->
+<!-- initiative component -->
 </html>