Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-04-20 23:57:20 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

improved minimalized gui

Browse Source
This commit is contained in:
Daniel 2018-12-22 21:20:12 -05:00
parent 1029c34b8d
commit be6c94ad05
4 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/play/index.js
View File

@ -40,8 +40,11 @@ export default class Play extends React.Component {
return (
<div className="play">
<div className="gui">
<div className="location"><img src="https://drive.google.com/uc?id=0B6oyUfwoM3u1SHJ5ejJPTk85THM" /></div>
<div className="card-preview">
<div className="location"><img src="https://drive.google.com/uc?id=0B6oyUfwoM3u1SHJ5ejJPTk85THM" /></div>
</div>
<div className="hand">
<span className="card_name">Hand</span>
<div className="attacks">
<div></div>
<div></div>
@ -57,7 +60,7 @@ export default class Play extends React.Component {
<div></div>
</div>
</div>
<div className="discard">
<div className="decks">
<div className="general">
<span className="card_name">General Discard</span>
<img></img>
@ -66,14 +69,20 @@ export default class Play extends React.Component {
<span className="card_name">Attack Discard</span>
<img></img>
</div>
<div className="draw">
<span className="card_name">Attack Deck</span>
<img></img>
</div>
</div>
<div className="right-gui">
<div className="left-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>
<div className="right-gui">
<div className="chat">
<span>Chatting with Opponent</span>
</div>

9
src/scss/play/battleboard.scss
View File

@ -10,10 +10,11 @@
.field {
width: 100%;
// width: calc(100% - #{$burst_width});
height: calc(#{$view_height} - 100px);
// height: calc(#{$view_height} - 100px);
height: $view_height;
position: absolute;
margin-right: $burst_width;
top: -80px;
top: -60px;
left: $burst_width;
> div {
height: 100%;
@ -147,7 +148,7 @@
}
.r6 {
padding-right: calc(#{$margin_offset} + #{$burst_width});
padding-right: $margin_offset;
left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*5);
.space:first-child{
top: calc(50% - #{$card_height}/2);

65
src/scss/play/gui.scss
View File

@ -14,6 +14,39 @@ $turn_action_height: 30px;
z-index: 20;
}
.left-gui {
position: absolute;
width: $burst_width;
height: 100%;
left: 0;
top: calc(250px / 2 + 5px);
>* {
z-index: 20;
position: relative;
float: left;
border-right: 1px solid gray;
background-color: #555e6fd1;
}
}
.burst {
height: calc(100% - #{$turn_action_height} - 120px - calc(250px / 2) - 5px);
width: $burst_width;
overflow-y: auto;
border-top: 1px solid gray;
span {
color: darkgray;
text-shadow: 1px 1px black;
}
}
.turn-actions {
height: $turn_action_height;
width: $burst_width;
}
.right-gui {
position: absolute;
width: $chat_width;
@ -30,22 +63,6 @@ $turn_action_height: 30px;
}
}
.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;
@ -60,6 +77,7 @@ $turn_action_height: 30px;
height: $chat_height;
width: $chat_width;
border-top: 1px solid gray;
display: none;
span {
color: darkgray;
@ -75,7 +93,7 @@ $turn_action_height: 30px;
position: absolute;
bottom: 0;
left: 0;
height: 240px;
height: 120px;
width: calc(100% - #{$chat_width} - 100px);
background-color: #555e6fd1;
border-top: 1px solid gray;
@ -87,13 +105,13 @@ $turn_action_height: 30px;
}
}
.discard {
.decks {
position: absolute;
bottom: 0;
right: $chat_width;
right: 0;
border-top: 1px solid gray;
border-left: 1px solid gray;
height: 240px;
height: 120px;
background-color: #555e6fd1;
.card_name {
@ -101,11 +119,9 @@ $turn_action_height: 30px;
}
div {
// float: left;
float: left;
width: 100px;
height: 120px;
}
div:first-child {
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
@ -113,10 +129,11 @@ $turn_action_height: 30px;
.location {
position: absolute;
left: 20px;
left: 25px;
top: -20px;
width: calc(250px / 2);
height: calc(350px / 2);
z-index: 21;
&:hover {
left: 50px;

4
src/scss/play/shared.scss
View File

@ -4,6 +4,6 @@
$margin_offset: 10px;
$card_width: calc(350px / 2);
$card_height: calc(250px / 2);
$view_height: 700px;
$view_height: 600px;
$burst_width: 150px;
$burst_width: 120px;