summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/main/js/package.json8
-rw-r--r--src/main/js/src/components/modals/username.js40
-rw-r--r--src/main/js/src/containers/App/actions.js5
-rw-r--r--src/main/js/src/containers/App/constants.js1
-rw-r--r--src/main/js/src/containers/App/index.js72
-rw-r--r--src/main/js/src/containers/App/saga.js38
-rw-r--r--src/main/js/src/containers/GameBrowser/index.js11
-rw-r--r--src/main/js/src/sagas.js2
-rw-r--r--src/main/js/src/utils/createWebSocketConnection.js13
-rw-r--r--src/main/js/yarn.lock21
10 files changed, 200 insertions, 11 deletions
diff --git a/src/main/js/package.json b/src/main/js/package.json
index 75b33982..b3ad0282 100644
--- a/src/main/js/package.json
+++ b/src/main/js/package.json
@@ -12,9 +12,12 @@
"react-redux": "^5.0.1",
"react-router": "4.0.0-alpha.6",
"rebass": "^0.3.3",
+ "reflexbox": "^2.2.3",
"redux": "^3.6.0",
"redux-saga": "^0.13.0",
- "reflexbox": "^2.2.3"
+ "sockjs-client": "latest",
+ "webstomp-client": "^1.0.3",
+ "redux-saga": "^0.13.0"
},
"scripts": {
"start": "react-scripts start",
@@ -24,5 +27,6 @@
},
"eslintConfig": {
"extends": "react-app"
- }
+ },
+ "proxy": "ws://localhost:8080"
}
diff --git a/src/main/js/src/components/modals/username.js b/src/main/js/src/components/modals/username.js
new file mode 100644
index 00000000..61b52114
--- /dev/null
+++ b/src/main/js/src/components/modals/username.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+ Overlay,
+ Panel,
+ PanelHeader,
+ PanelFooter,
+ Button,
+ Input,
+ Close,
+ Space
+} from 'rebass'
+
+const Modal = ({ modalOpen, toggleModal }) => (
+ <Overlay open={modalOpen} onDismiss={toggleModal('usernameModal')}>
+ <Panel theme="info">
+ <PanelHeader>
+ What's your username ?
+ <Space auto />
+ <Close onClick={toggleModal('usernameModal')} />
+ </PanelHeader>
+ <Input
+ label="Username"
+ name="username"
+ placeholder="Cesar92"
+ rounded
+ type="text"
+ />
+ <PanelFooter>
+ <Space auto />
+ <Button
+ theme="success"
+ onClick={toggleModal('usernameModal')}
+ children="Ok"
+ />
+ </PanelFooter>
+ </Panel>
+ </Overlay>
+)
+
+export default Modal
diff --git a/src/main/js/src/containers/App/actions.js b/src/main/js/src/containers/App/actions.js
new file mode 100644
index 00000000..cfb617d5
--- /dev/null
+++ b/src/main/js/src/containers/App/actions.js
@@ -0,0 +1,5 @@
+import { INITIALIZE_WS } from "./constants"
+
+export const initializeWs = () => ({
+ type: INITIALIZE_WS
+})
diff --git a/src/main/js/src/containers/App/constants.js b/src/main/js/src/containers/App/constants.js
new file mode 100644
index 00000000..be31f8cc
--- /dev/null
+++ b/src/main/js/src/containers/App/constants.js
@@ -0,0 +1 @@
+export const INITIALIZE_WS = 'app/INITIALIZE_WS'
diff --git a/src/main/js/src/containers/App/index.js b/src/main/js/src/containers/App/index.js
index e7eef332..73b70ec3 100644
--- a/src/main/js/src/containers/App/index.js
+++ b/src/main/js/src/containers/App/index.js
@@ -1,9 +1,67 @@
-import React from 'react'
+import React, { Component } from 'react'
import { Link } from 'react-router'
+import {
+ Banner,
+ Heading,
+ Space,
+ Button,
+ Text
+} from 'rebass'
+import { Flex } from 'reflexbox'
+import Modal from '../../components/modals/username'
+import GameBrowser from '../GameBrowser'
-export default () => <div>
- <h1>Hello World</h1>
- <Link to="/counter">Go to counter</Link>
- <br></br>
- <Link to="/404">Go to 404</Link>
- </div> \ No newline at end of file
+class App extends Component {
+ state = {
+ usernameModal: false
+ }
+
+ componentDidMount() {
+
+ }
+
+ toggleModal = (key) => {
+ return (e) => {
+ const val = !this.state[key]
+ this.setState({ [key]: val })
+ }
+ }
+
+ render() {
+ return (
+ <div>
+ <Banner
+ align="center"
+ style={{minHeight: '30vh'}}
+ backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
+ >
+ <Heading level={1}>Seven Wonders</Heading>
+ </Banner>
+ <Flex align="center" p={1}>
+ <Button
+ theme="success"
+ children="Create Game"/>
+ <Space auto />
+ <Text><b>Username:</b> Cesar92</Text>
+ <Space x={1} />
+ <Button
+ onClick={this.toggleModal('usernameModal')}
+ children="Change"/>
+ </Flex>
+ <GameBrowser />
+ <Modal toggleModal={this.toggleModal} modalOpen={this.state.usernameModal} />
+ </div>
+ )
+ }
+}
+
+const mapStateToProps = (state) => ({
+
+})
+
+import { initializeWs } from "./actions";
+const mapDispatchToProps = {
+ initializeWs
+}
+
+export default App
diff --git a/src/main/js/src/containers/App/saga.js b/src/main/js/src/containers/App/saga.js
new file mode 100644
index 00000000..4ccf6019
--- /dev/null
+++ b/src/main/js/src/containers/App/saga.js
@@ -0,0 +1,38 @@
+import { call, put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+import createWebSocketConnection from "../../utils/createWebSocketConnection";
+
+function createSocketChannel(socket) {
+ return eventChannel(emit => {
+ const errorHandler = event => emit(JSON.parse(event))
+
+ const userErrors = socket.subscribe('/user/queue/errors', errorHandler)
+
+ const unsubscribe = () => {
+ userErrors.unsubscribe()
+ }
+
+ return unsubscribe
+ })
+}
+
+export function* watchOnErrors() {
+ let socketChannel
+ try {
+ const { socket } = yield call(createWebSocketConnection)
+ socketChannel = createSocketChannel(socket)
+ } catch (error) {
+ console.error('Error connecting to socket', error)
+ }
+
+ if (!socketChannel) {
+ return
+ }
+
+ while (true) {
+ const payload = yield take(socketChannel)
+ yield put({ type: 'USER_ERROR', payload })
+ }
+}
+
+export default watchOnErrors \ No newline at end of file
diff --git a/src/main/js/src/containers/GameBrowser/index.js b/src/main/js/src/containers/GameBrowser/index.js
new file mode 100644
index 00000000..34a50d53
--- /dev/null
+++ b/src/main/js/src/containers/GameBrowser/index.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+class GameBrowser extends Component {
+ render() {
+ return (
+ <div>Game Browser</div>
+ )
+ }
+}
+
+export default GameBrowser \ No newline at end of file
diff --git a/src/main/js/src/sagas.js b/src/main/js/src/sagas.js
index 24776bf2..46aa278e 100644
--- a/src/main/js/src/sagas.js
+++ b/src/main/js/src/sagas.js
@@ -1,7 +1,9 @@
import { fork } from 'redux-saga/effects'
import counterSaga from './containers/Counter/saga'
+import errorSaga from './containers/App/saga'
export default function* rootSaga() {
yield fork(counterSaga)
+ yield fork(errorSaga)
}
diff --git a/src/main/js/src/utils/createWebSocketConnection.js b/src/main/js/src/utils/createWebSocketConnection.js
new file mode 100644
index 00000000..2f0e5245
--- /dev/null
+++ b/src/main/js/src/utils/createWebSocketConnection.js
@@ -0,0 +1,13 @@
+import SockJS from 'sockjs-client'
+import Stomp from 'webstomp-client'
+const wsURL = 'http://localhost:8080/seven-wonders-websocket'
+
+let socket = null
+export default () => {
+ return new Promise((resolve, reject) => {
+ socket = Stomp.over(new SockJS(wsURL))
+ socket.connect({}, (frame) => {
+ return resolve({ frame, socket })
+ }, reject)
+ })
+} \ No newline at end of file
diff --git a/src/main/js/yarn.lock b/src/main/js/yarn.lock
index 486bb724..5eeb79b4 100644
--- a/src/main/js/yarn.lock
+++ b/src/main/js/yarn.lock
@@ -1944,7 +1944,7 @@ events@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
-eventsource@^0.1.3:
+eventsource@^0.1.3, eventsource@~0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
dependencies:
@@ -2039,6 +2039,12 @@ faye-websocket@^0.10.0:
dependencies:
websocket-driver ">=0.5.1"
+faye-websocket@~0.11.0:
+ version "0.11.0"
+ resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.0.tgz#d9ccf0e789e7db725d74bc4877d23aa42972ac50"
+ dependencies:
+ websocket-driver ">=0.5.1"
+
faye-websocket@~0.7.3:
version "0.7.3"
resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.7.3.tgz#cc4074c7f4a4dfd03af54dd65c354b135132ce11"
@@ -4711,6 +4717,17 @@ sockjs-client@^1.0.3, sockjs-client@1.0.3:
json3 "^3.3.2"
url-parse "^1.0.1"
+sockjs-client@latest:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0"
+ dependencies:
+ debug "^2.2.0"
+ eventsource "~0.1.6"
+ faye-websocket "~0.11.0"
+ inherits "^2.0.1"
+ json3 "^3.3.2"
+ url-parse "^1.1.1"
+
sockjs@^0.3.15:
version "0.3.18"
resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
@@ -5078,7 +5095,7 @@ url-loader@0.5.7:
loader-utils "0.2.x"
mime "1.2.x"
-url-parse@^1.0.1:
+url-parse@^1.0.1, url-parse@^1.1.1:
version "1.1.7"
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a"
dependencies:
bgstack15