32 src/modals/LastLevelModal.js
View file
@@ -0,0 +1,32 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Modal from 'react-awesome-modal'
import { LoginModalContainer, Trophy, ChummaText, UserBox } from '../styles/modal'
import { Box } from 'grid-styled'
import WinnerImg from '../images/winner.png'

class LastLevelModal extends Component {
render() {
return (
<Modal visible={this.props.open} width="400" height="300" effect="fadeInUp" onClickAway={this.props.onClose}>
<LoginModalContainer align="center" justify="center">
<Box p={2}>
<Trophy src={WinnerImg} />
</Box>
<Box p={2}>
<UserBox p={3} style={{textAlign: 'center'}}>
<ChummaText style={{borderBottom: '1px solid ivory', paddingBottom: 10}}>Sweet! You have completed all 3 levels!</ChummaText> <br/>
<ChummaText>More to come soon...</ChummaText>
</UserBox>
</Box>
</LoginModalContainer>
</Modal>
)
}
}

LastLevelModal.propTypes = {
open: PropTypes.bool.isRequired
}

export default LastLevelModal
10 src/modals/LevelModal.js
View file
@@ -1,14 +1,15 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Modal from 'react-awesome-modal'
import { LoginModalContainer, Trophy, LevelText, LevelContainer, NextButton, UserBox } from '../styles/modal'
import { Flex, Box } from 'grid-styled'
import { LoginModalContainer, Trophy, LevelText, NextButton, UserBox, TipText } from '../styles/modal'
import { Box } from 'grid-styled'
import TrophyImg from '../images/trophy.png'

class LevelModal extends Component {

render() {
return (
<Modal visible={this.props.open} width="400" effect="fadeInUp" onClickAway={this.props.onClose}>
<Modal visible={this.props.open} width="400" height="200" effect="fadeInUp" onClickAway={this.props.onClose}>
<LoginModalContainer wrap align="center" justify="space-around">
<Box p={2}>
<Trophy src={TrophyImg} />
@@ -20,13 +21,16 @@ class LevelModal extends Component {
</UserBox>
</Box>
</LoginModalContainer>
{this.props.level === 1 && <TipText>Tip: Look for zombies along the way. Use your "senses" wisely</TipText>}
{this.props.level === 2 && <TipText>Tip: Monitoring health and taking rest is important!</TipText>}
</Modal>
)
}
}

LevelModal.propTypes = {
open: PropTypes.bool.isRequired,
level: PropTypes.number.isRequired,
onClose: PropTypes.func.isRequired
}

2 src/modals/LoginModal.js
View file
@@ -15,7 +15,7 @@ class LoginModal extends Component {

login = () => {
UserSession.setSession(this.state)
this.props.onClose()
window.location.reload()
}

render() {
11 src/models/Warrior.js
View file
@@ -1,14 +1,23 @@
export default class Warrior {

constructor(actions, space) {
constructor(actions, space, health) {
this.actions = actions
this.space = space
this.currentHealth = health
}

setSpace(space) {
this.space = space
}

setHealth(health) {
this.currentHealth = health
}

health() {
return this.currentHealth
}

walk() {
this.actions.logAction('Walk forward')
this.actions.startWalking()
15 src/reducers/app_reducer.js
View file
@@ -4,7 +4,9 @@ import update from 'immutability-helper'
const defaultState = {
errors: [],
logs: [],
currentTurn: 0
currentTurn: 0,
foul: false,
turnCheck: {}
}

const addError = (state, { content }) => {
@@ -20,11 +22,18 @@ const logTurn = (state, { content }) => {
}

const logAction = (state, { content }) => {
return update(state, { logs: { $push: [`[Turn${state.currentTurn}] ${content}`] } })
if (state.turnCheck[state.currentTurn]) {
state = update(state, { foul: { $set: true } })
return addError(state, { content: 'A turn cannot have more than one warrior action!' })
}
return update(state, {
logs: { $push: [`[Turn${state.currentTurn}] ${content}`] },
turnCheck: { $merge: { [state.currentTurn]: true } }
})
}

const clearLogs = state => {
return update(state, { logs: { $set: [] }, currentTurn: { $set: 0 } })
return update(state, { logs: { $set: [] }, currentTurn: { $set: 0 }, turnCheck: { $set: {} }, foul: { $set: false } })
}

export default (state = defaultState, action) => {
4 src/reducers/elements_reducer.js
View file
@@ -32,6 +32,8 @@ const updateLevel = (state, { content }) => {
state = update(state, { levelCompleted: { $set: false } })
if (newLevel === 2) {
return update(state, { zombie: { tile: { $set: 4 } } })
} else if (newLevel === 3) {
return update(state, { zombie: { tile: { $set: 3 } } })
} else {
return state
}
@@ -40,7 +42,7 @@ const updateLevel = (state, { content }) => {
const takeRest = state => {
const { warrior } = state
const newHealth = warrior.health <= 18 ? warrior.health + 3 : 21
return update(state, { warrior: { health: { $set: newHealth } } })
return update(state, { warrior: { health: { $set: newHealth }, state: {$set: REST} } })
}

const attack = state => {
22 src/reducers/inference_reducer.js
View file
@@ -1,5 +1,5 @@
import update from 'immutability-helper'
import { LAST_TILE_INDEX } from '../constants/actions'
import { LAST_TILE_INDEX, REST } from '../constants/actions'
import ELEMENTS from '../constants/elements'
import Space from '../models/Space'

@@ -11,9 +11,14 @@ const computeWarriorSpace = state => {
}

const checkHealth = state => {
const { zombie, warrior } = state
const { zombie, warrior, level } = state
if (zombie.tile > -1 && zombie.health <= 0) {
return update(state, { zombie: { tile: { $set: -1 } } })
if (level === 3 && zombie.tile !== 6) {
//HACK to add more zombies for now
return update(state, { zombie: { tile: { $set: 6 }, health: { $set: 15 }, state: { $set: REST } } })
} else {
return update(state, { zombie: { tile: { $set: -1 } } })
}
}
if (warrior.tile < LAST_TILE_INDEX && warrior.health <= 0) {
return update(state, { gameOver: { $set: true }, warrior: { tile: { $set: -1 } } })
@@ -37,14 +42,23 @@ const computeTiles = state => {
return update(state, { tiles: { $set: tiles } })
}

const computeFoul = (gameState, appState) => {
if (appState.foul) {
return update(gameState, { gameOver: { $set: true } })
} else {
return gameState
}
}

export default state => {
let { gameState } = state
gameState = computeTiles(gameState)
gameState = checkHealth(gameState)
gameState = computeWarriorSpace(gameState)
gameState = computeZombieSpace(gameState)
gameState = computeFoul(gameState, state.appState)
if (gameState.warrior.tile === LAST_TILE_INDEX) {
gameState = update(gameState, { levelCompleted: { $set: true } })
}
return update(state, { gameState: { $set: gameState } })
return update(state, { gameState: { $set: gameState }})
}
17 src/styles/modal.js
View file
@@ -12,8 +12,14 @@ export const ModalContainer = styled.div`
padding: 20px;
`

export const HelpModalContainer = styled(ModalContainer)`
export const HelpModalContainer = styled.div`
background-color: #27191e;
color: #c1c77d;
border: 1px solid #000000;
z-index: 9000;
padding: 5px 20px;
height: 700px;
overflow: auto;
`

export const LoginModalContainer = styled(Flex)`
@@ -37,6 +43,10 @@ export const LevelText = styled.div`
text-transform: uppercase;
`

export const ChummaText = styled.div`
font-size: 1.5em;
`

export const NextButton = styled.div`
background: #689f38;
color: #fff;
@@ -62,4 +72,9 @@ export const UserBox = styled(Box)`
justify-content: center;
display: flex;
flex-direction: column;
`

export const TipText = styled.h3`
text-align: center;
color: #795548;
`
27 src/styles/world.js
View file
@@ -209,4 +209,29 @@ export const LevelSpan = styled.span`
color: #c5c55b;
font-weight: 700;
text-transform: uppercase;
`
`

export const WelcomeSpan = styled.span`
position: absolute;
right: 0;
margin-right: 3%;
font-size: 1.7em;
color: #c5c55b;
font-weight: 700;
`

const fadeOut = keyframes`
0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
100%{-webkit-transform:translateY(-80px);transform:translateY(-80px);opacity:0}}@keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-80px);transform:translateY(-80px);opacity:0}
`

export const HealthScroller = styled.span`
animation: ${fadeOut} 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
font-size: 200%;
font-family: Oswald, sans-serif;
position: absolute;
left: 50%;
color: #EE4B53;
font-weight: bolder;
z-index: 1000;
`