Roe-bit · Roe-bit · May 12, 2020 · May 12, 2020 · May 13, 2020 · May 14, 2020
diff --git a/Specs.MD b/Specs.MD
@@ -1,6 +1,6 @@
 ## Mech
 ```
--> HAS: Sprites: 
+-> HAS: Sprites:
 	-> Core
 	 -> Cockpit
 	   -> Hardpoint
@@ -76,7 +76,7 @@ Cycle Battery
 ## Enemy:
 ```
 ->HAS: ID
-->HAS: Name 
+->HAS: Name
 ->HAS: ATK, DEF, Shield, Durability per-part
 ->CAN: set INTENT by making primitive decisions based on stats and RNG
 ->HAS: 1-4 usable cards.
@@ -94,7 +94,7 @@ ALL Cards
 ```
 
 Part:
-->HAS: HP, CAP, ATK, Durability	
+->HAS: HP, CAP, ATK, Durability
 ->HAS: PV Cost
 ->CAN: Open up, close off, and add properties to INTENTs.
 ->MAGNITUDE:
@@ -116,14 +116,14 @@ Stretch Intents:
 ->Move further away from or closer to the enemy.
 
 
-Hinderances - 
+Hinderances -
 * Corrosion: Equipment is "Poisoned"
 * Mollification: Equipment's material is cheapened, attacks do more to affected equipment
 * Malfunction: One piece of Equipment is unusable
 * Concussion: Entire turn is missed
 * Flashed: Intent is chosen at random this turn
 
-Enhancements - 
+Enhancements -
 * Nano-implantation: Nanobots repair the equip
 * Tempering: Defense up
 * Target Tracking: Temporary percentage chance for critical hits
@@ -135,14 +135,14 @@ Enhancements -
 -> CAN: Move cards between decks, based on ID
 -> CAN: Find card based on ID
 -> CAN: Find card based on Position in Array
--> CAN: Damage Shields, wear out Durability on Parts, change INTENTIONS temporarily or permanently, 
+-> CAN: Damage Shields, wear out Durability on Parts, change INTENTIONS temporarily or permanently,
 -> CAN: Affect all stats, whether on a per-turn basis or a single time.
 
 
 Software:
 -> HAS: Type and Magnitude
 -> CAN: Move cards between decks, based on ID and position in deck (Going either direction through any pile, like first second third forward or backward)
--> CAN: 
+-> CAN:
 Enemies, depending on what kind of enemy they are, CAN have 1-4 cards.
 For the MVP, the initial enemy will have 2 of them and an otherwise stock frame.
 -> CAN: Multiply and/or divide stats for the duration of the fight.
@@ -157,5 +157,5 @@ Scene Stretch
 
 Combat loop:
 Player plays cards to bring out parts, sets intent per-part, then ends turn.
-Intents play out one by one, starting with defenses, then utilities, then attacks in that order until one or the other is dead. Generally this game will be organized in duels. 
+Intents play out one by one, starting with defenses, then utilities, then attacks in that order until one or the other is dead. Generally this game will be organized in duels.
 At the end of combat the player may choose one part or software to take from the enemy's mech.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "webpack": "4.19.1"
   },
   "devDependencies": {
+    "@shopify/draggable": "^1.0.0-beta.8",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.3",
     "babel-preset-es2015": "^6.24.1",

diff --git a/src/img/card-que.png b/src/img/card-que.png
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,7 @@
 
     <meta charset="utf-8"/>
 		<title>test</title>
-
+		<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/plugins.js"></script>
 	</head>
 	<body>
 		<div class="container">
@@ -24,6 +24,36 @@ <h1>H.O.W.I.E</h1>
 				<img src="./img/core.png" id="core">
 				<img src="./img/legs.png" id="legs">
 			</div>
+			<div class="row">
+				<div class="col-md-2">
+					<button type="button" class="btn btn-primary" id="attack">Start Attack</button>
+				</div>
+				<div class="col-md-2">
+					<div class="cards">
+
+					</div>
+				</div>
+				<div class="col-md-2">
+					<div class="cards">
+
+					</div>
+				</div>
+				<div class="col-md-2">
+					<div class="cards">
+
+					</div>
+				</div>
+				<div class="col-md-2">
+					<div class="cards">
+
+					</div>
+				</div>
+				<div class="col-md-2">
+					<div class="cards">
+
+					</div>
+				</div>
+			</div>
 		</div>
 		<div class="output">
 		</div>

diff --git a/src/main.js b/src/main.js
@@ -4,13 +4,16 @@ import { Game } from './Models/Game';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles.css';
 import png from './img/mainBackground.png';
+import { Draggable, Sortable, Plugins } from '@shopify/draggable';
 
 $(document).ready(function() {
 
   $("#start-button").click(function () {
     $('.jumbotron').slideUp();
     $('#start-button').slideUp();
     $('.parent').show();
+    $('#attack').show();
+    $('.cards').show();
   });
 
   // let data = service.Acquire();

diff --git a/src/styles.css b/src/styles.css
@@ -14,6 +14,10 @@ body {
 	display: none;
 }
 
+#attack {
+	display: none;
+}
+
 #cockpit{
 	display: block;
 	margin-top: 20px;
@@ -57,3 +61,11 @@ body {
 	margin-right: auto;
 	width: 60px;
 }
+
+.cards {
+	display: none;
+	border: 3px solid blue;
+	padding: 50px;
+	margin-left: 15px;
+	margin-right: 15px;
+}