breaking shit on purpose
This commit is contained in:
ntr
parent
c0ea1a40a7
commit
6f199b98f0
@ -1,5 +1,6 @@
|
||||
require('./styles.css');
|
||||
require('./instance.css');
|
||||
require('./game.css');
|
||||
|
||||
// kick it off
|
||||
require('./src/main');
|
||||
|
||||
@ -4,34 +4,16 @@
|
||||
|
||||
.instance {
|
||||
height: 100%;
|
||||
/*display: grid;*/
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
grid-template-areas:
|
||||
"n n n n n n n n n n n n"
|
||||
"v v v v v v v v v i i i"
|
||||
"v v v v v v v v v i i i"
|
||||
"v v v v v v v v v i i i"
|
||||
"v v v v v v v v v i i i"
|
||||
"e e e e e e e e e e e e"
|
||||
"e e e e e e e e e e e e"
|
||||
"c c c c c c c c c c c c"
|
||||
"c c c c c c c c c c c c"
|
||||
"c c c c c c c c c c c c"
|
||||
"c c c c c c c c c c c c"
|
||||
"c c c c c c c c c c c c"
|
||||
"c c c c c c c c c c c c";
|
||||
}
|
||||
|
||||
.instance-hdr {
|
||||
grid-area: n;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.instance-info {
|
||||
flex: 0 0 50%;
|
||||
flex: 0 1 50%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
@ -45,7 +27,6 @@
|
||||
}
|
||||
|
||||
.vbox {
|
||||
grid-area: v;
|
||||
display: flex;
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
@ -169,12 +150,9 @@
|
||||
/* CRYP BOX */
|
||||
|
||||
.instance-cryp-list {
|
||||
grid-area: c;
|
||||
flex: 1 1 auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
min-width: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.instance-cryp {
|
||||
@ -318,6 +296,8 @@
|
||||
.instance-equip {
|
||||
grid-area: e;
|
||||
display: flex;
|
||||
min-height: 20%;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.instance-equip .items {
|
||||
|
||||
@ -53,19 +53,6 @@ function GamePanel(props) {
|
||||
|
||||
const header = (
|
||||
<div className="instance-hdr">
|
||||
<button
|
||||
className="game-btn instance-btn instance-ui-btn left"
|
||||
onClick={backClick}>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
className="game-btn instance-btn instance-ui-btn left"
|
||||
onClick={() => toggleLog(!showLog)}>
|
||||
Log
|
||||
</button>
|
||||
<div className="spacer">
|
||||
<div> </div>
|
||||
</div>
|
||||
<button
|
||||
className="game-btn instance-btn instance-ui-btn right"
|
||||
onClick={() => sendGameReady()}>
|
||||
@ -177,7 +164,6 @@ function GamePanel(props) {
|
||||
{header}
|
||||
{timer}
|
||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
||||
<TargetingArrows />
|
||||
{otherTeams.map(OpponentTeam)}
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -9,7 +9,7 @@ const actions = require('./actions');
|
||||
const setupKeys = require('./keyboard');
|
||||
const createSocket = require('./socket');
|
||||
const registerEvents = require('./events');
|
||||
// const testGame = require('./test.game');
|
||||
const testGame = require('./test.game');
|
||||
|
||||
const Header = require('./components/header.container');
|
||||
const Body = require('./components/body.component');
|
||||
@ -51,8 +51,8 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
store.dispatch(actions.setWs(ws));
|
||||
ws.connect();
|
||||
|
||||
// events.setGame(testGame);
|
||||
// ws.clearGameStateTimeout();
|
||||
events.setGame(testGame);
|
||||
ws.clearGameStateTimeout();
|
||||
|
||||
const Cryps = () => (
|
||||
<main className="cryps" >
|
||||
|
||||
@ -51,7 +51,7 @@ main {
|
||||
padding: 0 2em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, minmax(min-content, 10%));
|
||||
grid-template-rows: repeat(10, minmax(min-content, 10%));
|
||||
grid-template-rows: repeat(10, min-content);
|
||||
|
||||
grid-template-areas:
|
||||
"hd hd hd hd hd hd hd hd hd hd"
|
||||
@ -62,8 +62,8 @@ main {
|
||||
"nav main main main main main main main main main"
|
||||
"nav main main main main main main main main main"
|
||||
"nav main main main main main main main main main"
|
||||
"nav main main main main main main main main main"
|
||||
"ft ft ft ft ft ft ft ft ft ft";
|
||||
"nav main main main main main main main main main";
|
||||
/*"ft ft ft ft ft ft ft ft ft ft";*/
|
||||
}
|
||||
|
||||
nav {
|
||||
@ -501,43 +501,6 @@ header {
|
||||
}
|
||||
|
||||
|
||||
/* CRYP BOX */
|
||||
|
||||
.cryp-list {
|
||||
flex: 1 1 25%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 94%;
|
||||
padding: 0 2em 0 2em;
|
||||
min-width: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-cryp {
|
||||
flex: 1 1 100%;
|
||||
|
||||
display: flex;
|
||||
/*border: 1px solid whitesmoke;*/
|
||||
/*margin-bottom: 1em;*/
|
||||
justify-content: center;
|
||||
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.game-cryp .img {
|
||||
text-align: center;
|
||||
flex: 1 0 25%;
|
||||
}
|
||||
|
||||
.game-cryp .stats {
|
||||
display: flex;
|
||||
flex: 1 0 20%;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.stats figure {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
@ -549,20 +512,6 @@ header {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.game-cryp .skills {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex: 1 0 25%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.game-cryp .effects {
|
||||
max-height: 100%;
|
||||
font-size: 1.5em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.resolving .skills button {
|
||||
display: none;
|
||||
}
|
||||
@ -595,63 +544,6 @@ figure.gray {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* GAME */
|
||||
.game-btn {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.game-btn:first-child {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.game-cryp button {
|
||||
color: #888;
|
||||
flex: 1 1 100%;
|
||||
font-size: 16pt;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.game-cryp button.active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.game-cryp button[disabled], .game-cryp button[disabled]:hover {
|
||||
color: #333333;
|
||||
font-size: 14pt;
|
||||
text-decoration: line-through
|
||||
}
|
||||
|
||||
.game-cryp button:hover {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.game-cryp.ko {
|
||||
animation: none;
|
||||
opacity: 0.5;
|
||||
/*opacity: 0.35;*/
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.game-cryp.ko button:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.game-cryp.unfocus {
|
||||
/*opacity: 0.65;*/
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.combat-text {
|
||||
fill: whitesmoke;
|
||||
font-size: 2em;
|
||||
font-family: 'Jura';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-opponent .combat-text {
|
||||
left: 40%;
|
||||
@ -662,17 +554,6 @@ figure.gray {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-player {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stack-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 2em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.game .target-svg {
|
||||
flex: 1;
|
||||
height: 94%;
|
||||
@ -684,245 +565,3 @@ figure.gray {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
.mobile-skills {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
CRYP DAMAGE
|
||||
*/
|
||||
|
||||
.game-cryp.active-skill {
|
||||
filter: drop-shadow(0 0 0.2em silver);
|
||||
/*border-color: silver;*/
|
||||
}
|
||||
|
||||
.game-cryp.red-damage {
|
||||
filter: drop-shadow(0 0 0.2em red);
|
||||
color: red;
|
||||
/*border-color: red;*/
|
||||
}
|
||||
|
||||
.red-damage button {
|
||||
/*border: 1px solid red;*/
|
||||
color: red;
|
||||
}
|
||||
|
||||
.red-damage text {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
.red-damage .stats {
|
||||
/*border-top: 1px solid red;*/
|
||||
}
|
||||
|
||||
.game-cryp.blue-damage {
|
||||
filter: drop-shadow(0 0 0.2em blue);
|
||||
color: blue;
|
||||
/*border-color: blue;*/
|
||||
}
|
||||
|
||||
.blue-damage button {
|
||||
/*border: 1px solid blue;*/
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.blue-damage text {
|
||||
fill: blue;
|
||||
}
|
||||
|
||||
.blue-damage .stats {
|
||||
/*border-top: 1px solid blue;*/
|
||||
}
|
||||
|
||||
.game-cryp.green-damage {
|
||||
filter: drop-shadow(0 0 0.2em green);
|
||||
color: green;
|
||||
/*border-color: green;*/
|
||||
}
|
||||
|
||||
.green-damage button {
|
||||
/*border: 1px solid green;*/
|
||||
color: green;
|
||||
}
|
||||
|
||||
.green-damage text {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
.green-damage .stats {
|
||||
/*border-top: 1px solid green;*/
|
||||
}
|
||||
|
||||
.game-cryp.purple-damage {
|
||||
filter: drop-shadow(0 0 0.2em purple);
|
||||
color: purple;
|
||||
border-color: purple;
|
||||
}
|
||||
|
||||
.purple-damage button {
|
||||
border: 1px solid purple;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.purple-damage text {
|
||||
fill: purple;
|
||||
}
|
||||
|
||||
.purple-damage .stats {
|
||||
border-top: 1px solid purple;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
MOBILE
|
||||
*/
|
||||
|
||||
@media (max-width: 800px) {
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
section {
|
||||
flex: 1 1 auto;
|
||||
flex-flow: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
section.game {
|
||||
flex-flow: column-reverse;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
section.game .instance-hdr {
|
||||
order: 99;
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.header-username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-instance-list {
|
||||
flex: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-instance-btn {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.vbox {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.cryps {
|
||||
font-size: 0.75em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
/*fucken beats me why needed */
|
||||
.game-cryp .skills {
|
||||
height: unset;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-instance-btn {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.instance-hdr {
|
||||
flex: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cryp-list {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
height: unset;
|
||||
width: 100%;
|
||||
|
||||
padding: 0;
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
.instance-cryp .stats figure {
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
.instance-cryp .skills, .instance-cryp .stats {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.instance-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-cryp {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-cryp {
|
||||
margin: 0 0.2em;
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
.spawn-btn button {
|
||||
margin: 1em;
|
||||
padding: 0.2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game .timer-container {
|
||||
order: 5;
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
font-size: 16pt;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.game-cryp .stats {
|
||||
flex-flow: row;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.cryp-list .stats figcaption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game .target-svg path {
|
||||
transform-origin: center;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user