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

more gui elements

Browse Source
This commit is contained in:
Daniel
2018-12-17 01:48:14 -05:00
parent d7457588eb
commit 1029c34b8d
7 changed files with 231 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/index.js
View File

@@ -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}>

23
src/components/play/Board.js
View File

@@ -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>
);
}
}

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

@@ -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)}

46
src/scss/play.scss → src/scss/play/battleboard.scss
View File

@@ -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);

141
src/scss/play/gui.scss Normal file
View File

@@ -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;
}
}

6
src/scss/play/play.scss Normal file
View File

@@ -0,0 +1,6 @@
@import 'shared';
.play {
height: $view_height;
position: relative;
}

9
src/scss/play/shared.scss Normal file
View File

@@ -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;