- page.id === currentPageId)}
hoverTransition={this.hoverTransition}
diff --git a/ui/src/components/Game/GamePage/GamePage.js b/ui/src/components/Game/GamePage/GamePage.js
index 7f23568..91bb7bf 100644
--- a/ui/src/components/Game/GamePage/GamePage.js
+++ b/ui/src/components/Game/GamePage/GamePage.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { convertFromRaw, Editor, EditorState } from 'draft-js'
+import { convertFromRaw, Editor, EditorState, ContentState } from 'draft-js'
import Image from 'components/common/TextEditor/Image'
import GameTransition from './GameTransition'
import styles from './styles.scss'
const GamePage = ({ page = {}, hoverTransition, outTransition, changePage }) => {
- const pageContent = convertFromRaw(JSON.parse(page.text))
+ const pageContent = page.text ? convertFromRaw(JSON.parse(page.text)) : ContentState.createFromText('')
const blockRenderer = (block) => {
if (block.getType() === 'atomic') return { component: Image, editable: false }
@@ -13,7 +13,7 @@ const GamePage = ({ page = {}, hoverTransition, outTransition, changePage }) =>
}
return (
-
- x
-
+
/>
)
diff --git a/ui/src/components/Game/GamePage/GameTransition/GameTransition.js b/ui/src/components/Game/GamePage/GameTransition/GameTransition.js
index 91f91f6..c3ba683 100644
--- a/ui/src/components/Game/GamePage/GameTransition/GameTransition.js
+++ b/ui/src/components/Game/GamePage/GameTransition/GameTransition.js
@@ -1,18 +1,25 @@
import React from 'react'
+import classnames from 'classnames'
import Button from 'components/common/Button'
import styles from './styles.scss'
const GameTransition = ({ transition, hoverTransition, outTransition, changePage }) => {
+ const onClick = () => transition.toPage && changePage(transition.toPage)
+ const className = classnames(styles.transitionButton, {
+ [styles.disabled]: transition.toPage === null,
+ })
+
return (
)
}
diff --git a/ui/src/components/Game/GamePage/GameTransition/styles.scss b/ui/src/components/Game/GamePage/GameTransition/styles.scss
index adb68de..b127c5e 100644
--- a/ui/src/components/Game/GamePage/GameTransition/styles.scss
+++ b/ui/src/components/Game/GamePage/GameTransition/styles.scss
@@ -1,7 +1,13 @@
+@import '~styles/colors';
+
.transitionButton {
- display: flex;
- background-color: transparent;
+ text-align: left;
+ background-color: $dark-background-color-1;
padding: 10px 30px;
- margin-top: 20px;
+ margin: 10px 0;
width: 100%;
}
+
+.disabled {
+ background-color: $dark-background-color-3;
+}
\ No newline at end of file
diff --git a/ui/src/components/Game/GamePage/styles.scss b/ui/src/components/Game/GamePage/styles.scss
index e94bd6b..42a54db 100644
--- a/ui/src/components/Game/GamePage/styles.scss
+++ b/ui/src/components/Game/GamePage/styles.scss
@@ -1,3 +1,8 @@
+.component {
+ width: 100%;
+}
+
.gameTransitions {
width: 100%;
+ margin: 20px 0;
}
diff --git a/ui/src/components/Game/index.js b/ui/src/components/Game/index.js
index 5497afa..bdb3487 100644
--- a/ui/src/components/Game/index.js
+++ b/ui/src/components/Game/index.js
@@ -1 +1 @@
-export default from './GameContainer'
+export default from './Game'
diff --git a/ui/src/components/Game/styles.scss b/ui/src/components/Game/styles.scss
index c814a6a..ff3b20c 100644
--- a/ui/src/components/Game/styles.scss
+++ b/ui/src/components/Game/styles.scss
@@ -1,71 +1,73 @@
@import '~styles/colors';
+@import '~styles/sizes';
-@keyframes slidein {
- 0% { left: 50vw; width: 0 }
- 100% { left: 0; width: 100vw }
-}
+// @keyframes slidein {
+// 0% { left: 50vw; width: 0 }
+// 100% { left: 0; width: 100vw }
+// }
-@keyframes fadein {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
-}
+// @keyframes fadein {
+// 0% { opacity: 0; }
+// 100% { opacity: 1; }
+// }
-$openbook: .75s;
-$fadein: .5s;
+// $openbook: .75s;
+// $fadein: .5s;
.wrapper {
position: fixed;
display: flex;
- background-image: url('http://www.rpgbooster.com/wp-content/uploads/2014/02/Map-South-East-Domarion.jpg');
- background-position: center;
+ // background-image: url('https://static.wixstatic.com/media/ed3f4a_be98fafaf91c456fb59d21214c7c5c0d.jpg/v1/fill/w_977,h_794,al_c,q_85,usm_0.66_1.00_0.01/ed3f4a_be98fafaf91c456fb59d21214c7c5c0d.jpg');
+ // background-position: center;
+ // background-size: cover;
height: 100vh;
z-index: 1050;
- left: 0;
top: 0;
- width: 100vw;
- animation: slidein $openbook;
+ width: $content-size;
+ // animation: slidein $openbook;
- .rightSide {
- display: flex;
- flex: 50%;
- height: 100vh;
- }
+ // .rightSide {
+ // display: flex;
+ // flex: 50%;
+ // height: 100vh;
+ // }
- .leftSide {
- display: flex;
- flex: 50%;
- height: 100vh;
- }
+ // .leftSide {
+ // display: flex;
+ // flex: 50%;
+ // height: 100vh;
+ // }
.content {
- color: transparentize($white, .1);
+ box-sizing: border-box;
+ color: $dark-font-color;
width: 100%;
padding: 50px;
- background-color: transparentize($black, .15);
+ background-color: $dark-background-color-2;
display: flex;
text-align: justify;
justify-content: center;
font-size: 1.5em;
overflow-y: scroll;
- .close {
- opacity: 0;
- position: absolute;
- right: 40px;
- cursor: pointer;
- animation: fadein $fadein;
- animation-fill-mode: forwards;
- animation-delay: $openbook;
- top: 10px;
- }
+ // .close {
+ // opacity: 0;
+ // position: absolute;
+ // right: 40px;
+ // cursor: pointer;
+ // animation: fadein $fadein;
+ // animation-fill-mode: forwards;
+ // animation-delay: $openbook;
+ // top: 10px;
+ // }
- .mainText {
- opacity: 0;
- max-width: 70%;
- animation: fadein $fadein;
- animation-fill-mode: forwards;
- animation-delay: $openbook;
- text-align: justify;
- }
+ // .mainText {
+ // opacity: 0;
+ // max-width: 70%;
+ // animation: fadein $fadein;
+ // animation-fill-mode: forwards;
+ // animation-delay: $openbook;
+ // text-align: justify;
+ // }
}
}
diff --git a/ui/src/components/GameView/GameView.js b/ui/src/components/GameView/GameView.js
new file mode 100644
index 0000000..39577e3
--- /dev/null
+++ b/ui/src/components/GameView/GameView.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Layout, Content, GameToolbar } from 'components/Layout'
+import Game from 'components/Game'
+
+const GameView = (props) => {
+ return (
+
+
+
+
+ )
+}
+
+export default GameView
diff --git a/ui/src/components/Game/GameContainer.js b/ui/src/components/GameView/GameViewContainer.js
similarity index 89%
rename from ui/src/components/Game/GameContainer.js
rename to ui/src/components/GameView/GameViewContainer.js
index 1299615..703c9b8 100644
--- a/ui/src/components/Game/GameContainer.js
+++ b/ui/src/components/GameView/GameViewContainer.js
@@ -1,6 +1,6 @@
import React from 'react'
-import Game from './Game'
-import bookJSON from '../book'
+import bookJSON from 'components/book'
+import GameView from './GameView'
const createGame = (book) => {
return {
@@ -30,7 +30,7 @@ const createGame = (book) => {
}
export default ({ params }) => (
- {
- return (
-
-
diff --git a/ui/src/components/Old/common/Book/BookInformation/BookInformation.js b/ui/src/components/Old/common/Book/BookInformation/BookInformation.js
index 4aff848..ad055fc 100644
--- a/ui/src/components/Old/common/Book/BookInformation/BookInformation.js
+++ b/ui/src/components/Old/common/Book/BookInformation/BookInformation.js
@@ -4,7 +4,7 @@ import { Button, Input, GroupInput, TextAreaInput } from '../../../common'
import BookCover from './BookCover'
import GenreList from './GenreList'
import PageList from './PageList'
-import Game from '../../../../Game'
+import Game from '../../../../GameView'
import styles from './styles.scss'
class BookInformation extends React.Component {
diff --git a/ui/src/components/Profile/Password/PasswordContainer.js b/ui/src/components/Profile/Password/PasswordContainer.js
index a35183e..7f3075b 100644
--- a/ui/src/components/Profile/Password/PasswordContainer.js
+++ b/ui/src/components/Profile/Password/PasswordContainer.js
@@ -23,39 +23,20 @@ const mutation = gql`
}
`
-const PasswordContainer = () => {
- return (
-
- {
- (updatePassword, state) => {
- const _updatePassword = passwordsData => updatePassword({
- variables: {
- userId: AuthService.getConnectedUserId(),
- ...passwordsData,
- },
- })
- return
+ {
+ (updatePassword, state) => {
+ const _updatePassword = passwordsData => updatePassword({
+ variables: {
+ userId: AuthService.getConnectedUserId(),
+ ...passwordsData,
+ },
+ })
+ return
- )
-}
+ }
+
+)
export default PasswordContainer
-// const mutationOptions = {
-// name: 'updatePassword',
-// }
-
-// const PasswordContainer = (props) => {
-// let error
-// const { updatePassword } = props
-// const _updatePassword = passwordsData => updatePassword({
-// variables: {
-// userId: AuthService.getConnectedUserId(),
-// ...passwordsData,
-// },
-// })
-// return
-
+
+
+
+ )
+}
+
+export default TrialView
diff --git a/ui/src/components/TrialView/TrialViewContainer.js b/ui/src/components/TrialView/TrialViewContainer.js
new file mode 100644
index 0000000..a2704fa
--- /dev/null
+++ b/ui/src/components/TrialView/TrialViewContainer.js
@@ -0,0 +1,119 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+import { normalize } from 'normalizr'
+import AuthService from 'services/AuthService'
+import * as schemas from 'store/schema'
+import TrialView from './TrialView'
+
+const query = gql`
+ query tryGame($bookId: ID!, $playerId: ID!) {
+ tryGame(bookId: $bookId, playerId: $playerId) {
+ id
+ currentPageId
+ playerId
+ book {
+ name
+ tags
+ synopsis
+ cover
+ startingPageId
+ genreId
+ draft
+ creationDate
+ lastModificationDate
+ revision
+ stats {
+ id
+ name
+ description
+ initValue
+ max
+ min
+ visible
+ }
+ objects {
+ id
+ name
+ description
+ atStart
+ visible
+ }
+ author {
+ id
+ username
+ }
+ pages {
+ id
+ title
+ description
+ text
+ effects {
+ operator
+ subject
+ value
+ type
+ }
+ transitions {
+ id
+ fromPage
+ toPage
+ text
+ conditionOperator
+ effects {
+ id
+ operator
+ subject
+ value
+ type
+ }
+ conditions {
+ id
+ operator
+ subject
+ value
+ type
+ }
+ }
+ }
+ }
+ stats
+ objects
+ }
+ }
+`
+// TODO: Add loading and error returns
+const TrialViewContainer = ({ params }) => {
+ return (
+
+ {
+ ({ loading, error, data }) => {
+ if (loading) return null
+ if (error) return null
+ const game = data.tryGame
+ return
+ )
+}
+
+// TODO: Create Store and populate it with data from graphQL response (TDD!)
+const NormalizeAndStoreData = (props) => {
+ console.log('graphqlResponse : ', props.game)
+
+ const result = normalize(props.game.book, schemas.book)
+ console.log('normalizedBook : ', result)
+
+ return (
+
{
- page.transitions.map(transition =>
-
-
-
- )
-}
-
-export default Link
diff --git a/ui/src/components/Layout/Toolbar/Link/index.js b/ui/src/components/Layout/Toolbar/Link/index.js
deleted file mode 100644
index 30862fd..0000000
--- a/ui/src/components/Layout/Toolbar/Link/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Link'
diff --git a/ui/src/components/Layout/Toolbar/Toolbar.js b/ui/src/components/Layout/Toolbar/Toolbar.js
deleted file mode 100644
index 0e3a3a0..0000000
--- a/ui/src/components/Layout/Toolbar/Toolbar.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import styles from './style.scss'
-import logo from '../../common/logo.svg'
-import Link from './Link'
-import { RouteService } from '../../../services'
-
-const Toolbar = () => {
- return (
-
-
- )
-}
-
-export default Toolbar
diff --git a/ui/src/components/Layout/Toolbar/index.js b/ui/src/components/Layout/Toolbar/index.js
deleted file mode 100644
index de17a65..0000000
--- a/ui/src/components/Layout/Toolbar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Toolbar'
diff --git a/ui/src/components/Layout/Toolbars/AppToolbar/AppToolbar.js b/ui/src/components/Layout/Toolbars/AppToolbar/AppToolbar.js
new file mode 100644
index 0000000..4396410
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/AppToolbar/AppToolbar.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import ToolbarLink from 'components/common/ToolbarLink'
+import styles from './style.scss'
+import logo from '../../../common/logo.svg'
+import { RouteService } from '../../../../services'
+
+const AppToolbar = () => {
+ return (
+
- 
-
-
-
-
-
-
-
+
+ )
+}
+
+export default AppToolbar
diff --git a/ui/src/components/Layout/Toolbars/AppToolbar/index.js b/ui/src/components/Layout/Toolbars/AppToolbar/index.js
new file mode 100644
index 0000000..d987106
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/AppToolbar/index.js
@@ -0,0 +1 @@
+export default from './AppToolbar'
diff --git a/ui/src/components/Layout/Toolbar/style.scss b/ui/src/components/Layout/Toolbars/AppToolbar/style.scss
similarity index 100%
rename from ui/src/components/Layout/Toolbar/style.scss
rename to ui/src/components/Layout/Toolbars/AppToolbar/style.scss
diff --git a/ui/src/components/Layout/Toolbars/GameToolbar/GameToolbar.js b/ui/src/components/Layout/Toolbars/GameToolbar/GameToolbar.js
new file mode 100644
index 0000000..55d8166
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/GameToolbar/GameToolbar.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { browserHistory } from 'react-router'
+import { ToolbarButton } from 'components/common/ToolbarLink'
+import styles from './style.scss'
+import logoWhite from '../../../common/logo_white.svg'
+// import { RouteService } from '../../../../services'
+
+const GameToolbar = (props) => {
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default GameToolbar
diff --git a/ui/src/components/Layout/Toolbars/GameToolbar/index.js b/ui/src/components/Layout/Toolbars/GameToolbar/index.js
new file mode 100644
index 0000000..c6548e5
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/GameToolbar/index.js
@@ -0,0 +1 @@
+export default from './GameToolbar'
diff --git a/ui/src/components/Layout/Toolbars/GameToolbar/style.scss b/ui/src/components/Layout/Toolbars/GameToolbar/style.scss
new file mode 100644
index 0000000..8377b5f
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/GameToolbar/style.scss
@@ -0,0 +1,33 @@
+@import '~styles/sizes';
+@import '~styles/colors';
+
+.component {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: $toolbar-size;
+ background-color: $dark-background-color-1;
+}
+
+.top {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bottom {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-bottom: 20px;
+}
+
+.logo {
+ margin: 20px 0;
+ height: 70px;
+}
+
+.darkButton {
+ background-color: $dark-background-color-2;
+ color: $dark-primary-color;
+}
\ No newline at end of file
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/DisplayObjects.js b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/DisplayObjects.js
new file mode 100644
index 0000000..ca81fb5
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/DisplayObjects.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './style.scss'
+
+const DisplayObjects = ({ game }) => {
+ return (
+
+ 
+
+
+
+
+
+
+
+ )
+}
+
+export default DisplayObjects
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/index.js b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/index.js
new file mode 100644
index 0000000..63a37d9
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/index.js
@@ -0,0 +1 @@
+export default from './DisplayObjects'
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/style.scss b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/style.scss
new file mode 100644
index 0000000..34b3445
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayObjects/style.scss
@@ -0,0 +1,18 @@
+@import '~styles/colors';
+
+.component {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: $dark-primary-color;
+ font-size: 1.1em;
+}
+
+.item {
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.title {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/DisplayStats.js b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/DisplayStats.js
new file mode 100644
index 0000000..8efef61
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/DisplayStats.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './style.scss'
+
+const DisplayStats = ({ game }) => {
+ return (
+ Objets
+ {
+ game.objects.map((objectId) => {
+ const name = game.book.objects.find(current => current.id === objectId).name
+ return {name}
+ })
+ }
+
+ {
+ Object.entries(game.stats).map(([key, value]) => {
+ const name = game.book.stats.find(current => current.id === key).name
+ return (
+
+ )
+}
+
+export default DisplayStats
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/index.js b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/index.js
new file mode 100644
index 0000000..309766d
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/index.js
@@ -0,0 +1 @@
+export default from './DisplayStats'
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/style.scss b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/style.scss
new file mode 100644
index 0000000..04ee9d2
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/DisplayStats/style.scss
@@ -0,0 +1,17 @@
+@import '~styles/colors';
+
+.component {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: $dark-primary-color;
+ font-size: 1.1em;
+ &>div {
+ text-align: center;
+ padding-bottom: 10px;
+ }
+}
+
+.name {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/TrialToolbar.js b/ui/src/components/Layout/Toolbars/TrialToolbar/TrialToolbar.js
new file mode 100644
index 0000000..2116f29
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/TrialToolbar.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { browserHistory } from 'react-router'
+import { ToolbarButton } from 'components/common/ToolbarLink'
+import DisplayStats from './DisplayStats'
+import DisplayObjects from './DisplayObjects'
+import styles from './style.scss'
+import logoWhite from '../../../common/logo_white.svg'
+// import { RouteService } from '../../../../services'
+
+const TrialToolbar = ({ game }) => {
+ return (
+
+
+ )
+ })
+ }
+ {name}
+ {value}
+
+
+ )
+}
+
+export default TrialToolbar
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/index.js b/ui/src/components/Layout/Toolbars/TrialToolbar/index.js
new file mode 100644
index 0000000..d3434ed
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/index.js
@@ -0,0 +1 @@
+export default from './TrialToolbar'
diff --git a/ui/src/components/Layout/Toolbars/TrialToolbar/style.scss b/ui/src/components/Layout/Toolbars/TrialToolbar/style.scss
new file mode 100644
index 0000000..8377b5f
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/TrialToolbar/style.scss
@@ -0,0 +1,33 @@
+@import '~styles/sizes';
+@import '~styles/colors';
+
+.component {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: $toolbar-size;
+ background-color: $dark-background-color-1;
+}
+
+.top {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bottom {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-bottom: 20px;
+}
+
+.logo {
+ margin: 20px 0;
+ height: 70px;
+}
+
+.darkButton {
+ background-color: $dark-background-color-2;
+ color: $dark-primary-color;
+}
\ No newline at end of file
diff --git a/ui/src/components/Layout/Toolbars/index.js b/ui/src/components/Layout/Toolbars/index.js
new file mode 100644
index 0000000..fc0e515
--- /dev/null
+++ b/ui/src/components/Layout/Toolbars/index.js
@@ -0,0 +1,3 @@
+export AppToolbar from './AppToolbar'
+export GameToolbar from './GameToolbar'
+export TrialToolbar from './TrialToolbar'
diff --git a/ui/src/components/Layout/index.js b/ui/src/components/Layout/index.js
index da1bfad..0e62d3f 100644
--- a/ui/src/components/Layout/index.js
+++ b/ui/src/components/Layout/index.js
@@ -1,6 +1,6 @@
export default from './Layout'
export Layout from './Layout'
export Content from './Content'
-export Toolbar from './Toolbar'
+export { AppToolbar, GameToolbar, TrialToolbar } from './Toolbars'
export Tabs from './Tabs'
export { TabContent } from './Tabs'
diff --git a/ui/src/components/MyBooks/MyBooks.js b/ui/src/components/MyBooks/MyBooks.js
index 7fdb103..b8265ac 100644
--- a/ui/src/components/MyBooks/MyBooks.js
+++ b/ui/src/components/MyBooks/MyBooks.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Layout, Content, Toolbar, Tabs, TabContent } from '../Layout'
+import { Layout, Content, AppToolbar, Tabs, TabContent } from '../Layout'
import { RouteService } from '../../services'
const tabDrafts = { label: 'Mes brouillons', link: RouteService.routes.writedrafts() }
@@ -11,7 +11,7 @@ const tabs = [tabDrafts, tabBooks, tabPublish]
const MyBooks = ({ location, children, loading }) => {
return (
+
+
+
+ {/* TODO: Externalize this button */}
+
+
+
+
@@ -12,7 +15,7 @@ const ConditionObjectInput = ({ objects, condition, index, updateCondition }) =>
onChange: subject => updateCondition({ subject }),
}}
>
-
+ key
{
objects.map(object => (
-
-
+ {
+ Object.entries(objectConditions).map(([key, conditionModel]) => {
+ if (typeof conditionModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
diff --git a/ui/src/components/Write/Page/PageTransition/TransitionRow/TransitionCondition/ConditionRow/ConditionInput/ConditionStatInput/CondtionStatInput.js b/ui/src/components/Write/Page/PageTransition/TransitionRow/TransitionCondition/ConditionRow/ConditionInput/ConditionStatInput/CondtionStatInput.js
index 01d85c7..27511ea 100644
--- a/ui/src/components/Write/Page/PageTransition/TransitionRow/TransitionCondition/ConditionRow/ConditionInput/ConditionStatInput/CondtionStatInput.js
+++ b/ui/src/components/Write/Page/PageTransition/TransitionRow/TransitionCondition/ConditionRow/ConditionInput/ConditionStatInput/CondtionStatInput.js
@@ -1,7 +1,10 @@
import React from 'react'
import { Input, SelectInput } from 'components/common'
+import EffectService from 'services/EffectService'
import styles from './styles.scss'
+const statConditions = EffectService.condition.stat
+
const ConditionStatInput = ({ stats, condition, index, updateCondition }) => {
return (
@@ -23,12 +26,14 @@ const ConditionStatInput = ({ stats, condition, index, updateCondition }) => {
}}
>
-
-
-
-
-
-
+ {
+ Object.entries(statConditions).map(([key, statModel]) => {
+ if (typeof statModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
{
const _updateCondition = _condition => updateCondition({ id: condition.id, ..._condition })
return (
@@ -21,8 +24,14 @@ const ConditionRow = ({ book, condition, index, updateCondition, removeCondition
}}
>
-
-
+ {
+ Object.entries(conditionType).map(([key, conditionModel]) => {
+ if (typeof conditionModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
@@ -30,8 +34,14 @@ const TransitionCondition = ({
updateResource(index, { ...transition, conditionOperator }),
}}
>
-
-
+ {
+ Object.entries(operatorConditions).map(([key, operatorModel]) => {
+ if (typeof operatorModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
diff --git a/ui/src/components/Write/Page/WritePage.js b/ui/src/components/Write/Page/WritePage.js
index 5bf034a..ba2480e 100644
--- a/ui/src/components/Write/Page/WritePage.js
+++ b/ui/src/components/Write/Page/WritePage.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Layout, Content, Toolbar, Tabs, TabContent } from 'components/Layout'
+import { Layout, Content, AppToolbar, Tabs, TabContent } from 'components/Layout'
import { RouteService } from 'services'
const WritePage = ({ location, loading, children, params }) => {
@@ -10,7 +10,7 @@ const WritePage = ({ location, loading, children, params }) => {
const tabs = [tabPrevious, tabInfos, tabContent, tabTransitions]
return (
-
diff --git a/ui/src/components/Write/Page/common/EffectRow/EffectInput/ObjectInput/ObjectInput.js b/ui/src/components/Write/Page/common/EffectRow/EffectInput/ObjectInput/ObjectInput.js
index 38a7168..e618706 100644
--- a/ui/src/components/Write/Page/common/EffectRow/EffectInput/ObjectInput/ObjectInput.js
+++ b/ui/src/components/Write/Page/common/EffectRow/EffectInput/ObjectInput/ObjectInput.js
@@ -1,7 +1,10 @@
import React from 'react'
import { SelectInput } from 'components/common'
+import EffectService from 'services/EffectService'
import styles from './styles.scss'
+const objectEffect = EffectService.effect.object
+
const ObjectInput = ({ objects, effect, index, updateEffect }) => {
return (
@@ -23,8 +26,14 @@ const ObjectInput = ({ objects, effect, index, updateEffect }) => {
}}
>
-
-
+ {
+ Object.entries(objectEffect).map(([key, effectModel]) => {
+ if (typeof effectModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
diff --git a/ui/src/components/Write/Page/common/EffectRow/EffectInput/StatInput/StatInput.js b/ui/src/components/Write/Page/common/EffectRow/EffectInput/StatInput/StatInput.js
index d9c1919..8155ac9 100644
--- a/ui/src/components/Write/Page/common/EffectRow/EffectInput/StatInput/StatInput.js
+++ b/ui/src/components/Write/Page/common/EffectRow/EffectInput/StatInput/StatInput.js
@@ -1,7 +1,10 @@
import React from 'react'
import { Input, SelectInput } from 'components/common'
+import EffectService from 'services/EffectService'
import styles from './styles.scss'
+const statEffect = EffectService.effect.stat
+
const StatInput = ({ stats, effect, index, updateEffect }) => {
return (
@@ -23,11 +26,14 @@ const StatInput = ({ stats, effect, index, updateEffect }) => {
}}
>
-
-
-
-
-
+ {
+ Object.entries(statEffect).map(([key, effectModel]) => {
+ if (typeof effectModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
{
const doUpdateEffect = (changes) => {
updateEffect({ id: effect.id, ...changes })
}
+
return !!book && (
@@ -19,9 +23,15 @@ const EffectRow = ({ book, effect, index, updateEffect, removeEffect }) => {
onChange: type => doUpdateEffect({ type, value: '', operator: '', subject: '' }),
}}
>
-
-
-
+
+ {
+ Object.entries(effectType).map(([key, effectModel]) => {
+ if (typeof effectModel === 'object') {
+ return
+ }
+ return null
+ })
+ }
{
+ const className = classnames(domProps && domProps.className, styles.icon)
+ return (
+
+
+ )
+}
+
+export default ToolbarLink
diff --git a/ui/src/components/common/ToolbarLink/index.js b/ui/src/components/common/ToolbarLink/index.js
new file mode 100644
index 0000000..b3d33ed
--- /dev/null
+++ b/ui/src/components/common/ToolbarLink/index.js
@@ -0,0 +1,2 @@
+export default from './ToolbarLink'
+export ToolbarButton from './ToolbarButton'
diff --git a/ui/src/components/common/logo_white.svg b/ui/src/components/common/logo_white.svg
new file mode 100644
index 0000000..283ca86
--- /dev/null
+++ b/ui/src/components/common/logo_white.svg
@@ -0,0 +1,1967 @@
+
+
+
+
\ No newline at end of file
diff --git a/ui/src/router.js b/ui/src/router.js
index 8945048..c35d645 100644
--- a/ui/src/router.js
+++ b/ui/src/router.js
@@ -19,7 +19,8 @@ import WriteDraft, {
PageTransition,
} from './components/Write'
import Portal, { SignIn, SignUp, Recover } from './components/Portal'
-import Game from './components/Game'
+import GameView from './components/GameView'
+import TrialView from './components/TrialView'
import Profile, { Password } from './components/Profile'
// OLD LAYOUT
@@ -41,7 +42,8 @@ const AppRouter = () => {
-
diff --git a/ui/src/services/EffectService.js b/ui/src/services/EffectService.js
new file mode 100644
index 0000000..05a2140
--- /dev/null
+++ b/ui/src/services/EffectService.js
@@ -0,0 +1,98 @@
+class EffectService {
+ effect = {
+ object: {
+ label: 'L\'objet',
+ add: {
+ label: 'est ajouté',
+ exec: (value, modifier) => {},
+ },
+ remove: {
+ label: 'est retiré',
+ exec: () => {},
+ },
+ },
+ stat: {
+ label: 'La statistique',
+ inc: {
+ label: 'augmente de',
+ value: 'inc',
+ exec: (value, modifier) => value + modifier,
+ },
+ dec: {
+ label: 'diminue de',
+ value: 'dec',
+ exec: (value, modifier) => value - modifier,
+ },
+ mul: {
+ label: 'est multiplié par',
+ value: 'mul',
+ exec: (value, modifier) => value * modifier,
+ },
+ div: {
+ label: 'est divisé par',
+ value: 'div',
+ exec: (value, modifier) => value / modifier,
+ },
+ aff: {
+ label: 'est remplacé par',
+ value: 'aff',
+ exec: (value, modifier) => modifier,
+ },
+ },
+ }
+
+ condition = {
+ label: 'Condition',
+ object: {
+ label: 'L\'objet',
+ own: {
+ label: 'est possédé',
+ exec: () => {},
+ },
+ doNotOwn: {
+ label: 'n\'est pas possédé',
+ exec: () => {},
+ },
+ },
+ stat: {
+ label: 'La statistique',
+ equal: {
+ label: 'est égal à',
+ exec: (initValue, conditionValue) => initValue === conditionValue,
+ },
+ notEqual: {
+ label: 'est différent de',
+ exec: (initValue, conditionValue) => initValue !== conditionValue,
+ },
+ more: {
+ label: 'est supérieur à',
+ exec: (initValue, conditionValue) => initValue > conditionValue,
+ },
+ less: {
+ label: 'est inférieur à',
+ exec: (initValue, conditionValue) => initValue < conditionValue,
+ },
+ moreOrEqual: {
+ label: 'est supérieur ou égale à',
+ exec: (initValue, conditionValue) => initValue >= conditionValue,
+ },
+ lessOrEqual: {
+ label: 'est inférieur ou égale à',
+ exec: (initValue, conditionValue) => initValue <= conditionValue,
+ },
+ },
+ }
+
+ conditionOperator = {
+ and: {
+ label: 'ET',
+ exec: () => {},
+ },
+ or: {
+ label: 'OU',
+ exec: () => {},
+ },
+ }
+}
+
+export default new EffectService()
diff --git a/ui/src/services/RouteService.js b/ui/src/services/RouteService.js
index 522a0c2..aa14270 100644
--- a/ui/src/services/RouteService.js
+++ b/ui/src/services/RouteService.js
@@ -18,7 +18,8 @@ class RouteService {
books: () => '/app/books',
booksnews: () => '/app/books/news',
bookslibrary: () => '/app/books/library',
- playgame: id => `/app/play/${id}`,
+ playgame: gameId => `/app/play/${gameId}`,
+ trialgame: bookId => `/app/trial/${bookId}`,
write: () => '/app/write',
writedrafts: () => '/app/write/drafts',
writepublications: () => '/app/write/publications',
@@ -40,6 +41,10 @@ class RouteService {
browserHistory.push(route)
}
+ // goBack = () => {
+
+ // }
+
redirect401 = () => {
browserHistory.push(this.routes.signin())
}
diff --git a/ui/src/store/actions/index.js b/ui/src/store/actions/index.js
new file mode 100644
index 0000000..65aa253
--- /dev/null
+++ b/ui/src/store/actions/index.js
@@ -0,0 +1,30 @@
+export const addStat = ({ id, value }) => ({
+ type: 'STAT',
+ id,
+ value,
+})
+
+export const addObject = objectId => ({
+ type: 'ADD_OBJECT',
+ objectId
+})
+
+export const removeObject = objectId => ({
+ type: 'REMOVE_OBJECT',
+ objectId
+})
+
+export const addBook = book => ({
+ type: 'ADD_BOOK',
+ book
+})
+
+export const currentPageId = currentPageId => ({
+ type: 'CURRENT_PAGE_ID',
+ currentPageId,
+})
+
+export const gameId = gameId => ({
+ type: 'GAME_ID',
+ gameId
+})
\ No newline at end of file
diff --git a/ui/src/store/reducers/index.js b/ui/src/store/reducers/index.js
new file mode 100644
index 0000000..210161d
--- /dev/null
+++ b/ui/src/store/reducers/index.js
@@ -0,0 +1,60 @@
+import { combineReducers } from 'redux'
+
+const stat = (state = {}, { type, id, value }) => {
+ switch (type) {
+ case 'ADD_STAT':
+ return ({
+ ...state,
+ [id]: value,
+ })
+ default:
+ return state;
+ }
+}
+
+const object = (state = [], action) => {
+ switch (action.type) {
+ case 'ADD_OBJECT':
+ return ([...state, action.objectId])
+ case 'REMOVE_OBJECT':
+ return state.filter(id => id !== objectId)
+ default:
+ return state
+ }
+ }
+}
+
+const book = (state = {}, action) => {
+ switch (action.type) {
+ case 'ADD_BOOK':
+ return ({...action.book})
+ default:
+ return state
+ }
+ }
+}
+
+const pageId = (state = '', action) => {
+ switch(action.type) {
+ case: 'CURRENT_PAGE_ID',
+ return currentPageId
+ default:
+ return state
+ }
+}
+
+const gameId = (state = '', action) => {
+ switch(action.type) {
+ case: 'GAME_ID',
+ return gameId
+ default:
+ return state
+ }
+}
+
+export default combineReducers(
+ stat,
+ object,
+ book,
+ pageId
+)
\ No newline at end of file
diff --git a/ui/src/store/schema/index.js b/ui/src/store/schema/index.js
new file mode 100644
index 0000000..3782b90
--- /dev/null
+++ b/ui/src/store/schema/index.js
@@ -0,0 +1,23 @@
+import { schema } from 'normalizr'
+
+export const author = new schema.Entity('author')
+export const object = new schema.Entity('object')
+export const stat = new schema.Entity('stat')
+export const effect = new schema.Entity('effect')
+export const condition = new schema.Entity('condition')
+export const transition = new schema.Entity('transition', {
+ conditions: [condition],
+ effects: [effect],
+})
+export const page = new schema.Entity('page', {
+ effects: [effect],
+ transitions: [transition],
+})
+export const tag = new schema.Entity('tag')
+export const book = new schema.Entity('book', {
+ author,
+ objects: [object],
+ stats: [stat],
+ pages: [page],
+ tags: [tag],
+})
diff --git a/ui/src/styles/colors.scss b/ui/src/styles/colors.scss
index f8b8582..4a4c8d6 100644
--- a/ui/src/styles/colors.scss
+++ b/ui/src/styles/colors.scss
@@ -15,6 +15,22 @@ $transparent-black: rgba(0,0,0,.6);
$transparent-white: rgba(255,255,255,.9);
$white: #fff;
+$background-error: #d10000;
+
+// dark-ui
+
+$dark-background-color-1: #333;
+$dark-background-color-2: #222;
+$dark-background-color-3: #444;
+$dark-background-color-4: #555;
+$dark-transparent-black: rgba(0,0,0,.95);
+
+$dark-font-color: #CCC;
+
+$dark-primary-color: $dark-font-color;
+$dark-secondary-color: $secondary-color;
+
+
+
+ )
+}
+
+export default ToolbarButton
diff --git a/ui/src/components/common/ToolbarLink/ToolbarButton/index.js b/ui/src/components/common/ToolbarLink/ToolbarButton/index.js
new file mode 100644
index 0000000..a521c21
--- /dev/null
+++ b/ui/src/components/common/ToolbarLink/ToolbarButton/index.js
@@ -0,0 +1 @@
+export default from './ToolbarButton'
diff --git a/ui/src/components/Layout/Toolbar/Link/style.scss b/ui/src/components/common/ToolbarLink/ToolbarButton/style.scss
similarity index 99%
rename from ui/src/components/Layout/Toolbar/Link/style.scss
rename to ui/src/components/common/ToolbarLink/ToolbarButton/style.scss
index 2f0de11..ce02257 100644
--- a/ui/src/components/Layout/Toolbar/Link/style.scss
+++ b/ui/src/components/common/ToolbarLink/ToolbarButton/style.scss
@@ -23,4 +23,4 @@
&:hover {
box-shadow: $box-shadow-1;
}
-}
+}
\ No newline at end of file
diff --git a/ui/src/components/common/ToolbarLink/ToolbarLink.js b/ui/src/components/common/ToolbarLink/ToolbarLink.js
new file mode 100644
index 0000000..cfb8b7e
--- /dev/null
+++ b/ui/src/components/common/ToolbarLink/ToolbarLink.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Link as RouterLink } from 'react-router'
+import ToolbarButton from './ToolbarButton'
+
+const ToolbarLink = ({ to, icon }) => {
+ return (
+