diff --git a/html-client/.babelrc b/client/.babelrc
similarity index 100%
rename from html-client/.babelrc
rename to client/.babelrc
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 2bb5ed38..b7b57ee7 100755
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -1,7 +1,7 @@
module.exports = {
- // extends: [
- // 'plugin:react/recommended',
- // ],
+ extends: [
+ 'plugin:react/recommended',
+ ],
env: {
browser: true,
node: true
@@ -14,10 +14,10 @@ module.exports = {
'import'
],
settings: {
- // react: {
- // pragma: "preact",
- // version: "15.0",
- // },
+ react: {
+ pragma: "preact",
+ version: "15.0",
+ },
'import/resolver': {
node: {
extensions: ['.mjs', '.js', '.jsx', '.json']
@@ -55,12 +55,12 @@ module.exports = {
'key-spacing': ['error'],
// for preact
- // "react/react-in-jsx-scope": [0],
- // "react/jsx-indent": [2, 4],
- // "react/jsx-uses-react": 1,
- // "react/jsx-uses-vars": 1,
- // "react/prefer-stateless-function": 1,
- // "react/prop-types": 0,
+ "react/react-in-jsx-scope": [0],
+ "react/jsx-indent": [2, 4],
+ "react/jsx-uses-react": 1,
+ "react/jsx-uses-vars": 1,
+ "react/prefer-stateless-function": 1,
+ "react/prop-types": 0,
// airbnb copypasta
// enforces getter/setter pairs in objects
@@ -539,7 +539,7 @@ module.exports = {
// require parens in arrow function arguments
// https://eslint.org/docs/rules/arrow-parens
'arrow-parens': ['error', 'as-needed', {
- requireForBlockBody: true,
+ requireForBlockBody: false,
}],
// require space before/after arrow function's arrow
@@ -927,7 +927,7 @@ module.exports = {
// specify the maximum length of a line in your program
// https://eslint.org/docs/rules/max-len
- 'max-len': ['error', 120, 2, {
+ 'max-len': ['error', 100, 2, {
ignoreUrls: true,
ignoreComments: false,
ignoreRegExpLiterals: true,
diff --git a/html-client/assets/normalize.css b/client/assets/normalize.css
similarity index 100%
rename from html-client/assets/normalize.css
rename to client/assets/normalize.css
diff --git a/html-client/assets/skeleton.css b/client/assets/skeleton.css
similarity index 100%
rename from html-client/assets/skeleton.css
rename to client/assets/skeleton.css
diff --git a/client/cryps.css b/client/cryps.css
index b0020329..23bb53c9 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -1,24 +1,438 @@
-/*@font-face {
- font-family: 'nowayregular';
- src: url('./assets/fonts/noway-regular-webfont.eot');
- src: url('./assets/fonts/noway-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('./assets/fonts/noway-regular-webfont.woff2') format('woff2'),
- url('./assets/fonts/noway-regular-webfont.woff') format('woff'),
- url('./assets/fonts/noway-regular-webfont.ttf') format('truetype'),
- url('./assets/fonts/noway-regular-webfont.svg#nowayregular') format('svg');
- font-weight: normal;
- font-style: normal;
-}
+/*
+ GLOBAL
*/
-body {
- background-color: #181818;
+
+html, body, .cryps {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+
+ background-color: #000000;
+ font-family: 'Jura';
+ color: whitesmoke;
+ font-size: 16pt;
+ user-select: none;
+
+ /* this is the sweet nectar to keep it full page*/
+ max-height: 100%;
+ overflow: hidden;
}
-canvas{
- display:block;
+html {
+ box-sizing: border-box;
margin: 0;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ padding: 0;
+ height: 100%;
+}
+
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+
+/* main container */
+.cryps {
+ padding: 0 2em;
+ display: flex;
+ flex-flow: column;
+ position: fixed;
+}
+
+main {
+ display: flex;
+ flex-flow: row wrap;
+ flex: 1 1 90%;
+
+ padding-top: 1em;
+
+ align-content: flex-start;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+}
+
+button, input {
+ font-family: 'Jura';
+ height: auto;
+ color: whitesmoke;
+ border-width: 2px;
+ border-color: whitesmoke;
+ border-radius: 0;
+ letter-spacing: 0.25em;
+ box-sizing: border-box;
+
+ /*the transitions */
+ transition-property: all;
+ transition-duration: 0.5s;
+ transition-delay: 0;
+ transition-timing-function: ease;
+}
+
+button:hover, button:focus {
+ /*colour necesary to bash skellington*/
+ color: whitesmoke;
+ border-color: whitesmoke;
+}
+
+button.right[disabled]:hover, button.left[disabled]:hover {
+ box-shadow: none;
+}
+
+button.right:hover, button.right:focus {
+ box-shadow: inset -0.5em 0 0 0 whitesmoke;
+}
+
+button.left:hover, button.left:focus {
+ box-shadow: inset 0.5em 0 0 0 whitesmoke;
+}
+
+/*
+ MENU
+*/
+header {
+ display: flex;
+ flex-flow: row;
+ flex: 1;
+}
+
+.header-title {
+ flex: 1;
+ font-size: 2em;
+ letter-spacing: 0.05em;
+}
+
+.header-username {
+ letter-spacing: 0.25em;
+ font-size: 2em;
+ display: inline;
+}
+
+.header-status {
+ text-align: right;
+}
+
+.header-status svg {
+ margin-left: 1em;
+ height: 1em;
+ background-color: black;
+}
+
+.login {
+ display: inline;
+ margin-right: 0;
+}
+
+.ping-path {
+ fill: none;
+ stroke-width: 4px;
+ stroke-dasharray: 121, 242;
+ animation: saw 2s infinite linear;
+}
+
+@keyframes saw {
+ 0% {
+ stroke-dashoffset: 363;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
+
+.menu-cryps {
+ display: flex;
+ flex-flow: row wrap;
+
+ flex: 0 0 50%;
+}
+
+.menu-cryp-ctr {
+ flex: 0 0 33%;
+ flex-flow: column;
+
+ text-align: center;
+ display: flex;
+}
+
+.menu-cryp {
+ height: 100%;
+ margin: 0.5em;
+ box-sizing: border-box;
+ border: 1px solid black;
+
+ transition-property: border;
+ transition-duration: 0.5s;
+ transition-delay: 0;
+ transition-timing-function: ease;
+}
+
+.menu-cryp h2 {
+ font-size: 2em;
+}
+
+.menu-instance-list {
+ flex: 0 0 50%;
+ flex-flow: row wrap;
+
+ display: flex;
+ align-content: flex-start;
+ height: 100%;
+}
+
+.menu-instance-btn {
+ box-sizing: border-box;
+ flex: 1 0 20%;
+ font-size: 150%;
+ /*min-width: 20%;*/
+ border-width: 2px;
+ padding: 0.5em;
+ margin: 0.5em;
+}
+
+.menu-instance-btn.full {
+ flex: 1 0 100%;
+}
+
+/*
+ INSTANCE
+*/
+
+
+.instance {
+ display: flex;
+ flex-flow: row wrap;
+ align-content: flex-start;
+}
+
+.instance-hdr {
+ display: flex;
+ flex-flow: row;
+
+ flex: 0 0 100%;
+ margin-bottom: 1em;
+}
+
+.instance-info {
+ flex: 0 0 50%;
+}
+
+.instance .spacer {
+ flex-grow: 1
+}
+
+.menu-btn {
+ flex: 1 0 25%;
+}
+
+.ready-btn {
+ flex: 1 0 50%;
+}
+
+.ready-btn:hover {
+ transition-property: all;
+ transition-duration: 2s;
+ transition-timing-function: ease;
+ color: forestgreen;
+ border-color: forestgreen;
+ /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
+}
+
+.instance-ui-btn {
+ font-size: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+.vbox {
+ flex: 1 1 25%;
+
+ display: flex;
+ flex-flow: row wrap;
+ align-content: flex-start;
+}
+
+.vbox-hdr {
+ display: flex;
+ align-items: flex-end;
+
+ flex: 1 0 100%;
+}
+
+.vbox-hdr div:first-child {
+ flex-grow: 1;
+}
+
+.vbox-hdr .bits {
+ font-size: 2em;
+ line-height: 1em;
+}
+
+.vbox-btn {
+ flex: 1 0 100%;
+ margin: 0;
+ padding: 0 0.5em;
+ background-color: whitesmoke;
+ color: black;
+}
+
+.vbox-btn:hover {
+ color: black;
+}
+
+.vbox-table {
+ table-layout: fixed;
+ width: 100%;
+}
+
+.vbox-table td {
+ border: 1px solid whitesmoke;
+ padding: 0.2em;
+ text-align: center;
+ height: 40px;
+ cursor: pointer;
+ text-transform: uppercase;
+}
+
+.spacer {
+ flex: 1 0 25%;
+}
+
+.cryp-list {
+ flex: 1 1 25%;
+
+ display: flex;
+ flex-flow: column;
+ height: 95%;
+ padding: 0 2em 0 2em;
+}
+
+/* CRYP BOX */
+.cryp-box {
+ flex: 1 1 100%;
+
+ display: flex;
+ flex-flow: column;
+ border: 1px solid whitesmoke;
+ margin-bottom: 1em;
+ justify-content: center;
+}
+
+.cryp-box-top {
+ display: flex;
+ flex: 1 1 80%;
+ width: 100%;
+ justify-content: center;
+ align-items: stretch;
+}
+
+.cryp-box .particle {
+ position: fixed;
+ z-index: -10;
+}
+
+.cryp-box figure {
+ margin: 0;
+ flex: 0 0 50%;
+ text-align: center;
+ box-sizing: border-box;
+ display: flex;
+ flex-flow: column;
+}
+
+.cryp-box .stats {
+ flex: 0 0 20%;
+ width: 100%;
+ display: flex;
+ border-top: 1px solid whitesmoke;
+}
+
+.cryp-box .stats figure {
+ flex: 1 1 0;
+ border: 0;
+ align-items: center;
+ padding: 0.25em 0;
+}
+
+.cryp-box .stats figcaption {
+ font-size: 75%;
+}
+
+
+.cryp-box .stats svg {
+ height: 1.5em;
+ stroke-width: 2px;
+}
+
+.cryp-box .skills {
+ display: flex;
+ flex-flow: row wrap;
+ flex: 1 1 50%;
+}
+
+.cryp-skill-btn {
+ flex: 1 1 100%;
+ font-size: 16pt;
+ border-width: 1px;
+ padding: 0;
+ margin: 0;
+ border-bottom-width: 0px;
+ border-left-width: 1px;
+ border-right-width: 0px;
+}
+
+.cryp-skill-btn:first-child {
+ border-top-width: 0;
+}
+
+
+/* GAME */
+.game-back-btn {
+ flex: 0 0 20%;
+}
+
+.cryp-skill-btn[disabled] {
+ color: #333333;
+ font-size: 14pt;
+}
+
+.cryp-box.ko {
+ animation: none;
+ opacity: 0.5;
+}
+
+.team-player {
+ display: flex;
+ flex: 1 0 20%;
+ height: 90%;
+ padding: 0;
+}
+
+.team-opponent {
+ display: flex;
+ flex: 1 0 20%;
+ height: 90%;
+ padding: 0;
+}
+
+.logs {
+ padding-left: 2em;
+ display: flex;
+ flex-flow: row wrap;
+ flex: 0 0 20%;
+}
+
+.selected-skills {
+ flex: 1 1 25%;
+
+ display: flex;
+ flex-flow: column;
+ height: 95%;
+ padding: 0 2em 0 2em;
+ justify-content: center;
+}
+
+.stack-line {
+ display: flex;
+ align-items: center;
+ padding-left: 2em;
+ flex: 1;
}
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index b8ab05d5..0fb46f04 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,16 +1,18 @@
-
-
-
- cryps.gg - mnml pvp atbs
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ cryps.gg - mnml pvp atbs
+
+
+
+
+
+
+
+
+
+
+
+
+