nginx change
This commit is contained in:
ntr
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"presets": [
|
||||
"es2015",
|
||||
"react"
|
||||
],
|
||||
"plugins": [
|
||||
["transform-react-jsx", { "pragma":"preact.h" }]
|
||||
]
|
||||
}
|
||||
+15
-15
@@ -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,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@@ -1,444 +0,0 @@
|
||||
{
|
||||
"textures": [
|
||||
{
|
||||
"format": "RGBA8888",
|
||||
"size": {
|
||||
"w": 1024,
|
||||
"h": 1024
|
||||
},
|
||||
"scale": 1,
|
||||
"frames":[
|
||||
{
|
||||
"filename":"sprite0",
|
||||
"frame":{
|
||||
"x":655,
|
||||
"y":100,
|
||||
"w":110,
|
||||
"h":97
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":110,
|
||||
"h":97
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":110,
|
||||
"h":97
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite1",
|
||||
"frame":{
|
||||
"x":180,
|
||||
"y":105,
|
||||
"w":140,
|
||||
"h":88
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":88
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":88
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite2",
|
||||
"frame":{
|
||||
"x":20,
|
||||
"y":106,
|
||||
"w":140,
|
||||
"h":86
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":86
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":86
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite3",
|
||||
"frame":{
|
||||
"x":475,
|
||||
"y":106,
|
||||
"w":150,
|
||||
"h":86
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":150,
|
||||
"h":86
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":150,
|
||||
"h":86
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite4",
|
||||
"frame":{
|
||||
"x":330,
|
||||
"y":112,
|
||||
"w":140,
|
||||
"h":74
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":74
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":74
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite5",
|
||||
"frame":{
|
||||
"x":198,
|
||||
"y":274,
|
||||
"w":104,
|
||||
"h":110
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":104,
|
||||
"h":110
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":104,
|
||||
"h":110
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite6",
|
||||
"frame":{
|
||||
"x":342,
|
||||
"y":279,
|
||||
"w":116,
|
||||
"h":100
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":116,
|
||||
"h":100
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":116,
|
||||
"h":100
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite7",
|
||||
"frame":{
|
||||
"x":480,
|
||||
"y":283,
|
||||
"w":140,
|
||||
"h":92
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":92
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":92
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite8",
|
||||
"frame":{
|
||||
"x":24,
|
||||
"y":284,
|
||||
"w":132,
|
||||
"h":90
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":132,
|
||||
"h":90
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":132,
|
||||
"h":90
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite9",
|
||||
"frame":{
|
||||
"x":645,
|
||||
"y":287,
|
||||
"w":130,
|
||||
"h":84
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":130,
|
||||
"h":84
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":130,
|
||||
"h":84
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite10",
|
||||
"frame":{
|
||||
"x":514,
|
||||
"y":434,
|
||||
"w":74,
|
||||
"h":110
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":74,
|
||||
"h":110
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":74,
|
||||
"h":110
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite11",
|
||||
"frame":{
|
||||
"x":222,
|
||||
"y":439,
|
||||
"w":56,
|
||||
"h":100
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":56,
|
||||
"h":100
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":56,
|
||||
"h":100
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite12",
|
||||
"frame":{
|
||||
"x":667,
|
||||
"y":439,
|
||||
"w":86,
|
||||
"h":100
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":86,
|
||||
"h":100
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":86,
|
||||
"h":100
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite13",
|
||||
"frame":{
|
||||
"x":20,
|
||||
"y":451,
|
||||
"w":140,
|
||||
"h":74
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":74
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":74
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite14",
|
||||
"frame":{
|
||||
"x":335,
|
||||
"y":453,
|
||||
"w":130,
|
||||
"h":72
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":130,
|
||||
"h":72
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":130,
|
||||
"h":72
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite15",
|
||||
"frame":{
|
||||
"x":493,
|
||||
"y":619,
|
||||
"w":114,
|
||||
"h":100
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":114,
|
||||
"h":100
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":114,
|
||||
"h":100
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite16",
|
||||
"frame":{
|
||||
"x":180,
|
||||
"y":626,
|
||||
"w":140,
|
||||
"h":86
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":86
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":86
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite17",
|
||||
"frame":{
|
||||
"x":640,
|
||||
"y":632,
|
||||
"w":140,
|
||||
"h":94
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":140,
|
||||
"h":94
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":140,
|
||||
"h":94
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite18",
|
||||
"frame":{
|
||||
"x":329,
|
||||
"y":635,
|
||||
"w":141,
|
||||
"h":88
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":141,
|
||||
"h":88
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":141,
|
||||
"h":88
|
||||
}
|
||||
},
|
||||
{
|
||||
"filename":"sprite19",
|
||||
"frame":{
|
||||
"x":25,
|
||||
"y":641,
|
||||
"w":130,
|
||||
"h":76
|
||||
},
|
||||
"rotated":false,
|
||||
"trimmed":false,
|
||||
"spriteSourceSize":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"w":130,
|
||||
"h":76
|
||||
},
|
||||
"sourceSize":{
|
||||
"w":130,
|
||||
"h":76
|
||||
}
|
||||
}
|
||||
],
|
||||
"meta":{
|
||||
"app":"https://www.leshylabs.com/apps/sstool/",
|
||||
"version":"Leshy SpriteSheet Tool v0.8.4",
|
||||
"image":"spritesheet.png",
|
||||
"size":{
|
||||
"w":800,
|
||||
"h":800
|
||||
},
|
||||
"scale":1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 431 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB |
@@ -1,18 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="13.8889in" height="13.8889in"
|
||||
viewBox="0 0 1000 1000">
|
||||
<path id="Unnamed"
|
||||
fill="none" stroke="black" stroke-width="1"
|
||||
d="M 250.00,-1.00
|
||||
C 250.00,-1.00 0.00,300.00 0.00,300.00
|
||||
0.00,300.00 1000.00,300.00 1000.00,300.00
|
||||
1000.00,300.00 750.00,2.00 750.00,2.00M 500.00,300.00
|
||||
C 500.00,300.00 500.00,700.00 500.00,700.00M 250.00,1000.00
|
||||
C 250.00,1000.00 0.00,700.00 0.00,700.00
|
||||
0.00,700.00 999.00,700.00 1000.00,700.00
|
||||
1001.00,700.00 750.00,1000.00 750.00,1000.00" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 811 B |
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="13.8889in" height="13.8889in"
|
||||
viewBox="0 0 1000 1000">
|
||||
<path id="c2"
|
||||
fill="none" stroke="black" stroke-width="1"
|
||||
d="M 250.00,-1.00
|
||||
C 250.00,-1.00 250.00,300.00 250.00,300.00
|
||||
250.00,300.00 750.00,299.00 750.00,299.00
|
||||
750.00,299.00 750.00,2.00 750.00,2.00M 500.00,100.00
|
||||
C 500.00,100.00 500.00,300.00 500.00,300.00
|
||||
500.00,300.00 500.00,700.00 500.00,700.00M 250.00,1000.00
|
||||
C 250.00,1000.00 500.00,700.00 500.00,700.00
|
||||
500.00,700.00 750.00,1000.00 750.00,1000.00M 750.00,700.00
|
||||
C 750.00,700.00 500.00,400.00 500.00,400.00
|
||||
500.00,400.00 249.00,699.00 249.00,699.00" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 938 B |
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="13.8889in" height="13.8889in"
|
||||
viewBox="0 0 1000 1000">
|
||||
<path id="c3"
|
||||
fill="none" stroke="black" stroke-width="1"
|
||||
d="M 250.00,-1.00
|
||||
C 250.00,-1.00 250.00,300.00 250.00,300.00
|
||||
250.00,300.00 750.00,299.00 750.00,299.00
|
||||
750.00,299.00 750.00,2.00 750.00,2.00M 500.00,300.00
|
||||
C 500.00,300.00 500.00,700.00 500.00,700.00M 250.00,1000.00
|
||||
C 250.00,1000.00 250.00,700.00 250.00,700.00
|
||||
250.00,700.00 500.00,700.00 500.00,700.00
|
||||
500.00,700.00 750.00,700.00 750.00,700.00
|
||||
750.00,700.00 750.00,1000.00 750.00,1000.00M 250.00,500.00
|
||||
C 250.00,500.00 750.00,500.00 750.00,500.00" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 938 B |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 190 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Vendored
+427
@@ -0,0 +1,427 @@
|
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
Vendored
+418
@@ -0,0 +1,418 @@
|
||||
/*
|
||||
* Skeleton V2.0.4
|
||||
* Copyright 2014, Dave Gamache
|
||||
* www.getskeleton.com
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 12/29/2014
|
||||
*/
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Grid
|
||||
- Base Styles
|
||||
- Typography
|
||||
- Links
|
||||
- Buttons
|
||||
- Forms
|
||||
- Lists
|
||||
- Code
|
||||
- Tables
|
||||
- Spacing
|
||||
- Utilities
|
||||
- Clearing
|
||||
- Media Queries
|
||||
*/
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.one.column,
|
||||
.one.columns { width: 4.66666666667%; }
|
||||
.two.columns { width: 13.3333333333%; }
|
||||
.three.columns { width: 22%; }
|
||||
.four.columns { width: 30.6666666667%; }
|
||||
.five.columns { width: 39.3333333333%; }
|
||||
.six.columns { width: 48%; }
|
||||
.seven.columns { width: 56.6666666667%; }
|
||||
.eight.columns { width: 65.3333333333%; }
|
||||
.nine.columns { width: 74.0%; }
|
||||
.ten.columns { width: 82.6666666667%; }
|
||||
.eleven.columns { width: 91.3333333333%; }
|
||||
.twelve.columns { width: 100%; margin-left: 0; }
|
||||
|
||||
.one-third.column { width: 30.6666666667%; }
|
||||
.two-thirds.column { width: 65.3333333333%; }
|
||||
|
||||
.one-half.column { width: 48%; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { margin-left: 26%; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { margin-left: 52%; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { margin-left: 52%; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
body {
|
||||
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
h1 { font-size: 5.0rem; }
|
||||
h2 { font-size: 4.2rem; }
|
||||
h3 { font-size: 3.6rem; }
|
||||
h4 { font-size: 3.0rem; }
|
||||
h5 { font-size: 2.4rem; }
|
||||
h6 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
|
||||
/* Lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
ul {
|
||||
list-style: circle inside; }
|
||||
ol {
|
||||
list-style: decimal inside; }
|
||||
ol, ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0; }
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
font-size: 90%; }
|
||||
li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #E1E1E1; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #E1E1E1; }
|
||||
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
/* Media Queries
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
Note: The best way to structure the use of media queries is to create the queries
|
||||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||
on small devices, paste the mobile query code up in the buttons section and style it
|
||||
there.
|
||||
*/
|
||||
|
||||
|
||||
/* Larger than mobile */
|
||||
@media (min-width: 400px) {}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
@media (min-width: 550px) {}
|
||||
|
||||
/* Larger than tablet */
|
||||
@media (min-width: 750px) {}
|
||||
|
||||
/* Larger than desktop */
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
+433
-19
@@ -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;
|
||||
}
|
||||
+17
-15
@@ -1,16 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>cryps.gg - mnml pvp atbs</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<script src="./index.js"></script>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>cryps.gg - mnml pvp atbs</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="description" content="cryps.gg - mnml pvp atbs">
|
||||
<meta name="author" content="ntr@smokestack.io">
|
||||
<link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/normalize.css">
|
||||
<link rel="stylesheet" href="assets/skeleton.css">
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<script src="./index.js"></script>
|
||||
</html>
|
||||
Regular → Executable
@@ -1,189 +0,0 @@
|
||||
// http://mrl.nyu.edu/~perlin/noise/
|
||||
|
||||
const ImprovedNoise = function () {
|
||||
const p = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10,
|
||||
23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87,
|
||||
174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211,
|
||||
133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208,
|
||||
89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5,
|
||||
202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119,
|
||||
248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232,
|
||||
178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249,
|
||||
14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205,
|
||||
93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180];
|
||||
|
||||
for (let i = 0; i < 256; i++) {
|
||||
p[256 + i] = p[i];
|
||||
}
|
||||
|
||||
function fade(t) {
|
||||
return t * t * t * (t * (t * 6 - 15) + 10);
|
||||
}
|
||||
|
||||
function lerp(t, a, b) {
|
||||
return a + t * (b - a);
|
||||
}
|
||||
|
||||
function grad(hash, x, y, z) {
|
||||
const h = hash & 15;
|
||||
const u = h < 8 ? x : y; const
|
||||
v = h < 4 ? y : h == 12 || h == 14 ? x : z;
|
||||
return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
noise(x, y, z) {
|
||||
const floorX = Math.floor(x); const floorY = Math.floor(y); const
|
||||
floorZ = Math.floor(z);
|
||||
|
||||
const X = floorX & 255; const Y = floorY & 255; const
|
||||
Z = floorZ & 255;
|
||||
|
||||
x -= floorX;
|
||||
y -= floorY;
|
||||
z -= floorZ;
|
||||
|
||||
const xMinus1 = x - 1; const yMinus1 = y - 1; const
|
||||
zMinus1 = z - 1;
|
||||
|
||||
const u = fade(x); const v = fade(y); const
|
||||
w = fade(z);
|
||||
|
||||
const A = p[X] + Y; const AA = p[A] + Z; const AB = p[A + 1] + Z; const B = p[X + 1] + Y; const BA = p[B] + Z; const
|
||||
BB = p[B + 1] + Z;
|
||||
|
||||
return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
|
||||
grad(p[BA], xMinus1, y, z)),
|
||||
lerp(u, grad(p[AB], x, yMinus1, z),
|
||||
grad(p[BB], xMinus1, yMinus1, z))),
|
||||
lerp(v, lerp(u, grad(p[AA + 1], x, y, zMinus1),
|
||||
grad(p[BA + 1], xMinus1, y, z - 1)),
|
||||
lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1),
|
||||
grad(p[BB + 1], xMinus1, yMinus1, zMinus1))));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const currentRandom = Math.random;
|
||||
|
||||
// Pseudo-random generator
|
||||
function Marsaglia(i1, i2) {
|
||||
// from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
|
||||
let z = i1 || 362436069; let
|
||||
w = i2 || 521288629;
|
||||
const nextInt = function () {
|
||||
z = (36969 * (z & 65535) + (z >>> 16)) & 0xFFFFFFFF;
|
||||
w = (18000 * (w & 65535) + (w >>> 16)) & 0xFFFFFFFF;
|
||||
return (((z & 0xFFFF) << 16) | (w & 0xFFFF)) & 0xFFFFFFFF;
|
||||
};
|
||||
|
||||
this.nextDouble = function () {
|
||||
const i = nextInt() / 4294967296;
|
||||
return i < 0 ? 1 + i : i;
|
||||
};
|
||||
this.nextInt = nextInt;
|
||||
}
|
||||
Marsaglia.createRandomized = function () {
|
||||
const now = new Date();
|
||||
return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
|
||||
};
|
||||
|
||||
// Noise functions and helpers
|
||||
function PerlinNoise(seed) {
|
||||
const rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
|
||||
let i; let
|
||||
j;
|
||||
// http://www.noisemachine.com/talk1/17b.html
|
||||
// http://mrl.nyu.edu/~perlin/noise/
|
||||
// generate permutation
|
||||
const p = new Array(512);
|
||||
for (i = 0; i < 256; ++i) { p[i] = i; }
|
||||
for (i = 0; i < 256; ++i) { const t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
|
||||
// copy to avoid taking mod in p[0];
|
||||
for (i = 0; i < 256; ++i) { p[i + 256] = p[i]; }
|
||||
|
||||
function grad3d(i, x, y, z) {
|
||||
const h = i & 15; // convert into 12 gradient directions
|
||||
const u = h < 8 ? x : y;
|
||||
|
||||
|
||||
const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
|
||||
return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
|
||||
}
|
||||
|
||||
function grad2d(i, x, y) {
|
||||
const v = (i & 1) === 0 ? x : y;
|
||||
return (i & 2) === 0 ? -v : v;
|
||||
}
|
||||
|
||||
function grad1d(i, x) {
|
||||
return (i & 1) === 0 ? -x : x;
|
||||
}
|
||||
|
||||
function lerp(t, a, b) { return a + t * (b - a); }
|
||||
|
||||
this.noise3d = function (x, y, z) {
|
||||
const X = Math.floor(x) & 255; const Y = Math.floor(y) & 255; const
|
||||
Z = Math.floor(z) & 255;
|
||||
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
|
||||
const fx = (3 - 2 * x) * x * x; const fy = (3 - 2 * y) * y * y; const
|
||||
fz = (3 - 2 * z) * z * z;
|
||||
const p0 = p[X] + Y; const p00 = p[p0] + Z; const p01 = p[p0 + 1] + Z; const p1 = p[X + 1] + Y; const p10 = p[p1] + Z; const
|
||||
p11 = p[p1 + 1] + Z;
|
||||
return lerp(fz,
|
||||
lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x - 1, y, z)),
|
||||
lerp(fx, grad3d(p[p01], x, y - 1, z), grad3d(p[p11], x - 1, y - 1, z))),
|
||||
lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z - 1), grad3d(p[p10 + 1], x - 1, y, z - 1)),
|
||||
lerp(fx, grad3d(p[p01 + 1], x, y - 1, z - 1), grad3d(p[p11 + 1], x - 1, y - 1, z - 1))));
|
||||
};
|
||||
|
||||
this.noise2d = function (x, y) {
|
||||
const X = Math.floor(x) & 255; const
|
||||
Y = Math.floor(y) & 255;
|
||||
x -= Math.floor(x); y -= Math.floor(y);
|
||||
const fx = (3 - 2 * x) * x * x; const
|
||||
fy = (3 - 2 * y) * y * y;
|
||||
const p0 = p[X] + Y; const
|
||||
p1 = p[X + 1] + Y;
|
||||
return lerp(fy,
|
||||
lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x - 1, y)),
|
||||
lerp(fx, grad2d(p[p0 + 1], x, y - 1), grad2d(p[p1 + 1], x - 1, y - 1)));
|
||||
};
|
||||
|
||||
this.noise1d = function (x) {
|
||||
const X = Math.floor(x) & 255;
|
||||
x -= Math.floor(x);
|
||||
const fx = (3 - 2 * x) * x * x;
|
||||
return lerp(fx, grad1d(p[X], x), grad1d(p[X + 1], x - 1));
|
||||
};
|
||||
}
|
||||
|
||||
// these are lifted from Processing.js
|
||||
// processing defaults
|
||||
const noiseProfile = {
|
||||
generator: undefined, octaves: 4, fallout: 0.5, seed: undefined,
|
||||
};
|
||||
|
||||
module.exports = function noise(x, y, z) {
|
||||
if (noiseProfile.generator === undefined) {
|
||||
// caching
|
||||
noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
|
||||
}
|
||||
const generator = noiseProfile.generator;
|
||||
let effect = 1; let k = 1; let
|
||||
sum = 0;
|
||||
for (let i = 0; i < noiseProfile.octaves; ++i) {
|
||||
effect *= noiseProfile.fallout;
|
||||
switch (arguments.length) {
|
||||
case 1:
|
||||
sum += effect * (1 + generator.noise1d(k * x)) / 2; break;
|
||||
case 2:
|
||||
sum += effect * (1 + generator.noise2d(k * x, k * y)) / 2; break;
|
||||
case 3:
|
||||
sum += effect * (1 + generator.noise3d(k * x, k * y, k * z)) / 2; break;
|
||||
}
|
||||
k *= 2;
|
||||
}
|
||||
return sum;
|
||||
};
|
||||
@@ -1,220 +0,0 @@
|
||||
const noise = require('./fizzy-noise');
|
||||
|
||||
function fizzyText(message) {
|
||||
const that = this;
|
||||
|
||||
// These are the variables that we manipulate with gui-dat.
|
||||
// Notice they're all defined with "this". That makes them public.
|
||||
// Otherwise, gui-dat can't see them.
|
||||
|
||||
this.growthSpeed = 0.8; // how fast do particles change size?
|
||||
this.minSize = 1;
|
||||
this.maxSize = 4; // how big can they get?
|
||||
this.noiseStrength = 10; // how turbulent is the flow?
|
||||
this.speed = 0.4; // how fast do particles move?
|
||||
this.displayOutline = false; // should we draw the message as a stroke?
|
||||
this.framesRendered = 0;
|
||||
|
||||
// //////////////////////////////////////////////////////////////
|
||||
|
||||
const _this = this;
|
||||
|
||||
const width = 550;
|
||||
const height = 200;
|
||||
const textAscent = 101;
|
||||
const textOffsetLeft = 80;
|
||||
const noiseScale = 300;
|
||||
const frameTime = 30;
|
||||
|
||||
const colors = ['#000000', '#1A1A1A', '#163C50', '#205A79', '#2A78A2'];
|
||||
|
||||
// This is the context we use to get a bitmap of text using
|
||||
// the getImageData function.
|
||||
const r = document.createElement('canvas');
|
||||
const s = r.getContext('2d');
|
||||
|
||||
// This is the context we actually use to draw.
|
||||
const c = document.createElement('canvas');
|
||||
const g = c.getContext('2d');
|
||||
|
||||
r.setAttribute('width', width);
|
||||
c.setAttribute('width', width);
|
||||
r.setAttribute('height', height);
|
||||
c.setAttribute('height', height);
|
||||
|
||||
// Add our demo to the HTML
|
||||
document.getElementById('fizzytext').appendChild(c);
|
||||
|
||||
// Stores bitmap image
|
||||
let pixels = [];
|
||||
|
||||
// Stores a list of particles
|
||||
const particles = [];
|
||||
|
||||
// Set g.font to the same font as the bitmap canvas, incase we
|
||||
// want to draw some outlines.
|
||||
s.font = g.font = '800 82px monospace, monospace';
|
||||
|
||||
// Instantiate some particles
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||
}
|
||||
|
||||
// This function creates a bitmap of pixels based on your message
|
||||
// It's called every time we change the message property.
|
||||
const createBitmap = function (msg) {
|
||||
s.fillStyle = '#fff';
|
||||
s.fillRect(0, 0, width, height);
|
||||
|
||||
s.fillStyle = '#222';
|
||||
s.fillText(msg, textOffsetLeft, textAscent);
|
||||
|
||||
// Pull reference
|
||||
const imageData = s.getImageData(0, 0, width, height);
|
||||
pixels = imageData.data;
|
||||
};
|
||||
|
||||
// Called once per frame, updates the animation.
|
||||
const render = function () {
|
||||
that.framesRendered++;
|
||||
|
||||
g.clearRect(0, 0, width, height);
|
||||
|
||||
if (_this.displayOutline) {
|
||||
g.globalCompositeOperation = 'source-over';
|
||||
g.strokeStyle = '#000';
|
||||
g.lineWidth = 0.5;
|
||||
g.strokeText(message, textOffsetLeft, textAscent);
|
||||
}
|
||||
|
||||
g.globalCompositeOperation = 'darker';
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
g.fillStyle = colors[i % colors.length];
|
||||
particles[i].render();
|
||||
}
|
||||
};
|
||||
|
||||
// Returns x, y coordinates for a given index in the pixel array.
|
||||
const getPosition = function (i) {
|
||||
return {
|
||||
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
|
||||
y: Math.floor(i / (width * 4)),
|
||||
};
|
||||
};
|
||||
|
||||
// Returns a color for a given pixel in the pixel array.
|
||||
const getColor = function (x, y) {
|
||||
const base = (Math.floor(y) * width + Math.floor(x)) * 4;
|
||||
const c = {
|
||||
r: pixels[base + 0],
|
||||
g: pixels[base + 1],
|
||||
b: pixels[base + 2],
|
||||
a: pixels[base + 3],
|
||||
};
|
||||
|
||||
return `rgb(${c.r},${c.g},${c.b})`;
|
||||
};
|
||||
|
||||
this.message = message;
|
||||
createBitmap(message);
|
||||
|
||||
var loop = function () {
|
||||
requestAnimationFrame(loop);
|
||||
render();
|
||||
};
|
||||
|
||||
// This calls the render function every 30 milliseconds.
|
||||
loop();
|
||||
|
||||
// This class is responsible for drawing and moving those little
|
||||
// colored dots.
|
||||
function Particle(x, y, c) {
|
||||
// Position
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
|
||||
// Size of particle
|
||||
this.r = 1;
|
||||
|
||||
// This velocity is used by the explode function.
|
||||
this.vx = 0;
|
||||
this.vy = 0;
|
||||
|
||||
this.constrain = function constrainFn(v, o1, o2) {
|
||||
if (v < o1) v = o1;
|
||||
else if (v > o2) v = o2;
|
||||
return v;
|
||||
};
|
||||
|
||||
// Called every frame
|
||||
this.render = function renderFrame() {
|
||||
// What color is the pixel we're sitting on top of?
|
||||
const c = getColor(this.x, this.y);
|
||||
|
||||
// Where should we move?
|
||||
const angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
|
||||
// var angle = -Math.PI/2;
|
||||
|
||||
// Are we within the boundaries of the image?
|
||||
const onScreen = this.x > 0 && this.x < width && this.y > 0 && this.y < height;
|
||||
|
||||
const isBlack = c !== 'rgb(255,255,255)' && onScreen;
|
||||
|
||||
// If we're on top of a black pixel, grow.
|
||||
// If not, shrink.
|
||||
if (isBlack) {
|
||||
this.r += _this.growthSpeed;
|
||||
} else {
|
||||
this.r -= _this.growthSpeed;
|
||||
}
|
||||
|
||||
// This velocity is used by the explode function.
|
||||
this.vx *= 0.5;
|
||||
this.vy *= 0.5;
|
||||
|
||||
// Change our position based on the flow field and our
|
||||
// explode velocity.
|
||||
this.x += Math.cos(angle) * _this.speed + this.vx;
|
||||
this.y += -Math.sin(angle) * _this.speed + this.vy;
|
||||
|
||||
if (this.r > _this.maxSize) {
|
||||
this.r = _this.maxSize;
|
||||
} else if (this.r < 0) {
|
||||
this.r = 0;
|
||||
this.x = Math.random() * width;
|
||||
this.y = Math.random() * height;
|
||||
return false;
|
||||
}
|
||||
|
||||
// this.r = 3;
|
||||
// debugger
|
||||
// console.log(DAT.GUI.constrain(this.r, 0, _this.maxSize));
|
||||
// this.r = this.constrain(this.r, _this.minSize, _this.maxSize);
|
||||
|
||||
// If we're tiny, keep moving around until we find a black
|
||||
// pixel.
|
||||
if (this.r <= 0) {
|
||||
this.x = Math.random() * width;
|
||||
this.y = Math.random() * height;
|
||||
return false; // Don't draw!
|
||||
}
|
||||
|
||||
// If we're off the screen, go over to other side
|
||||
if (this.x < 0) this.x = width;
|
||||
if (this.x > width) this.x = 0;
|
||||
if (this.y < 0) this.y = height;
|
||||
if (this.y > height) this.y = 0;
|
||||
|
||||
// Draw the circle.
|
||||
g.beginPath();
|
||||
// g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
|
||||
g.rect(this.x, this.y, this.r, this.r);
|
||||
g.fill();
|
||||
|
||||
return true;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = fizzyText;
|
||||
+13
-6
@@ -4,30 +4,37 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "parcel index.html --port 40080 --no-hmr --no-source-maps",
|
||||
"build": "rm -rf dist && parcel build --no-source-maps index.html",
|
||||
"lint": "eslint --fix src/",
|
||||
"start": "parcel index.html --port 40080 --no-source-maps",
|
||||
"build": "rm -rf dist && parcel build index.html",
|
||||
"lint": "eslint --fix --ext .jsx src/",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"async": "^2.6.1",
|
||||
"borc": "^2.0.3",
|
||||
"bulma-toast": "^1.2.0",
|
||||
"docco": "^0.7.0",
|
||||
"izitoast": "^1.4.0",
|
||||
"jdenticon": "^2.1.0",
|
||||
"key": "^0.1.11",
|
||||
"keymaster": "^1.6.2",
|
||||
"lodash": "^4.17.11",
|
||||
"parcel": "^1.11.0",
|
||||
"phaser": "^3.16.1",
|
||||
"parcel": "^1.12.3",
|
||||
"particles.js": "^2.0.0",
|
||||
"phaser": "^3.15.1",
|
||||
"preact": "^8.3.1",
|
||||
"preact-redux": "^2.0.3",
|
||||
"redux": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"eslint": "^5.6.0",
|
||||
"eslint-config-airbnb-base": "^13.1.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"jest": "^18.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
export const SET_ACCOUNT = 'SET_ACCOUNT';
|
||||
export const setAccount = value => ({ type: SET_ACCOUNT, value });
|
||||
|
||||
export const SET_CRYPS = 'SET_CRYPS';
|
||||
export const setCryps = value => ({ type: SET_CRYPS, value });
|
||||
|
||||
export const SET_INSTANCES = 'SET_INSTANCES';
|
||||
export const setInstances = value => ({ type: SET_INSTANCES, value });
|
||||
|
||||
export const SET_INSTANCE = 'SET_INSTANCE';
|
||||
export const setInstance = value => ({ type: SET_INSTANCE, value });
|
||||
|
||||
export const SET_GAME = 'SET_GAME';
|
||||
export const setGame = value => ({ type: SET_GAME, value });
|
||||
|
||||
export const SET_COMBINER = 'SET_COMBINER';
|
||||
export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) });
|
||||
|
||||
export const SET_SELECTED_CRYPS = 'SET_SELECTED_CRYPS';
|
||||
export const setSelectedCryps = value => ({ type: SET_SELECTED_CRYPS, value: Array.from(value) });
|
||||
|
||||
export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
|
||||
export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value });
|
||||
|
||||
export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
|
||||
export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
|
||||
|
||||
export const SET_INFO = 'SET_INFO';
|
||||
export const setInfo = (type, info) => ({ type: SET_INFO, value: type ? { type, info } : null });
|
||||
|
||||
export const SET_RECLAIMING = 'SET_RECLAIMING';
|
||||
export const setReclaiming = value => ({ type: SET_RECLAIMING, value });
|
||||
|
||||
export const SET_WS = 'SET_WS';
|
||||
export const setWs = value => ({ type: SET_WS, value });
|
||||
@@ -0,0 +1,45 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const InstanceListContainer = require('./instance.list.container');
|
||||
const CrypListContainer = require('./cryp.list.container');
|
||||
const GameContainer = require('./game.container');
|
||||
const InstanceContainer = require('./instance.container');
|
||||
|
||||
const addState = connect(
|
||||
(state) => {
|
||||
const { game, instance, ws } = state;
|
||||
|
||||
if (!game) {
|
||||
console.log('clear gs interval');
|
||||
// ws.clearGameStateInterval();
|
||||
}
|
||||
|
||||
return { game, instance };
|
||||
}
|
||||
);
|
||||
|
||||
function renderBody(props) {
|
||||
const { game, instance } = props;
|
||||
if (game) {
|
||||
return (
|
||||
<GameContainer />
|
||||
);
|
||||
}
|
||||
|
||||
if (instance) {
|
||||
return (
|
||||
<InstanceContainer />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<CrypListContainer />
|
||||
<InstanceListContainer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(renderBody);
|
||||
@@ -1,174 +1,4 @@
|
||||
// POSITIONING FNS
|
||||
// floors prevent subpixel rendering which looks trash
|
||||
|
||||
const CANVAS_WIDTH = () => Math.floor(window.innerHeight * 1.6);
|
||||
const CANVAS_HEIGHT = () => Math.floor(window.innerHeight);
|
||||
|
||||
const headerWidth = () => CANVAS_WIDTH();
|
||||
const headerHeight = () => Math.floor(CANVAS_HEIGHT() * 0.05);
|
||||
|
||||
const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH() * 0.3);
|
||||
const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() - headerHeight());
|
||||
const menuCrypListX = () => Math.floor(CANVAS_WIDTH() * 0.3);
|
||||
const menuCrypListY = () => headerHeight();
|
||||
|
||||
const itemListWidth = () => Math.floor(CANVAS_WIDTH() * 0.5);
|
||||
const itemListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.95);
|
||||
const itemListX = () => 0;
|
||||
const itemListY = () => headerHeight();
|
||||
const itemBlockWidth = () => Math.floor(itemListWidth() * 0.12);
|
||||
const itemBlockHeight = () => Math.floor(itemListHeight() * 0.04);
|
||||
|
||||
const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH() * 0.5);
|
||||
const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT() * 0.3);
|
||||
const menuNavigationX = () => Math.floor(CANVAS_WIDTH() * 0.5);
|
||||
const menuNavigationY = () => Math.floor(CANVAS_HEIGHT() * 0.7);
|
||||
|
||||
const menuMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.4);
|
||||
const menuMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
|
||||
const menuMainX = () => Math.floor(CANVAS_WIDTH() * 0.65);
|
||||
const menuMainY = () => headerHeight();
|
||||
|
||||
const homeMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.6);
|
||||
const homeMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
|
||||
const homeMainX = () => Math.floor(CANVAS_WIDTH() * 0.4);
|
||||
const homeMainY = () => headerHeight();
|
||||
|
||||
const combatWidth = () => CANVAS_WIDTH();
|
||||
const combatHeight = () => CANVAS_HEIGHT() - headerHeight();
|
||||
const combatY = () => headerHeight();
|
||||
const combatX = () => 0;
|
||||
const combatCrypMargin = () => Math.floor((CANVAS_HEIGHT() - headerHeight()) / 4.5);
|
||||
const combatTextMargin = () => Math.floor((CANVAS_HEIGHT() - headerHeight()) / 35);
|
||||
|
||||
const statsWidth = () => Math.floor(CANVAS_WIDTH() - menuCrypListWidth());
|
||||
const statsHeight = () => CANVAS_HEIGHT() - headerHeight();
|
||||
const statsY = () => headerHeight();
|
||||
const statsX = () => menuCrypListWidth();
|
||||
const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
|
||||
const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2);
|
||||
const statsTextMargin = () => 24;
|
||||
const statsLearnableMargin = () => 12;
|
||||
|
||||
const logWidth = () => Math.floor(combatWidth() * 0.5);
|
||||
const logHeight = () => Math.floor(combatHeight() * 0.3);
|
||||
const logY = () => Math.floor(headerHeight() + (combatHeight() * 0.7));
|
||||
const logX = () => Math.floor(combatWidth() * 0.2);
|
||||
|
||||
|
||||
module.exports = {
|
||||
TEXT: {
|
||||
NORMAL: { fontFamily: 'Jura', fontSize: 18, color: '#ffffff' },
|
||||
LEARNABLE: { fontFamily: 'Jura', fontSize: 18, color: '#ffffff' },
|
||||
HEADER: { fontFamily: 'Jura', fontSize: 24, color: '#ffffff', fontStyle: 'bold' },
|
||||
HOVER: { fontFamily: 'Jura', fontSize: 16, color: '#ffffff', backgroundColor: '#222222' },
|
||||
},
|
||||
|
||||
POSITIONS: {
|
||||
HEADER: {
|
||||
width: headerWidth,
|
||||
height: headerHeight,
|
||||
},
|
||||
|
||||
CRYP_LIST: {
|
||||
x: menuCrypListX,
|
||||
y: menuCrypListY,
|
||||
width: menuCrypListWidth,
|
||||
height: menuCrypListHeight,
|
||||
},
|
||||
|
||||
MENU_MAIN: {
|
||||
x: menuMainX,
|
||||
y: menuMainY,
|
||||
width: menuMainWidth,
|
||||
height: menuMainHeight,
|
||||
|
||||
},
|
||||
|
||||
HOME_MAIN: {
|
||||
x: homeMainX,
|
||||
y: homeMainY,
|
||||
width: homeMainWidth,
|
||||
height: homeMainHeight,
|
||||
|
||||
},
|
||||
|
||||
|
||||
NAVIGATION: {
|
||||
x: menuNavigationX,
|
||||
y: menuNavigationY,
|
||||
width: menuNavigationWidth,
|
||||
height: menuNavigationHeight,
|
||||
},
|
||||
|
||||
ITEM_LIST: {
|
||||
x: itemListX,
|
||||
y: itemListY,
|
||||
width: itemListWidth,
|
||||
height: itemListHeight,
|
||||
itemWidth: itemBlockWidth,
|
||||
itemHeight: itemBlockHeight,
|
||||
|
||||
},
|
||||
|
||||
STATS: {
|
||||
x: statsX,
|
||||
y: statsY,
|
||||
width: statsWidth,
|
||||
height: statsHeight,
|
||||
knownX: statsKnownX,
|
||||
learnableX: statsLearnableX,
|
||||
textMargin: statsTextMargin,
|
||||
learnableMargin: statsLearnableMargin,
|
||||
},
|
||||
|
||||
COMBAT: {
|
||||
x: combatX,
|
||||
y: combatY,
|
||||
width: combatWidth,
|
||||
height: combatHeight,
|
||||
crypMargin: combatCrypMargin,
|
||||
textMargin: combatTextMargin,
|
||||
|
||||
|
||||
LOG: {
|
||||
x: logX,
|
||||
y: logY,
|
||||
width: logWidth,
|
||||
height: logHeight,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
COLOURS: {
|
||||
BLUE: 0x004bfe,
|
||||
CYAN: 0x27e7c0,
|
||||
PURPLE: 0x61008c,
|
||||
YELLOW: 0xfdfe02,
|
||||
ORANGE: 0xff9215,
|
||||
PINK: 0xe766b6,
|
||||
GRAY: 0x9d9ea0,
|
||||
LBLUE: 0x87c6f2,
|
||||
GREEN: 0x166c4f,
|
||||
BROWN: 0x583108,
|
||||
BLACK: 0x000000,
|
||||
RED: 0xff0000,
|
||||
WHITE: 0xffffff,
|
||||
|
||||
SELECT: 0x003300,
|
||||
},
|
||||
|
||||
DELAYS: {
|
||||
MOVE_CREEP: 500,
|
||||
DAMAGE_TICK: 500,
|
||||
ANIMATION_DURATION: 1000,
|
||||
// wall: [500],
|
||||
// spit: [300, 500],
|
||||
// gravBomb: [300, 500],
|
||||
// gravBlast: [300, 500],
|
||||
// chargeBall: [300, 500],
|
||||
},
|
||||
|
||||
ITEMS: {
|
||||
SKILLS: {
|
||||
Amplify: {
|
||||
@@ -0,0 +1,64 @@
|
||||
const preact = require('preact');
|
||||
|
||||
const { stringSort } = require('./../utils');
|
||||
const molecule = require('./molecule');
|
||||
|
||||
const idSort = stringSort('id');
|
||||
|
||||
const COLOURS = [
|
||||
'#a52a2a',
|
||||
'#1FF01F',
|
||||
'#3498db',
|
||||
];
|
||||
|
||||
function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
|
||||
if (!cryps) return <div>not ready</div>;
|
||||
|
||||
// redux limitation + suggested workaround
|
||||
// so much for dumb components
|
||||
function selectCryp(id) {
|
||||
// remove
|
||||
const i = selectedCryps.findIndex(sid => sid === id);
|
||||
if (i > -1) {
|
||||
selectedCryps[i] = null;
|
||||
return setSelectedCryps(selectedCryps);
|
||||
}
|
||||
|
||||
// window insert
|
||||
const insert = selectedCryps.findIndex(j => j === null);
|
||||
if (insert === -1) return setSelectedCryps([id, null, null]);
|
||||
selectedCryps[insert] = id;
|
||||
return setSelectedCryps(selectedCryps);
|
||||
}
|
||||
|
||||
const crypPanels = cryps.sort(idSort).map(cryp => {
|
||||
const colour = selectedCryps.indexOf(cryp.id);
|
||||
const selected = colour > -1;
|
||||
|
||||
const borderColour = selected ? COLOURS[colour] : '#000000';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cryp.id}
|
||||
className="menu-cryp-ctr">
|
||||
<div
|
||||
className="menu-cryp"
|
||||
style={ { 'border-color': borderColour || 'whitesmoke' } }
|
||||
onClick={() => selectCryp(cryp.id)} >
|
||||
<figure className="img">
|
||||
{molecule}
|
||||
</figure>
|
||||
<h2>{cryp.name}</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="menu-cryps">
|
||||
{crypPanels}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = CrypList;
|
||||
@@ -0,0 +1,20 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const CrypList = require('./cryp.list.component');
|
||||
const actions = require('./../actions');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, cryps, selectedCryps } = state;
|
||||
return { cryps, selectedCryps };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setSelectedCryps(crypIds) {
|
||||
dispatch(actions.setSelectedCryps(crypIds));
|
||||
}
|
||||
return { setSelectedCryps };
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = addState(CrypList);
|
||||
@@ -0,0 +1,32 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function renderSpawnButton({ account, sendCrypSpawn }) {
|
||||
let name = '';
|
||||
|
||||
if (!account) return <div>...</div>;
|
||||
|
||||
return false;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="two columns">
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="cryp name"
|
||||
onChange={e => (name = e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="two columns">
|
||||
<button
|
||||
className="button"
|
||||
type="submit"
|
||||
onClick={() => sendCrypSpawn(name)}>
|
||||
Spawn 👾
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = renderSpawnButton;
|
||||
@@ -0,0 +1,16 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const CrypSpawnButton = require('./cryp.spawn.button');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws } = state;
|
||||
function sendCrypSpawn(name) {
|
||||
return ws.sendCrypSpawn(name);
|
||||
}
|
||||
|
||||
return { account: state.account, sendCrypSpawn };
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = addState(CrypSpawnButton);
|
||||
@@ -0,0 +1,202 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const molecule = require('./molecule');
|
||||
const saw = require('./saw.component');
|
||||
|
||||
// const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
|
||||
|
||||
function GamePanel(props) {
|
||||
const {
|
||||
game,
|
||||
activeSkill,
|
||||
setActiveSkill,
|
||||
selectSkillTarget,
|
||||
account,
|
||||
quit,
|
||||
} = props;
|
||||
|
||||
if (!game) return <div>...</div>;
|
||||
|
||||
function findCryp(id) {
|
||||
const team = game.teams.find(t => t.cryps.find(c => c.id === id));
|
||||
if (team) return team.cryps.find(c => c.id === id);
|
||||
return null;
|
||||
}
|
||||
|
||||
const otherTeams = game.teams.filter(t => t.id !== account.id);
|
||||
|
||||
const playerTeam = game.teams.find(t => t.id === account.id);
|
||||
|
||||
function stackElement(c, i) {
|
||||
let skills = game.stack.filter(s => s.source_cryp_id === c.id).map((s, j) => {
|
||||
const target = findCryp(s.target_cryp_id);
|
||||
return (
|
||||
<div key={j}>{s.skill} -> {target.name}</div>
|
||||
);
|
||||
});
|
||||
|
||||
if (!skills.length) skills = (<div> </div>);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="stack-line">
|
||||
{skills}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Cryp(cryp) {
|
||||
const ko = cryp.hp.value === 0 ? 'ko' : '';
|
||||
|
||||
const skills = range(0, 4).map(i => {
|
||||
const s = cryp.skills[i];
|
||||
if (!s) {
|
||||
return (
|
||||
<button
|
||||
disabled='true'
|
||||
key={i}
|
||||
className='cryp-skill-btn disabled'>
|
||||
<span> </span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const cdText = cryp.skills[i].cd > 0
|
||||
? `- ${s.cd}`
|
||||
: '';
|
||||
|
||||
const highlight = activeSkill
|
||||
? activeSkill.crypId === cryp.id && activeSkill.skill === s
|
||||
: false;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={i}
|
||||
disabled={!!cdText || ko}
|
||||
className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
|
||||
type="submit"
|
||||
onClick={() => setActiveSkill(cryp.id, s.skill)}>
|
||||
{s.skill} {cdText}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
const stats = [
|
||||
{ stat: 'hp', colour: '#1FF01F' },
|
||||
{ stat: 'red_shield', colour: '#a52a2a' },
|
||||
{ stat: 'blue_shield', colour: '#3498db' },
|
||||
].map((s, i) => (
|
||||
<figure key={i} alt={s.stat}>
|
||||
{saw(s.colour)}
|
||||
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
|
||||
</figure>
|
||||
));
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cryp.id}
|
||||
style={ activeSkill ? { cursor: 'pointer' } : {}}
|
||||
className={`cryp-box ${ko}`} >
|
||||
<div className="cryp-box-top">
|
||||
<figure
|
||||
className="img"
|
||||
onClick={() => selectSkillTarget(cryp.id)} >
|
||||
{molecule}
|
||||
<figcaption>{cryp.name}</figcaption>
|
||||
</figure>
|
||||
<div className="skills">
|
||||
{skills}
|
||||
</div>
|
||||
</div>
|
||||
<div className="stats">
|
||||
{stats}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayerTeam(team) {
|
||||
const cryps = team.cryps.map(c => Cryp(c));
|
||||
|
||||
return (
|
||||
<div className="team-player cryp-list">
|
||||
{cryps}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OpponentCryp(cryp, i) {
|
||||
const stats = [
|
||||
{ stat: 'hp', colour: '#1FF01F' },
|
||||
{ stat: 'red_shield', colour: '#a52a2a' },
|
||||
{ stat: 'blue_shield', colour: '#3498db' },
|
||||
].map((s, j) => (
|
||||
<figure key={j} alt={s.stat}>
|
||||
{saw(s.colour)}
|
||||
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
|
||||
</figure>
|
||||
));
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="cryp-box"
|
||||
style={ activeSkill ? { cursor: 'pointer' } : {}}
|
||||
onClick={() => selectSkillTarget(cryp.id)} >
|
||||
<div className="cryp-box-top">
|
||||
<figure className="img">
|
||||
{molecule}
|
||||
<figcaption>{cryp.name}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div className="stats">
|
||||
{stats}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function OpponentTeam(team) {
|
||||
const cryps = team.cryps.map(OpponentCryp);
|
||||
return (
|
||||
<div className="cryp-list" >
|
||||
{cryps}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
|
||||
|
||||
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div className="instance-hdr">
|
||||
<button
|
||||
className="game-back-btn instance-btn instance-ui-btn left"
|
||||
onClick={quit}>
|
||||
Back
|
||||
</button>
|
||||
<div className="spacer">
|
||||
<div> </div>
|
||||
</div>
|
||||
</div>
|
||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
||||
<div className="selected-skills">
|
||||
{selectedSkills}
|
||||
</div>
|
||||
<div className="team-opponent">
|
||||
{otherTeams.map(OpponentTeam)}
|
||||
</div>
|
||||
<div className="logs">
|
||||
{logs}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = GamePanel;
|
||||
@@ -0,0 +1,57 @@
|
||||
import 'particles.js/particles';
|
||||
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const Game = require('./game.component');
|
||||
const config = require('./particles.config');
|
||||
|
||||
const particlesJS = window.particlesJS;
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, game, account, activeSkill, activeIncoming } = state;
|
||||
|
||||
function selectSkillTarget(targetCrypId) {
|
||||
if (activeSkill) {
|
||||
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// intercept self casting skills
|
||||
if (activeSkill && activeSkill.skill.self_targeting) {
|
||||
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
|
||||
}
|
||||
|
||||
function selectIncomingTarget(crypId) {
|
||||
if (activeIncoming) {
|
||||
return ws.sendGameTarget(game.id, crypId, activeIncoming);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setActiveSkill(crypId, skill) {
|
||||
dispatch(actions.setActiveSkill(crypId, skill));
|
||||
// particlesJS(`particles-${crypId}`, config);
|
||||
}
|
||||
|
||||
function setActiveIncoming(skillId) {
|
||||
dispatch(actions.setActiveIncoming(skillId));
|
||||
}
|
||||
|
||||
function quit() {
|
||||
dispatch(actions.setGame(null));
|
||||
}
|
||||
|
||||
return { setActiveSkill, setActiveIncoming, quit };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
module.exports = addState(Game);
|
||||
@@ -0,0 +1,17 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
const LoginContainer = require('./login.container');
|
||||
|
||||
function renderHeader() {
|
||||
return (
|
||||
<header>
|
||||
<h1 className="header-title">
|
||||
cryps.gg
|
||||
</h1>
|
||||
<LoginContainer />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
module.exports = renderHeader;
|
||||
@@ -0,0 +1,29 @@
|
||||
const preact = require('preact');
|
||||
const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
|
||||
|
||||
function Info(args) {
|
||||
const {
|
||||
info,
|
||||
} = args;
|
||||
let desc = null;
|
||||
if (info) {
|
||||
if (info.type === 'item') {
|
||||
if (SKILLS[info.info]) {
|
||||
desc = SKILLS[info.info];
|
||||
} else if (SPECS[info.info]) {
|
||||
desc = SPECS[info.info];
|
||||
} else if (COLOURS[info.info]) {
|
||||
desc = COLOURS[info.info];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="instance-info">
|
||||
<div> {JSON.stringify(info)} </div>
|
||||
<div> {JSON.stringify(desc)} </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Info;
|
||||
@@ -0,0 +1,20 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
// const actions = require('../actions');
|
||||
|
||||
const Info = require('./info.component');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { info } = state;
|
||||
return { info };
|
||||
}
|
||||
/*
|
||||
function receiveDispatch(dispatch) {
|
||||
|
||||
return { };
|
||||
}
|
||||
*/
|
||||
);
|
||||
|
||||
module.exports = addState(Info);
|
||||
@@ -0,0 +1,110 @@
|
||||
const preact = require('preact');
|
||||
// const key = require('keymaster');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const VboxContainer = require('./vbox.container');
|
||||
const InfoContainer = require('./info.container');
|
||||
const molecule = require('./molecule');
|
||||
const saw = require('./saw.component');
|
||||
|
||||
function Cryp(cryp, sendVboxApply, setInfo) {
|
||||
const skills = range(0, 4).map(i => {
|
||||
const s = cryp.skills[i]
|
||||
? cryp.skills[i].skill
|
||||
: (<span> </span>);
|
||||
|
||||
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('item', s)}>{s}</button>;
|
||||
});
|
||||
|
||||
// needed for ondrop to fire
|
||||
function onDragOver(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function onDrop(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const item = parseInt(e.dataTransfer.getData('text'), 10);
|
||||
return sendVboxApply(cryp.id, item);
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{ stat: 'hp', colour: '#1FF01F' },
|
||||
{ stat: 'green_damage', colour: '#1FF01F' },
|
||||
{ stat: 'red_shield', colour: '#a52a2a' },
|
||||
{ stat: 'red_damage', colour: '#a52a2a' },
|
||||
{ stat: 'blue_shield', colour: '#3498db' },
|
||||
{ stat: 'blue_damage', colour: '#3498db' },
|
||||
{ stat: 'speed', colour: '#FFD123' },
|
||||
].map((s, i) => (
|
||||
<figure key={i} alt={s.stat}>
|
||||
{saw(s.colour)}
|
||||
<figcaption>{cryp[s.stat].value}</figcaption>
|
||||
</figure>
|
||||
));
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cryp.id}
|
||||
className="cryp-box"
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
<div className="cryp-box-top">
|
||||
<figure className="img">
|
||||
{molecule}
|
||||
<figcaption>{cryp.name}</figcaption>
|
||||
</figure>
|
||||
<div className="skills">
|
||||
{skills}
|
||||
</div>
|
||||
</div>
|
||||
<div className="stats">
|
||||
{stats}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InstanceComponent(args) {
|
||||
const {
|
||||
// account,
|
||||
instance,
|
||||
quit,
|
||||
sendInstanceReady,
|
||||
sendVboxApply,
|
||||
setInfo,
|
||||
} = args;
|
||||
|
||||
if (!instance) return <div>...</div>;
|
||||
|
||||
const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
|
||||
|
||||
return (
|
||||
<main className="instance" >
|
||||
<div className="instance-hdr">
|
||||
<button
|
||||
className="instance-btn instance-ui-btn menu-btn left"
|
||||
onClick={quit}>
|
||||
Menu
|
||||
</button>
|
||||
<div className="spacer">
|
||||
<div> </div>
|
||||
</div>
|
||||
<button
|
||||
className="instance-btn instance-ui-btn ready-btn"
|
||||
onClick={() => sendInstanceReady()}>
|
||||
Ready
|
||||
</button>
|
||||
</div>
|
||||
<VboxContainer />
|
||||
<div className="cryp-list">
|
||||
{cryps}
|
||||
</div>
|
||||
<InfoContainer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = InstanceComponent;
|
||||
@@ -0,0 +1,36 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const Instance = require('./instance.component');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, instance, account, combiner } = state;
|
||||
|
||||
function sendInstanceReady() {
|
||||
return ws.sendInstanceReady(instance.instance);
|
||||
}
|
||||
|
||||
function sendVboxApply(crypId, i) {
|
||||
return ws.sendVboxApply(instance.instance, crypId, i);
|
||||
}
|
||||
|
||||
return { instance, account, sendInstanceReady, sendVboxApply };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch, { instance, combiner }) {
|
||||
function quit() {
|
||||
dispatch(actions.setInstance(null));
|
||||
}
|
||||
|
||||
function setInfo(type, info) {
|
||||
dispatch(actions.setInfo(type, info));
|
||||
}
|
||||
|
||||
return { quit, setInfo };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
module.exports = addState(Instance);
|
||||
@@ -0,0 +1,43 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
|
||||
const { NULL_UUID } = require('./../utils');
|
||||
|
||||
function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
|
||||
if (!instances) return <div>...</div>;
|
||||
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className="menu-instance-btn full right"
|
||||
onClick={() => sendInstanceJoin()}>
|
||||
Join New Instance
|
||||
</button>
|
||||
);
|
||||
|
||||
const instancePanels = instances.map(instance => {
|
||||
const globalInstance = instance.instance === NULL_UUID;
|
||||
const name = globalInstance
|
||||
? 'Global Matchmaking'
|
||||
: `${instance.instance.substring(0, 5)}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
|
||||
key={instance.id}
|
||||
onClick={() => setActiveInstance(instance)}>
|
||||
{name}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
// <h2>Instances</h2>
|
||||
|
||||
return (
|
||||
<section className="menu-instance-list" >
|
||||
{instanceJoin}
|
||||
{instancePanels}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = instanceList;
|
||||
@@ -0,0 +1,35 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const InstanceList = require('./instance.list.component');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, selectedCryps, instances } = state;
|
||||
function sendCrypsSet() {
|
||||
console.log('set crypos');
|
||||
// return ws.sendGamePvp(crypIds);
|
||||
}
|
||||
|
||||
function sendInstanceJoin() {
|
||||
if (selectedCryps.length) {
|
||||
return ws.sendInstanceJoin(selectedCryps);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
return { instances, sendCrypsSet, sendInstanceJoin };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setActiveInstance(instance) {
|
||||
dispatch(actions.setInstance(instance));
|
||||
}
|
||||
|
||||
return { setActiveInstance };
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = addState(InstanceList);
|
||||
@@ -0,0 +1,76 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
|
||||
const saw = require('./saw.component');
|
||||
|
||||
function renderLogin({ account, submitLogin, submitRegister }) {
|
||||
if (account) return (
|
||||
<div className="header-status">
|
||||
<h3 className="header-username">{account.name}</h3>
|
||||
{saw('whitesmoke')}
|
||||
</div>
|
||||
);
|
||||
|
||||
const details = {
|
||||
name: '',
|
||||
password: '',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login" >
|
||||
<div className="field">
|
||||
<p className="control has-icons-left has-icons-right">
|
||||
<input
|
||||
className="input"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
onChange={e => (details.name = e.target.value)}
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<i className="fas fa-user" />
|
||||
</span>
|
||||
<span className="icon is-small is-right">
|
||||
<i className="fas fa-check" />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<p className="control has-icons-left">
|
||||
<input
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
onChange={e => (details.password = e.target.value)}
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<i className="fas fa-lock" />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<p className="control">
|
||||
<button
|
||||
className="button inverted"
|
||||
type="submit"
|
||||
onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
|
||||
Default
|
||||
</button>
|
||||
<button
|
||||
className="button inverted"
|
||||
type="submit"
|
||||
onClick={() => submitLogin(details.name, details.password)}>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
className="button inverted"
|
||||
type="submit"
|
||||
onClick={() => submitRegister(details.name, details.password)}>
|
||||
Register
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = renderLogin;
|
||||
@@ -0,0 +1,18 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const Login = require('./login.component');
|
||||
|
||||
const addState = connect(
|
||||
(state) => {
|
||||
const { ws } = state;
|
||||
function submitLogin(name, password) {
|
||||
return ws.sendAccountLogin(name, password);
|
||||
}
|
||||
function submitRegister(name, password) {
|
||||
return ws.sendAccountRegister(name, password);
|
||||
}
|
||||
return { account: state.account, submitLogin, submitRegister };
|
||||
},
|
||||
);
|
||||
|
||||
module.exports = addState(Login);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,41 @@
|
||||
const config = {
|
||||
particles: {
|
||||
number: { value: 300, density: { enable: true, value_area: 800 } },
|
||||
color: { value: '#ffffff' },
|
||||
shape: {
|
||||
type: 'circle',
|
||||
stroke: { width: 0, color: '#000000' },
|
||||
polygon: { nb_sides: 5 },
|
||||
image: { src: 'img/github.svg', width: 100, height: 100 }
|
||||
},
|
||||
opacity: {
|
||||
value: 0.5,
|
||||
random: false,
|
||||
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
|
||||
},
|
||||
size: {
|
||||
value: 3,
|
||||
random: true,
|
||||
anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
|
||||
},
|
||||
line_linked: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: '#ffffff',
|
||||
opacity: 0.4,
|
||||
width: 1,
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 6,
|
||||
direction: 'none',
|
||||
random: false,
|
||||
straight: false,
|
||||
out_mode: 'out',
|
||||
bounce: false,
|
||||
attract: { enable: false, rotateX: 600, rotateY: 1200 },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@@ -0,0 +1,10 @@
|
||||
const preact = require('preact');
|
||||
|
||||
module.exports = function saw(colour) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}>
|
||||
<path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
|
||||
<path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
function convertVar(v) {
|
||||
return v || '';
|
||||
// uncomment for double borders in vbox
|
||||
// if (v) {
|
||||
// return <div>{v}</div>;
|
||||
// }
|
||||
// return;
|
||||
}
|
||||
|
||||
function Vbox(args) {
|
||||
const {
|
||||
instance,
|
||||
combiner,
|
||||
reclaiming,
|
||||
sendVboxAccept,
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
sendVboxCombine,
|
||||
setCombiner,
|
||||
setReclaiming,
|
||||
setInfo,
|
||||
} = args;
|
||||
|
||||
const { vbox } = instance;
|
||||
if (!instance.vbox) return false;
|
||||
|
||||
// lots of rubbish to make it flow nice
|
||||
function boundClick(i) {
|
||||
if (reclaiming) {
|
||||
return sendVboxReclaim(i);
|
||||
}
|
||||
|
||||
const insert = combiner.findIndex(j => j === null);
|
||||
if (insert === -1) return setCombiner([i, null, null]);
|
||||
combiner[insert] = i;
|
||||
return setCombiner(combiner);
|
||||
}
|
||||
|
||||
function combinerRmv(i) {
|
||||
combiner[i] = null;
|
||||
return setCombiner(combiner);
|
||||
}
|
||||
|
||||
const free = [];
|
||||
for (let i = 0 ; i < 6; i++) {
|
||||
free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
|
||||
}
|
||||
|
||||
const freeRows = free.map((row, i) => {
|
||||
const cells = row.map((c, j) => (
|
||||
<td
|
||||
key={j}
|
||||
onClick={() => {
|
||||
if (c) {
|
||||
sendVboxAccept(j, i);
|
||||
setInfo('item', c);
|
||||
}
|
||||
}} >
|
||||
{convertVar(c)}
|
||||
</td>
|
||||
));
|
||||
|
||||
return (
|
||||
<tr key={i}>
|
||||
{cells}
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
||||
const boundTds = range(0, 9).map(i => {
|
||||
if (combiner.indexOf(i) > -1) {
|
||||
return (
|
||||
<td
|
||||
key={i}>
|
||||
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
draggable="true"
|
||||
onDragStart={e => e.dataTransfer.setData('text', i)}
|
||||
onClick={() => boundClick(i) }>
|
||||
{convertVar(vbox.bound[i])}
|
||||
</td>
|
||||
);
|
||||
});
|
||||
|
||||
const boundRows = [
|
||||
<tr key={0} >
|
||||
{boundTds[0]}
|
||||
{boundTds[1]}
|
||||
{boundTds[2]}
|
||||
</tr>,
|
||||
<tr key={1}>
|
||||
{boundTds[3]}
|
||||
{boundTds[4]}
|
||||
{boundTds[5]}
|
||||
</tr>,
|
||||
<tr key={2}>
|
||||
{boundTds[6]}
|
||||
{boundTds[7]}
|
||||
{boundTds[8]}
|
||||
</tr>,
|
||||
];
|
||||
|
||||
const combinerElement = (
|
||||
<table className="vbox-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td onClick={() => combinerRmv(0)}>{convertVar(vbox.bound[combiner[0]])}</td>
|
||||
<td onClick={() => combinerRmv(1)}>{convertVar(vbox.bound[combiner[1]])}</td>
|
||||
<td onClick={() => combinerRmv(2)}>{convertVar(vbox.bound[combiner[2]])}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="vbox">
|
||||
<div className="vbox-hdr">
|
||||
<div>VBOX</div>
|
||||
<div className="bits" >{vbox.bits}b</div>
|
||||
</div>
|
||||
<button
|
||||
className="instance-btn instance-ui-btn vbox-btn"
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
Reroll
|
||||
</button>
|
||||
<table className="vbox-table">
|
||||
<tbody>
|
||||
{freeRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<span>INVENTORY</span>
|
||||
<button
|
||||
className="instance-btn instance-ui-btn vbox-btn"
|
||||
onClick={() => setReclaiming(!reclaiming)}>
|
||||
reclaim
|
||||
</button>
|
||||
<table className="vbox-table">
|
||||
<tbody>
|
||||
{boundRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<span>I-COMBINATOR</span>
|
||||
<button
|
||||
className="instance-btn instance-ui-btn vbox-btn"
|
||||
onClick={() => sendVboxCombine()}>
|
||||
refine
|
||||
</button>
|
||||
{combinerElement}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Vbox;
|
||||
@@ -0,0 +1,57 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const Vbox = require('./vbox.component');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, instance, combiner, reclaiming } = state;
|
||||
|
||||
function sendVboxDiscard() {
|
||||
return ws.sendVboxDiscard(instance.instance);
|
||||
}
|
||||
|
||||
function sendVboxAccept(group, index) {
|
||||
return ws.sendVboxAccept(instance.instance, group, index);
|
||||
}
|
||||
|
||||
function sendVboxCombine() {
|
||||
return ws.sendVboxCombine(instance.instance, combiner);
|
||||
}
|
||||
|
||||
function sendVboxReclaim(i) {
|
||||
return ws.sendVboxReclaim(instance.instance, i);
|
||||
}
|
||||
|
||||
return {
|
||||
instance,
|
||||
combiner,
|
||||
reclaiming,
|
||||
sendVboxAccept,
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
sendVboxCombine,
|
||||
};
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setCombiner(c) {
|
||||
return dispatch(actions.setCombiner(c));
|
||||
}
|
||||
|
||||
function setReclaiming(v) {
|
||||
return dispatch(actions.setReclaiming(v));
|
||||
}
|
||||
|
||||
function setInfo(type, info) {
|
||||
return dispatch(actions.setInfo(type, info));
|
||||
}
|
||||
|
||||
|
||||
return { setCombiner, setReclaiming, setInfo };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
module.exports = addState(Vbox);
|
||||
@@ -1,219 +0,0 @@
|
||||
const toast = require('izitoast');
|
||||
|
||||
function registerEvents(registry, events, tutorial) {
|
||||
function setCryps(cryps) {
|
||||
registry.set('cryps', cryps);
|
||||
tutorial('homepage');
|
||||
}
|
||||
|
||||
function setCrypList(cryps) {
|
||||
registry.set('crypList', cryps);
|
||||
}
|
||||
|
||||
|
||||
function setWs(ws) {
|
||||
registry.set('ws', ws);
|
||||
}
|
||||
|
||||
function setGame(game) {
|
||||
if (game.phase === 'Skill') tutorial('skillPhase');
|
||||
if (game.phase === 'Target') tutorial('targetPhase');
|
||||
if (game.resolved.length) tutorial('resolutionPhase');
|
||||
if (game.phase === 'Finish') tutorial('finishPhase');
|
||||
return registry.set('game', game);
|
||||
}
|
||||
|
||||
function setAccount(account) {
|
||||
registry.set('account', account);
|
||||
registry.set('home', true);
|
||||
events.emit('ACCOUNT', account);
|
||||
}
|
||||
|
||||
function setActiveSkill(skill) {
|
||||
registry.set('activeSkill', skill);
|
||||
}
|
||||
|
||||
function setMenu() {
|
||||
registry.set('menu', true);
|
||||
}
|
||||
|
||||
function setVbox(items) {
|
||||
registry.set('vbox', items);
|
||||
}
|
||||
|
||||
function setScores(scores) {
|
||||
registry.set('scores', scores);
|
||||
}
|
||||
|
||||
function setPlayerList(list) {
|
||||
registry.set('playerList', list);
|
||||
registry.set('homeInstances', true);
|
||||
}
|
||||
|
||||
function setPlayer(player) {
|
||||
registry.set('player', player);
|
||||
if (!registry.get('inMenu')) {
|
||||
setMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function setZone(zone) {
|
||||
registry.set('zone', zone);
|
||||
}
|
||||
|
||||
function setGameList(gameList) {
|
||||
registry.set('gameList', gameList);
|
||||
}
|
||||
|
||||
function setCrypStatusUpdate(id, skill, target) {
|
||||
registry.set('crypStatusUpdate', { id, skill, target });
|
||||
}
|
||||
|
||||
events.on('SET_PLAYER', setPlayer);
|
||||
|
||||
events.on('SEND_SKILL', function skillActive(gameId, crypId, targetCrypId, skill) {
|
||||
const ws = registry.get('ws');
|
||||
ws.sendGameSkill(gameId, crypId, targetCrypId, skill);
|
||||
setCrypStatusUpdate(crypId, skill, targetCrypId);
|
||||
});
|
||||
|
||||
events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
|
||||
const cryps = registry.get('cryps');
|
||||
for (let i = 0; i < cryps.length; i += 1) {
|
||||
if (cryps[i].id === cryp.id) cryps[i].active = !cryps[i].active;
|
||||
}
|
||||
return setCryps(cryps);
|
||||
});
|
||||
|
||||
const errMessages = {
|
||||
select_cryps: 'Select your cryps before battle using the numbered buttons next to the cryp avatar',
|
||||
complete_nodes: 'You need to complete the previously connected nodes first',
|
||||
max_skills: 'Your cryp can only learn a maximum of 4 skills',
|
||||
|
||||
};
|
||||
|
||||
function errorPrompt(type) {
|
||||
const message = errMessages[type];
|
||||
const OK_BUTTON = '<button type="submit">OK</button>';
|
||||
toast.info({
|
||||
theme: 'dark',
|
||||
color: 'black',
|
||||
timeout: false,
|
||||
drag: false,
|
||||
position: 'center',
|
||||
maxWidth: window.innerWidth / 2,
|
||||
close: false,
|
||||
buttons: [
|
||||
[OK_BUTTON, (instance, thisToast) => instance.hide({ transitionOut: 'fadeOut' }, thisToast)],
|
||||
],
|
||||
message,
|
||||
});
|
||||
}
|
||||
|
||||
function loginPrompt() {
|
||||
const USER_INPUT = '<input className="input" type="email" placeholder="username" />';
|
||||
const PASSWORD_INPUT = '<input className="input" type="password" placeholder="password" />';
|
||||
const LOGIN_BUTTON = '<button type="submit">Login</button>';
|
||||
const REGISTER_BUTTON = '<button type="submit">Register</button>';
|
||||
const DEMO_BUTTON = '<button type="submit">Demo</button>';
|
||||
|
||||
const ws = registry.get('ws');
|
||||
|
||||
function submitLogin(instance, thisToast, button, e, inputs) {
|
||||
const USERNAME = inputs[0].value;
|
||||
const PASSWORD = inputs[1].value;
|
||||
ws.sendAccountLogin(USERNAME, PASSWORD);
|
||||
}
|
||||
|
||||
function submitRegister(instance, thisToast, button, e, inputs) {
|
||||
const USERNAME = inputs[0].value;
|
||||
const PASSWORD = inputs[1].value;
|
||||
ws.sendAccountCreate(USERNAME, PASSWORD);
|
||||
}
|
||||
|
||||
function submitDemo() {
|
||||
ws.sendAccountDemo();
|
||||
}
|
||||
|
||||
const existing = document.querySelector('#login'); // Selector of your toast
|
||||
if (existing) toast.hide({}, existing, 'reconnect');
|
||||
|
||||
toast.question({
|
||||
id: 'login',
|
||||
theme: 'dark',
|
||||
color: 'black',
|
||||
timeout: false,
|
||||
// overlay: true,
|
||||
drag: false,
|
||||
close: false,
|
||||
title: 'LOGIN',
|
||||
position: 'center',
|
||||
inputs: [
|
||||
[USER_INPUT, 'change', () => true, true], // true to focus
|
||||
[PASSWORD_INPUT, 'change', () => true],
|
||||
],
|
||||
buttons: [
|
||||
[LOGIN_BUTTON, submitLogin], // true to focus
|
||||
[REGISTER_BUTTON, submitRegister], // true to focus
|
||||
[DEMO_BUTTON, submitDemo], // true to focus
|
||||
],
|
||||
});
|
||||
|
||||
events.once('ACCOUNT', function closeLoginCb() {
|
||||
const prompt = document.querySelector('#login'); // Selector of your toast
|
||||
if (prompt) toast.hide({ transitionOut: 'fadeOut' }, prompt, 'event');
|
||||
});
|
||||
}
|
||||
|
||||
events.on('CRYP_SPAWN', function spawnPrompt() {
|
||||
const NAME_INPUT = '<input className="input" type="email" placeholder="name" />';
|
||||
const SPAWN_BUTTON = '<button type="submit">SPAWN</button>';
|
||||
|
||||
const ws = registry.get('ws');
|
||||
|
||||
function submitSpawn(instance, thisToast, button, e, inputs) {
|
||||
const NAME = inputs[0].value;
|
||||
ws.sendCrypSpawn(NAME);
|
||||
instance.hide({ transitionOut: 'fadeOut' }, thisToast, 'button');
|
||||
}
|
||||
|
||||
toast.question({
|
||||
theme: 'dark',
|
||||
color: 'black',
|
||||
timeout: false,
|
||||
// overlay: true,
|
||||
drag: false,
|
||||
close: true,
|
||||
title: 'SPAWN CRYP',
|
||||
position: 'center',
|
||||
inputs: [
|
||||
[NAME_INPUT, 'change', null, true], // true to focus
|
||||
],
|
||||
buttons: [
|
||||
[SPAWN_BUTTON, submitSpawn], // true to focus
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
tutorial('welcome');
|
||||
|
||||
return {
|
||||
errorPrompt,
|
||||
loginPrompt,
|
||||
setAccount,
|
||||
setActiveSkill,
|
||||
setCryps,
|
||||
setCrypList,
|
||||
setGame,
|
||||
setMenu,
|
||||
setPlayer,
|
||||
setPlayerList,
|
||||
setVbox,
|
||||
setWs,
|
||||
setGameList,
|
||||
setZone,
|
||||
setScores,
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = registerEvents;
|
||||
@@ -0,0 +1,211 @@
|
||||
const toast = require('izitoast');
|
||||
|
||||
const actions = require('./actions');
|
||||
|
||||
function registerEvents(store) {
|
||||
function setCryps(cryps) {
|
||||
console.log('EVENT ->', 'cryps', cryps);
|
||||
}
|
||||
|
||||
function setCrypList(cryps) {
|
||||
store.dispatch(actions.setCryps(cryps));
|
||||
}
|
||||
|
||||
function setWs(ws) {
|
||||
console.log('EVENT ->', 'ws', ws);
|
||||
}
|
||||
|
||||
function setGame(game) {
|
||||
store.dispatch(actions.setGame(game));
|
||||
// return console.log('EVENT ->', 'game', game);
|
||||
}
|
||||
|
||||
function setAccount(account) {
|
||||
store.dispatch(actions.setAccount(account));
|
||||
}
|
||||
|
||||
function clearCombiner() {
|
||||
store.dispatch(actions.setCombiner([null, null, null]));
|
||||
}
|
||||
|
||||
function setActiveSkill(skill) {
|
||||
store.dispatch(actions.setActiveSkill(skill));
|
||||
}
|
||||
|
||||
function setMenu() {
|
||||
console.log('EVENT ->', 'menu', true);
|
||||
}
|
||||
|
||||
function setVbox(items) {
|
||||
console.log('EVENT ->', 'vbox', items);
|
||||
}
|
||||
|
||||
function setScores(scores) {
|
||||
console.log('EVENT ->', 'scores', scores);
|
||||
}
|
||||
|
||||
function setInstanceList(v) {
|
||||
return store.dispatch(actions.setInstances(v));
|
||||
}
|
||||
|
||||
function setPlayer(v) {
|
||||
return store.dispatch(actions.setInstance(v));
|
||||
}
|
||||
|
||||
function setZone(zone) {
|
||||
console.log('EVENT ->', 'zone', zone);
|
||||
}
|
||||
|
||||
function setGameList(gameList) {
|
||||
console.log('EVENT ->', 'gameList', gameList);
|
||||
}
|
||||
|
||||
function setCrypStatusUpdate(id, skill, target) {
|
||||
console.log('EVENT ->', 'crypStatusUpdate', { id, skill, target });
|
||||
}
|
||||
|
||||
// events.on('SET_PLAYER', setPlayer);
|
||||
|
||||
// events.on('SEND_SKILL', function skillActive(gameId, crypId, targetCrypId, skill) {
|
||||
// ws.sendGameSkill(gameId, crypId, targetCrypId, skill);
|
||||
// setCrypStatusUpdate(crypId, skill, targetCrypId);
|
||||
// });
|
||||
|
||||
// events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
|
||||
// for (let i = 0; i < cryps.length; i += 1) {
|
||||
// if (cryps[i].id === cryp.id) cryps[i].active = !cryps[i].active;
|
||||
// }
|
||||
// return setCryps(cryps);
|
||||
// });
|
||||
|
||||
const errMessages = {
|
||||
select_cryps: 'Select your cryps before battle using the numbered buttons next to the cryp avatar',
|
||||
complete_nodes: 'You need to complete the previously connected nodes first',
|
||||
max_skills: 'Your cryp can only learn a maximum of 4 skills',
|
||||
|
||||
};
|
||||
|
||||
function errorPrompt(type) {
|
||||
const message = errMessages[type];
|
||||
const OK_BUTTON = '<button type="submit">OK</button>';
|
||||
toast.info({
|
||||
theme: 'dark',
|
||||
color: 'black',
|
||||
timeout: false,
|
||||
drag: false,
|
||||
position: 'center',
|
||||
maxWidth: window.innerWidth / 2,
|
||||
close: false,
|
||||
buttons: [
|
||||
[OK_BUTTON, (instance, thisToast) => instance.hide({ transitionOut: 'fadeOut' }, thisToast)],
|
||||
],
|
||||
message,
|
||||
});
|
||||
}
|
||||
|
||||
// function loginPrompt() {
|
||||
// const USER_INPUT = '<input className="input" type="email" placeholder="username" />';
|
||||
// const PASSWORD_INPUT = '<input className="input" type="password" placeholder="password" />';
|
||||
// const LOGIN_BUTTON = '<button type="submit">Login</button>';
|
||||
// const REGISTER_BUTTON = '<button type="submit">Register</button>';
|
||||
// const DEMO_BUTTON = '<button type="submit">Demo</button>';
|
||||
|
||||
// const ws = registry.get('ws');
|
||||
|
||||
// function submitLogin(instance, thisToast, button, e, inputs) {
|
||||
// const USERNAME = inputs[0].value;
|
||||
// const PASSWORD = inputs[1].value;
|
||||
// ws.sendAccountLogin(USERNAME, PASSWORD);
|
||||
// }
|
||||
|
||||
// function submitRegister(instance, thisToast, button, e, inputs) {
|
||||
// const USERNAME = inputs[0].value;
|
||||
// const PASSWORD = inputs[1].value;
|
||||
// ws.sendAccountCreate(USERNAME, PASSWORD);
|
||||
// }
|
||||
|
||||
// function submitDemo() {
|
||||
// ws.sendAccountDemo();
|
||||
// }
|
||||
|
||||
// const existing = document.querySelector('#login'); // Selector of your toast
|
||||
// if (existing) toast.hide({}, existing, 'reconnect');
|
||||
|
||||
// toast.question({
|
||||
// id: 'login',
|
||||
// theme: 'dark',
|
||||
// color: 'black',
|
||||
// timeout: false,
|
||||
// // overlay: true,
|
||||
// drag: false,
|
||||
// close: false,
|
||||
// title: 'LOGIN',
|
||||
// position: 'center',
|
||||
// inputs: [
|
||||
// [USER_INPUT, 'change', () => true, true], // true to focus
|
||||
// [PASSWORD_INPUT, 'change', () => true],
|
||||
// ],
|
||||
// buttons: [
|
||||
// [LOGIN_BUTTON, submitLogin], // true to focus
|
||||
// [REGISTER_BUTTON, submitRegister], // true to focus
|
||||
// [DEMO_BUTTON, submitDemo], // true to focus
|
||||
// ],
|
||||
// });
|
||||
|
||||
// console.log('ACCOUNT', function closeLoginCb() {
|
||||
// const prompt = document.querySelector('#login'); // Selector of your toast
|
||||
// if (prompt) toast.hide({ transitionOut: 'fadeOut' }, prompt, 'EVENT ->');
|
||||
// });
|
||||
// }
|
||||
|
||||
// events.on('CRYP_SPAWN', function spawnPrompt() {
|
||||
// const NAME_INPUT = '<input className="input" type="email" placeholder="name" />';
|
||||
// const SPAWN_BUTTON = '<button type="submit">SPAWN</button>';
|
||||
|
||||
// const ws = registry.get('ws');
|
||||
|
||||
// function submitSpawn(instance, thisToast, button, e, inputs) {
|
||||
// const NAME = inputs[0].value;
|
||||
// ws.sendCrypSpawn(NAME);
|
||||
// instance.hide({ transitionOut: 'fadeOut' }, thisToast, 'button');
|
||||
// }
|
||||
|
||||
// toast.question({
|
||||
// theme: 'dark',
|
||||
// color: 'black',
|
||||
// timeout: false,
|
||||
// // overlay: true,
|
||||
// drag: false,
|
||||
// close: true,
|
||||
// title: 'SPAWN CRYP',
|
||||
// position: 'center',
|
||||
// inputs: [
|
||||
// [NAME_INPUT, 'change', null, true], // true to focus
|
||||
// ],
|
||||
// buttons: [
|
||||
// [SPAWN_BUTTON, submitSpawn], // true to focus
|
||||
// ],
|
||||
// });
|
||||
// });
|
||||
|
||||
return {
|
||||
errorPrompt,
|
||||
// loginPrompt,
|
||||
clearCombiner,
|
||||
setAccount,
|
||||
setActiveSkill,
|
||||
setCryps,
|
||||
setCrypList,
|
||||
setGame,
|
||||
setMenu,
|
||||
setPlayer,
|
||||
setInstanceList,
|
||||
setVbox,
|
||||
setWs,
|
||||
setGameList,
|
||||
setZone,
|
||||
setScores,
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = registerEvents;
|
||||
@@ -0,0 +1,12 @@
|
||||
const key = require('keymaster');
|
||||
const actions = require('./actions');
|
||||
|
||||
function setupKeys(store) {
|
||||
console.log('binding keys');
|
||||
key.unbind('esc');
|
||||
key('esc', () => store.dispatch(actions.setCombiner([null, null, null])));
|
||||
key('esc', () => store.dispatch(actions.setReclaiming(false)));
|
||||
key('esc', () => store.dispatch(actions.setActiveSkill(null)));
|
||||
}
|
||||
|
||||
module.exports = setupKeys;
|
||||
@@ -1,17 +0,0 @@
|
||||
const renderCryps = require('./scenes/cryps');
|
||||
|
||||
const createSocket = require('./socket');
|
||||
const registerEvents = require('./events');
|
||||
const createTutorial = require('./tutorial');
|
||||
|
||||
document.fonts.load('10pt "Jura"').then(() => {
|
||||
const game = renderCryps();
|
||||
const tutorial = createTutorial();
|
||||
const events = registerEvents(game.registry, game.events, tutorial);
|
||||
const ws = createSocket(events);
|
||||
|
||||
events.setWs(ws);
|
||||
events.setGameList([]);
|
||||
|
||||
ws.connect();
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
const preact = require('preact');
|
||||
const jdenticon = require('jdenticon');
|
||||
|
||||
const { Provider } = require('preact-redux');
|
||||
const { createStore, combineReducers } = require('redux');
|
||||
|
||||
const reducers = require('./reducers');
|
||||
const actions = require('./actions');
|
||||
const setupKeys = require('./keyboard');
|
||||
const createSocket = require('./socket');
|
||||
const registerEvents = require('./events');
|
||||
|
||||
const Header = require('./components/header.component');
|
||||
const Body = require('./components/body.component');
|
||||
|
||||
// Redux Store
|
||||
const store = createStore(
|
||||
combineReducers({
|
||||
account: reducers.accountReducer,
|
||||
activeSkill: reducers.activeSkillReducer,
|
||||
combiner: reducers.combinerReducer,
|
||||
cryps: reducers.crypsReducer,
|
||||
game: reducers.gameReducer,
|
||||
info: reducers.infoReducer,
|
||||
instance: reducers.instanceReducer,
|
||||
instances: reducers.instancesReducer,
|
||||
reclaiming: reducers.reclaimingReducer,
|
||||
selectedCryps: reducers.selectedCrypsReducer,
|
||||
ws: reducers.wsReducer,
|
||||
})
|
||||
);
|
||||
|
||||
document.fonts.load('16pt "Jura"').then(() => {
|
||||
const events = registerEvents(store);
|
||||
store.subscribe(() => console.log(store.getState()));
|
||||
setupKeys(store);
|
||||
|
||||
const ws = createSocket(events);
|
||||
store.dispatch(actions.setWs(ws));
|
||||
ws.connect();
|
||||
|
||||
// tells jdenticon to look for new svgs and render them
|
||||
// so we don't have to setInnerHtml or manually call update
|
||||
jdenticon.config = {
|
||||
replaceMode: 'observe',
|
||||
};
|
||||
|
||||
const Cryps = () => (
|
||||
<section className='cryps' >
|
||||
<Header />
|
||||
<Body />
|
||||
</section>
|
||||
);
|
||||
|
||||
const Main = () => (
|
||||
<Provider store={store}>
|
||||
<Cryps />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line
|
||||
preact.render(<Main />, document.body);
|
||||
});
|
||||
@@ -0,0 +1,125 @@
|
||||
const actions = require('./actions');
|
||||
|
||||
const defaultAccount = null;
|
||||
function accountReducer(state = defaultAccount, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_ACCOUNT:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultActiveSkill = null;
|
||||
function activeSkillReducer(state = defaultActiveSkill, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_ACTIVE_SKILL:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultCryps = null;
|
||||
function crypsReducer(state = defaultCryps, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_CRYPS:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultInstances = null;
|
||||
function instancesReducer(state = defaultInstances, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_INSTANCES:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultInstance = null;
|
||||
function instanceReducer(state = defaultInstance, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_INSTANCE:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultSelectedCryps = [null, null, null];
|
||||
function selectedCrypsReducer(state = defaultSelectedCryps, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_SELECTED_CRYPS:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultCombiner = [null, null, null];
|
||||
function combinerReducer(state = defaultCombiner, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_COMBINER:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultGame = null;
|
||||
function gameReducer(state = defaultGame, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_GAME:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultReclaiming = false;
|
||||
function reclaimingReducer(state = defaultReclaiming, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_RECLAIMING:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultWs = null;
|
||||
function wsReducer(state = defaultWs, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_WS:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultInfo = null;
|
||||
function infoReducer(state = defaultInfo, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_INFO:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
accountReducer,
|
||||
activeSkillReducer,
|
||||
combinerReducer,
|
||||
crypsReducer,
|
||||
gameReducer,
|
||||
instanceReducer,
|
||||
instancesReducer,
|
||||
reclaimingReducer,
|
||||
selectedCrypsReducer,
|
||||
wsReducer,
|
||||
infoReducer,
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
const genAvatar = (name) => {
|
||||
let hash = 0;
|
||||
if (name.length === 0) return hash;
|
||||
// Probs don't need to hash using the whole string
|
||||
for (let i = 0; i < name.length; i += 1) {
|
||||
const chr = name.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + chr;
|
||||
hash = hash & 10000; // We have avatars named 0-19
|
||||
}
|
||||
return `sprite${hash}`;
|
||||
};
|
||||
|
||||
module.exports = genAvatar;
|
||||
@@ -1,166 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const CHART = `
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
#extension GL_OES_standard_derivatives : enable
|
||||
|
||||
uniform float time;
|
||||
uniform vec2 mouse;
|
||||
uniform vec2 resolution;
|
||||
|
||||
float rand(float n){return fract(sin(n) * 43758.5453123 * time * 0.00001);}
|
||||
|
||||
float noise(float p){
|
||||
float fl = floor(p);
|
||||
float fc = fract(p);
|
||||
// return mix(rand(fl), rand(fl + 1.0), p);
|
||||
return mix(rand(fl), rand(fl + 1.0), p);
|
||||
}
|
||||
|
||||
float getLine(vec2 p, float y){
|
||||
float margin = 0.;
|
||||
|
||||
vec2 pos = p;
|
||||
float a = time * 100. + y * 31.;
|
||||
vec2 lineCenter = vec2(0.5, y);
|
||||
|
||||
pos -= lineCenter;
|
||||
pos *- mat2(cos(a), -sin(a), sin(a), cos(a));
|
||||
pos += lineCenter;
|
||||
|
||||
|
||||
float marginb = 0.005;
|
||||
float b = 0.004;
|
||||
float t = y + (noise((pos.x + y) * 100.) - 0.5) * 0.02;
|
||||
float f = (smoothstep(t - b, t, pos.y) - smoothstep(t, t + b, pos.y));
|
||||
f *= smoothstep(margin - marginb, margin, pos.x) - smoothstep(1. - margin, 1. - margin + marginb, pos.x);
|
||||
f *= 0.8;
|
||||
|
||||
float light = 0.5 + 0.5 * sin(time * .2);
|
||||
vec2 point = vec2(margin + light * (1. - margin * 2.), t);
|
||||
f += .008 / distance(pos, point);
|
||||
return f;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 p = gl_FragCoord.xy / resolution.xy;
|
||||
float f = 0.;
|
||||
|
||||
for(int i = 0; i < 10; i++){
|
||||
f += getLine(p, 0.1 + (0.8) / 10. * float(i));
|
||||
}
|
||||
|
||||
vec3 color = vec3(0., .4, .6) * f;
|
||||
gl_FragColor = vec4(color, 1.);
|
||||
}`;
|
||||
|
||||
const STARS = `
|
||||
//--- hatsuyuki ---
|
||||
// by Catzpaw 2016
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
#extension GL_OES_standard_derivatives : enable
|
||||
|
||||
uniform float time;
|
||||
uniform vec2 resolution;
|
||||
float hash(float x){
|
||||
return fract(sin(x*133.3)*12.13);
|
||||
}
|
||||
void main(void){
|
||||
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
|
||||
vec3 c=vec3(.2,.2,.2);
|
||||
float a=4.4;
|
||||
float si=sin(a),co=cos(a);
|
||||
uv*=mat2(co,-si,si,co);
|
||||
uv*=length(uv+vec2(0,1.9))*.5+1.;
|
||||
float v=1.-sin(hash(floor(uv.x*200.))*2.);
|
||||
float b=clamp(abs(sin(5.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;
|
||||
c*=v*b;
|
||||
gl_FragColor = vec4(c,2);
|
||||
}
|
||||
`;
|
||||
|
||||
const PLASMA = `
|
||||
precision mediump float;
|
||||
|
||||
uniform sampler2D uMainSampler;
|
||||
uniform vec2 resolution;
|
||||
uniform float time;
|
||||
|
||||
varying vec2 outTexCoord;
|
||||
varying vec4 outTint;
|
||||
|
||||
#define MAX_ITER 4
|
||||
|
||||
void main( void )
|
||||
{
|
||||
vec2 v_texCoord = gl_FragCoord.xy / resolution;
|
||||
|
||||
vec2 p = v_texCoord * 8.0 - vec2(20.0);
|
||||
vec2 i = p;
|
||||
float c = 1.0;
|
||||
float inten = .05;
|
||||
|
||||
for (int n = 0; n < MAX_ITER; n++)
|
||||
{
|
||||
float t = time * (1.0 - (3.0 / float(n+1)));
|
||||
|
||||
i = p + vec2(cos(t - i.x) + sin(t + i.y),
|
||||
sin(t - i.y) + cos(t + i.x));
|
||||
|
||||
c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),
|
||||
p.y / (cos(i.y+t)/inten)));
|
||||
}
|
||||
|
||||
c /= float(MAX_ITER);
|
||||
c = 1.5 - sqrt(c);
|
||||
|
||||
vec4 texColor = vec4(0.01, 0.01, 0.01, 1.0);
|
||||
|
||||
texColor.rgb *= (1.0 / (1.0 - (c + 0.05)));
|
||||
|
||||
gl_FragColor = texColor;
|
||||
}
|
||||
`;
|
||||
|
||||
const CustomPipeline = new Phaser.Class({
|
||||
Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
|
||||
initialize: function CustomPipeline (game) {
|
||||
Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
|
||||
game,
|
||||
renderer: game.renderer,
|
||||
fragShader: STARS,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
class Background extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'Background', active: true });
|
||||
this.bgTime = 10.0;
|
||||
}
|
||||
|
||||
create() {
|
||||
const game = this.game;
|
||||
this.customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
|
||||
this.customPipeline.setFloat2('resolution', 1600, 1000);
|
||||
|
||||
const sprite = this.add.sprite(800, 500);
|
||||
sprite.setPipeline('Custom');
|
||||
sprite.displayWidth = 1600 * window.devicePixelRatio;
|
||||
sprite.displayHeight = 1000 * window.devicePixelRatio;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.customPipeline.setFloat1('time', this.bgTime);
|
||||
this.bgTime += 0.005;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Background;
|
||||
@@ -1,250 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { COMBAT }, DELAYS } = require('./constants');
|
||||
|
||||
const randomColour = () => {
|
||||
const colours = ['green', 'blue', 'red', 'white', 'yellow'];
|
||||
return colours[Math.floor(Math.random() * 5)];
|
||||
};
|
||||
|
||||
const animationParams = (sourceAlly) => {
|
||||
const spawnLocation = sourceAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
|
||||
const speed = sourceAlly ? 250 : -250;
|
||||
const img = randomColour();
|
||||
const angleMin = sourceAlly ? 320 : 180;
|
||||
const angleMax = sourceAlly ? 360 : 220;
|
||||
return { spawnLocation, speed, img, angleMin, angleMax };
|
||||
};
|
||||
|
||||
const randomAttack = () => {
|
||||
const animations = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
|
||||
return animations[Math.floor(Math.random() * 5)];
|
||||
};
|
||||
|
||||
class CombatSkills extends Phaser.GameObjects.Group {
|
||||
constructor(scene) {
|
||||
super(scene);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
getSkill(type, sourceAlly, targetAlly, castLocation) {
|
||||
const genericHeal = ['Heal', 'Triage', 'TriageTick', 'DecayTick'];
|
||||
const genericBlock = ['Block', 'Parry', 'Evasion', 'Shield'];
|
||||
|
||||
if (genericHeal.includes(type)) {
|
||||
this.genericHeal(targetAlly, castLocation);
|
||||
} else if (genericBlock.includes(type)) {
|
||||
this.genericBlock(sourceAlly);
|
||||
} else {
|
||||
this[randomAttack()](sourceAlly);
|
||||
}
|
||||
}
|
||||
|
||||
genericHeal(sourceAlly, castLocation) {
|
||||
// const { sourceX, sourceY } = getCrypPosition(sourcePos, 0);
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
const colour = randomColour();
|
||||
const particles = this.scene.add.particles(colour);
|
||||
const x = sourceAlly ? COMBAT.width() * 0.3 : COMBAT.width() * 0.7;
|
||||
|
||||
const emitter2 = particles.createEmitter({
|
||||
x: castLocation.x,
|
||||
y: castLocation.y,
|
||||
moveToX: x,
|
||||
moveToY: COMBAT.height() * 0.2,
|
||||
speed: 500,
|
||||
lifespan: lifespan / 3,
|
||||
scale: { start: 0.5, end: 1 },
|
||||
quantity: 3,
|
||||
_frequency: 20,
|
||||
blendMode: 'ADD',
|
||||
emitZone: { source: new Phaser.Geom.Rectangle(-200, -100, 400, 200) },
|
||||
});
|
||||
|
||||
const emitter = particles.createEmitter({
|
||||
x,
|
||||
y: COMBAT.height() * 0.2,
|
||||
angle: { min: 250, max: 290 },
|
||||
speed: 250,
|
||||
gravityY: 1000,
|
||||
quantity: 4,
|
||||
scale: { start: 0.1, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
lifespan,
|
||||
active: false,
|
||||
});
|
||||
|
||||
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(lifespan / 3, () => { emitter2.stop(); }, [], this);
|
||||
this.scene.time.delayedCall(lifespan / 3, () => { emitter.active = true; }, [], this);
|
||||
|
||||
this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
|
||||
}
|
||||
|
||||
genericBlock(sourceAlly) {
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
const colour = randomColour();
|
||||
const x = sourceAlly ? COMBAT.width() * 0.3 : COMBAT.width() * 0.7;
|
||||
const emitter1 = this.scene.add.particles(colour).createEmitter({
|
||||
x,
|
||||
y: COMBAT.height() * 0.4,
|
||||
scale: { start: 0.75, end: 0.25 },
|
||||
blendMode: 'ADD',
|
||||
emitZone: {
|
||||
source: new Phaser.Geom.Rectangle(-100, -100, 200, 200),
|
||||
type: 'edge',
|
||||
quantity: 24,
|
||||
yoyo: true,
|
||||
},
|
||||
});
|
||||
const emitter2 = this.scene.add.particles(colour).createEmitter({
|
||||
x,
|
||||
y: COMBAT.height() * 0.4,
|
||||
blendMode: 'SCREEN',
|
||||
scale: { start: 0.2, end: 0 },
|
||||
speed: { min: -100, max: 100 },
|
||||
quantity: 50,
|
||||
active: false,
|
||||
emitZone: {
|
||||
source: new Phaser.Geom.Rectangle(-100, -100, 200, 200),
|
||||
type: 'edge',
|
||||
quantity: 50,
|
||||
},
|
||||
});
|
||||
this.scene.time.delayedCall(lifespan / 2, () => { emitter1.stop(); }, [], this);
|
||||
this.scene.time.delayedCall(lifespan / 2, () => { emitter2.active = true; }, [], this);
|
||||
this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this);
|
||||
}
|
||||
|
||||
wall(sourceAlly) {
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
const { spawnLocation, speed, img } = animationParams(sourceAlly);
|
||||
const particles = this.scene.add.particles(img);
|
||||
const emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 },
|
||||
speedX: { min: speed, max: speed * 2 },
|
||||
scale: { start: 0.4, end: 0 },
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
lifespan,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
|
||||
}
|
||||
|
||||
spit(sourceAlly) {
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(sourceAlly);
|
||||
const particles = this.scene.add.particles(img);
|
||||
const emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.35,
|
||||
angle: { min: angleMin, max: angleMax },
|
||||
speed: speed * 2,
|
||||
scale: { start: 0.4, end: 1 },
|
||||
gravityY: 250,
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
lifespan,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
|
||||
}
|
||||
|
||||
gravBomb(sourceAlly) {
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
|
||||
const { spawnLocation, img } = animationParams(!sourceAlly);
|
||||
const particles = this.scene.add.particles(img);
|
||||
const well = particles.createGravityWell({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.25,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
this.emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.25,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
lifespan,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(lifespan, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
|
||||
}
|
||||
|
||||
gravBlast(sourceAlly) {
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
const WELL_END = lifespan / 2;
|
||||
|
||||
const img = randomColour();
|
||||
const spawnLocation = sourceAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
|
||||
const isEnemyLocation = sourceAlly ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3;
|
||||
const particles = this.scene.add.particles(img);
|
||||
const bounds = sourceAlly
|
||||
? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }
|
||||
: { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 };
|
||||
const well = particles.createGravityWell({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.35,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
const emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.35,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
bounds,
|
||||
lifespan,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(WELL_END, () => { emitter.stop(); well.x = isEnemyLocation; }, [], this.scene);
|
||||
this.scene.time.delayedCall(lifespan, () => { well.active = false; }, [], this.scene);
|
||||
}
|
||||
|
||||
chargeBall(sourceAlly) {
|
||||
const lifespan = DELAYS.ANIMATION_DURATION;
|
||||
const CHARGE_LIFESPAN = lifespan / 3;
|
||||
|
||||
const { img, spawnLocation } = animationParams(sourceAlly);
|
||||
const targetLocation = sourceAlly ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width();
|
||||
const particles = this.scene.add.particles(img);
|
||||
const emitter = particles.createEmitter({
|
||||
x: 0,
|
||||
y: 0,
|
||||
moveToX: spawnLocation,
|
||||
moveToY: COMBAT.height() * 0.1,
|
||||
scale: 0.75,
|
||||
quantity: 4,
|
||||
_frequency: 20,
|
||||
blendMode: 'ADD',
|
||||
emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) },
|
||||
lifespan: CHARGE_LIFESPAN,
|
||||
});
|
||||
const emitter2 = particles.createEmitter({
|
||||
radial: false,
|
||||
x: { min: spawnLocation, max: targetLocation, steps: 90 },
|
||||
y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 90 },
|
||||
quantity: 4,
|
||||
gravityY: 0,
|
||||
scale: { start: 2, end: 0.1, ease: 'Power3' },
|
||||
blendMode: 'ADD',
|
||||
active: false,
|
||||
lifespan: CHARGE_LIFESPAN,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter.stop(); }, [], this.scene);
|
||||
this.scene.time.delayedCall(CHARGE_LIFESPAN * 2, () => { emitter2.active = true; }, [], this.scene);
|
||||
this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this.scene);
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
this.children.entries.forEach(obj => obj.destroy());
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CombatSkills;
|
||||
@@ -1,239 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const genAvatar = require('./avatar');
|
||||
const StatBar = require('./elements/combat.statbar');
|
||||
|
||||
const { DELAYS, TEXT, POSITIONS: { COMBAT } } = require('./constants');
|
||||
|
||||
const CRYP_MARGIN = COMBAT.crypMargin();
|
||||
const TEXT_MARGIN = COMBAT.textMargin();
|
||||
|
||||
const crypAvatarText = (team, iter) => {
|
||||
const nameX = COMBAT.width() * team;
|
||||
const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||
const statusX = COMBAT.width() * team;
|
||||
const statusY = COMBAT.y() + TEXT_MARGIN * 6 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||
return { statusX, statusY, nameX, nameY };
|
||||
};
|
||||
|
||||
const crypEffects = (team, iter) => {
|
||||
const crypEffectsX = team ? COMBAT.width() - COMBAT.width() / 6.5 : COMBAT.width() / 6.5;
|
||||
const crypEffectsY = TEXT_MARGIN * 2 + CRYP_MARGIN * iter;
|
||||
return { crypEffectsX, crypEffectsY };
|
||||
};
|
||||
|
||||
const crypPosition = (team, iter) => {
|
||||
const crypAvatarX = team ? COMBAT.width() - COMBAT.width() / 6 : COMBAT.width() / 6;
|
||||
const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter;
|
||||
return { crypAvatarX, crypAvatarY };
|
||||
};
|
||||
|
||||
|
||||
class Effects extends Phaser.GameObjects.Group {
|
||||
constructor(scene, team, iter) {
|
||||
super(scene);
|
||||
this.scene = scene;
|
||||
const { crypEffectsX, crypEffectsY } = crypEffects(team, iter);
|
||||
this.x = crypEffectsX; this.y = crypEffectsY;
|
||||
this.effectCount = 0;
|
||||
}
|
||||
|
||||
addEffect(effect) {
|
||||
const y = this.y + this.effectCount * TEXT_MARGIN;
|
||||
const text = `${effect.effect} for ${effect.duration} turn`;
|
||||
const e = this.scene.add.text(this.x, y, text, TEXT.NORMAL);
|
||||
e.effect = effect.effect;
|
||||
this.add(e);
|
||||
this.effectCount += 1;
|
||||
}
|
||||
|
||||
removeEffect(effect) {
|
||||
this.children.entries.forEach((e) => {
|
||||
if (e.effect === effect) e.destroy();
|
||||
});
|
||||
}
|
||||
|
||||
update(effects) {
|
||||
this.effectCount = 0;
|
||||
this.children.entries.forEach(e => e.destroy());
|
||||
effects.forEach((effect) => {
|
||||
this.addEffect(effect);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
class CrypImage extends Phaser.GameObjects.Image {
|
||||
constructor(scene, team, iter, cryp) {
|
||||
// Get coords
|
||||
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
|
||||
const { statusX, statusY, nameX, nameY } = crypAvatarText(team, iter);
|
||||
|
||||
// Cryp display
|
||||
// const avatar = team ? 'magmar' : 'alk';
|
||||
super(scene, crypAvatarX, crypAvatarY, 'aztec', genAvatar(cryp.name));
|
||||
this.setScale(0.5);
|
||||
|
||||
if (!team) this.flipX = true;
|
||||
|
||||
// Save position and cryp details
|
||||
this.scene = scene;
|
||||
this.iter = iter;
|
||||
this.team = team;
|
||||
this.cryp = cryp;
|
||||
this.state = 'deselect';
|
||||
// Add cryp name
|
||||
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
|
||||
// Add cryp stat bars
|
||||
this.health = scene.add.existing(new StatBar(scene, this, 'HP'));
|
||||
this.red_shield = scene.add.existing(new StatBar(scene, this, 'Red Shield'));
|
||||
this.blue_shield = scene.add.existing(new StatBar(scene, this, 'Blue Shield'));
|
||||
// this.evasion = scene.add.existing(new StatBar(scene, this, 'Evasion'));
|
||||
|
||||
this.effects = scene.add.existing(new Effects(scene, team, iter));
|
||||
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
select() {
|
||||
this.setTint('0x00bb00');
|
||||
this.state = 'select';
|
||||
}
|
||||
|
||||
setKo() {
|
||||
this.state = 'ko';
|
||||
this.setTint('0x9d9ea0');
|
||||
}
|
||||
|
||||
deselect() {
|
||||
if (this.state !== 'ko') {
|
||||
this.clearTint();
|
||||
this.state = 'deselect';
|
||||
}
|
||||
}
|
||||
|
||||
clearStatus() {
|
||||
this.statusText.text = '';
|
||||
}
|
||||
|
||||
reduceDefense(amount, type) {
|
||||
if (type === 'PhysDmg') {
|
||||
this.red_shield.takeDamage(amount);
|
||||
} else if (type === 'BlueDmg') {
|
||||
this.blue_shield.takeDamage(amount);
|
||||
}
|
||||
}
|
||||
|
||||
takeDamage(props) {
|
||||
const { amount, mitigation, category } = props;
|
||||
if (mitigation) this.reduceDefense(mitigation, category);
|
||||
this.setTint(0xff0000);
|
||||
this.health.takeDamage(amount);
|
||||
this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
|
||||
if (this.state !== 'ko') this.clearTint();
|
||||
});
|
||||
}
|
||||
|
||||
takeHealing(amount) {
|
||||
this.setTint(0x00bb00);
|
||||
this.health.takeDamage(amount * -1);
|
||||
this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
|
||||
if (this.state !== 'ko') this.clearTint();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class CombatCryps extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'CombatCryps' });
|
||||
}
|
||||
|
||||
create(game) {
|
||||
this.cryps = this.add.group();
|
||||
this.phase = game.phase;
|
||||
this.account = this.registry.get('account');
|
||||
this.drawCryps(game);
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.set('crypStatusUpdate', false);
|
||||
this.teams = game.teams.length;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'game' && data) {
|
||||
if (data.teams.length !== this.teams) this.scene.restart(data);
|
||||
const isAnimating = this.phase === 'animating';
|
||||
this.game = data;
|
||||
if (isAnimating) return false;
|
||||
}
|
||||
|
||||
if (key === 'gamePhase' && data) {
|
||||
const shouldUpdate = data !== this.phase;
|
||||
this.phase = data;
|
||||
if (shouldUpdate) {
|
||||
this.cryps.children.entries.forEach(c => c.clearStatus());
|
||||
this.drawCryps(this.game);
|
||||
}
|
||||
}
|
||||
|
||||
if (key === 'crypStatusUpdate' && data) {
|
||||
this.updateCrypStatus(data);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
drawCryps(game) {
|
||||
const renderCryp = (cryp, iter, team) => {
|
||||
// Add Image Avatar Class
|
||||
const crypObj = new CrypImage(this, team, iter, cryp);
|
||||
this.add.existing(crypObj);
|
||||
this.cryps.add(crypObj);
|
||||
return crypObj;
|
||||
};
|
||||
|
||||
const renderTeam = (cryp, iter, team) => {
|
||||
const crypObj = this.cryps.children.entries
|
||||
.find(c => c.cryp.id === cryp.id)
|
||||
|| renderCryp(cryp, iter, team);
|
||||
crypObj.health.val = cryp.hp.value;
|
||||
crypObj.red_shield.val = cryp.red_shield.value;
|
||||
crypObj.blue_shield.val = cryp.red_shield.value;
|
||||
|
||||
crypObj.health.drawStatBar();
|
||||
crypObj.red_shield.drawStatBar();
|
||||
crypObj.blue_shield.drawStatBar();
|
||||
crypObj.effects.update(cryp.effects);
|
||||
};
|
||||
|
||||
const allyTeam = game.teams.find(t => t.id === this.account.id);
|
||||
// in future there will be more than one
|
||||
const [enemyTeam] = game.teams.filter(t => t.id !== this.account.id);
|
||||
|
||||
allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
|
||||
if (!enemyTeam) return false;
|
||||
enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
|
||||
return true;
|
||||
}
|
||||
|
||||
selectCryp(crypId) {
|
||||
this.cryps.children.entries.forEach(c => c.deselect());
|
||||
if (crypId) this.cryps.children.entries.find(c => c.cryp.id === crypId).select();
|
||||
}
|
||||
|
||||
updateCrypStatus(status) {
|
||||
const sourceCryp = this.cryps.children.entries
|
||||
.find(c => c.cryp.id === status.id);
|
||||
|
||||
const targetCryp = this.cryps.children.entries
|
||||
.find(c => c.cryp.id === status.target);
|
||||
|
||||
if (this.phase === 'Skill') {
|
||||
sourceCryp.statusText.text = `${status.skill} on ${targetCryp.cryp.name}`;
|
||||
}
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CombatCryps;
|
||||
@@ -1,89 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { COMBAT } } = require('./constants');
|
||||
|
||||
const CRYP_MARGIN = COMBAT.crypMargin();
|
||||
const BOX_HEIGHT = CRYP_MARGIN * 0.8;
|
||||
const BOX_WIDTH = COMBAT.width() * 0.2;
|
||||
|
||||
|
||||
class CrypHitBox extends Phaser.GameObjects.Rectangle {
|
||||
constructor(scene, iter, team, cback) {
|
||||
const y = COMBAT.y() + COMBAT.height() * 0.05 + CRYP_MARGIN * iter;
|
||||
super(scene, (COMBAT.width() - BOX_WIDTH) * team, y, BOX_WIDTH, BOX_HEIGHT, 0x222222);
|
||||
this.setOrigin(0);
|
||||
this.clickHandler = () => cback();
|
||||
}
|
||||
|
||||
select() {
|
||||
this.setFillStyle(0x003300);
|
||||
}
|
||||
|
||||
deselect() {
|
||||
this.setFillStyle(0x222222);
|
||||
}
|
||||
}
|
||||
|
||||
class CombatHitBox extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'CombatHitBox' });
|
||||
}
|
||||
|
||||
create(phase) {
|
||||
this.phase = phase;
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
if (phase === 'animating') return true;
|
||||
this.selectHitBox(phase);
|
||||
return true;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'game' && data) {
|
||||
// In the case that we hit skill phase but teams change we restart
|
||||
if (data.teams.length !== this.teams) this.scene.restart(data.phase);
|
||||
}
|
||||
if (key === 'gamePhase' && data) {
|
||||
const shouldUpdate = data !== this.phase;
|
||||
if (shouldUpdate) this.scene.restart(data);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
selectHitBox(phase) {
|
||||
const game = this.registry.get('game');
|
||||
this.teams = game.teams.length;
|
||||
if (phase === 'Skill') return this.skillHitBox(game);
|
||||
return false;
|
||||
}
|
||||
|
||||
skillHitBox(game) {
|
||||
const account = this.registry.get('account');
|
||||
const group = this.scene.get('CombatCryps').cryps;
|
||||
const skillScene = this.scene.get('CombatSkills');
|
||||
game.teams.forEach((t) => {
|
||||
t.cryps.forEach((c) => {
|
||||
const cback = () => {
|
||||
const { activeSkill } = skillScene;
|
||||
if (activeSkill) {
|
||||
this.scene.get('CombatSkills').clearCrypActive(activeSkill.cryp.id);
|
||||
activeSkill.activate();
|
||||
skillScene.activeSkill = null;
|
||||
this.game.events.emit('SEND_SKILL', game.id, activeSkill.cryp.id, c.id, activeSkill.skill.skill);
|
||||
}
|
||||
};
|
||||
const crypSpawn = group.children.entries.find(s => s.cryp.id === c.id);
|
||||
const team = c.account === account.id ? 0 : 1;
|
||||
if (crypSpawn) this.add.existing(new CrypHitBox(this, crypSpawn.iter, team, cback));
|
||||
});
|
||||
});
|
||||
this.scene.moveBelow('Combat');
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CombatHitBox;
|
||||
@@ -1,138 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { throttle } = require('lodash');
|
||||
|
||||
const { TEXT, POSITIONS: { COMBAT } } = require('./constants');
|
||||
const CombatLog = require('./combat.log');
|
||||
const CombatCryps = require('./combat.cryps');
|
||||
const CombatSkills = require('./combat.skills');
|
||||
const CombatHitBox = require('./combat.hitbox');
|
||||
|
||||
const renderResolutions = require('./combat.render.resolutions');
|
||||
|
||||
|
||||
class Combat extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'Combat' });
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.image('proj', 'https://labs.phaser.io/assets/sprites/bullet.png');
|
||||
this.load.image('blue', 'https://labs.phaser.io/assets/particles/blue.png');
|
||||
this.load.image('green', 'https://labs.phaser.io/assets/particles/green.png');
|
||||
this.load.image('red', 'https://labs.phaser.io/assets/particles/red.png');
|
||||
this.load.image('white', 'https://labs.phaser.io/assets/particles/white.png');
|
||||
this.load.image('yellow', 'https://labs.phaser.io/assets/particles/yellow.png');
|
||||
}
|
||||
|
||||
create() {
|
||||
console.log('creating game');
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.addLeaveGame();
|
||||
|
||||
this.registry.set('gamePhase', false);
|
||||
this.registry.set('inGame', true);
|
||||
this.registry.set('gameAnimating', false);
|
||||
this.account = this.registry.get('account');
|
||||
this.fetchGame = throttle(() => {
|
||||
const game = this.registry.get('game');
|
||||
if (game) {
|
||||
const ws = this.registry.get('ws');
|
||||
return ws.sendGameState(game.id);
|
||||
}
|
||||
return false;
|
||||
}, 500);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
startGame(game) {
|
||||
this.scene.manager.add('CombatCryps', CombatCryps, true, game);
|
||||
this.scene.manager.add('CombatLog', CombatLog, true, game);
|
||||
this.renderedResolves = game.resolved.length; // In case you rejoin mid way
|
||||
this.scene.manager.add('CombatSkills', CombatSkills, true, game.phase);
|
||||
this.scene.manager.add('CombatHitBox', CombatHitBox, true, game.phase);
|
||||
this.registry.set('gamePhase', game.phase);
|
||||
this.phase = game.phase;
|
||||
return true;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.fetchGame();
|
||||
return true;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'game') {
|
||||
if (!data) return false;
|
||||
const startGame = this.registry.get('gamePhase') === false;
|
||||
if (startGame) { this.startGame(data); return true; }
|
||||
this.checkAnimation(data);
|
||||
// Game over?
|
||||
// if (data.phase === 'Finish') {
|
||||
// this.time.delayedCall(10000, () => {
|
||||
// this.endGame();
|
||||
// });
|
||||
// }
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
checkAnimation(game) {
|
||||
// Check cryps are loaded and whether game is animating
|
||||
const cantAnimate = this.registry.get('gamePhase') === 'animating';
|
||||
if (cantAnimate) return false;
|
||||
if (game.resolved.length !== this.renderedResolves) {
|
||||
const newResolutions = game.resolved.slice(this.renderedResolves);
|
||||
renderResolutions(this, game, newResolutions);
|
||||
this.renderedResolves = game.resolved.length;
|
||||
return true;
|
||||
}
|
||||
if (this.phase !== game.phase) {
|
||||
this.phase = game.phase;
|
||||
this.registry.set('gamePhase', game.phase);
|
||||
}
|
||||
if (this.registry.get('gameLog') !== game.log.length) {
|
||||
this.registry.set('gameLog', game.log.length);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
addLeaveGame() {
|
||||
const leaveGame = () => this.cleanUp();
|
||||
this.input.keyboard.on('keydown_BACKSPACE', leaveGame, 0, this);
|
||||
const LEAVE_HEIGHT = COMBAT.height() / 6;
|
||||
const LEAVE_WIDTH = COMBAT.width() / 5;
|
||||
const LEAVE_X = COMBAT.width() * 0.8;
|
||||
const LEAVE_Y = COMBAT.height() * 0.9;
|
||||
|
||||
const menu = this.add
|
||||
.rectangle(LEAVE_X, LEAVE_Y, LEAVE_WIDTH, LEAVE_HEIGHT, 0x440000)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', leaveGame);
|
||||
|
||||
this.add
|
||||
.text(menu.getCenter().x, menu.getCenter().y, 'Menu', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
|
||||
this.registry.set('inGame', null);
|
||||
this.registry.set('menu', true);
|
||||
this.registry.set('game', null);
|
||||
|
||||
const ACTIVE_SCENES = ['CombatLog', 'CombatCryps', 'CombatSkills', 'CombatHitBox'];
|
||||
ACTIVE_SCENES.forEach((sKey) => {
|
||||
if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
|
||||
});
|
||||
this.scene.remove();
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Combat;
|
||||
@@ -1,50 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
|
||||
|
||||
class CombatLog extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'CombatLog' });
|
||||
}
|
||||
|
||||
create(game) {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.cameras.main.setViewport(COMBAT.LOG.x(), COMBAT.LOG.y(), COMBAT.LOG.width(), COMBAT.LOG.height());
|
||||
this.log = this.add.text(0, 0, '', TEXT.NORMAL);
|
||||
this.logIndex = game.log.length;
|
||||
this.logData = game.log;
|
||||
this.log.setWordWrapWidth(COMBAT.LOG.width());
|
||||
this.log.setText(Array.from(game.log).reverse());
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
const UPDATE_KEYS = ['game', 'gameLog'];
|
||||
if (UPDATE_KEYS.includes(key) && data) {
|
||||
if (key === 'game') {
|
||||
this.logData = data.log;
|
||||
}
|
||||
if (key === 'gameLog') {
|
||||
this.logIndex = data;
|
||||
}
|
||||
this.updateLog();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
updateLog() {
|
||||
// shallow copy because reverse mutates
|
||||
if (this.logData.length > this.logIndex + 1
|
||||
&& Array.from(this.logData)[this.logIndex].slice(-2) === 'KO') {
|
||||
this.logIndex += 1;
|
||||
this.registry.set('gameLog', this.logIndex);
|
||||
}
|
||||
// }
|
||||
this.log.setText(Array.from(this.logData).slice(0, this.logIndex).reverse());
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CombatLog;
|
||||
@@ -1,135 +0,0 @@
|
||||
const { eachSeries } = require('async');
|
||||
|
||||
const CombatAnimations = require('./combat.animations');
|
||||
const {
|
||||
DELAYS: { ANIMATION_DURATION, MOVE_CREEP, DAMAGE_TICK },
|
||||
POSITIONS: { COMBAT },
|
||||
} = require('./constants');
|
||||
|
||||
function findResolutionCryps(scene, group, resolution, game) {
|
||||
const sourceSpawn = group.children.entries.find(c => c.cryp.id === resolution.source.id);
|
||||
|
||||
/* const sourceCryp = game.teams.find(t => t.cryps.find(c => c.id === resolution.source_cryp_id))
|
||||
.cryps.find(c => c.id === resolution.source_cryp_id);
|
||||
|
||||
const targetCryp = game.teams.find(t => t.cryps.find(c => c.id === resolution.target_cryp_id))
|
||||
.cryps.find(c => c.id === resolution.target_cryp_id);
|
||||
*/
|
||||
const targetSpawn = group.children.entries.find(c => c.cryp.id === resolution.target.id);
|
||||
|
||||
return { sourceSpawn, targetSpawn };
|
||||
}
|
||||
|
||||
function calculateTweenParams(sourceSpawn, targetSpawn, account, skill) {
|
||||
const tweenParams = (targets, centreSpot) => {
|
||||
const enemy = targets.cryp.account !== account.id;
|
||||
let x = centreSpot ? COMBAT.width() * 0.3 : targets.x;
|
||||
x = (enemy && centreSpot) ? x + COMBAT.width() * 0.4 : x;
|
||||
const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y;
|
||||
const ease = 'Power1';
|
||||
const duration = MOVE_CREEP;
|
||||
return {
|
||||
targets, x, y, ease, duration,
|
||||
};
|
||||
};
|
||||
let moveSourceBattle = false;
|
||||
let moveSourceOrig = false;
|
||||
const targetOnlySkill = ['DecayTick'];
|
||||
if (!(targetOnlySkill.includes(skill))) {
|
||||
if (sourceSpawn.cryp.account !== targetSpawn.cryp.account) {
|
||||
moveSourceBattle = tweenParams(sourceSpawn, true);
|
||||
moveSourceOrig = tweenParams(sourceSpawn, false);
|
||||
}
|
||||
}
|
||||
|
||||
const moveTargetBattle = tweenParams(targetSpawn, true);
|
||||
const moveTargetOrig = tweenParams(targetSpawn, false);
|
||||
|
||||
return {
|
||||
moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig,
|
||||
};
|
||||
}
|
||||
|
||||
function animatePhase(scene, game, resolution, cb) {
|
||||
// return early for disabled skills
|
||||
if (resolution.length === 0) return cb();
|
||||
if (resolution.event[0] === 'Disable'
|
||||
|| resolution.event[0] === 'TargetKo'
|
||||
|| resolution.event === 'Ko') return cb();
|
||||
|
||||
const group = scene.scene.get('CombatCryps').cryps;
|
||||
const animations = new CombatAnimations(scene);
|
||||
const account = scene.registry.get('account');
|
||||
|
||||
// Find cryps, targets
|
||||
const { sourceSpawn, targetSpawn } = findResolutionCryps(scene, group, resolution, game);
|
||||
const {
|
||||
moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig,
|
||||
} = calculateTweenParams(sourceSpawn, targetSpawn, account, resolution.event[1].skill);
|
||||
|
||||
const castParams = () => {
|
||||
const x = (sourceSpawn === targetSpawn) ? moveTargetBattle.x : sourceSpawn.x;
|
||||
const y = (sourceSpawn === targetSpawn) ? moveTargetBattle.y : sourceSpawn.y;
|
||||
return { x, y };
|
||||
};
|
||||
const castLocation = castParams();
|
||||
|
||||
// Move cryps into position
|
||||
if (moveSourceBattle) scene.tweens.add(moveSourceBattle);
|
||||
scene.tweens.add(moveTargetBattle);
|
||||
|
||||
return scene.time.delayedCall(MOVE_CREEP, () => {
|
||||
const sourceAlly = sourceSpawn.cryp.account === account.id;
|
||||
const targetAlly = targetSpawn.cryp.account === account.id;
|
||||
// animate animation
|
||||
animations.getSkill(resolution.event[1].skill, sourceAlly, targetAlly, castLocation);
|
||||
// Target cryp takes damage
|
||||
scene.time.delayedCall(ANIMATION_DURATION, () => {
|
||||
console.log(resolution);
|
||||
if (resolution.event[0] === 'Damage') {
|
||||
targetSpawn.takeDamage(resolution.event[1]);
|
||||
scene.registry.set('gameLog', scene.registry.get('gameLog') + 1);
|
||||
}
|
||||
if (resolution.event[0] === 'Healing') {
|
||||
targetSpawn.takeHealing(resolution.event[1]);
|
||||
scene.registry.set('gameLog', scene.registry.get('gameLog') + 1);
|
||||
}
|
||||
if (resolution.event[0] === 'Effect') {
|
||||
targetSpawn.effects.addEffect(resolution.event[1]);
|
||||
console.log('target has new effect', resolution.event[1].effect);
|
||||
}
|
||||
|
||||
if (resolution.event[0] === 'Removal') {
|
||||
targetSpawn.effects.removeEffect(resolution.event[1].effect);
|
||||
console.log('target effect removed', resolution.event[1].effect);
|
||||
}
|
||||
if (moveSourceOrig) scene.tweens.add(moveSourceOrig);
|
||||
scene.tweens.add(moveTargetOrig);
|
||||
|
||||
// all done
|
||||
scene.time.delayedCall(MOVE_CREEP, () => {
|
||||
animations.destroy(true);
|
||||
return cb();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderResolutions(scene, game, resolutions) {
|
||||
scene.registry.set('gamePhase', 'animating');
|
||||
scene.registry.set('gameLog', scene.registry.get('gameLog') + 1);
|
||||
|
||||
eachSeries(
|
||||
resolutions,
|
||||
(resolution, cb) => animatePhase(scene, game, resolution, cb),
|
||||
(err) => {
|
||||
if (err) return console.error(err);
|
||||
scene.registry.set('gamePhase', 'Skill');
|
||||
return true;
|
||||
}
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
module.exports = renderResolutions;
|
||||
@@ -1,235 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const { TEXT, POSITIONS: { COMBAT } } = require('./constants');
|
||||
|
||||
const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
|
||||
const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
|
||||
const TARGET_KEY_MAP = ['keydown_SEVEN', 'keydown_EIGHT', 'keydown_NINE', 'keydown_ZERO'];
|
||||
|
||||
const CRYP_MARGIN = COMBAT.crypMargin();
|
||||
const TEXT_MARGIN = COMBAT.textMargin();
|
||||
const SKILL_WIDTH = COMBAT.width() / 10;
|
||||
const SKILL_HEIGHT = COMBAT.height() / 30;
|
||||
|
||||
const skillPosition = (crypIter, skillIter) => {
|
||||
const skillTextX = COMBAT.width() / 3.8;
|
||||
const skillTextY = (TEXT_MARGIN * skillIter) * 1.5 + CRYP_MARGIN * crypIter + COMBAT.y() + COMBAT.height() * 0.07;
|
||||
return [skillTextX, skillTextY];
|
||||
};
|
||||
|
||||
const skillCheckHitBox = (scenePlugin, pointer) => {
|
||||
const { list } = scenePlugin.get('CombatHitBox').children;
|
||||
for (let i = 0; i < list.length; i += 1) {
|
||||
if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(),
|
||||
pointer.position)) return list[i];
|
||||
}
|
||||
// If we didn't find a hitbox deselect them all
|
||||
for (let i = 0; i < list.length; i += 1) list[i].deselect();
|
||||
return false;
|
||||
};
|
||||
|
||||
class CrypSkill extends Phaser.GameObjects.Container {
|
||||
constructor(scene, x, y, skill, cryp) {
|
||||
// Avatar will be a property of cryp
|
||||
super(scene, x, y);
|
||||
const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
|
||||
const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
|
||||
this.origX = x; this.origY = y;
|
||||
|
||||
this.skillBox = scene.add.rectangle(0, 0, SKILL_WIDTH, SKILL_HEIGHT, 0x222222);
|
||||
this.skillText = scene.add.text(0, 0, SKILL_TEXT, TEXT.NORMAL).setOrigin(0.5, 0.5);
|
||||
this.add(this.skillBox);
|
||||
this.add(this.skillText);
|
||||
|
||||
this.state = 'deselect';
|
||||
this.cryp = cryp;
|
||||
this.skill = skill;
|
||||
this.scene = scene;
|
||||
|
||||
this.setSize(SKILL_WIDTH, SKILL_HEIGHT);
|
||||
this.setInteractive();
|
||||
}
|
||||
|
||||
clickHandler() {
|
||||
if (this.scene.phase === 'Skill') this.scene.activeSkill = this;
|
||||
this.select();
|
||||
}
|
||||
|
||||
select() {
|
||||
this.scene.children.list.forEach((skill) => {
|
||||
if (skill.state === 'select') skill.deselect();
|
||||
});
|
||||
this.skillBox.setFillStyle(0x004bfe);
|
||||
this.state = 'select';
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.scene.children.list.forEach((skill) => {
|
||||
if (skill.state === 'select') skill.deselect();
|
||||
});
|
||||
this.skillBox.setFillStyle(0xff0000);
|
||||
this.state = 'activate';
|
||||
}
|
||||
|
||||
deselect() {
|
||||
this.skillBox.setFillStyle(0x222222);
|
||||
this.state = 'deselect';
|
||||
}
|
||||
}
|
||||
|
||||
class CombatSkills extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'CombatSkills' });
|
||||
}
|
||||
|
||||
create(phase) {
|
||||
this.phase = phase;
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.account = this.registry.get('account');
|
||||
|
||||
this.input.on('dragstart', (pointer, box) => {
|
||||
box.clickHandler();
|
||||
});
|
||||
this.input.on('drag', (pointer, box, dragX, dragY) => {
|
||||
const hitBox = skillCheckHitBox(this.scene, pointer);
|
||||
if (hitBox) hitBox.select();
|
||||
box.setPosition(dragX, dragY);
|
||||
});
|
||||
this.input.on('dragend', (pointer, box) => {
|
||||
box.deselect();
|
||||
const hitBox = skillCheckHitBox(this.scene, pointer);
|
||||
if (hitBox) {
|
||||
hitBox.clickHandler();
|
||||
}
|
||||
box.setPosition(box.origX, box.origY);
|
||||
});
|
||||
|
||||
if (phase === 'animating') return true;
|
||||
// can't set this.game cause of phaser class named the same
|
||||
const game = this.registry.get('game');
|
||||
this.renderSkills(game, phase);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'gamePhase' && data) {
|
||||
const shouldUpdate = data !== this.phase;
|
||||
if (shouldUpdate) {
|
||||
this.scene.get('CombatCryps').selectCryp(null);
|
||||
return this.scene.restart(data);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
renderSkills(game, phase) {
|
||||
if (phase === 'Skill') return this.renderSkillPhase(game);
|
||||
return false;
|
||||
}
|
||||
|
||||
renderSkillPhase(game) {
|
||||
const { account } = this;
|
||||
const { keyboard } = this.input;
|
||||
const { events } = this.game;
|
||||
|
||||
const addSkill = (i, j, skill, cryp) => {
|
||||
const skillTextPos = skillPosition(i, j);
|
||||
const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp);
|
||||
if (skill.cd) {
|
||||
skillObj.skillBox.setFillStyle(0x9d9ea0);
|
||||
} else {
|
||||
this.input.setDraggable(skillObj);
|
||||
}
|
||||
this.add.existing(skillObj);
|
||||
return skillObj;
|
||||
};
|
||||
|
||||
const team = game.teams.find(t => t.id === account.id);
|
||||
const enemyTeam = game.teams.find(t => t.id !== account.id);
|
||||
|
||||
team.cryps.forEach((cryp) => {
|
||||
// return early if KOd
|
||||
if (cryp.hp.value === 0) return true;
|
||||
|
||||
// find the cryp position
|
||||
const { iter } = this.scene.get('CombatCryps').cryps.children.entries.find(c => c.cryp.id === cryp.id);
|
||||
|
||||
// draw the skills
|
||||
const skillButtons = cryp.skills.map((skill, j) => addSkill(iter, j, skill, cryp));
|
||||
|
||||
const bindCrypKeys = () => this.mapSkillKeys(skillButtons, game.id, cryp.id, team.id, enemyTeam.id, iter);
|
||||
|
||||
// reset everything
|
||||
keyboard.on('keydown_ESC', bindCrypKeys, this);
|
||||
events.on('SEND_SKILL', bindCrypKeys, this);
|
||||
bindCrypKeys();
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// FIXME
|
||||
// needs to send crypId not team
|
||||
mapSkillKeys(skillButtons, gameId, crypId, alliesId, enemyId, i) {
|
||||
const { keyboard } = this.input;
|
||||
|
||||
keyboard.removeListener(CRYP_KEY_MAP[i]);
|
||||
|
||||
keyboard.on(CRYP_KEY_MAP[i], () => {
|
||||
SKILL_KEY_MAP.forEach(k => keyboard.removeListener(k));
|
||||
|
||||
this.scene.get('CombatCryps').selectCryp(crypId);
|
||||
|
||||
skillButtons.forEach((button, j) => {
|
||||
keyboard.on(SKILL_KEY_MAP[j], () => {
|
||||
this.activeSkill = button;
|
||||
button.select();
|
||||
|
||||
// clear existing keys
|
||||
CRYP_KEY_MAP.forEach(k => keyboard.removeListener(k));
|
||||
TARGET_KEY_MAP.forEach(k => keyboard.removeListener(k));
|
||||
|
||||
CRYP_KEY_MAP.forEach(k => keyboard.on(k, () => {
|
||||
this.clearCrypActive(crypId);
|
||||
button.activate();
|
||||
this.activeSkill = null;
|
||||
this.game.events.emit('SEND_SKILL', gameId, crypId, alliesId, button.skill.skill);
|
||||
}));
|
||||
|
||||
TARGET_KEY_MAP.forEach(k => keyboard.on(k, () => {
|
||||
this.clearCrypActive(crypId);
|
||||
button.activate();
|
||||
this.activeSkill = null;
|
||||
this.game.events.emit('SEND_SKILL', gameId, crypId, enemyId, button.skill.skill);
|
||||
}));
|
||||
}, this);
|
||||
});
|
||||
}, this);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
clearCrypActive(crypId) {
|
||||
this.scene.scene.children.list.forEach((s) => {
|
||||
if (s.cryp.id === crypId && s.state === 'activate') s.deselect();
|
||||
});
|
||||
}
|
||||
|
||||
clearKeys() {
|
||||
TARGET_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey));
|
||||
CRYP_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey));
|
||||
SKILL_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey));
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CombatSkills;
|
||||
@@ -1,77 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const Header = require('./header');
|
||||
const Home = require('./home');
|
||||
const Menu = require('./menu');
|
||||
const Combat = require('./combat');
|
||||
|
||||
// const Background = require('./background');
|
||||
|
||||
function renderCryps() {
|
||||
const config = {
|
||||
type: Phaser.CANVAS,
|
||||
// backgroundColor: '#181818',
|
||||
resolution: window.devicePixelRatio,
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
width: Math.floor(window.innerHeight * 1.6),
|
||||
height: Math.floor(window.innerHeight),
|
||||
max: {
|
||||
width: Math.floor(window.innerHeight * 1.6),
|
||||
height: Math.floor(window.innerHeight),
|
||||
},
|
||||
|
||||
},
|
||||
antialias: true,
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
debug: false,
|
||||
gravity: { y: 0 },
|
||||
},
|
||||
},
|
||||
scene: [
|
||||
// Background,
|
||||
Header,
|
||||
],
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
|
||||
function changeData(parent, key, data) {
|
||||
// Don't load other scenes if you're not logged in
|
||||
if (!game.registry.get('account')) return false;
|
||||
|
||||
if (key === 'home') {
|
||||
if (data) return game.scene.add('Home', Home, true);
|
||||
}
|
||||
|
||||
if (key === 'menu') {
|
||||
if (!data || game.registry.get('inMenu')) return false;
|
||||
if (data) return game.scene.add('Menu', Menu, true);
|
||||
}
|
||||
|
||||
if (key === 'game') {
|
||||
if (!data || game.registry.get('inGame')) return false;
|
||||
return game.scene.add('Combat', Combat, true);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
game.registry.events.on('changedata', changeData);
|
||||
game.registry.events.on('setdata', changeData);
|
||||
|
||||
window.addEventListener('mouseup', () => game.registry.set('pan', false));
|
||||
window.addEventListener('mousedown', () => game.registry.set('pan', true));
|
||||
window.addEventListener('resize', () => {
|
||||
game.scale.displaySize.maxWidth = window.innerHeight * 1.6;
|
||||
game.scale.displaySize.maxHeight = window.innerHeight;
|
||||
});
|
||||
|
||||
|
||||
return game;
|
||||
}
|
||||
|
||||
module.exports = renderCryps;
|
||||
@@ -1,132 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { TEXT } = require('.././constants');
|
||||
|
||||
const BOX = `
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
#extension GL_OES_standard_derivatives : enable
|
||||
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
#extension GL_OES_standard_derivatives : enable
|
||||
|
||||
uniform float time;
|
||||
uniform vec2 resolution;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec2 offset;
|
||||
uniform vec3 colour;
|
||||
uniform sampler2D uMainSampler;
|
||||
|
||||
|
||||
varying vec2 outTexCoord;
|
||||
varying vec4 outTint;
|
||||
|
||||
float sdBox( in vec2 p, in vec2 b )
|
||||
{
|
||||
vec2 d = abs(p)-b;
|
||||
return length(max(d,vec2(0))) + min(max(d.x,d.y),0.0);
|
||||
}
|
||||
|
||||
void main()
|
||||
{
|
||||
|
||||
vec2 p = (gl_FragCoord.xy / resolution.xy);
|
||||
p.x -= offset.x / resolution.x + dimensions.x / (2.0 * resolution.x);
|
||||
p.y -= -1.0 * offset.y / resolution.y + ((resolution.y - dimensions.y) / (2.0 * resolution.y)) + 0.5;
|
||||
vec2 dim = 0.5 * dimensions / resolution.xy;
|
||||
float d = sdBox(p, dim);
|
||||
float tb = abs(sin(time)) + 0.9;
|
||||
|
||||
vec3 col = tb * colour - sign(d) * vec3(0.1);
|
||||
col *= 0.0 + exp(-100.0 * abs(d));
|
||||
col += colour * 0.8;
|
||||
vec4 texel = texture2D(uMainSampler, outTexCoord);
|
||||
texel *= vec4(outTint.rgb * outTint.a, outTint.a);
|
||||
|
||||
gl_FragColor = vec4(col, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
class CustomPipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {
|
||||
constructor(game) {
|
||||
super({ game, renderer: game.renderer, fragShader: BOX });
|
||||
}
|
||||
}
|
||||
|
||||
function rgbToHex(rgb) {
|
||||
const getHex = (c) => {
|
||||
const hex = Math.floor(c * 255).toString(16);
|
||||
return hex.length === 1 ? `0${hex}` : hex;
|
||||
};
|
||||
return `0x${getHex(rgb[0])}${getHex(rgb[1])}${getHex(rgb[2])}`;
|
||||
}
|
||||
|
||||
|
||||
class BoxEffect extends Phaser.GameObjects.Graphics {
|
||||
constructor(scene, x, y, width, height, colour, tag) {
|
||||
super(scene);
|
||||
this.tag = tag;
|
||||
this.customPipeline = scene.game.renderer.addPipeline(tag, new CustomPipeline(scene.game));
|
||||
this.customPipeline.setFloat2('resolution', 1600, 1000);
|
||||
this.customPipeline.setFloat2('offset', x, y);
|
||||
this.customPipeline.setFloat2('dimensions', width, height);
|
||||
this.customPipeline.setFloat3('colour', colour[0], colour[1], colour[2]);
|
||||
this.bgTime = 10.0;
|
||||
|
||||
const radius = height / 2;
|
||||
this.fillStyle(rgbToHex(colour), 1.0);
|
||||
this.fillRect(x + radius, y, width - radius * 2, height);
|
||||
this.fillCircle(x + radius, y + radius, radius);
|
||||
this.fillCircle(x + width - radius, y + radius, radius);
|
||||
|
||||
|
||||
this.on('destroy', () => {
|
||||
scene.game.renderer.removePipeline(tag);
|
||||
});
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.setPipeline(this.tag);
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.resetPipeline();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.bgTime += 0.05;
|
||||
this.customPipeline.setFloat1('time', this.bgTime);
|
||||
}
|
||||
}
|
||||
|
||||
class Button extends Phaser.GameObjects.Group {
|
||||
constructor(scene, props) {
|
||||
const {
|
||||
x, y, width, height, colour, glTag, bText, callback,
|
||||
} = props;
|
||||
|
||||
super(scene, { classType: BoxEffect, runChildUpdate: true });
|
||||
|
||||
const leaveGame = scene.add
|
||||
.rectangle(x, y, width, height, 0xaaaaaa, 0xffffff)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
|
||||
const effect = scene.add.existing(new BoxEffect(scene, x, y, width, height, colour, glTag));
|
||||
this.add(effect);
|
||||
|
||||
leaveGame
|
||||
.on('pointerdown', callback)
|
||||
.on('pointerover', () => effect.activate())
|
||||
.on('pointerout', () => effect.deactivate());
|
||||
|
||||
this.buttonText = scene.add.text(leaveGame.getCenter().x, leaveGame.getCenter().y, bText, TEXT.HEADER).setOrigin(0.5, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Button;
|
||||
@@ -1,86 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('.././constants');
|
||||
|
||||
const CRYP_MARGIN = COMBAT.crypMargin();
|
||||
const TEXT_MARGIN = COMBAT.textMargin();
|
||||
|
||||
const statBarDimensions = (team, iter, margin) => {
|
||||
const statBarWidth = COMBAT.width() * 0.07;
|
||||
const statBarHeight = TEXT_MARGIN / 1.5;
|
||||
const statBarX = (COMBAT.width() - statBarWidth) * team;
|
||||
const statBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||
return { statBarX, statBarY, statBarWidth, statBarHeight };
|
||||
};
|
||||
|
||||
const statTextCoord = (team, iter, margin) => {
|
||||
const statTextX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
|
||||
const statTextY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||
return { statTextX, statTextY };
|
||||
};
|
||||
|
||||
|
||||
class StatBar extends Phaser.GameObjects.Graphics {
|
||||
constructor(scene, cryp, type) {
|
||||
super(scene);
|
||||
this.crypObj = cryp;
|
||||
this.type = type;
|
||||
|
||||
if (type === 'HP') {
|
||||
this.val = this.crypObj.cryp.hp.value;
|
||||
this.max = this.crypObj.cryp.hp.max;
|
||||
this.margin = 0;
|
||||
} else if (type === 'Red Shield') {
|
||||
this.val = this.crypObj.cryp.red_shield.value;
|
||||
this.max = this.crypObj.cryp.red_shield.max;
|
||||
this.margin = 1;
|
||||
} else if (type === 'Blue Shield') {
|
||||
this.val = this.crypObj.cryp.blue_shield.value;
|
||||
this.max = this.crypObj.cryp.blue_shield.max;
|
||||
this.margin = 2;
|
||||
} else if (type === 'Evasion') {
|
||||
this.val = this.crypObj.cryp.evasion.value;
|
||||
this.max = this.crypObj.cryp.evasion.max;
|
||||
this.margin = 3;
|
||||
}
|
||||
const { statTextX, statTextY } = statTextCoord(cryp.team, cryp.iter, this.margin);
|
||||
this.statText = scene.add.text(statTextX, statTextY, '', TEXT.NORMAL).setOrigin(cryp.team, 0);
|
||||
this.drawStatBar();
|
||||
}
|
||||
|
||||
drawStatBar() {
|
||||
this.clear();
|
||||
const {
|
||||
statBarX, statBarY, statBarWidth, statBarHeight,
|
||||
} = statBarDimensions(this.crypObj.team, this.crypObj.iter, this.margin);
|
||||
this.statText.text = `${this.val.toString()} / ${this.max.toString()} ${this.type}`;
|
||||
// Draw Black Border
|
||||
this.fillStyle(COLOURS.BLACK);
|
||||
this.fillRect(statBarX, statBarY, statBarWidth, statBarHeight);
|
||||
// White fill
|
||||
this.fillStyle(COLOURS.WHITE);
|
||||
this.fillRect(statBarX + 2, statBarY + 2, statBarWidth - 4, statBarHeight - 4);
|
||||
// Fill the health bar
|
||||
const statPercentage = this.val / this.max;
|
||||
if (statPercentage < 0.3) {
|
||||
this.fillStyle(COLOURS.RED);
|
||||
} else if (statPercentage < 0.65) {
|
||||
this.fillStyle(COLOURS.YELLOW);
|
||||
} else {
|
||||
this.fillStyle(0x00ff00); // str8 up green
|
||||
}
|
||||
const statWidth = statBarWidth * statPercentage;
|
||||
this.fillRect(statBarX + 2, statBarY + 2, statWidth, statBarHeight - 4);
|
||||
}
|
||||
|
||||
takeDamage(value) {
|
||||
if (value > 0) {
|
||||
this.val = (value >= this.val) ? 0 : this.val -= value;
|
||||
} else {
|
||||
this.val = (this.val - value > this.max) ? this.max : this.val -= value;
|
||||
}
|
||||
if (this.val === 0 && this.type === 'HP') this.crypObj.setKo();
|
||||
this.drawStatBar();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = StatBar;
|
||||
@@ -1,56 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const {
|
||||
TEXT,
|
||||
COLOURS,
|
||||
} = require('../constants');
|
||||
|
||||
function FindColour(item) {
|
||||
// Future add skills and use a constants lookup file ??
|
||||
switch (item) {
|
||||
case 'Green': return 0x396E26;
|
||||
case 'Red': return 0x622433;
|
||||
case 'Blue': return 0x223158;
|
||||
// case 'Green': return 0x043003;
|
||||
// case 'Red': return 0x5C0202;
|
||||
// case 'Blue': return 0x040345;
|
||||
|
||||
default: return 0x222222;
|
||||
}
|
||||
}
|
||||
|
||||
class Item extends Phaser.GameObjects.Container {
|
||||
constructor(scene, item, index, x, y, width, height) {
|
||||
super(scene, x, y);
|
||||
|
||||
this.scene = scene;
|
||||
this.item = item;
|
||||
this.index = index;
|
||||
this.origX = x;
|
||||
this.origY = y;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
this.colour = FindColour(item);
|
||||
this.box = scene.add
|
||||
.rectangle(0, 0, width, height, this.colour);
|
||||
|
||||
this.text = scene.add
|
||||
// .text(0, 0, `${action} x${count}`, TEXT.NORMAL)
|
||||
.text(0, 0, `${item}`, TEXT.NORMAL)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
this.add(this.box);
|
||||
this.add(this.text);
|
||||
|
||||
this.setSize(width, height);
|
||||
this.setInteractive();
|
||||
}
|
||||
|
||||
changeOrigin(x, y) {
|
||||
this.origX = x + this.width / 2;
|
||||
this.origY = y + this.height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Item;
|
||||
@@ -1,73 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
class LineBox extends Phaser.GameObjects.Graphics {
|
||||
constructor(scene, x, y, width, height, colour, speed) {
|
||||
super(scene);
|
||||
this.colour = colour;
|
||||
this.x0 = x; this.x1 = x + width;
|
||||
this.y0 = y; this.y1 = y + height;
|
||||
const margin = Math.abs(Math.floor((this.x1 - this.x0) / 4));
|
||||
this.lineCoord = [this.x0 + margin, this.x1 - margin, this.y0, this.y0, 0];
|
||||
this.speed = speed;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.clear();
|
||||
|
||||
let vertX = this.x1;
|
||||
let horizY = this.y0;
|
||||
const genLine = () => {
|
||||
switch (this.lineCoord[4]) {
|
||||
case 0:
|
||||
if (this.lineCoord[1] < this.x1) return [1, 1, 0, 0, 0];
|
||||
return [0, 0, 0, 0, 1];
|
||||
case 1:
|
||||
if (this.lineCoord[0] < this.x1) return [1, 0, 0, 1, 1];
|
||||
return [0, 0, 0, 0, 2];
|
||||
case 2:
|
||||
if (this.lineCoord[3] < this.y1) return [0, 0, 1, 1, 2];
|
||||
return [0, 0, 0, 0, 3];
|
||||
case 3:
|
||||
horizY = this.y1;
|
||||
if (this.lineCoord[2] < this.y1) return [-1, 0, 1, 0, 3];
|
||||
return [0, 0, 0, 0, 4];
|
||||
case 4:
|
||||
horizY = this.y1;
|
||||
if (this.lineCoord[0] > this.x0) return [-1, -1, 0, 0, 4];
|
||||
return [0, 0, 0, 0, 5];
|
||||
case 5:
|
||||
horizY = this.y1;
|
||||
vertX = this.x0;
|
||||
if (this.lineCoord[1] > this.x0) return [0, -1, -1, 0, 5];
|
||||
return [0, 0, 0, 0, 6];
|
||||
case 6:
|
||||
vertX = this.x0;
|
||||
if (this.lineCoord[2] >= this.y0) return [0, 0, -1, -1, 6];
|
||||
return [0, 0, 0, 0, 7];
|
||||
case 7:
|
||||
vertX = this.x0;
|
||||
if (this.lineCoord[3] >= this.y0) return [0, 1, 0, -1, 7];
|
||||
return [0, 0, 0, 0, 0];
|
||||
default: return false;
|
||||
}
|
||||
};
|
||||
for (let i = 0; i < this.speed; i += 1) {
|
||||
const delta = genLine();
|
||||
this.lineCoord = this.lineCoord.map((x, j) => {
|
||||
if (j < 4) return (x + delta[j]);
|
||||
return delta[j];
|
||||
});
|
||||
}
|
||||
this.lineStyle(5, this.colour, 1);
|
||||
this.lineBetween(this.lineCoord[0], horizY, this.lineCoord[1], horizY);
|
||||
this.lineBetween(vertX, this.lineCoord[2], vertX, this.lineCoord[3]);
|
||||
}
|
||||
}
|
||||
|
||||
class LineGroup extends Phaser.GameObjects.Group {
|
||||
constructor(scene) {
|
||||
super(scene, { classType: LineBox, runChildUpdate: true });
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { LineGroup, LineBox }
|
||||
@@ -1,53 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { TEXT, POSITIONS: { MENU_MAIN } } = require('./constants');
|
||||
|
||||
const X = MENU_MAIN.x();
|
||||
const Y = MENU_MAIN.y();
|
||||
const WIDTH = MENU_MAIN.width();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
const ROW_SIZE = 50;
|
||||
const LOBBY_WIDTH = WIDTH / 2;
|
||||
|
||||
class GameList extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'GameList' });
|
||||
}
|
||||
|
||||
create(gameList) {
|
||||
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
|
||||
const ws = this.registry.get('ws');
|
||||
|
||||
this.add.text(WIDTH / 3, 0, 'PVP open games', TEXT.HEADER);
|
||||
const gameRow = (game, i) => {
|
||||
const GAME_X = WIDTH / 6;
|
||||
const GAME_Y = 1.3 * ROW_SIZE * (i + 1);
|
||||
|
||||
const gameBox = this.add
|
||||
.rectangle(GAME_X, GAME_Y, LOBBY_WIDTH, ROW_SIZE, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
|
||||
const TITLE = `${game.teams[0].cryps.map(c => c.name).join(', ')} - ${game.team_size}v${game.team_size}`;
|
||||
|
||||
this.add
|
||||
.text(gameBox.getCenter().x, gameBox.getCenter().y, TITLE, TEXT.NORMAL)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
gameBox.on('pointerdown', () => {
|
||||
const cryps = this.registry.get('cryps');
|
||||
const team = cryps.filter(c => c.active).map(c => c.id);
|
||||
ws.sendGameJoin(game.id, team);
|
||||
});
|
||||
};
|
||||
|
||||
gameList.forEach(gameRow);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = GameList;
|
||||
@@ -1,27 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const fs = require('fs');
|
||||
|
||||
const { TEXT } = require('./constants');
|
||||
|
||||
const aztecAtlas = require('../../assets/aztec.atlas.json');
|
||||
|
||||
|
||||
class Header extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'Header', active: true });
|
||||
}
|
||||
|
||||
preload() {
|
||||
const aztecImg = new Image();
|
||||
aztecImg.src = `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/aztec.clean.png')).toString('base64')}`;
|
||||
aztecImg.onload = () => {
|
||||
this.textures.addAtlas('aztec', aztecImg, aztecAtlas);
|
||||
};
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Header;
|
||||
@@ -1,142 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { remove } = require('lodash');
|
||||
|
||||
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
|
||||
const genAvatar = require('./avatar');
|
||||
const { LineGroup, LineBox } = require('./elements/outline.rotate');
|
||||
|
||||
const ROW_HEIGHT = CRYP_LIST.height() * 0.1;
|
||||
const ROW_WIDTH = CRYP_LIST.width();
|
||||
|
||||
const menuY = CRYP_LIST.height() * 0.8;
|
||||
|
||||
const KEY_MAP = [
|
||||
'keydown-ONE',
|
||||
'keydown-TWO',
|
||||
'keydown-THREE',
|
||||
];
|
||||
|
||||
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
class HomeCrypList extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeCryps' });
|
||||
}
|
||||
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'crypList') {
|
||||
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
|
||||
this.scene.restart();
|
||||
}
|
||||
}
|
||||
|
||||
create() {
|
||||
// this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height());
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
const cryps = this.registry.get('crypList');
|
||||
const lineGroup = this.add.existing(new LineGroup(this));
|
||||
|
||||
if (!cryps) return true;
|
||||
const ws = this.registry.get('ws');
|
||||
this.activeCryps = [];
|
||||
// We only display 3 cryps others can be viewed in cryp list (soon TM)
|
||||
for (let i = 0; i < cryps.length; i += 1) {
|
||||
const cryp = cryps[i];
|
||||
const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
|
||||
const ROW_X = BOX_WIDTH * 2 * (i % 3);
|
||||
const ROW_Y = CRYP_LIST.y() + (Math.floor(i / 3)) * ROW_HEIGHT * 1.5;
|
||||
const ACTIVE_FILL = 0.2;
|
||||
|
||||
const FILL = Object.values(COLOURS)[i];
|
||||
// Selection of cryps
|
||||
|
||||
// Cryp avatar and interaction box
|
||||
const cReady = this.add
|
||||
.rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 0.2, BOX_WIDTH * 2, ROW_HEIGHT, FILL)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
cReady.setAlpha(0.2);
|
||||
cReady.on('pointerdown', () => {
|
||||
lineGroup.clear(true, true);
|
||||
if (this.activeCryps.includes(cReady)) {
|
||||
remove(this.activeCryps, n => n === cReady);
|
||||
cReady.setAlpha(0.2);
|
||||
} else {
|
||||
this.activeCryps.push(cReady);
|
||||
cReady.setAlpha(0.75);
|
||||
lineGroup.add(this.add.existing(
|
||||
new LineBox(this, cReady.x, cReady.y, cReady.width, cReady.height, cReady.fillColor, 3)
|
||||
));
|
||||
}
|
||||
});
|
||||
|
||||
cReady.itemSelect = () => {
|
||||
cReady.setFillStyle(COLOURS.SELECT);
|
||||
};
|
||||
cReady.itemDeselect = () => {
|
||||
cReady.setFillStyle(FILL, ACTIVE_FILL);
|
||||
};
|
||||
|
||||
cReady.cryp = cryp;
|
||||
this.add.image(
|
||||
cReady.getCenter().x,
|
||||
cReady.getCenter().y,
|
||||
'aztec',
|
||||
genAvatar(cryp.name)
|
||||
);
|
||||
this.add.text(ROW_X + BOX_WIDTH, ROW_Y, cryp.name, TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
}
|
||||
|
||||
// Add Spawn Cryp Option
|
||||
const spawn = this.add
|
||||
.rectangle(ROW_WIDTH * 0.05, menuY, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
this.game.events.emit('CRYP_SPAWN');
|
||||
});
|
||||
this.add
|
||||
.text(spawn.getCenter().x, spawn.getCenter().y, '+', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
const joinNormal = this.add
|
||||
.rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
const playerCryps = [];
|
||||
this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
|
||||
ws.sendPlayerCrypsSet(NULL_UUID, playerCryps);
|
||||
});
|
||||
this.add
|
||||
.text(joinNormal.getCenter().x, joinNormal.getCenter().y, 'Join Normal', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
const joinInstance = this.add
|
||||
.rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
const playerCryps = [];
|
||||
this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
|
||||
ws.sendInstanceJoin(playerCryps);
|
||||
});
|
||||
this.add
|
||||
.text(joinInstance.getCenter().x, joinInstance.getCenter().y, 'New Instance', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeCrypList;
|
||||
@@ -1,48 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
|
||||
|
||||
const X = HOME_MAIN.x();
|
||||
const Y = HOME_MAIN.y();
|
||||
const WIDTH = HOME_MAIN.width();
|
||||
const HEIGHT = HOME_MAIN.height();
|
||||
|
||||
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
class HomeRankings extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeInstances' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'Instances Scene', TEXT.HEADER);
|
||||
const playerList = this.registry.get('playerList');
|
||||
const addInstance = (player, i) => {
|
||||
const joinNormal = this.add
|
||||
.rectangle(X, Y + HEIGHT * 0.15 * (i + 1), WIDTH * 0.5, HEIGHT * 0.1, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
if (player.ready) {
|
||||
this.registry.set('player', player);
|
||||
this.registry.get('ws').sendInstanceReady(player.instance);
|
||||
} else {
|
||||
this.game.events.emit('SET_PLAYER', player);
|
||||
this.registry.get('ws').sendInstanceScores(player.instance);
|
||||
}
|
||||
});
|
||||
const name = player.instance === NULL_UUID ? 'Normal Mode' : `${player.instance.substring(0, 5)}`;
|
||||
const disp = player.ready ? name.concat(' - in progress') : name;
|
||||
this.add
|
||||
.text(joinNormal.getCenter().x, joinNormal.getCenter().y, disp, TEXT.NORMAL)
|
||||
.setOrigin(0.5, 0.5);
|
||||
};
|
||||
|
||||
playerList.forEach(addInstance);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeRankings;
|
||||
@@ -1,91 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
|
||||
const HomeCryps = require('./home.cryps');
|
||||
const HomeNavigation = require('./home.navigation');
|
||||
|
||||
const HomeRankings = require('./home.rankings');
|
||||
const HomeNews = require('./home.news');
|
||||
const HomeShop = require('./home.shop');
|
||||
const HomeInstances = require('./home.instances');
|
||||
|
||||
const FIXED_SCENES = [
|
||||
'HomeCryps',
|
||||
'HomeNavigation',
|
||||
];
|
||||
|
||||
const VAR_SCENES = [
|
||||
'HomeRankings',
|
||||
'HomeNews',
|
||||
'HomeShop',
|
||||
'HomeInstances',
|
||||
];
|
||||
|
||||
class Home extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'Home', active: true });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.registry.get('ws').sendAccountPlayers();
|
||||
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
this.scene.manager.add('HomeCryps', HomeCryps, true);
|
||||
this.scene.manager.add('HomeNavigation', HomeNavigation, true);
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (!data) return false;
|
||||
// Controls which scene shows in the main top right section
|
||||
switch (key) {
|
||||
case 'game': return this.cleanUp();
|
||||
case 'menu': return this.cleanUp();
|
||||
case 'homeInstances': return this.newMainScene('HomeInstances', HomeInstances, data);
|
||||
case 'homeRankings': return this.newMainScene('HomeRankings', HomeRankings, data);
|
||||
case 'homeNews': return this.newMainScene('HomeNews', HomeNews, data);
|
||||
case 'homeShop': return this.newMainScene('HomeShop', HomeShop, data);
|
||||
|
||||
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
|
||||
newMainScene(key, scene, data) {
|
||||
let addScene = true;
|
||||
// List of scenes which could be occupying the main section of the menu
|
||||
VAR_SCENES.forEach((sKey) => {
|
||||
if (this.scene.manager.keys[sKey]) {
|
||||
if (key === sKey) {
|
||||
// If there is new data for the current scene restart
|
||||
this.scene.manager.keys[sKey].scene.restart(data);
|
||||
addScene = false;
|
||||
} else {
|
||||
// Delete the old scene
|
||||
this.scene.manager.keys[sKey].cleanUp();
|
||||
}
|
||||
}
|
||||
});
|
||||
if (addScene) this.scene.manager.add(key, scene, true, data);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
// Delete scenes which could be showing before switching to battle scene
|
||||
|
||||
const removeScenes = (sKey) => {
|
||||
if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
|
||||
};
|
||||
FIXED_SCENES.forEach(removeScenes);
|
||||
VAR_SCENES.forEach(removeScenes);
|
||||
|
||||
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Home;
|
||||
@@ -1,61 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const { TEXT, POSITIONS: { NAVIGATION } } = require('./constants');
|
||||
|
||||
const X = NAVIGATION.x();
|
||||
const Y = NAVIGATION.y();
|
||||
const WIDTH = NAVIGATION.width();
|
||||
const HEIGHT = NAVIGATION.height();
|
||||
|
||||
const BTN_WIDTH = Math.floor(WIDTH / 6);
|
||||
const BTN_HEIGHT = Math.floor(HEIGHT / 3);
|
||||
|
||||
class HomeNavigation extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeNavigation' });
|
||||
}
|
||||
|
||||
create() {
|
||||
/* const ranks = this.add
|
||||
.rectangle(X, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(ranks.getCenter().x, ranks.getCenter().y, 'Rankings', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
ranks.on('pointerdown', () => this.registry.set('homeRankings', true));
|
||||
|
||||
const news = this.add
|
||||
.rectangle(X + BTN_WIDTH * 1.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(news.getCenter().x, news.getCenter().y, 'News', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
news.on('pointerdown', () => this.registry.set('homeNews', true));
|
||||
|
||||
const shop = this.add
|
||||
.rectangle(X + BTN_WIDTH * 3, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(shop.getCenter().x, shop.getCenter().y, 'Shop', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
shop.on('pointerdown', () => this.registry.set('homeShop', true));
|
||||
|
||||
const instances = this.add
|
||||
.rectangle(X + BTN_WIDTH * 4.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(instances.getCenter().x, instances.getCenter().y, 'Instances', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
instances.on('pointerdown', () => this.registry.set('homeInstances', true));*/
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeNavigation;
|
||||
@@ -1,24 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
|
||||
|
||||
const X = HOME_MAIN.x();
|
||||
const Y = HOME_MAIN.y();
|
||||
const WIDTH = HOME_MAIN.width();
|
||||
const HEIGHT = HOME_MAIN.height();
|
||||
|
||||
class HomeNews extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeNews' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'News Scene', TEXT.HEADER);
|
||||
this.add.text(X, Y + HEIGHT * 0.1, 'some other stuff here', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeNews;
|
||||
@@ -1,24 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
|
||||
|
||||
const X = HOME_MAIN.x();
|
||||
const Y = HOME_MAIN.y();
|
||||
const WIDTH = HOME_MAIN.width();
|
||||
const HEIGHT = HOME_MAIN.height();
|
||||
|
||||
class HomeRankings extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeRankings' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'Rankings Scene', TEXT.HEADER);
|
||||
this.add.text(X, Y + HEIGHT * 0.1, 'some stuff here', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeRankings;
|
||||
@@ -1,24 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
|
||||
|
||||
const X = HOME_MAIN.x();
|
||||
const Y = HOME_MAIN.y();
|
||||
const WIDTH = HOME_MAIN.width();
|
||||
const HEIGHT = HOME_MAIN.height();
|
||||
|
||||
class HomeShop extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeShop' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'Shop Scene', TEXT.HEADER);
|
||||
this.add.text(X, Y + HEIGHT * 0.1, 'rulul', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeShop;
|
||||
@@ -1,78 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { MENU_MAIN }, TEXT, ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
|
||||
|
||||
const X = MENU_MAIN.x();
|
||||
const Y = MENU_MAIN.y();
|
||||
const WIDTH = MENU_MAIN.width();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
|
||||
const UNEQUIP_Y = Y + Math.floor(HEIGHT * 0.7);
|
||||
const UNEQUIP_WIDTH = Math.floor(WIDTH * 0.4);
|
||||
const UNEQUIP_HEIGHT = Math.floor(HEIGHT * 0.15);
|
||||
|
||||
class ItemInfo extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'ItemInfo' });
|
||||
}
|
||||
|
||||
create(props) {
|
||||
const { item, cryp } = props;
|
||||
if (!item) return false;
|
||||
|
||||
// Default item text
|
||||
let title = item;
|
||||
let description = 'Description missing';
|
||||
let upgrades = '';
|
||||
let colours = '';
|
||||
|
||||
// Replace item text with constants if it exists
|
||||
if (SKILLS[item]) {
|
||||
title = `Skill Item - ${item}`;
|
||||
({ description } = SKILLS[item]);
|
||||
if (SKILLS[item].upgrades) ({ upgrades } = SKILLS[item]);
|
||||
if (SKILLS[item].colours) ({ colours } = SKILLS[item]);
|
||||
} else if (SPECS[item]) {
|
||||
title = `Spec Item - ${item}`;
|
||||
({ description } = SPECS[item]);
|
||||
if (SPECS[item].upgrades) ({ upgrades } = SPECS[item]);
|
||||
} else if (COLOURS[item]) {
|
||||
title = `Colour Item - ${item}`;
|
||||
({ description } = COLOURS[item]);
|
||||
if (COLOURS[item].upgrades) ({ upgrades } = COLOURS[item]);
|
||||
}
|
||||
|
||||
// Add text objects
|
||||
this.add.text(X, Y, title, TEXT.HEADER);
|
||||
this.add
|
||||
.text(X, Y + HEIGHT * 0.1, description, TEXT.NORMAL)
|
||||
.setWordWrapWidth(WIDTH * 0.75);
|
||||
this.add
|
||||
.text(X, Y + HEIGHT * 0.25, upgrades, TEXT.NORMAL)
|
||||
.setWordWrapWidth(WIDTH * 0.75);
|
||||
if (colours !== '') {
|
||||
this.add
|
||||
.text(X, Y + HEIGHT * 0.35, `Adds ${colours} to cryp`, TEXT.NORMAL)
|
||||
.setWordWrapWidth(WIDTH * 0.75);
|
||||
}
|
||||
|
||||
if (!cryp) return true;
|
||||
const ws = this.registry.get('ws');
|
||||
const { vbox } = this.registry.get('player');
|
||||
const unEquip = this.add.rectangle(X, UNEQUIP_Y, UNEQUIP_WIDTH, UNEQUIP_HEIGHT, 0x222222)
|
||||
.setOrigin(0, 0)
|
||||
.setInteractive()
|
||||
.on('pointerdown', () => {
|
||||
ws.sendVboxUnequip(vbox.instance, cryp.id, item);
|
||||
this.registry.set('crypStats', cryp);
|
||||
});
|
||||
this.add.text(unEquip.getCenter().x, unEquip.getCenter().y, 'unequip', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
return true;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ItemInfo;
|
||||
@@ -1,323 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const Item = require('./elements/item');
|
||||
|
||||
const {
|
||||
TEXT,
|
||||
POSITIONS: { ITEM_LIST },
|
||||
} = require('./constants');
|
||||
|
||||
const X = ITEM_LIST.x();
|
||||
const Y = ITEM_LIST.y();
|
||||
const WIDTH = ITEM_LIST.width();
|
||||
const HEIGHT = ITEM_LIST.height();
|
||||
const ITEM_WIDTH = ITEM_LIST.itemWidth();
|
||||
const ITEM_HEIGHT = ITEM_LIST.itemHeight();
|
||||
|
||||
const BOX_X = X + ITEM_WIDTH * 0.5;
|
||||
const BOX_Y = Y + ITEM_HEIGHT + ITEM_HEIGHT * 2;
|
||||
const BOX_ROWS = 6;
|
||||
const BOX_COLUMNS = 3;
|
||||
|
||||
const INV_X = X + ITEM_WIDTH * 0.5;
|
||||
const INV_Y = Y + ITEM_HEIGHT * 12;
|
||||
const INV_ROWS = 3;
|
||||
const INV_COLUMNS = 3;
|
||||
|
||||
const COMB_X = X + ITEM_WIDTH * 0.5;
|
||||
const COMB_Y = Y + ITEM_HEIGHT * 19;
|
||||
const COMB_ROWS = 1;
|
||||
const COMB_COLUMNS = 3;
|
||||
|
||||
const drawVbox = (graphics) => {
|
||||
const boxDrawX = BOX_X - ITEM_WIDTH * 0.05;
|
||||
const boxDrawY = BOX_Y - ITEM_HEIGHT * 0.05;
|
||||
graphics.strokeRect(boxDrawX, boxDrawY, ITEM_WIDTH * 1.1 * BOX_COLUMNS, ITEM_HEIGHT * 1.1 * BOX_ROWS);
|
||||
|
||||
for (let i = 0; i < (BOX_COLUMNS - 1); i += 1) {
|
||||
const x = boxDrawX + (i + 1) * ITEM_WIDTH * 1.1;
|
||||
graphics.lineBetween(x, boxDrawY, x, boxDrawY + ITEM_HEIGHT * 1.1 * BOX_ROWS);
|
||||
}
|
||||
for (let i = 0; i < (BOX_ROWS - 1); i += 1) {
|
||||
const y = boxDrawY + (i + 1) * ITEM_HEIGHT * 1.1;
|
||||
graphics.lineBetween(boxDrawX, y, boxDrawX + ITEM_WIDTH * 1.1 * BOX_COLUMNS, y);
|
||||
}
|
||||
};
|
||||
|
||||
const drawInventory = (graphics) => {
|
||||
const invDrawX = INV_X - ITEM_WIDTH * 0.05;
|
||||
const invDrawY = INV_Y - ITEM_HEIGHT * 0.05;
|
||||
graphics.strokeRect(invDrawX, invDrawY, ITEM_WIDTH * 1.1 * INV_COLUMNS, ITEM_HEIGHT * 1.1 * INV_ROWS);
|
||||
|
||||
for (let i = 0; i < (INV_COLUMNS - 1); i += 1) {
|
||||
const x = invDrawX + (i + 1) * ITEM_WIDTH * 1.1;
|
||||
graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * INV_ROWS);
|
||||
}
|
||||
for (let i = 0; i < (INV_ROWS - 1); i += 1) {
|
||||
const y = invDrawY + (i + 1) * ITEM_HEIGHT * 1.1;
|
||||
graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * INV_COLUMNS, y);
|
||||
}
|
||||
};
|
||||
|
||||
const drawCombiner = (graphics) => {
|
||||
const combDrawX = COMB_X - ITEM_WIDTH * 0.05;
|
||||
const combDrawY = COMB_Y - ITEM_HEIGHT * 0.05;
|
||||
graphics.strokeRect(combDrawX, combDrawY, ITEM_WIDTH * 1.1 * COMB_COLUMNS, ITEM_HEIGHT * 1.1 * COMB_ROWS);
|
||||
|
||||
for (let i = 0; i < (COMB_COLUMNS - 1); i += 1) {
|
||||
const x = combDrawX + (i + 1) * ITEM_WIDTH * 1.1;
|
||||
graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * COMB_ROWS);
|
||||
}
|
||||
for (let i = 0; i <= (COMB_ROWS - 1); i += 1) {
|
||||
const y = combDrawY + (i + 1) * ITEM_HEIGHT * 1.1;
|
||||
graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * COMB_COLUMNS, y);
|
||||
}
|
||||
};
|
||||
|
||||
class CombinerHitBox extends Phaser.GameObjects.Rectangle {
|
||||
constructor(scene, x, y, i) {
|
||||
super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000);
|
||||
this.setOrigin(0);
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.slot = i;
|
||||
this.item = false;
|
||||
this.itemSelect = () => this.setFillStyle(0x222222);
|
||||
this.itemDeselect = () => this.setFillStyle(0x000000);
|
||||
}
|
||||
|
||||
allocate(item) {
|
||||
if (this.item) this.deallocate();
|
||||
item.setPosition(this.x + item.width / 2, this.y + item.height / 2);
|
||||
this.item = item;
|
||||
}
|
||||
|
||||
deallocate() {
|
||||
if (this.item) this.item.setPosition(this.item.origX, this.item.origY);
|
||||
this.item = false;
|
||||
}
|
||||
}
|
||||
|
||||
class DeleteHitBox extends Phaser.GameObjects.Rectangle {
|
||||
constructor(scene, x, y) {
|
||||
super(scene, x, y, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444);
|
||||
this.setOrigin(0);
|
||||
this.itemSelect = () => this.setFillStyle(0xff0000);
|
||||
this.itemDeselect = () => this.setFillStyle(0x444444);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const itemCheckHitbox = (scene, pointer) => {
|
||||
const { list } = scene.scene.get('MenuCrypList').children;
|
||||
const hitboxes = list.filter(c => c.cryp)
|
||||
.concat(scene.children.list.filter(c => c instanceof CombinerHitBox || c instanceof DeleteHitBox));
|
||||
|
||||
let found;
|
||||
for (let i = 0; i < hitboxes.length; i += 1) {
|
||||
if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
|
||||
found = hitboxes[i];
|
||||
} else {
|
||||
hitboxes[i].itemDeselect();
|
||||
}
|
||||
}
|
||||
|
||||
return found;
|
||||
};
|
||||
|
||||
class ItemList extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'ItemList', active: true });
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'player' || key === 'scores') {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
this.scene.restart();
|
||||
}
|
||||
}
|
||||
|
||||
create() {
|
||||
const player = this.registry.get('player');
|
||||
const scores = this.registry.get('scores') || [];
|
||||
if (!player) return false;
|
||||
const { vbox } = player;
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
if (!vbox.bound) return false;
|
||||
if (!this.combinerItems || vbox.bound.length < this.registry.get('boundLength')) {
|
||||
this.combinerItems = [-1, -1, -1];
|
||||
}
|
||||
this.registry.set('boundLength', vbox.bound.length);
|
||||
const ws = this.registry.get('ws');
|
||||
|
||||
// Static Elements
|
||||
const graphics = this.add.graphics();
|
||||
graphics.lineStyle(5, 0x808080, 1.0);
|
||||
drawCombiner(graphics);
|
||||
drawInventory(graphics);
|
||||
drawVbox(graphics);
|
||||
|
||||
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 0.5, `vBox - ${vbox.bits}b`, TEXT.HEADER);
|
||||
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 11, 'inventory', TEXT.HEADER);
|
||||
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 18, 'iCombinator', TEXT.HEADER);
|
||||
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 23, `Wins: ${player.score.wins}`, TEXT.HEADER);
|
||||
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 24, `Losses: ${player.score.losses}`, TEXT.HEADER);
|
||||
|
||||
const discard = this.add
|
||||
.rectangle(X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 1.5, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.instance));
|
||||
this.add.text(discard.getCenter().x, discard.getCenter().y, 'discard - 5b', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
const combine = this.add
|
||||
.rectangle(X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 20.25, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
ws.sendVboxCombine(vbox.instance, this.combinerItems);
|
||||
this.combinerItems = [-1, -1, -1];
|
||||
this.children.list.filter(obj => obj instanceof CombinerHitBox).forEach(cBox => cBox.deallocate());
|
||||
});
|
||||
this.add.text(combine.getCenter().x, combine.getCenter().y, 'combine', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + COMB_X;
|
||||
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + COMB_Y;
|
||||
this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i));
|
||||
}
|
||||
const del = this.add.existing(new DeleteHitBox(this, X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 15.5));
|
||||
this.add.text(del.getCenter().x, del.getCenter().y, 'drop', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
// Generate Items
|
||||
vbox.bound.forEach((item, i) => {
|
||||
const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5;
|
||||
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5;
|
||||
const clickFn = () => this.registry.set('itemInfo', { item });
|
||||
const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
|
||||
itemBox.on('pointerdown', clickFn);
|
||||
|
||||
this.input.setDraggable(itemBox);
|
||||
this.add.existing(itemBox);
|
||||
});
|
||||
|
||||
vbox.free.forEach((type, i) => {
|
||||
type.forEach((item, j) => {
|
||||
const ITEM_X = ITEM_WIDTH * 1.1 * i + BOX_X + ITEM_WIDTH * 0.5;
|
||||
const ITEM_Y = ITEM_HEIGHT * 1.1 * j + BOX_Y + ITEM_HEIGHT * 0.5;
|
||||
const clickFn = () => {
|
||||
this.registry.set('itemInfo', { item });
|
||||
ws.sendVboxAccept(vbox.instance, i, j);
|
||||
};
|
||||
const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
|
||||
itemBox.on('pointerdown', clickFn);
|
||||
this.add.existing(itemBox);
|
||||
});
|
||||
});
|
||||
|
||||
// Restore previous combiner item slots
|
||||
this.combinerItems.forEach((index, i) => {
|
||||
if (index === -1) return false;
|
||||
const item = this.children.list.filter(obj => obj instanceof Item).find(it => it.index === index);
|
||||
const hitBox = this.children.list.filter(obj => obj instanceof CombinerHitBox).find(hb => hb.slot === i);
|
||||
if (item) hitBox.allocate(item);
|
||||
return true;
|
||||
});
|
||||
|
||||
// allocation functions
|
||||
const allocate = (item, hitBox) => {
|
||||
hitBox.allocate(item);
|
||||
this.combinerItems[hitBox.slot] = item.index;
|
||||
this.registry.set('combinerItems', this.combinerItems);
|
||||
};
|
||||
|
||||
const deallocate = (item) => {
|
||||
const clearIndex = this.combinerItems.indexOf(item.index);
|
||||
if (clearIndex !== -1) {
|
||||
this.children.list.filter(obj => obj instanceof CombinerHitBox)
|
||||
.forEach((cBox) => {
|
||||
if (cBox.item === item) cBox.deallocate();
|
||||
});
|
||||
this.combinerItems[clearIndex] = -1;
|
||||
this.registry.set('combinerItems', this.combinerItems);
|
||||
}
|
||||
item.setPosition(item.origX, item.origY);
|
||||
};
|
||||
|
||||
const findUnallocated = () => {
|
||||
for (let i = 0; i <= 2; i += 1) {
|
||||
if (this.combinerItems[i] === -1) {
|
||||
return this.children.list.filter(obj => obj instanceof CombinerHitBox).find(hb => hb.slot === i);
|
||||
}
|
||||
} return false;
|
||||
};
|
||||
|
||||
// this.add.text(ITEM_WIDTH * 11, ITEM_HEIGHT * 1.1, 'Scoreboard', TEXT.HEADER);
|
||||
// scores.forEach(([name, score], i) => {
|
||||
// const SCORE_X = ITEM_WIDTH * 11;
|
||||
// const SCORE_Y = ITEM_HEIGHT * 1.1 * (i + 2);
|
||||
// this.add.text(SCORE_X, SCORE_Y, `${score.wins} - ${score.losses} | ${name}`, TEXT.NORMAL);
|
||||
// });
|
||||
|
||||
// Add Handlers
|
||||
this.input.on('dragstart', (pointer, item) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
this.input.on('drag', (pointer, item, dragX, dragY) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
item.setPosition(dragX, dragY);
|
||||
const hitBox = itemCheckHitbox(this, pointer);
|
||||
if (hitBox) hitBox.itemSelect();
|
||||
return true;
|
||||
});
|
||||
|
||||
this.input.on('dragend', (pointer, item) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
// Check first for hitbox interaction
|
||||
const hitBox = itemCheckHitbox(this, pointer);
|
||||
if (hitBox) {
|
||||
// hitbox can only be the combinerhitbox, deletehitbox or cryp avatar
|
||||
hitBox.itemDeselect();
|
||||
if (hitBox instanceof CombinerHitBox) {
|
||||
if (hitBox.item === item) deallocate(item);
|
||||
else allocate(item, hitBox);
|
||||
} else if (hitBox instanceof DeleteHitBox) {
|
||||
ws.sendVboxReclaim(vbox.instance, item.index);
|
||||
} else {
|
||||
ws.sendVboxApply(vbox.instance, hitBox.cryp.id, item.index);
|
||||
deallocate(item);
|
||||
} return true;
|
||||
}
|
||||
// If not interacting with hitbox and didn't move much try to allocate the item
|
||||
if (Math.hypot(item.x - item.origX, item.y - item.origY) < Math.hypot(item.width, item.height)) {
|
||||
// Check theres a free combiner slot
|
||||
const cBox = findUnallocated();
|
||||
if (cBox) {
|
||||
allocate(item, cBox);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// If the item hasn't been allocated above reset to natural location
|
||||
// Check if item needs to be deallocated
|
||||
// Scene will restart if there is vbox change
|
||||
deallocate(item);
|
||||
return true;
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ItemList;
|
||||
@@ -1,137 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
|
||||
const genAvatar = require('./avatar');
|
||||
const Item = require('./elements/item');
|
||||
|
||||
const BOX_WIDTH = Math.floor(CRYP_LIST.width());
|
||||
const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.34);
|
||||
|
||||
const TEXT_MARGIN = 24;
|
||||
|
||||
const KEY_MAP = [
|
||||
'keydown-ONE',
|
||||
'keydown-TWO',
|
||||
'keydown-THREE',
|
||||
];
|
||||
|
||||
class MenuCrypList extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'MenuCrypList' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
const player = this.registry.get('player');
|
||||
if (player) this.drawCryps(player.cryps);
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'player') {
|
||||
this.drawCryps(data.cryps);
|
||||
}
|
||||
}
|
||||
|
||||
drawCryps(cryps) {
|
||||
if (!cryps) return true;
|
||||
if (this.crypGroup) this.crypGroup.destroy(true);
|
||||
this.crypGroup = this.add.group();
|
||||
const addCryp = (cryp, i) => {
|
||||
const ROW_X = CRYP_LIST.x();
|
||||
const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 1.1;
|
||||
|
||||
|
||||
const ACTIVE_FILL = 0.2;
|
||||
|
||||
const FILL = Object.values(COLOURS)[i];
|
||||
// Selection of cryps
|
||||
const selectFn = () => {
|
||||
this.registry.set('crypStats', cryp);
|
||||
};
|
||||
|
||||
// Cryp interaction box for adding items
|
||||
const crypInteract = this.add
|
||||
.rectangle(ROW_X, ROW_Y, BOX_WIDTH, BOX_HEIGHT, FILL, ACTIVE_FILL)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', selectFn);
|
||||
crypInteract.itemSelect = () => {
|
||||
crypInteract.setFillStyle(COLOURS.SELECT);
|
||||
};
|
||||
crypInteract.itemDeselect = () => {
|
||||
crypInteract.setFillStyle(FILL, ACTIVE_FILL);
|
||||
};
|
||||
crypInteract.cryp = cryp;
|
||||
|
||||
// Cryp Avatar
|
||||
const { name } = cryp;
|
||||
const crypImage = this.add.image(
|
||||
crypInteract.getCenter().x - crypInteract.width / 4,
|
||||
crypInteract.getCenter().y,
|
||||
'aztec',
|
||||
genAvatar(name)
|
||||
);
|
||||
|
||||
// Add text info
|
||||
const yCrypTextAlgin = Math.floor(crypInteract.y + TEXT_MARGIN / 2);
|
||||
const xCrypNameAlign = Math.floor(crypInteract.x + crypInteract.width * 1 / 10);
|
||||
const crypInfoText = this.add.text(xCrypNameAlign, yCrypTextAlgin, name, TEXT.HEADER);
|
||||
const colourText = (c, j) => {
|
||||
// Placeholder for when gems are implemented
|
||||
const gemText = this.add.text(crypInteract.x + crypInteract.width * (j + 3) / 6, yCrypTextAlgin, `${c[0]} - ${c[1]}`, TEXT.HEADER);
|
||||
this.crypGroup.add(gemText);
|
||||
};
|
||||
|
||||
const { red, green, blue } = cryp.colours;
|
||||
const CRYP_COLOURS = [
|
||||
['R', red],
|
||||
['G', green],
|
||||
['B', blue],
|
||||
];
|
||||
CRYP_COLOURS.forEach(colourText);
|
||||
|
||||
this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
|
||||
|
||||
const crypSkill = (stat, j) => {
|
||||
const SKILL_WIDTH = Math.floor(BOX_WIDTH / 2);
|
||||
const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 8);
|
||||
const SKILL_X = crypInteract.getCenter().x + crypInteract.width / 4;
|
||||
const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.15 * (j + 1.6);
|
||||
const itemObj = new Item(this, stat.skill, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
|
||||
this.add.existing(itemObj);
|
||||
itemObj.setInteractive();
|
||||
const itemInfo = { item: stat.skill, cryp };
|
||||
itemObj.on('pointerdown', () => this.registry.set('itemInfo', itemInfo));
|
||||
this.crypGroup.add(itemObj);
|
||||
};
|
||||
cryp.skills.forEach(crypSkill);
|
||||
|
||||
const crypSpec = (spec, j) => {
|
||||
const SKILL_WIDTH = Math.floor(BOX_WIDTH * 0.15);
|
||||
const SKILL_HEIGHT = Math.floor(BOX_HEIGHT * 0.2);
|
||||
const SKILL_X = Math.floor(crypInteract.x + BOX_WIDTH * (0.6 + j) * 0.175);
|
||||
const SKILL_Y = Math.floor(crypInteract.y + BOX_HEIGHT * 0.875);
|
||||
const itemObj = new Item(this, spec, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
|
||||
itemObj.setInteractive();
|
||||
const itemInfo = { item: spec, cryp };
|
||||
itemObj.on('pointerdown', () => this.registry.set('itemInfo', itemInfo));
|
||||
this.add.existing(itemObj);
|
||||
this.crypGroup.add(itemObj);
|
||||
};
|
||||
cryp.specs.forEach(crypSpec);
|
||||
};
|
||||
cryps.forEach(addCryp);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = MenuCrypList;
|
||||
@@ -1,97 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
// Scenes constantly showing
|
||||
const MenuCrypList = require('./menu.cryps.list');
|
||||
const MenuNavigation = require('./menu.navigation');
|
||||
const ItemList = require('./item.list');
|
||||
// Scenes which change depending on menu context
|
||||
const Zones = require('./zones');
|
||||
const GameList = require('./game.list');
|
||||
const StatSheet = require('./statsheet');
|
||||
const ItemInfo = require('./item.info');
|
||||
|
||||
const FIXED_MENU_SCENES = [
|
||||
'MenuCrypList',
|
||||
'MenuNavigation',
|
||||
'ItemList',
|
||||
];
|
||||
|
||||
const MAIN_MENU_SCENES = [
|
||||
'Zones',
|
||||
'GameList',
|
||||
'StatSheet',
|
||||
'ItemInfo',
|
||||
];
|
||||
|
||||
class Menu extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'Menu', active: true });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
|
||||
// Request the latest player state when we load the scene
|
||||
const player = this.registry.get('player');
|
||||
this.registry.get('ws').sendPlayerState(player.instance);
|
||||
// When we load the menu request the latest items
|
||||
// Item list will restart when the data comes in
|
||||
this.scene.manager.add('MenuCrypList', MenuCrypList, true);
|
||||
this.scene.manager.add('MenuNavigation', MenuNavigation, true);
|
||||
this.scene.manager.add('ItemList', ItemList, true);
|
||||
this.registry.set('inMenu', true);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (!data) return false;
|
||||
// Controls which scene shows in the main top right section
|
||||
switch (key) {
|
||||
case 'game': return this.cleanUp();
|
||||
case 'home': return this.cleanUp();
|
||||
case 'zone': return this.newMainScene('Zones', Zones, data);
|
||||
case 'gameList': return this.newMainScene('GameList', GameList, data);
|
||||
case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data);
|
||||
case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data);
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
|
||||
newMainScene(key, scene, data) {
|
||||
let addScene = true;
|
||||
// List of scenes which could be occupying the main section of the menu
|
||||
MAIN_MENU_SCENES.forEach((sKey) => {
|
||||
if (this.scene.manager.keys[sKey]) {
|
||||
if (key === sKey) {
|
||||
// If there is new data for the current scene restart
|
||||
this.scene.manager.keys[sKey].scene.restart(data);
|
||||
addScene = false;
|
||||
} else {
|
||||
// Delete the old scene
|
||||
this.scene.manager.keys[sKey].cleanUp();
|
||||
}
|
||||
}
|
||||
});
|
||||
if (addScene) this.scene.manager.add(key, scene, true, data);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
// Delete scenes which could be showing before switching to battle scene
|
||||
const removeScenes = (sKey) => {
|
||||
if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
|
||||
};
|
||||
FIXED_MENU_SCENES.forEach(removeScenes);
|
||||
MAIN_MENU_SCENES.forEach(removeScenes);
|
||||
this.registry.set('inMenu', false);
|
||||
this.combinerItems = this.registry.set('combinerItems', null);
|
||||
|
||||
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Menu;
|
||||
@@ -1,50 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const { TEXT, POSITIONS: { NAVIGATION } } = require('./constants');
|
||||
|
||||
const X = NAVIGATION.x();
|
||||
const Y = NAVIGATION.y();
|
||||
const WIDTH = NAVIGATION.width();
|
||||
const HEIGHT = NAVIGATION.height();
|
||||
|
||||
const BTN_WIDTH = Math.floor(WIDTH / 4);
|
||||
const BTN_HEIGHT = Math.floor(HEIGHT / 2);
|
||||
|
||||
class MenuNavigation extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'MenuNavigation' });
|
||||
}
|
||||
|
||||
create() {
|
||||
const ws = this.registry.get('ws');
|
||||
const player = this.registry.get('player');
|
||||
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
|
||||
|
||||
const ready = this.add
|
||||
.rectangle(BTN_WIDTH * 3, 0, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(ready.getCenter().x, ready.getCenter().y, 'Ready', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
ready.on('pointerdown', () => {
|
||||
ws.sendInstanceReady(player.instance);
|
||||
});
|
||||
|
||||
const menu = this.add
|
||||
.rectangle(BTN_WIDTH * 3, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x440000)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => this.registry.set('home', true));
|
||||
|
||||
this.add
|
||||
.text(menu.getCenter().x, menu.getCenter().y, 'Menu', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = MenuNavigation;
|
||||
@@ -1,143 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { MENU_MAIN }, TEXT, SKILLS } = require('./constants');
|
||||
const Item = require('./elements/item');
|
||||
|
||||
const X = MENU_MAIN.x();
|
||||
const Y = MENU_MAIN.y();
|
||||
const WIDTH = MENU_MAIN.width();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
const TEXT_MARGIN = 24;
|
||||
|
||||
const SKILL_WIDTH = Math.floor(WIDTH / 10);
|
||||
|
||||
|
||||
class DeleteHitBox extends Phaser.GameObjects.Rectangle {
|
||||
constructor(scene, x, y) {
|
||||
super(scene, x, y, SKILL_WIDTH, SKILL_WIDTH, 0x222222);
|
||||
this.setOrigin(0);
|
||||
this.itemSelect = () => this.setFillStyle(0xff0000);
|
||||
this.itemDeselect = () => this.setFillStyle(0x222222);
|
||||
}
|
||||
}
|
||||
|
||||
const itemCheckHitbox = (scene, pointer) => {
|
||||
const { list } = scene.scene.get('MenuCrypList').children;
|
||||
const hitboxes = list.filter(c => c.cryp)
|
||||
.concat(scene.children.list.filter(c => c instanceof DeleteHitBox));
|
||||
|
||||
let found;
|
||||
for (let i = 0; i < hitboxes.length; i += 1) {
|
||||
if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
|
||||
found = hitboxes[i];
|
||||
} else {
|
||||
hitboxes[i].itemDeselect();
|
||||
}
|
||||
}
|
||||
|
||||
return found;
|
||||
};
|
||||
|
||||
class StatSheet extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'StatSheet' });
|
||||
}
|
||||
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'player') {
|
||||
console.log('grep');
|
||||
console.log(data);
|
||||
const cryp = data.cryps.find(c => c.id === this.cryp.id);
|
||||
this.scene.restart(cryp);
|
||||
}
|
||||
}
|
||||
|
||||
create(cryp) {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
// const ws = this.registry.get('ws');
|
||||
|
||||
const player = this.registry.get('player');
|
||||
if (!player) return false;
|
||||
// const { vbox } = player;
|
||||
|
||||
this.cryp = cryp;
|
||||
|
||||
/*
|
||||
const del = this.add.existing(new DeleteHitBox(this, X + WIDTH * 0.7, Y + HEIGHT * 0.6));
|
||||
this.add.text(del.getCenter().x, del.getCenter().y, 'unequip', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
*/
|
||||
|
||||
this.add.text(X, Y, cryp.name, TEXT.HEADER);
|
||||
|
||||
const crypStat = (stat, i) => {
|
||||
const STAT_X = X;
|
||||
const STAT_Y = Y + (i + 2) * TEXT_MARGIN;
|
||||
this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base} -> ${stat.value}`, TEXT.NORMAL);
|
||||
};
|
||||
|
||||
const CRYP_STATS = [
|
||||
cryp.hp,
|
||||
cryp.red_shield,
|
||||
cryp.blue_shield,
|
||||
cryp.evasion,
|
||||
cryp.red_damage,
|
||||
cryp.blue_damage,
|
||||
cryp.speed,
|
||||
];
|
||||
|
||||
CRYP_STATS.forEach(crypStat);
|
||||
/*
|
||||
const knownSkill = (skill, i) => {
|
||||
const SKILL_X = X + WIDTH * 0.4 + WIDTH * 0.125 * i;
|
||||
const SKILL_Y = Y + HEIGHT * 0.15;
|
||||
const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
|
||||
// itemObj.on('pointerdown', () => );
|
||||
this.input.setDraggable(itemObj);
|
||||
this.add.existing(itemObj);
|
||||
};
|
||||
cryp.skills.forEach(knownSkill);
|
||||
this.add.text(X + WIDTH * 0.35, Y, 'Skills', TEXT.HEADER);
|
||||
|
||||
this.add.text(X + WIDTH * 0.35, Y + HEIGHT * 0.25, 'Specs', TEXT.HEADER);
|
||||
const knownSpec = (spec, i) => {
|
||||
const SKILL_X = X + WIDTH * 0.4 + WIDTH * 0.125 * i;
|
||||
const SKILL_Y = Y + HEIGHT * 0.4;
|
||||
const itemObj = new Item(this, spec, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
|
||||
// itemObj.on('pointerdown', () => );
|
||||
this.input.setDraggable(itemObj);
|
||||
this.add.existing(itemObj);
|
||||
};
|
||||
cryp.specs.forEach(knownSpec);
|
||||
|
||||
|
||||
this.input.on('drag', (pointer, item, dragX, dragY) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
item.setPosition(dragX, dragY);
|
||||
const hitBox = itemCheckHitbox(this, pointer);
|
||||
if (hitBox) hitBox.itemSelect();
|
||||
return true;
|
||||
});
|
||||
|
||||
this.input.on('dragend', (pointer, item) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
item.setPosition(item.origX, item.origY);
|
||||
const hitBox = itemCheckHitbox(this, pointer);
|
||||
if (hitBox) {
|
||||
hitBox.itemDeselect();
|
||||
// add socket function for unlearn here
|
||||
ws.sendVboxUnequip(vbox.instance, cryp.id, item.item);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
*/
|
||||
return this;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = StatSheet;
|
||||
@@ -1,41 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const { TEXT, POSITIONS: { MENU_MAIN } } = require('./constants');
|
||||
|
||||
const X = MENU_MAIN.x();
|
||||
const Y = MENU_MAIN.y();
|
||||
const WIDTH = MENU_MAIN.width();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
|
||||
class ZoneControls extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'ZoneControls' });
|
||||
}
|
||||
|
||||
create(zoneId) {
|
||||
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
|
||||
|
||||
const menu = this.add
|
||||
.rectangle(Math.floor(WIDTH * 0.7), Math.floor(HEIGHT * 0.8), Math.floor(WIDTH * 0.2), Math.floor(HEIGHT * 0.2), 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
|
||||
this.add
|
||||
.text(menu.getCenter().x, menu.getCenter().y, 'Clear', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
menu.on('pointerdown', () => {
|
||||
this.registry.get('ws').sendZoneClose(zoneId);
|
||||
this.scene.get('Zones').cleanUp();
|
||||
});
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ZoneControls;
|
||||
@@ -1,31 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
class ZoneNode extends Phaser.GameObjects.Sprite {
|
||||
constructor(scene, x, y, id, success, tag) {
|
||||
super(scene, x, y);
|
||||
this.setTexture('eye');
|
||||
this.scene = scene;
|
||||
this.success = success;
|
||||
// this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
|
||||
this.id = id;
|
||||
this.setPosition(x, y);
|
||||
|
||||
const nodeNoDigits = tag.replace(/[0-9]/g, '');
|
||||
switch (nodeNoDigits) {
|
||||
case 'BOSS':
|
||||
this.setScale(0.25);
|
||||
break;
|
||||
case 'MINIBOSS':
|
||||
this.setScale(0.1);
|
||||
break;
|
||||
default:
|
||||
this.setScale(0.05);
|
||||
}
|
||||
if (this.success) {
|
||||
this.setTint(0xff0000);
|
||||
}
|
||||
this.text = tag;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ZoneNode;
|
||||
@@ -1,129 +0,0 @@
|
||||
const Phaser = require('phaser');
|
||||
const Node = require('./zone.node');
|
||||
const ZoneControls = require('./zone.controls');
|
||||
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
|
||||
|
||||
const X = MENU_MAIN.x();
|
||||
const Y = MENU_MAIN.y();
|
||||
const WIDTH = MENU_MAIN.width();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
|
||||
|
||||
// Mouse click hold to move, Q + E to zoom in and out
|
||||
// Press 'A' to reset allocated passive nodes
|
||||
|
||||
class Zones extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'Zones' });
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
|
||||
}
|
||||
|
||||
create(zone) {
|
||||
if (!zone) return false;
|
||||
if (!this.scene.get('ZoneControls')) this.scene.manager.add('ZoneControls', ZoneControls, true, zone.id);
|
||||
this.graphics = this.add.graphics();
|
||||
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
|
||||
this.addNodes(zone.graph.nodes);
|
||||
this.drawEdges(zone.graph.edges);
|
||||
this.addCameraControl();
|
||||
this.addEvents(zone.id);
|
||||
return this;
|
||||
}
|
||||
|
||||
addNodes(nodeData) {
|
||||
this.nodes = [];
|
||||
nodeData.forEach((n, i) => {
|
||||
this.nodes[i] = this.add.existing(
|
||||
new Node(this, n.x * 50 + 200, n.y * 50 + 200, i, n.success, n.tag)
|
||||
).setInteractive();
|
||||
});
|
||||
}
|
||||
|
||||
addCameraControl() {
|
||||
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
|
||||
camera: this.cameras.main,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.005,
|
||||
drag: 0.0005,
|
||||
maxSpeed: 0.001,
|
||||
});
|
||||
}
|
||||
|
||||
addEvents(zoneId) {
|
||||
this.input.on('pointerover', (pointer, gameObjects) => {
|
||||
if (gameObjects[0] instanceof Node) {
|
||||
this.displayNodeText(gameObjects[0], pointer);
|
||||
}
|
||||
});
|
||||
this.input.on('pointerout', (pointer, gameObjects) => {
|
||||
if (gameObjects[0] instanceof Node) {
|
||||
this.nodeText.destroy();
|
||||
}
|
||||
});
|
||||
this.input.on('pointerup', (pointer, gameObjects) => {
|
||||
if (Math.abs(pointer.upX - pointer.downX) < 5
|
||||
&& Math.abs(pointer.upY - pointer.downY) < 5) {
|
||||
// Check cursor hasn't significantly moved during point allocation
|
||||
// If panning and mouse release is on node it won't allocate
|
||||
if (gameObjects[0] instanceof Node) {
|
||||
const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
|
||||
if (gameObjects[0].success) return false;
|
||||
this.registry.get('ws').sendZoneJoin(zoneId, gameObjects[0].id, team);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.input.on('pointermove', (pointer) => {
|
||||
const zoomFactor = 2 / this.cameras.main.zoom;
|
||||
if (this.registry.get('pan')) {
|
||||
const points = pointer.getInterpolatedPosition(2);
|
||||
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
|
||||
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
|
||||
drawEdges(edgeData) {
|
||||
this.graphics.clear();
|
||||
edgeData.forEach((e) => {
|
||||
const nodeA = this.nodes[e[0]];
|
||||
const nodeB = this.nodes[e[1]];
|
||||
if (nodeA.success && nodeB.success) {
|
||||
this.graphics.lineStyle(10, 0xfff00f, 0.2);
|
||||
} else {
|
||||
this.graphics.lineStyle(2, 0xffffff, 0.2);
|
||||
}
|
||||
this.graphics.lineBetween(nodeA.x, nodeA.y, nodeB.x, nodeB.y);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
displayNodeText(node, pointer) {
|
||||
if (this.nodeText) this.nodeText.destroy();
|
||||
this.nodeText = this.add.text(node.x, node.y, node.text, TEXT.HOVER).setPadding(32);
|
||||
this.nodeText.setAlpha(0.8);
|
||||
this.nodeText.setOrigin(pointer.x >= WIDTH * 0.65 ? 1 : 0,
|
||||
pointer.y >= HEIGHT * 0.25 ? 1 : 0);
|
||||
this.nodeText.setWordWrapWidth(450);
|
||||
this.nodeText.setScale(1 / this.cameras.main.zoom);
|
||||
}
|
||||
|
||||
camPan(bool) {
|
||||
this.pan = bool;
|
||||
}
|
||||
|
||||
update(delta) {
|
||||
this.controls.update(delta);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
if (this.scene.get('ZoneControls')) this.scene.get('ZoneControls').cleanUp();
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Zones;
|
||||
@@ -69,14 +69,6 @@ function createSocket(events) {
|
||||
send({ method: 'game_state', params: { id } });
|
||||
}
|
||||
|
||||
function sendGamePve(crypIds, mode) {
|
||||
send({ method: 'game_pve', params: { cryp_ids: crypIds, mode } });
|
||||
}
|
||||
|
||||
function sendGamePvp(crypIds) {
|
||||
send({ method: 'game_pvp', params: { cryp_ids: crypIds } });
|
||||
}
|
||||
|
||||
function sendGameJoin(gameId, crypIds) {
|
||||
send({ method: 'game_join', params: { game_id: gameId, cryp_ids: crypIds } });
|
||||
}
|
||||
@@ -111,6 +103,7 @@ function createSocket(events) {
|
||||
|
||||
function sendVboxCombine(instanceId, indices) {
|
||||
send({ method: 'player_vbox_combine', params: { instance_id: instanceId, indices } });
|
||||
events.clearCombiner();
|
||||
}
|
||||
|
||||
function sendVboxReclaim(instanceId, index) {
|
||||
@@ -166,11 +159,12 @@ function createSocket(events) {
|
||||
account = login;
|
||||
events.setAccount(login);
|
||||
sendAccountCryps();
|
||||
sendAccountPlayers();
|
||||
}
|
||||
|
||||
function accountPlayerList(res) {
|
||||
const [struct, playerList] = res;
|
||||
events.setPlayerList(playerList);
|
||||
events.setInstanceList(playerList);
|
||||
}
|
||||
|
||||
function accountCryps(response) {
|
||||
@@ -187,10 +181,6 @@ function createSocket(events) {
|
||||
const [structName, cryp] = response;
|
||||
}
|
||||
|
||||
function gamePve(response) {
|
||||
const [structName, game] = response;
|
||||
}
|
||||
|
||||
function zoneState(response) {
|
||||
const [structName, zone] = response;
|
||||
events.setZone(zone);
|
||||
@@ -216,7 +206,6 @@ function createSocket(events) {
|
||||
cryp_spawn: crypSpawn,
|
||||
cryp_forget: () => true,
|
||||
cryp_learn: () => true,
|
||||
game_pve: gamePve,
|
||||
game_state: gameState,
|
||||
account_login: accountLogin,
|
||||
account_create: accountLogin,
|
||||
@@ -265,12 +254,12 @@ function createSocket(events) {
|
||||
ws.addEventListener('open', () => {
|
||||
toast.info({
|
||||
message: 'connected',
|
||||
position: 'topRight',
|
||||
position: 'topCenter',
|
||||
});
|
||||
|
||||
if (!account) events.loginPrompt();
|
||||
// if (!account) events.loginPrompt();
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
|
||||
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
|
||||
}
|
||||
|
||||
return true;
|
||||
@@ -289,7 +278,7 @@ function createSocket(events) {
|
||||
console.error('WebSocket closed', event);
|
||||
toast.warning({
|
||||
message: 'disconnected',
|
||||
position: 'topRight',
|
||||
position: 'topCenter',
|
||||
});
|
||||
return setTimeout(connect, 5000);
|
||||
});
|
||||
@@ -305,8 +294,6 @@ function createSocket(events) {
|
||||
sendAccountPlayers,
|
||||
sendAccountZone,
|
||||
sendGameState,
|
||||
sendGamePve,
|
||||
sendGamePvp,
|
||||
sendGameJoin,
|
||||
sendGameSkill,
|
||||
sendGameTarget,
|
||||
@@ -1,135 +0,0 @@
|
||||
const toast = require('izitoast');
|
||||
|
||||
const OK_BUTTON = '<button type="submit">OK</button>';
|
||||
const NO_MORE_BUTTON = '<button type="submit">Enough already...</button>';
|
||||
|
||||
function noMore(instance, thisToast) {
|
||||
window.localStorage.setItem('tutorial', 'none');
|
||||
return instance.hide({ transitionOut: 'fadeOut' }, thisToast);
|
||||
}
|
||||
|
||||
const WELCOME_MESSAGE = `
|
||||
Welcome to cryps.gg
|
||||
Enter a username and password and press register to sign up,
|
||||
or just press DEMO to quick start.
|
||||
`;
|
||||
|
||||
const HOMEPAGE_MESSAGE = `
|
||||
This homepage shows your cryps, joinable online games, PVE options and your items.\n
|
||||
If you have no cryps yet, press SPAWN and give your cryp a name to create one.
|
||||
Once you have made a cryp, click on them to visit their stat page and teach them some SKILLS.
|
||||
The stat page also has descriptions of each skill and their effects.
|
||||
cryps have 3 basic stats: hp, red damage and magic damage.
|
||||
Toggle whether a cryp is selected for your team by clicking the coloured stripes next to the cryp or press 1,2,3.
|
||||
Once you have a team ready press the New PVE Game button to start playing.
|
||||
`;
|
||||
|
||||
const SKILL_PHASE_MESSAGE = `
|
||||
A cryps battle has two main phases. This first phase is called the SKILL PHASE.
|
||||
Your cryps are positioned on the left, your opponent's are on the right.
|
||||
In the centre are your cryps' SKILLS, grayed out SKILLS are currently ON COOLDOWN.
|
||||
A skill's cooldown reduces on every turn that cryp does not use a skill with a cooldown.
|
||||
For the moment, drag ATTACK onto the opponent team to have your cryps attack them with red damage.
|
||||
`;
|
||||
|
||||
// const TARGET_PHASE_MESSAGE = `
|
||||
// This phase is the TARGET PHASE.
|
||||
// In cryps you do not directly attack your opponent's cryps, you attack the opponent as a team
|
||||
// and you and your opponent choose which cryp is the TARGET of each ability.
|
||||
// Drag the incoming ATTACKS from the right hand side onto your own cryps.
|
||||
// It's wise to spread the damage around!
|
||||
// `;
|
||||
|
||||
const RESOLUTION_PHASE_MESSAGE = `
|
||||
The second phase is called the RESOLUTION PHASE.
|
||||
This phase happens automatically, every skill is RESOLVED in order of its SPEED.
|
||||
This is important because attacks only RESOLVE while their caster is still able to use the skill,
|
||||
a fast skill that does a small amount of damage may KO an opponent cryp, causing any SKILLS
|
||||
they have used to no longer RESOLVE!
|
||||
Another example of this is the skill STUN. STUN causes an opponent cryp to be unable to use any
|
||||
abilities for TWO TURNS including the turn it resolves on. In other words it lasts for the rest of the turn it resolves on
|
||||
and the whole next turn.
|
||||
Try it now!
|
||||
`;
|
||||
|
||||
const FINISH_PHASE_MESSAGE = `
|
||||
gg! The game has now concluded, if you were the winner you have been awarded with a STAT REROLL ITEM.
|
||||
You can use this to reroll a stat on a cryp which may be lacking.
|
||||
A good metric is that if a stat is more than 1/2 of its STAMINA that's a good roll.
|
||||
Now that you have learned the basics, press BACKSPACE to return to the main menu
|
||||
and experiment with some combinations of SKILLS or replace the ones your cryps know in the STAT PAGE.
|
||||
glhf!
|
||||
`;
|
||||
|
||||
const STEPS = [
|
||||
'init',
|
||||
'welcome',
|
||||
'homepage',
|
||||
'skillPhase',
|
||||
// 'targetPhase',
|
||||
'resolutionPhase',
|
||||
'finishPhase',
|
||||
'none',
|
||||
];
|
||||
|
||||
function showTutorial(message, step, nextStep) {
|
||||
const existing = document.querySelector(`#${step}`); // Selector of your toast
|
||||
|
||||
if (existing) return false;
|
||||
|
||||
toast.info({
|
||||
id: step,
|
||||
theme: 'dark',
|
||||
color: 'black',
|
||||
timeout: false,
|
||||
drag: false,
|
||||
title: 'TUTORIAL',
|
||||
position: 'bottomCenter',
|
||||
maxWidth: window.innerWidth / 2,
|
||||
close: false,
|
||||
buttons: [
|
||||
[NO_MORE_BUTTON, noMore],
|
||||
[OK_BUTTON, (instance, thisToast) => {
|
||||
const thisStep = STEPS.indexOf(step);
|
||||
const storageStep = STEPS.indexOf(window.localStorage.getItem('tutorial'));
|
||||
if (thisStep >= storageStep) {
|
||||
window.localStorage.setItem('tutorial', nextStep);
|
||||
}
|
||||
|
||||
return instance.hide({ transitionOut: 'fadeOut' }, thisToast);
|
||||
}],
|
||||
],
|
||||
message,
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function tutorial() {
|
||||
function show(step) {
|
||||
const currentStage = window.localStorage.getItem('tutorial');
|
||||
if (currentStage === 'none') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const thisStep = STEPS.indexOf(step);
|
||||
const storageStep = STEPS.indexOf(window.localStorage.getItem('tutorial'));
|
||||
|
||||
if (thisStep < storageStep) return false;
|
||||
|
||||
if (step === 'welcome') return showTutorial(WELCOME_MESSAGE, 'welcome', 'homepage');
|
||||
if (step === 'homepage') return showTutorial(HOMEPAGE_MESSAGE, 'homepage', 'skillPhase');
|
||||
if (step === 'skillPhase') return showTutorial(SKILL_PHASE_MESSAGE, 'skillPhase', 'targetPhase');
|
||||
// if (step === 'targetPhase') return showTutorial(TARGET_PHASE_MESSAGE, 'targetPhase', 'resolutionPhase');
|
||||
if (step === 'resolutionPhase') return showTutorial(RESOLUTION_PHASE_MESSAGE, 'resolutionPhase', 'finishPhase');
|
||||
if (step === 'finishPhase') return showTutorial(FINISH_PHASE_MESSAGE, 'finishPhase', 'none');
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
if (window.localStorage.getItem('tutorial') !== 'none') window.localStorage.setItem('tutorial', 'init');
|
||||
|
||||
return show;
|
||||
}
|
||||
|
||||
module.exports = tutorial;
|
||||
@@ -30,7 +30,32 @@ const numSort = (k, desc) => {
|
||||
};
|
||||
};
|
||||
|
||||
const genAvatar = (name) => {
|
||||
let hash = 0;
|
||||
if (name.length === 0) return hash;
|
||||
// Probs don't need to hash using the whole string
|
||||
for (let i = 0; i < name.length; i += 1) {
|
||||
const chr = name.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + chr;
|
||||
hash = hash & 10000; // We have avatars named 0-19
|
||||
}
|
||||
return `sprite${hash}`;
|
||||
};
|
||||
|
||||
function requestAvatar(name) {
|
||||
const id = genAvatar(name);
|
||||
const req = new Request(`/assets/molecules/${id}.svg`);
|
||||
return fetch(req)
|
||||
.then(res => res.text())
|
||||
.then(svg => svg);
|
||||
}
|
||||
|
||||
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
module.exports = {
|
||||
stringSort,
|
||||
numSort,
|
||||
genAvatar,
|
||||
requestAvatar,
|
||||
NULL_UUID,
|
||||
};
|
||||
Reference in New Issue
Block a user