From 1029c34b8d145214763eb3fec6aa19d71a4fc710 Mon Sep 17 00:00:00 2001
From: Daniel <dds2130@rit.edu>
Date: Mon, 17 Dec 2018 01:48:14 -0500
Subject: [PATCH] more gui elements

---
 src/components/index.js                       |   2 +-
 src/components/play/Board.js                  |  23 ++-
 src/components/play/index.js                  |  43 +++++-
 src/scss/{play.scss => play/battleboard.scss} |  46 ++----
 src/scss/play/gui.scss                        | 141 ++++++++++++++++++
 src/scss/play/play.scss                       |   6 +
 src/scss/play/shared.scss                     |   9 ++
 7 files changed, 231 insertions(+), 39 deletions(-)
 rename src/scss/{play.scss => play/battleboard.scss} (82%)
 create mode 100644 src/scss/play/gui.scss
 create mode 100644 src/scss/play/play.scss
 create mode 100644 src/scss/play/shared.scss

diff --git a/src/components/index.js b/src/components/index.js
index 837c976..0fe1a8c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -65,7 +65,7 @@ function Base(props) {
                       <li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
                       <li id="unity-nav6" className={language}><a href="http://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
                       <li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
-                      <li id="unity-nav8" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82"><span>Play</span></a></li>
+                      <li id="unity-nav8" className={language}><Link to={`/play/`}><span>Play</span></Link></li>
                       <li id="unity-nav9" className={language}></li>
                     </ul>
                     <ul id="unityETC-sprite" className={language}>
diff --git a/src/components/play/Board.js b/src/components/play/Board.js
index b78808a..53a31af 100644
--- a/src/components/play/Board.js
+++ b/src/components/play/Board.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import API from '../SpreadsheetData';
+import '../../scss/play/battleboard.scss';
 
 // array of array of accesible spaces per swift
 const adjacency_6 = {
@@ -47,6 +48,8 @@ export default class Board extends React.Component {
 		this.spaces[4].battlegear[0].data = API.cards.battlegear.findOne({'gsx$name': {'$regex': new RegExp("Maxxor's Torch", 'i')}});
 		this.spaces[1].creatures[0].data = API.cards.creatures.findOne({'gsx$name': {'$regex': new RegExp("Staluk", 'i')}});
 		this.spaces[1].battlegear[0].data = API.cards.battlegear.findOne({'gsx$name': {'$regex': new RegExp("Vlaric Shard", 'i')}});
+		this.spaces[0].creatures[0].data = API.cards.creatures.findOne({'gsx$name': {'$regex': new RegExp("Vidav", 'i')}});
+		this.spaces[2].creatures[0].data = API.cards.creatures.findOne({'gsx$name': {'$regex': new RegExp("Dractyl", 'i')}});
 		for (let i = 0; i < 6; i++) {
 			this.spaces[i].creatures[0].controlled = true;
 			this.spaces[i].battlegear[0].controlled = true;
@@ -122,18 +125,30 @@ export default class Board extends React.Component {
 		// add a card to a space
 		case "add": {
 			// action: {space, type, card}
-			this.spaces[action.space][action.type] = action.card;
+			this.spaces[action.space][action.type].push(action.card);
 			break;
 		}
 
 		// remove a specific card at a space
 		case "remove": {
+			// action: {space, type, index}
+			if (index == 0) {
+				this.space[action.space][action.type][0] = this.empty_card(action.type);
+			}
+			else if (index > 0) {
+				this.space[action.space][action.type].splice(index, 1);
+			}
+			break;
+		}
+
+		case "removeall": {
 			// action: {space, type}
-			this.space[action.space][action.type] = this.empty_card(action.type);
+			this.space[action.space][action.type] = [this.empty_card(action.type)];
 			break;
 		}
 
 		// this is a short hand for moving a creature and its battlegear
+		// as part of the movement operation
 		case "movement": {
 			// action: {src, dest}
 			let src = action.src;
@@ -257,7 +272,7 @@ export default class Board extends React.Component {
 
 	render() {
 		return(
-			<div className="battleboard">
+			<div className="battleboard"><div className="field">
 				<div className="r1">
 					<div className="space">
 						<Space id={"c0"} cards={this.spaces[0].creatures} selectCard={this.selectCard} />
@@ -318,7 +333,7 @@ export default class Board extends React.Component {
 						<Space id={"b11"} cards={this.spaces[11].battlegear} selectCard={this.selectCard} />
 					</div>
 				</div>
-			</div>
+			</div></div>
 		);
 	}
 }
diff --git a/src/components/play/index.js b/src/components/play/index.js
index 96079ae..d532daa 100644
--- a/src/components/play/index.js
+++ b/src/components/play/index.js
@@ -4,7 +4,8 @@ import {observer, inject} from 'mobx-react';
 import API from '../SpreadsheetData';
 import {Loading} from '../Snippets';
 import Board from './Board.js'
-import '../../scss/play.scss';
+import '../../scss/play/play.scss';
+import '../../scss/play/gui.scss';
 
 @inject((stores, props, context) => props) @observer
 export default class Play extends React.Component {
@@ -16,6 +17,7 @@ export default class Play extends React.Component {
 
   handleChange() {
     // When handling movement, flip the card's owner before sending network
+    // Flip the board's numbers
   }
 
   componentDidUpdate() {
@@ -38,7 +40,44 @@ export default class Play extends React.Component {
     return (
       <div className="play">
         <div className="gui">
-          <div className="endturn"><button onClick={this.endTurn.bind(this)}>End Turn</button></div>
+          <div className="location"><img src="https://drive.google.com/uc?id=0B6oyUfwoM3u1SHJ5ejJPTk85THM" /></div>
+          <div className="hand">
+            <div className="attacks">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+            <div className="mugic">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+          <div className="discard">
+            <div className="general">
+              <span className="card_name">General Discard</span>
+              <img></img>
+            </div>
+            <div className="attack">
+              <span className="card_name">Attack Discard</span>
+              <img></img>
+            </div>
+          </div>
+          <div className="right-gui">
+            <div className="burst">
+              <span>No cards on burst</span>
+            </div>
+            <div className="turn-actions">
+              <div className="endturn"><button onClick={this.endTurn.bind(this)}>Pass</button></div>
+            </div>
+            <div className="chat">
+              <span>Chatting with Opponent</span>
+            </div>
+          </div>
         </div>
         <Board 
           submitChange={this.handleChange.bind(this)} 
diff --git a/src/scss/play.scss b/src/scss/play/battleboard.scss
similarity index 82%
rename from src/scss/play.scss
rename to src/scss/play/battleboard.scss
index efd3cbb..a51cff4 100644
--- a/src/scss/play.scss
+++ b/src/scss/play/battleboard.scss
@@ -1,44 +1,26 @@
-@import 'base';
-
-.play {
-	$margin_offset: 10px;
-	$card_width: calc(350px / 2);
-	$card_height: calc(250px / 2);
-	$view_height: 600px;
+@import 'shared';
 
+.battleboard {
+	position: absolute;
+	overflow-x: auto;
+	display: block;
+	width: 100%;
 	height: $view_height;
-	position: relative;
 
-	.gui {
-		position: absolute;
+	.field {
 		width: 100%;
-		height: calc(#{$view_height} - 20px);
-		// all children are above field
-		>* {
-			z-index: 20;
-		}
-	}
-
-	.endturn {
+		// width: calc(100% - #{$burst_width});
+		height: calc(#{$view_height} - 100px);
 		position: absolute;
-		border: 1px solid red;
-		border-radius: 5px;
-		right: 0%;
-		bottom: 0%;
-	}
-
-	.battleboard {
-		position: absolute;
-		overflow-x: auto;
-		display: block;
-		width: 100%;
-		height: $view_height;
+		margin-right: $burst_width;
+		top: -80px;
 
 		> div {
 			height: 100%;
 			width: calc(#{$card_width} + 20px);
 			position: absolute;
 		}
+
 	}
 
 	.space {
@@ -52,7 +34,7 @@
 			// border: 1px solid #f41111;
 			box-shadow: 5px 5px 5px red, -5px 5px 5px red, 5px -5px 5px red, -5px -5px 5px red;
 			border-radius: 10px;
-			z-index: 11;
+			z-index: 21;
 		}
 
 		img {
@@ -165,7 +147,7 @@
 	}
 
 	.r6 {
-		padding-right: $margin_offset;
+		padding-right: calc(#{$margin_offset} + #{$burst_width});
 		left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*5);
 		.space:first-child{
 			top: calc(50% - #{$card_height}/2);
diff --git a/src/scss/play/gui.scss b/src/scss/play/gui.scss
new file mode 100644
index 0000000..f647dd4
--- /dev/null
+++ b/src/scss/play/gui.scss
@@ -0,0 +1,141 @@
+@import 'shared';
+
+
+$chat_height: 240px;
+$chat_width: 250px;
+$turn_action_height: 30px;
+
+.gui {
+	position: absolute;
+	width: 100%;
+	height: calc(#{$view_height} - 20px);
+	// all children are above field
+	>* {
+		z-index: 20;
+	}
+
+	.right-gui {
+		position: absolute;
+		width: $chat_width;
+		height: 100%;
+		right: 0;
+		z-index: unset;// prevents blocking card hover
+
+		>* {
+			z-index: 20;
+			position: relative;
+			float: right;
+			border-left: 1px solid gray;
+			background-color: #555e6fd1;
+		}
+	}
+
+	.burst {
+		height: calc(100% - #{$turn_action_height} - #{$chat_height});
+		width: $burst_width;
+		overflow-y: auto;
+
+		span {
+			color: darkgray;
+			text-shadow: 1px 1px black;
+		}
+	}
+
+	.turn-actions {
+		height: $turn_action_height;
+		width: $burst_width;
+	}
+
+	.endturn {
+		border: 1px solid red;
+		border-radius: 5px;
+		float: right;
+
+		:hover {
+			background-color: gray;
+		}
+	}
+
+	.chat {
+		height: $chat_height;
+		width: $chat_width;
+		border-top: 1px solid gray;
+
+		span {
+			color: darkgray;
+			text-shadow: 1px 1px black;
+			display: block;
+	    bottom: 0;
+	    float: left;
+	    position: absolute;
+		}
+	}
+
+	.hand {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		height: 240px;
+		width: calc(100% - #{$chat_width} - 100px);
+		background-color: #555e6fd1;
+		border-top: 1px solid gray;
+
+		.attacks div, .mugic div {
+			float: left;
+			width: 100px;
+			height: 120px;
+		}
+	}
+
+	.discard {
+		position: absolute;
+		bottom: 0;
+		right: $chat_width;
+		border-top: 1px solid gray;
+		border-left: 1px solid gray;
+		height: 240px;
+		background-color: #555e6fd1;
+
+		.card_name {
+			display: block;
+		}
+
+		div {
+			// float: left;
+			width: 100px;
+			height: 120px;
+		}
+		div:first-child {
+			border-right: 1px solid gray;
+			border-bottom: 1px solid gray;
+		}
+	}
+
+	.location {
+		position: absolute;
+		left: 20px;
+		top: -20px;
+		width: calc(250px / 2);
+		height: calc(350px / 2);
+
+		&:hover {
+			left: 50px;
+			top: -45px;
+			width: 250px;
+			height: 350px;
+		}
+		img {
+			transform: rotate(90deg);
+			max-height: 100%;
+			max-width: 100%;
+		}
+		-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
+		-o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
+		-o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
+		-moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
+		-moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
+		transition-property: width,height,transform,background,font-size,opacity,top,left;
+		transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
+	}
+
+}
diff --git a/src/scss/play/play.scss b/src/scss/play/play.scss
new file mode 100644
index 0000000..0151792
--- /dev/null
+++ b/src/scss/play/play.scss
@@ -0,0 +1,6 @@
+@import 'shared';
+
+.play {
+	height: $view_height;
+	position: relative;
+}
diff --git a/src/scss/play/shared.scss b/src/scss/play/shared.scss
new file mode 100644
index 0000000..d3126b2
--- /dev/null
+++ b/src/scss/play/shared.scss
@@ -0,0 +1,9 @@
+@import '../base';
+
+// Shared Variables
+$margin_offset: 10px;
+$card_width: calc(350px / 2);
+$card_height: calc(250px / 2);
+$view_height: 700px;
+
+$burst_width: 150px;