mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
multiple changes
This commit is contained in:
parent
030027b2a1
commit
20faeea409
@ -46,7 +46,11 @@ module.exports = {
|
||||
{
|
||||
name: 'public',
|
||||
include: [/.*/]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'splash',
|
||||
include: [/\/splash/]
|
||||
},
|
||||
],
|
||||
|
||||
// Default Behaviors
|
||||
|
@ -28,7 +28,7 @@ const Card_Component = (props: Card_Component_props) => {
|
||||
Card_Component.defaultProps = {
|
||||
style: null,
|
||||
type: null,
|
||||
children: <h2>Empty</h2>
|
||||
children: <h3>Empty</h3>
|
||||
}
|
||||
|
||||
export default Card_Component
|
@ -54,7 +54,7 @@ export default class ListedMenu extends React.Component{
|
||||
const OptionTitle = () => {
|
||||
if (this.state.renderOptionTitle) {
|
||||
return <div>
|
||||
<h2>{titlesArray[this.state.selectKey].icon || null}{titlesArray[this.state.selectKey].title || null}</h2>
|
||||
<h3>{titlesArray[this.state.selectKey].icon || null}{titlesArray[this.state.selectKey].title || null}</h3>
|
||||
</div>
|
||||
}
|
||||
return null
|
||||
@ -103,9 +103,9 @@ export default class ListedMenu extends React.Component{
|
||||
return (
|
||||
<div style={this.props.wrapperStyle ?? null} className={classnames(styles.main, {[styles.horizontal]: isMode("horizontal") })}>
|
||||
<div className={styles.menuList}>
|
||||
<h2>
|
||||
<h3>
|
||||
{this.props.icon ?? null} {this.props.title ?? "Menu"}
|
||||
</h2>
|
||||
</h3>
|
||||
<Menu
|
||||
mode={this.state.mode}
|
||||
selectedKeys={[selectKey]}
|
||||
|
@ -54,18 +54,6 @@ const contextMenuList = [
|
||||
core.createScreenshotFromElement(document.getElementById(e.id))
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "require_test",
|
||||
title: "Require Test => DEV",
|
||||
icon: <Icons.Cloud />,
|
||||
params: {
|
||||
onClick: (e) => {
|
||||
console.log('Heeeey you developeeer')
|
||||
},
|
||||
keepOnClick: true,
|
||||
require: "dev"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -12,10 +12,11 @@ const stateCodes = {
|
||||
|
||||
export default class SocketConnection {
|
||||
ioConn: any
|
||||
state: { connAttemps: number; registeredNamespaces: any; connectionState: any; listeners: any; latency: any; }
|
||||
state: { connAttemps: number; registeredNamespaces: any; connectionState: any; listeners: any; latency: any; namespace: any; }
|
||||
props: any
|
||||
opts: any
|
||||
dispatcher: any;
|
||||
namespaceConnector: (namespace: any) => void
|
||||
|
||||
constructor(props: any) {
|
||||
if (!props) {
|
||||
@ -25,6 +26,7 @@ export default class SocketConnection {
|
||||
this.dispatcher = props.connector
|
||||
|
||||
this.state = {
|
||||
namespace: "/",
|
||||
latency: 0,
|
||||
listeners: {},
|
||||
connectionState: "init",
|
||||
@ -34,6 +36,7 @@ export default class SocketConnection {
|
||||
|
||||
this.opts = {
|
||||
hostname: "localhost:5000",
|
||||
port: "5000",
|
||||
reconnection: true,
|
||||
reconnectionAttempts: Number(2),
|
||||
reconnectionDelay: 1000,
|
||||
@ -80,73 +83,23 @@ export default class SocketConnection {
|
||||
|
||||
this.createConnection().then((e) => {
|
||||
this.ioConn.updateConnectionState(2)
|
||||
this.setConnectionListeners()
|
||||
})
|
||||
|
||||
this.ioConn.on('connect', (event: any) => {
|
||||
notify.success("You are now online")
|
||||
verbosity("Connected to socket", event)
|
||||
this.ioConn.updateConnectionState(1)
|
||||
props.then(true) // this send an signal when the socket its successfully connected
|
||||
})
|
||||
|
||||
this.ioConn.on("connect_error", (event: any) => {
|
||||
if (this.state.connectionState !== "connecting") {
|
||||
this.ioConn.updateConnectionState(2)
|
||||
}
|
||||
if (this.state.connAttemps >= this.opts.reconnectionAttempts) {
|
||||
verbosity(['Maximun nº of attemps reached => max', this.opts.reconnectionAttempts + 1])
|
||||
this.ioConn.updateConnectionState(0)
|
||||
return false
|
||||
}
|
||||
verbosity([`Strike [${this.state.connAttemps + 1}] / ${this.opts.reconnectionAttempts + 1} !`, event])
|
||||
this.state.connAttemps = this.state.connAttemps + 1
|
||||
})
|
||||
|
||||
this.ioConn.on('reconnect', (attemptNumber: number) => {
|
||||
verbosity(["Connection reconected with (", attemptNumber, ") tries"])
|
||||
notify.success("You are now online")
|
||||
this.ioConn.updateConnectionState(1)
|
||||
})
|
||||
|
||||
this.ioConn.on('disconnected', () => {
|
||||
notify.warn("You are offline")
|
||||
this.ioConn.updateConnectionState(3)
|
||||
})
|
||||
|
||||
this.ioConn.on('connect_timeout', () => {
|
||||
notify.warn("Connection timeout")
|
||||
this.ioConn.updateConnectionState(3)
|
||||
})
|
||||
|
||||
this.ioConn.on('close', () => {
|
||||
verbosity("Connection closed!")
|
||||
this.ioConn.updateConnectionState(0)
|
||||
})
|
||||
|
||||
this.ioConn.on('error', (event: any) => {
|
||||
notify.error(event)
|
||||
})
|
||||
|
||||
this.ioConn.on('updateState', (event: any) => {
|
||||
this.ioConn.updateState(event)
|
||||
})
|
||||
|
||||
if (typeof (this.ioConn.io.opts.pingInterval) !== "undefined") {
|
||||
if (typeof (this.ioConn.io.opts.pingInterval) == "number") {
|
||||
setInterval(() => {
|
||||
this.ioConn.emit('latency', Date.now(), (startTime) => {
|
||||
const latency = Date.now() - startTime
|
||||
this.ioConn.updateState({ latency })
|
||||
})
|
||||
}, this.ioConn.io.opts.pingInterval)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
createConnection() {
|
||||
createConnection(namespace) {
|
||||
const getNamespace = () => {
|
||||
console.log(this.opts.hostname)
|
||||
|
||||
if (typeof (namespace) !== "undefined") {
|
||||
return namespace
|
||||
}
|
||||
return this.opts.hostname
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
this.ioConn = io(this.opts.hostname, this.opts)
|
||||
console.log(getNamespace())
|
||||
this.ioConn = io(getNamespace(), this.opts)
|
||||
|
||||
this.ioConn.updateState = (payload) => {
|
||||
this.state = { ...this.state, ...payload }
|
||||
@ -202,4 +155,61 @@ export default class SocketConnection {
|
||||
})
|
||||
}
|
||||
|
||||
setConnectionListeners() {
|
||||
this.ioConn.on('connect', (event: any) => {
|
||||
notify.success("You are now online")
|
||||
verbosity("Connected to socket", event)
|
||||
this.ioConn.updateConnectionState(1)
|
||||
})
|
||||
|
||||
this.ioConn.on("connect_error", (event: any) => {
|
||||
if (this.state.connectionState !== "connecting") {
|
||||
this.ioConn.updateConnectionState(2)
|
||||
}
|
||||
if (this.state.connAttemps >= this.opts.reconnectionAttempts) {
|
||||
verbosity(['Maximun nº of attemps reached => max', this.opts.reconnectionAttempts + 1])
|
||||
this.ioConn.updateConnectionState(0)
|
||||
return false
|
||||
}
|
||||
verbosity([`Strike [${this.state.connAttemps + 1}] / ${this.opts.reconnectionAttempts + 1} !`, event])
|
||||
this.state.connAttemps = this.state.connAttemps + 1
|
||||
})
|
||||
|
||||
this.ioConn.on('reconnect', (attemptNumber: number) => {
|
||||
verbosity(["Connection reconected with (", attemptNumber, ") tries"])
|
||||
notify.success("You are now online")
|
||||
this.ioConn.updateConnectionState(1)
|
||||
})
|
||||
|
||||
this.ioConn.on('disconnect', (event) => {
|
||||
verbosity([`Disconnected from socket >`, event])
|
||||
notify.warn("You are offline")
|
||||
this.ioConn.updateConnectionState(3)
|
||||
})
|
||||
|
||||
this.ioConn.on('connect_timeout', () => {
|
||||
notify.warn("Connection timeout")
|
||||
this.ioConn.updateConnectionState(3)
|
||||
})
|
||||
|
||||
this.ioConn.on('error', (event: any) => {
|
||||
verbosity([`New error from socket >`, event])
|
||||
})
|
||||
|
||||
this.ioConn.on('updateState', (event: any) => {
|
||||
this.ioConn.updateState(event)
|
||||
})
|
||||
|
||||
if (typeof (this.ioConn.io.opts.pingInterval) !== "undefined") {
|
||||
if (typeof (this.ioConn.io.opts.pingInterval) == "number") {
|
||||
setInterval(() => {
|
||||
this.ioConn.emit('latency', Date.now(), (startTime) => {
|
||||
const latency = Date.now() - startTime
|
||||
this.ioConn.updateState({ latency })
|
||||
})
|
||||
}, this.ioConn.io.opts.pingInterval)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
17
src/layouts/LoadLayout.js
Normal file
17
src/layouts/LoadLayout.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
import verbosity from 'core/libs/verbosity'
|
||||
import handle from 'core/libs/errorhandler'
|
||||
import { notify } from 'core/libs/appInterface'
|
||||
import settings from 'core/libs/settings'
|
||||
import endpoints from 'config/endpoints'
|
||||
import { v3_model } from 'core/libs'
|
||||
|
||||
export default class LoadLayout extends React.Component{
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
@ -1,14 +1,9 @@
|
||||
import React from 'react'
|
||||
import store from 'store'
|
||||
|
||||
import {
|
||||
PageTransition,
|
||||
} from 'components'
|
||||
import { enquireScreen, unenquireScreen } from 'enquire-js'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
|
||||
import styles from './PublicLayout.less'
|
||||
|
||||
@ -42,7 +37,6 @@ export default class PublicLayout extends React.Component {
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
const { isMobile } = this.state
|
||||
return (
|
||||
<React.Fragment>
|
||||
<antd.Layout>
|
||||
|
@ -129,9 +129,6 @@ export default {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
*logout({ payload }, { call, put, select }) {
|
||||
const uuid = yield select(state => state.app.session_uuid)
|
||||
|
@ -17,7 +17,8 @@ export default {
|
||||
namespace: 'socket',
|
||||
state: {
|
||||
resolvers: null,
|
||||
socket_address: "85.251.59.39:7000", //set by default
|
||||
socket_address: "85.251.59.39", //set by default
|
||||
socket_port: "7000",
|
||||
ioConn: null,
|
||||
listeners: {}
|
||||
},
|
||||
@ -35,11 +36,14 @@ export default {
|
||||
},
|
||||
*initializeSocket({ payload, then }, { select, put }) {
|
||||
const state = yield select(state => state)
|
||||
if (payload == null){
|
||||
payload = {
|
||||
hostname: state.socket.socket_address,
|
||||
reconnectionAttempts: 10
|
||||
}
|
||||
let opt = {
|
||||
hostname: `${state.socket.socket_address}:${state.socket.socket_port}`, // set stated data
|
||||
port: state.socket.socket_port,
|
||||
reconnectionAttempts: 10
|
||||
}
|
||||
|
||||
if (typeof (payload) !== "undefined") {
|
||||
opt = { ...opt, ...payload }
|
||||
}
|
||||
|
||||
const handleThen = () => {
|
||||
@ -51,9 +55,16 @@ export default {
|
||||
|
||||
yield put({
|
||||
type: "handleSocket",
|
||||
payload: new SocketConnection({ payload, connector: state.app.dispatcher, then: handleThen })
|
||||
payload: new SocketConnection({ payload: opt, connector: state.app.dispatcher, then: handleThen })
|
||||
})
|
||||
},
|
||||
*namespaceConnector({ namespace, then }, { select, put }) {
|
||||
const state = yield select(state => state.socket)
|
||||
const hostname = `${state.socket_address}:${state.socket_port}/${namespace}`
|
||||
|
||||
state.ioConn.disconnect()
|
||||
yield put({ type: "initializeSocket", payload: { hostname } })
|
||||
},
|
||||
*break({ listener }, { select, put }) {
|
||||
const state = yield select(state => state.socket)
|
||||
state.ioConn.updateListener(listener, false)
|
||||
@ -71,9 +82,8 @@ export default {
|
||||
|
||||
state.ioConn.emit('latency', Date.now(), (startTime) => {
|
||||
const latency = Date.now() - startTime
|
||||
console.log(latency)
|
||||
verbosity(latency)
|
||||
})
|
||||
|
||||
},
|
||||
*floodTest({ ticks, offset }, { call, put, select }) {
|
||||
const state = yield select(state => state)
|
||||
@ -106,7 +116,7 @@ export default {
|
||||
state.socket.ioConn._emit("floodTest", n)
|
||||
tickSound.play()
|
||||
}, n)
|
||||
}else{
|
||||
} else {
|
||||
endSound.play()
|
||||
}
|
||||
})
|
||||
|
@ -1,24 +1,102 @@
|
||||
import React from 'react'
|
||||
import ReduxDebugger from 'debuggers/redux'
|
||||
import * as antd from 'antd'
|
||||
import { FloatComponent } from 'components'
|
||||
import { connect } from 'umi'
|
||||
import * as Icons from 'components/Icons'
|
||||
import { __legacy__objectToArray } from 'core'
|
||||
|
||||
@connect((store) => (store))
|
||||
export default class Index extends React.Component {
|
||||
handleOpenFloat() {
|
||||
FloatComponent({ children: <ReduxDebugger {...this.props} />, title: "redux debugger" })
|
||||
}
|
||||
|
||||
handleDispatchNamespace(key) {
|
||||
console.log(`Dispatching socket namespace (${key})`)
|
||||
this.props.dispatch({
|
||||
type: "socket/namespaceConnector",
|
||||
namespace: key
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const dispatch = this.props.dispatch
|
||||
const { connectionState, socket_address, latency } = this.props.socket
|
||||
|
||||
const getListenersList = (data) => {
|
||||
if (typeof (data) == "undefined" && data == null) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
__legacy__objectToArray(data).map(e => {
|
||||
return (
|
||||
<div key={e.key}>
|
||||
<antd.Tag>{e.key} > <antd.Tag color={e.value ? "geekblue" : "orange"} >{e.value ? "Enabled" : "Disable"}</antd.Tag></antd.Tag>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const getNamespacesMonitor = (data) => {
|
||||
if (typeof (data) == "undefined" && data == null) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
__legacy__objectToArray(data).map(e => {
|
||||
return (
|
||||
<div key={e.key} style={{ display: "flex", flexDirection: "column", justifyContent: "center", margin: "0 10px", width: "100%", height: "100%" }}>
|
||||
<h4>{e.key}</h4>
|
||||
<antd.Button onClick={() => { this.handleDispatchNamespace(e.key) }} > dispatch </antd.Button>
|
||||
<antd.Button onClick={() => { dispatch({ type: "socket/toogleListener", listener: e.key }) }} > break </antd.Button>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => this.handleOpenFloat()}> open on float </button>
|
||||
<ReduxDebugger />
|
||||
<button onClick={() => dispatch({type: "socket/floodTest", ticks: 100 })}> start floodTest </button>
|
||||
<button onClick={() => dispatch({type: "socket/toogleListener", listener: "floodTest" })}> break floodTest </button>
|
||||
<button onClick={() => dispatch({type: "socket/break", listener: "floodTest" })}> fullbreak </button>
|
||||
|
||||
<antd.Card>
|
||||
<h1><Icons.ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1>
|
||||
<antd.Card>
|
||||
<h3> State </h3>
|
||||
<antd.Card>
|
||||
<antd.Tag>{socket_address}</antd.Tag>
|
||||
<antd.Tag color={connectionState == "connected" ? "green" : "volcano"} > {connectionState} </antd.Tag>
|
||||
<antd.Tag color={latency > 60 ? "red" : "green"} > ~{latency}ms </antd.Tag>
|
||||
</antd.Card>
|
||||
</antd.Card>
|
||||
<antd.Card>
|
||||
<h3> Listener manager </h3>
|
||||
<antd.Card>
|
||||
{getListenersList(this.props.socket.listeners)}
|
||||
</antd.Card>
|
||||
</antd.Card>
|
||||
<antd.Card>
|
||||
<h3> Registered Namespaces </h3>
|
||||
<antd.Card>
|
||||
<div style={{ display: "flex", flexDirection: "row", backgroundColor: "#fefefe", overflow: "scroll", textAlign: "center" }}>
|
||||
{getNamespacesMonitor(this.props.socket.registeredNamespaces)}
|
||||
|
||||
</div>
|
||||
</antd.Card>
|
||||
</antd.Card>
|
||||
<antd.Card>
|
||||
<h3> Misc </h3>
|
||||
<antd.Card>
|
||||
<antd.Button onClick={() => dispatch({ type: "socket/getLatency" })} > getLatency </antd.Button>
|
||||
<antd.Button onClick={() => dispatch({ type: "socket/floodTest", ticks: 100 })} > start floodtest </antd.Button>
|
||||
<antd.Button onClick={() => dispatch({ type: "socket/toogleListener", listener: "floodTest" })}> break floodTest </antd.Button>
|
||||
<antd.Button onClick={() => dispatch({ type: "socket/break", listener: "floodTest" })}> fullbreak </antd.Button>
|
||||
</antd.Card>
|
||||
</antd.Card>
|
||||
</antd.Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
26
src/pages/splash/index.js
Normal file
26
src/pages/splash/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { connect } from 'umi'
|
||||
import './index.less'
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class AppSplash extends React.Component {
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
document.querySelector(".js-logo").classList.remove("is-small")
|
||||
}, 1200)
|
||||
}
|
||||
//c-logo__svg-item c-logo__svg-item--out
|
||||
render() {
|
||||
return (
|
||||
<div className="c-logo js-logo is-small">
|
||||
<svg className="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29">
|
||||
<g>
|
||||
|
||||
<polygon className="c-logo__svg-item c-logo__svg-item--move" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
53
src/pages/splash/index.less
Normal file
53
src/pages/splash/index.less
Normal file
@ -0,0 +1,53 @@
|
||||
.c-logo{
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
|
||||
&__svg{
|
||||
width: 280px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__svg-item{
|
||||
fill: #242424;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
|
||||
&--out{
|
||||
transition: all 0.2s ease-in-out 0.2s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.is-small &{
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition-delay: 0s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--move{
|
||||
|
||||
transition: all 0.36s ease-in-out 0s;
|
||||
|
||||
.is-small &{
|
||||
|
||||
transform: translateX(-171px);
|
||||
transition-delay: 0s;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user