@@ -4,92 +4,187 @@
* @flow
*/

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native'
import React, { Component } from 'react'
import { Platform, StyleSheet, Text, View } from 'react-native'
import { Card, Button } from 'react-native-elements'
import Deck from '../deck'

var DATA = [
{ id: 1, text: 'Card #1', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg' },
{ id: 2, text: 'Card #2', uri: 'http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg' },
{ id: 3, text: 'Card #3', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-09.jpg' },
{ id: 4, text: 'Card #4', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg' },
{ id: 5, text: 'Card #5', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg' },
{ id: 6, text: 'Card #6', uri: 'http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg' },
{ id: 7, text: 'Card #7', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-09.jpg' },
{ id: 8, text: 'Card #8', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg' },
{
id: 1,
text: 'Card #1',
leftText: 'left text',
rightText: 'right text'
},
{
id: 2,
text: 'Card #2',
leftText: 'left text',
rightText: 'right text'
},
{
id: 3,
text: 'Card #3',
leftText: 'left text',
rightText: 'right text'
},
{
id: 4,
text: 'Card #4',
leftText: 'left text',
rightText: 'right text'
},
{
id: 5,
text: 'Card #5',
leftText: 'left text',
rightText: 'right text'
},
{
id: 6,
text: 'Card #6',
leftText: 'left text',
rightText: 'right text'
},
{
id: 7,
text: 'Card #7',
leftText: 'left text',
rightText: 'right text'
},
{
id: 8,
text: 'Card #8',
leftText: 'left text',
rightText: 'right text'
}
]

type Props = {};
type Props = {}
export default class CardView extends Component<Props> {

constructor(props) {
super(props);
}
constructor(props) {
super(props)
}

renderCard(item) {
return (
<Card
key={item.id}
title={item.text}
image={{ uri: item.uri}}
>
<Text style= {{marginBottom:10}}>
<Card key={item.id} title={item.text} image={{ uri: item.uri }}>
<Text style={{ marginBottom: 10 }}>
I can customize the Card further
</Text>
<Button
icon={{name:'code'}}
backgroundColor='#03A9F4'
title= {'View Now!'}
>
</Button>
</Card>
</Card>
)
}

renderNoMoreCards() {
return (
<Card
title= 'Game Over!'
>
<Text style= {{ marginBottom:10, textAlign: 'center' }}>
Score: 89321 points
</Text>
<Button
icon={{name:'code'}}
backgroundColor='#03A9F4'
title= {'Try Again!'}
>
</Button>
<Card title="Game Over!">
<Text style={{ marginBottom: 10, textAlign: 'center' }}>
Score: 89321 points
</Text>
<Button
icon={{ name: 'code' }}
backgroundColor="#03A9F4"
title={'Try Again!'}
/>
</Card>
)
}

render() {
return (
<View style={styles.container}>

<Deck
data={DATA}
renderCard={this.renderCard}
renderNoMoreCards={this.renderNoMoreCards}
/>
</View>

);
<View style={styles.container}>
<View
style={{
display: 'flex',
flexDirection: 'row',
height: 140,
paddingTop: 20,
backgroundColor: '#1f2128',
marginBottom: 40
}}>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
width: 40,
height: 40,
backgroundColor: 'gray',
marginBottom: 10
}}
/>
<Text style={{ color: 'white', fontWeight: '700' }}>{1234}</Text>
</View>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
width: 40,
height: 40,
backgroundColor: 'gray',
marginBottom: 10
}}
/>
<Text style={{ color: 'white', fontWeight: '700' }}>{1234}</Text>
</View>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
width: 40,
height: 40,
backgroundColor: 'gray',
marginBottom: 10
}}
/>
<Text style={{ color: 'white', fontWeight: '700' }}>{1234}</Text>
</View>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
width: 40,
height: 40,
backgroundColor: 'gray',
marginBottom: 10
}}
/>
<Text style={{ color: 'white', fontWeight: '700' }}>{1234}</Text>
</View>
</View>
<View
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20
}}>
<Text style={{ color: 'white' }}>TEXTO SUPER CHIDO</Text>
</View>
<View style={{ flexGrow: 1 }}>
<Deck data={DATA} onReset={() => {}} />
</View>
<View
style={{
backgroundColor: '#1f2128',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: 10
}}>
<Text style={{ color: 'white' }}>2018</Text>
<Text style={{ color: 'white' }}>FECHA</Text>
</View>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F2F2F2',
backgroundColor: '#333740'
}
});
})

export {DATA};
export { DATA }
@@ -1,36 +1,35 @@
import React, { Component } from 'react';
import React, { Component } from 'react'
import {
StyleSheet,
PropTypes,
View,
Text,
TouchableHighlight,
} from 'react-native';
TouchableHighlight
} from 'react-native'

export default class MenuButton extends Component {
constructor(props) {
super(props);
this.state = { pressStatus: false };
super(props)
this.state = { pressStatus: false }
}
_onHideUnderlay(){
this.setState({ pressStatus: false });
_onHideUnderlay() {
this.setState({ pressStatus: false })
}
_onShowUnderlay(){
this.setState({ pressStatus: true });
_onShowUnderlay() {
this.setState({ pressStatus: true })
}

render(){
const { onPress, title } = this.props;
render() {
const { onPress, title } = this.props
return (
<View style={styles.container}>
<TouchableHighlight
onPress={onPress}
activeOpacity={1}
style={ this.state.pressStatus ? styles.buttonPress : styles.button }
style={this.state.pressStatus ? styles.buttonPress : styles.button}
onHideUnderlay={this._onHideUnderlay.bind(this)}
onShowUnderlay={this._onShowUnderlay.bind(this)}
>
<Text style={ this.state.pressStatus ? styles.textPress : styles.text }>
onShowUnderlay={this._onShowUnderlay.bind(this)}>
<Text style={this.state.pressStatus ? styles.textPress : styles.text}>
{title}
</Text>
</TouchableHighlight>
@@ -39,10 +38,8 @@ export default class MenuButton extends Component {
}
}


const styles = StyleSheet.create({
container: {
},
container: {},
text: {
fontSize: 20,
textAlign: 'center',
@@ -58,9 +55,9 @@ const styles = StyleSheet.create({
},
button: {
elevation: 5,
backgroundColor: '#9ABF7F',
backgroundColor: '#9ABF7F'
},
buttonPress: {
backgroundColor: '#7FA678',
},
});
backgroundColor: '#7FA678'
}
})
@@ -1,75 +1,47 @@
import React, { Component } from 'react';
import React, { Component } from 'react'

import {
Platform,
StyleSheet,
Text,
View,
Image,
Button
} from 'react-native';
import { Platform, StyleSheet, Text, View, Image, Button } from 'react-native'

export default class App extends Component {

render() {

const {
onPressPlay,
onPressOptions,
onPressAbout
} = this.props;
const { onPressPlay, onPressOptions, onPressAbout } = this.props

return (

<View style={styles.container}>
<View style={styles.menu_container}>

<Image
source={require('../../assets/images/office.png')}
style={styles.menu_game_icon}/>

style={styles.menu_game_icon}
/>

<View style={styles.menu_top_button_container}>
<Button
title="Play"
onPress={ onPressPlay }
color='#9AC24D'
/>
<Button title="Play" onPress={onPressPlay} color="#9AC24D" />
</View>

<View style={styles.menu_middle_button_container}>
<Button
title="Options"
onPress={ onPressOptions }
color='#A3A9B1'
/>
<Button title="Options" onPress={onPressOptions} color="#A3A9B1" />
</View>

<View style={styles.menu_bot_button_container}>
<Button
title="About"
onPress={ onPressAbout }
color='#A3A9B1'
/>
<Button title="About" onPress={onPressAbout} color="#A3A9B1" />
</View>

</View>
</View>

);
)
}
}

const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
backgroundColor: '#333740',
backgroundColor: '#333740'
},
menu_container: {
width: '70%',
height: '90%',
alignItems: 'center',
flexDirection: 'column',
flexDirection: 'column'
},
menu_game_icon: {
marginTop: '15%',
@@ -80,26 +52,24 @@ const styles = StyleSheet.create({
menu_button_container: {
justifyContent: 'center',
alignItems: 'center',
width: '70%',
width: '70%'
},

menu_top_button_container: {
width: '70%',
marginTop: '20%',
marginTop: '20%'
},

menu_middle_button_container: {
width: '70%',
marginTop: '8%',
marginBottom: '8%',
marginBottom: '8%'
},

menu_bot_button_container: {
width: '70%',
width: '70%'
},

menu_play_button: {
},
menu_generic_button: {
}
});
menu_play_button: {},
menu_generic_button: {}
})
@@ -4,7 +4,7 @@
* @flow
*/

import React, { Component } from 'react';
import React, { Component } from 'react'

import {
Platform,
@@ -14,87 +14,86 @@ import {
Image,
Button,
Slider
} from 'react-native';

} from 'react-native'

export default class App extends Component {

constructor(props) {
super(props);
super(props)
}

render() {
const {
onPressBack,
onMusicVolumeChanged
} = this.props;

const { onPressBack, onMusicVolumeChanged } = this.props

return (
<View style={styles.container}>
<View style={styles.back_button_container}>
<Button
style={styles.back_button}
title='Back'
onPress={onPressBack}/>
title="Back"
onPress={onPressBack}
/>
</View>
<View style={styles.sub_container}>
<View style={styles.slider_container}>
<Text style={styles.slider_text}>Music Volume</Text>
<Slider style={styles.slider_input}
<Slider
style={styles.slider_input}
value={80}
minimumValue={0}
maximumValue={100}
onValueChange={onMusicVolumeChanged}
maximumTrackTintColor='#9BC34D'
minimumTrackTintColor='#9BC34D'
thumbTintColor='#76954E'/>
maximumTrackTintColor="#9BC34D"
minimumTrackTintColor="#9BC34D"
thumbTintColor="#76954E"
/>
</View>
<View style={styles.slider_container}>
<Text style={styles.slider_text}>Sound FX Volume</Text>
<Slider style={styles.slider_input}
<Slider
style={styles.slider_input}
value={80}
minimumValue={0}
maximumValue={100}
maximumTrackTintColor='#9BC34D'
minimumTrackTintColor='#9BC34D'
thumbTintColor='#76954E'/>
maximumTrackTintColor="#9BC34D"
minimumTrackTintColor="#9BC34D"
thumbTintColor="#76954E"
/>
</View>
</View>
</View>
);
)
}
}

const styles = StyleSheet.create({
container: {
height: '100%',
backgroundColor: '#333740',
},

back_button_container: {
width: '20%',
marginTop: '5%',
marginLeft: '5%',
},
back_button: {
},
container: {
height: '100%',
backgroundColor: '#333740'
},

sub_container: {
marginTop: '20%',
alignItems: 'center',
},
slider_container: {
width:'70%'
},
slider_input: {
width: '100%',
marginTop: '10%',
marginBottom: '10%'
},
slider_text: {
marginLeft: '5%',
fontFamily: 'Cochin',
fontSize: 20,
color: '#FAFAFB',
}
});
back_button_container: {
width: '20%',
marginTop: '5%',
marginLeft: '5%'
},
back_button: {},

sub_container: {
marginTop: '20%',
alignItems: 'center'
},
slider_container: {
width: '70%'
},
slider_input: {
width: '100%',
marginTop: '10%',
marginBottom: '10%'
},
slider_text: {
marginLeft: '5%',
fontFamily: 'Cochin',
fontSize: 20,
color: '#FAFAFB'
}
})
@@ -1,23 +1,21 @@
import React, { Component } from 'react'
import { View, Animated } from 'react-native'


const styles = {
ball: {
height: 60,
width: 60,
borderRadius: 30,
borderWidth: 30,
borderColor: 'black',
},
borderColor: 'black'
}
}


class Ball extends Component {
componentWillMount() {
this.position = new Animated.ValueXY(0, 0)
Animated.spring(this.position, {
toValue: { x: 200, y: 500 },
toValue: { x: 200, y: 500 }
}).start()
}

@@ -1,45 +1,44 @@
class DecisionNode {
constructor() {
this.id = 0;
this.question = "none";
this.character = "none";
this.optionYes = "Yes";
this.optionNo = "No";
this.childrenYes = [];
this.childrenNo = [];
this.effectYes = [0,0,0,0];
this.effectNo = [0,0,0,0];
}
constructor() {
this.id = 0
this.question = 'none'
this.character = 'none'
this.optionYes = 'Yes'
this.optionNo = 'No'
this.childrenYes = []
this.childrenNo = []
this.effectYes = [0, 0, 0, 0]
this.effectNo = [0, 0, 0, 0]
}

getRandomChild(isYes) {
let branches

getRandomChild (isYes) {
let branches;

if (isYes === true) {
branches = childYes;
} else {
branches = childNo;
}

let max = branches.length;
let index = Math.floor(Math.random() * (max));

return branches[index];
if (isYes === true) {
branches = childYes
} else {
branches = childNo
}

static genNodeFromJSON(json){
let max = branches.length
let index = Math.floor(Math.random() * max)

var node = new DecisionNode();
return branches[index]
}

node.id = json.id;
node.question = json.question;
node.character = json.character;
node.optionYes = json.optionYes;
node.optionNo = json.childrenYes;
node.effectYes = json.effectYes;
node.effectNo = json.effectNo;
static genNodeFromJSON(json) {
var node = new DecisionNode()

return node;
}
node.id = json.id
node.question = json.question
node.character = json.character
node.optionYes = json.optionYes
node.optionNo = json.childrenYes
node.effectYes = json.effectYes
node.effectNo = json.effectNo

return node
}
}

export {DecisionNode};
export { DecisionNode }
@@ -1,38 +1,37 @@
import {DecisionNode} from "./decisionNode";
import { DecisionNode } from './decisionNode'

class DecisionTree {
constructor(){
this.startNode = null;
}
constructor() {
this.startNode = null
}

static loadTreeFromJSON() {
let json = require('../../settings/decisiontree-0.0.1.json')
var tree = new DecisionTree()
tree.startNode = DecisionTree.genTreeFromJSON(json)

return tree
}

static loadTreeFromJSON () {

let json = require("../../settings/decisiontree-0.0.1.json");
var tree = new DecisionTree();
tree.startNode = DecisionTree.genTreeFromJSON(json);
static genTreeFromJSON(json) {
var node = DecisionNode.genNodeFromJSON(json)
console.log(node.question)

return tree;
let jsonYes = json.childrenYes
let jsonNo = json.childrenNo

for (var i = 0; i < jsonYes.length; i++) {
var subNode = DecisionTree.genTreeFromJSON(jsonYes[i])
node.childrenYes.push(subNode)
}

static genTreeFromJSON (json) {
var node = DecisionNode.genNodeFromJSON(json);
console.log(node.question);

let jsonYes = json.childrenYes;
let jsonNo = json.childrenNo;

for (var i=0; i<jsonYes.length; i++) {
var subNode = DecisionTree.genTreeFromJSON(jsonYes[i]);
node.childrenYes.push(subNode);
}

for (var i=0; i<jsonNo.length; i++) {
var subNode = DecisionTree.genTreeFromJSON(jsonNo[i]);
node.childrenNo.push(subNode);
}

return node;
for (var i = 0; i < jsonNo.length; i++) {
var subNode = DecisionTree.genTreeFromJSON(jsonNo[i])
node.childrenNo.push(subNode)
}

return node
}
}

export {DecisionTree};
export { DecisionTree }
@@ -1,12 +1,12 @@
import { GameRun } from "./gameRun";
import { DecisionTree } from "./decisionTree";
import { GameRun } from './gameRun'
import { DecisionTree } from './decisionTree'

class GameManager {
constructor(){
this.currentGameRun = new GameRun();
this.gameDecisionTree = DecisionTree.loadTreeFromJSON();
this.resources = require("./../../settings/resources-0.0.1.json");
}
constructor() {
this.currentGameRun = new GameRun()
this.gameDecisionTree = DecisionTree.loadTreeFromJSON()
this.resources = require('./../../settings/resources-0.0.1.json')
}
}

export { GameManager };
export { GameManager }
@@ -1,19 +1,19 @@
import { PowerStatus } from "./powerStatus";
import { PowerStatus } from './powerStatus'

class GameRun {
constructor(startNode){
this.timePassed = 0;
this.cardsPassed = 0;
this.powers = [
new PowerStatus("Clientes"),
new PowerStatus("Gobierno"),
new PowerStatus("Empleados"),
new PowerStatus("Capital")
];
this.runStatus = "Started";
this.currentDecisionNode = startNode;
this.decisionHistory = [];
}
constructor(startNode) {
this.timePassed = 0
this.cardsPassed = 0
this.powers = [
new PowerStatus('Clientes'),
new PowerStatus('Gobierno'),
new PowerStatus('Empleados'),
new PowerStatus('Capital')
]
this.runStatus = 'Started'
this.currentDecisionNode = startNode
this.decisionHistory = []
}
}

export { GameRun };
export { GameRun }
@@ -1,10 +1,10 @@
class PowerStatus {
constructor(title){
this.maxValue = 100;
this.minValue = 0;
this.currentValue = 50;
this.powerTitle = title;
}
constructor(title) {
this.maxValue = 100
this.minValue = 0
this.currentValue = 50
this.powerTitle = title
}
}

export { PowerStatus };
export { PowerStatus }
@@ -1,33 +1,54 @@
import React, { Component } from 'react'
import { View, Animated, PanResponder, Dimensions, LayoutAnimation,
UIManager } from 'react-native'
import {
View,
Animated,
PanResponder,
Dimensions,
LayoutAnimation,
UIManager,
Text,
Button,
Image
} from 'react-native'

const SCREEN_WIDTH = Dimensions.get('window').width
const SWIPE_THRESHOLD = Dimensions.get('window').width * 0.40
const SWIPE_THRESHOLD = Dimensions.get('window').width * 0.4
const SWIPE_OUT_DURATION = 250

class Deck extends Component {
static defaultProps = {
onSwipeRight: () => {},
onSwipeLeft: () => {}
}

constructor(props) {
super(props)

this.leftOpacity = new Animated.Value(0)
this.rightOpacity = new Animated.Value(0)

const position = new Animated.ValueXY()
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (event, gesture) => {
position.setValue({ x: gesture.dx, y: gesture.dy })

gesture.dx > 0
? this.rightOpacity.setValue(Math.abs(gesture.dx) / 80)
: this.leftOpacity.setValue(Math.abs(gesture.dx) / 80)
},
onPanResponderRelease: (event, gesture) => {
this.rightOpacity.setValue(0)
this.leftOpacity.setValue(0)

if (gesture.dx > SWIPE_THRESHOLD) {
this.forceSwipe(1)
} else if (gesture.dx < -SWIPE_THRESHOLD) {
this.forceSwipe(-1)
} else {
this.resetPosition()
}
},
}
})
this.state = { panResponder, position, index: 0 }
}
@@ -37,20 +58,20 @@ class Deck extends Component {
const item = data[this.state.index]

direction === 1 ? onSwipeRight(item) : onSwipeLeft(item)
this.setState({ index: this.state.index+1 })
this.state.position.setValue({ x:0, y:0 })
this.setState({ index: this.state.index + 1 })
this.state.position.setValue({ x: 0, y: 0 })
}

getCardStyle() {
const { position } = this.state
const rotate = position.x.interpolate({
inputRange: [-SCREEN_WIDTH * 2, 0, SCREEN_WIDTH * 2],
outputRange: ['-90deg', '0deg', '90deg'],
outputRange: ['-90deg', '0deg', '90deg']
})

return {
...position.getLayout(),
transform: [{ rotate }],
transform: [{ rotate }]
}
}
// Fix deck animation
@@ -63,51 +84,129 @@ class Deck extends Component {
forceSwipe(direction) {
Animated.timing(this.state.position, {
toValue: { x: SCREEN_WIDTH * 2 * direction, y: 0 },
duration: SWIPE_OUT_DURATION,
}).start(() => { this.onSwipeComplete(direction) })
duration: SWIPE_OUT_DURATION
}).start(() => {
this.onSwipeComplete(direction)
})
}


resetPosition() {
Animated.spring(this.state.position, {
toValue: { x: 0, y: 0 },
toValue: { x: 0, y: 0 }
}).start()
}

renderCards() {
if (this.state.index >= this.props.data.length){
return this.props.renderNoMoreCards()
}
const { props, state } = this
const cardsLeft = state.index < props.data.length - 1
const inLastCard = state.index === props.data.length - 2
const item = props.data[state.index]
const margin = 20
const width = SCREEN_WIDTH - margin * 2

return this.props.data.map((item, index) => {
if (index < this.state.index) { return null }
if (index === this.state.index) {
return (
return (
<View>
<View style={{ width: '100%', height: width + 40 }} />
{cardsLeft ? (
!inLastCard && (
<View
style={{
width,
height: width,
margin,
backgroundColor: 'white',
borderRadius: 10,
position: 'absolute',
backgroundColor: '#1e2126',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}>
<Image
source={require('../res/images/zona-ei.png')}
style={{ width: 200, height: 200, opacity: 0.25 }}
/>
</View>
)
) : (
<View
style={{
width,
height: width,
margin,
borderRadius: 10,
position: 'absolute'
}}>
<Button
title="Reset"
tintColor="rgb(78, 175, 49)"
style={{ color: 'rgb(78, 175, 49)' }}
onPress={() => {
this.setState({
index: 0
})
}}
/>
</View>
)}
{cardsLeft && (
<Animated.View
key={item.id}
style={ [this.getCardStyle(), styles.cardStyle, {elevation: 4}]}
{... this.state.panResponder.panHandlers}
>
{this.props.renderCard(item)}
style={[this.getCardStyle(), styles.cardStyle, { elevation: 4 }]}
{...this.state.panResponder.panHandlers}>
<View
style={{
width,
height: width,
margin,
backgroundColor: 'white',
borderRadius: 10,
padding: 20
}}
key={item.id}
title={item.text}
image={{ uri: item.uri }}>
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between'
}}>
<Animated.View style={{ opacity: this.rightOpacity }}>
<Text
style={{
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.4)',
padding: 5,
color: 'white',
fontWeight: '700',
maxWidth: 170
}}>
{item.leftText}
</Text>
</Animated.View>
<Animated.View style={{ opacity: this.leftOpacity }}>
<Text
style={{
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.4)',
padding: 5,
color: 'white',
fontWeight: '700',
maxWidth: 170
}}>
{item.rightText}
</Text>
</Animated.View>
</View>
</View>
</Animated.View>
)
}
return (
<Animated.View
key={item.id}
style={[styles.cardStyle, { top: 5 * (index - this.state.index) } ]}>
{this.props.renderCard(item)}
</Animated.View>
)
}).reverse()
)}
</View>
)
}

render() {
return (
<View>
{this.renderCards()}
</View>
)
return <View>{this.renderCards()}</View>
}
}

1,529 yarn.lock

Large diffs are not rendered by default.