diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index e197781e..e52249d0 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -174,59 +174,3 @@ section { } } -.demo { - margin-top: 1em; - - display: block; - - button { - pointer-events: none; - } - - section { - margin-bottom: 0.5em; - - div:first-child { - padding-right: 1em; - } - } - - .construct-section { - .construct-list { - height: 25em; - grid-area: unset; - - .instance-construct { - // border: 0; - } - } - } - - .colour-info { - grid-area: vinfo; - display: flex; - align-items: center; - - div { - display: flex; - } - - svg { - flex: 1; - height: 1em; - } - } - - .game-demo { - .game { - height: 25em; - display: flex; - flex-flow: column; - - .game-construct { - flex: 1; - } - } - } -} - diff --git a/client/src/actions.jsx b/client/src/actions.jsx index e99bba62..311d444b 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -7,8 +7,6 @@ export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value }); export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value }); export const setResolution = value => ({ type: 'SET_RESOLUTION', value }); -export const setDemo = value => ({ type: 'SET_DEMO', value }); - export const setChatShow = value => ({ type: 'SET_CHAT_SHOW', value }); export const setChatWheel = value => ({ type: 'SET_CHAT_WHEEL', value }); export const setInstanceChat = value => ({ type: 'SET_INSTANCE_CHAT', value }); diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index 079c2058..a136d5a2 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -1,34 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const times = require('lodash/times'); const { TIMES } = require('../../constants'); -function projectile(x, y, radius, colour) { - return ( - - ); -} - -function sword(colour) { - return ( - - ); -} +const GREEN = '#1FF01F'; +const RED = '#a52a2a'; class Slay extends Component { constructor() { super(); this.animations = []; - this.colour = '#a52a2a'; - const points = new Array(30).fill(0); - this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F')); } render() { @@ -39,13 +22,16 @@ class Slay extends Component { id="slay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> - - - - - - {sword(this.colour)} - {this.charges} + {times(10, () => ( + + ))} ); } @@ -67,58 +53,31 @@ class Slay extends Component { rotate, }); - anime.set('#slay', { - translateY: -1 * (window.innerHeight) * 0.35, - translateX: 0, - }); - - anime.set('#slayFilter feDisplacementMap', { - scale: 0, - }); - - anime.set('#sword', { - fill: this.colour, - opacity: 1, - }); + anime.set('#slay ellipse',{ + fill: RED, + }) this.animations.push(anime({ targets: '#slay', opacity: [ { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 }, - { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 }, ], - translateY: 0, - translateX: 0, - loop: false, easing: 'easeInQuad', })); this.animations.push(anime({ - targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'], - baseFrequency: 10, - scale: 100, - delay: TIMES.TARGET_DURATION_MS * 0.6, + targets: ['#slay ellipse'], + cx: 150, + cy: 325, + delay: TIMES.TARGET_DURATION_MS * 0.2, duration: TIMES.TARGET_DURATION_MS * 0.3, - easing: 'easeInQuad', + easing: 'easeOutQuad', + direction: 'alternate', })); - this.animations.push(anime({ - targets: '#sword', - opacity: 0, - delay: TIMES.TARGET_DURATION_MS * 0.9, - })); - - const projectiles = document.querySelectorAll('#slay circle'); - projectiles.forEach(proj => { - this.animations.push(anime({ - targets: proj, - cx: Math.random() * 250 + 25, - cy: Math.random() * 200 - 100, - delay: TIMES.TARGET_DURATION_MS * 0.7, - duration: TIMES.TARGET_DURATION_MS * 0.3, - easing: 'easeInQuad', - })); - }); + setTimeout(() => anime.set('#slay ellipse',{ + fill: GREEN, + }), TIMES.TARGET_DURATION_MS * 0.5); } componentWillUnmount() { diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx deleted file mode 100644 index e6bee9eb..00000000 --- a/client/src/components/demo.jsx +++ /dev/null @@ -1,190 +0,0 @@ -const { connect } = require('preact-redux'); -const preact = require('preact'); - -// const actions = require('../actions'); -const shapes = require('./shapes'); - -const { ConstructAvatar } = require('./construct'); -// const { ConstructAnimation } = require('./animations'); - -const addState = connect( - function receiveState(state) { - const { - account, - itemInfo, - demo, - } = state; - - return { - account, - itemInfo, - demo, - }; - } - -/* function receiveDispatch(dispatch) { - function setAnimTarget(anim) { - dispatch(actions.setAnimTarget(anim)); - } - - return { setAnimTarget }; - } */ -); - - -function Demo(args) { - const { - demo, - itemInfo, - account, - - // setAnimTarget, - } = args; - - if (!demo || !itemInfo.items.length || account) return false; - - const { combiner, items, equipping, equipped, players, combo } = demo; - - const vboxDemo = () => { - function stashBtn(i, j) { - if (!i) return ; - const highlighted = combiner.indexOf(j) > -1; - const classes = `${highlighted ? 'highlight' : ''}`; - - if (shapes[i]) { - return ; - } - - return ; - } - - function combinerBtn() { - let text = ''; - - if (combiner.length < 3) { - for (let i = 0; i < 3; i++) { - if (combiner.length > i) { - text += '■ '; - } else { - text += '▫ '; - } - } - } else { - text = 'combine'; - } - - return ( - - ); - } - - function stashElement() { - return ( -
-
-

- VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()} -

-

- Combine colours with base skills and specialisations to build an array of powerful variants. -

-
-
 
-
-
- {items.map((i, j) => stashBtn(i, j))} -
- {combinerBtn()} -
-
- ); - } - - return ( -
- {stashElement()} -
- ); - }; - - const vboxConstructs = () => { - const btnClass = equipping - ? 'equipping empty gray' - : 'empty gray'; - - const constructEl = c => ( -
-

{c.name}

- -
- {equipped - ? - : - } - - -
-
-
-
-
-
- ); - - return ( -
-
-

CONSTRUCTS

-

Constructs are the units you control. They are reset every game and their initial appearance is randomly generated.

-

Skills and Specs you create in the VBOX Phase are equipped to your constructs to create a build.

-
-
- {constructEl(players[0].constructs[0])} -
-
- ); - }; - - const gameDemo = () => { - return ( -
-
-

COMBAT PHASE

-

Battle your opponent using dynamic team builds from the VBOX phase.

-

The skills crafted can be used to damage the opponent or support your team.

-

Simultaneous turn based combat: each team picks targets for their skills during this phase.

-

The damage dealt by skills, cast order and construct life depend on your decisions in the VBOX phase.

-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
- ); - }; - - return ( -
- {gameDemo()} - {vboxDemo()} - {vboxConstructs()} -
- ); -} - -module.exports = addState(Demo); diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx index 2a1bfa67..3cb0824d 100644 --- a/client/src/components/welcome.jsx +++ b/client/src/components/welcome.jsx @@ -5,7 +5,6 @@ const Login = require('./welcome.login'); const Register = require('./welcome.register'); const Help = require('./welcome.help'); // const About = require('./welcome.about'); -const Demo = require('./demo'); function Welcome() { const page = this.state.page || 'register'; @@ -33,9 +32,7 @@ function Welcome() { ); - const main = (['login', 'register', 'help'].includes(page)) - ?
{news}{pageEl()}
- : ; + const main =
{news}{pageEl()}
; return (
@@ -58,12 +55,6 @@ function Welcome() { onClick={() => this.setState({ page: 'register' })}> Register - '; - toast.error({ - 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, - }); - } */ - // setup / localstorage - function urlHashChange() { const { ws } = store.getState(); const cmds = querystring.parse(location.hash); @@ -317,7 +229,6 @@ function registerEvents(store) { setActiveItem, setActiveSkill, setChatWheel, - setDemo, setConstructList, setNewConstruct, setGame, diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 36a81eea..9edeeae6 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -20,8 +20,6 @@ module.exports = { resolution: createReducer(null, 'SET_RESOLUTION'), - demo: createReducer(null, 'SET_DEMO'), - chatShow: createReducer(null, 'SET_CHAT_SHOW'), chatWheel: createReducer([], 'SET_CHAT_WHEEL'), diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 210a0700..bacf0870 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -256,10 +256,6 @@ function createSocket(events) { events.setItemInfo(info); } - function onDemo(v) { - events.setDemo(v); - } - let pongTimeout; function onPong() { events.setPing(Date.now() - ping); @@ -285,7 +281,6 @@ function createSocket(events) { InstanceState: onInstanceState, ItemInfo: onItemInfo, Pong: onPong, - Demo: onDemo, // QueueRequested: () => events.notify('PVP queue request received.'), QueueRequested: () => true, diff --git a/server/src/pg.rs b/server/src/pg.rs index 7a9f9495..0c815c9a 100644 --- a/server/src/pg.rs +++ b/server/src/pg.rs @@ -804,26 +804,6 @@ pub fn bot_instance() -> Instance { return instance; } -pub fn demo() -> Result, Error> { - let bot = bot_player(); - - // generate bot imgs for the client to see - for c in bot.constructs.iter() { - img::shapes_write(c.img)?; - }; - - let bot2 = bot_player(); - - // generate bot imgs for the client to see - for c in bot2.constructs.iter() { - img::shapes_write(c.img)?; - }; - - - Ok(vec![bot, bot2]) -} - - pub fn vbox_refill(tx: &mut Transaction, account: &Account, instance_id: Uuid) -> Result { let instance = instance_get(tx, instance_id)? .vbox_refill(account.id)?; diff --git a/server/src/rpc.rs b/server/src/rpc.rs index 9fd4e824..fea26385 100644 --- a/server/src/rpc.rs +++ b/server/src/rpc.rs @@ -23,7 +23,6 @@ use ws::{Builder, CloseCode, Message, Handler, Request, Response, Settings, Send use ws::deflate::DeflateHandler; use pg::{ - demo, game_concede, game_offer_draw, game_ready, @@ -48,7 +47,6 @@ use events::{Event}; use mnml_core::construct::{Construct}; use mnml_core::game::{Game}; -use mnml_core::player::Player; use mnml_core::vbox::{ItemType}; use mnml_core::item::Item; @@ -73,8 +71,6 @@ pub enum RpcMessage { AccountInstances(Vec), AccountShop(mtx::Shop), - Demo(Vec), - ConstructSpawn(Construct), GameState(Game), ItemInfo(ItemInfoCtr), @@ -391,8 +387,6 @@ impl Handler for Connection { // tx should do nothing tx.commit().unwrap(); - } else { - self.send(RpcMessage::Demo(demo().unwrap())).unwrap(); } Ok(())