BrooklinJazz

// TODO add fully fleshed states.
// this fill is currently and example of:
//  Bad -> Busy/Bored -> Indifferent/Apathetic or Pressured/Rushed
// see example: https://xstate.js.org/viz/?gist=14bee9d8de6c10a5c48e0c9e1d3ec461 try to keep visualization up to date
const initialActions = {
  bad: "bad",
  fearful: "fearful",
  angry: "angry",
  disgusted: "disgusted",
  sad: "sad",

BrooklinJazz

import React from 'react';
import { Text } from 'react-native';

import styled from "styled-components/native"

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

BrooklinJazz

const BaseText = styled.Text`
  color: ${props => props.color};
`

const BaseButton = styled.TouchableOpacity`
  justify-content: center;
  align-items: center;
  padding: 5px;
  height: 40px;
  min-width: 100px;

BrooklinJazz

const BaseButton = styled.TouchableOpacity`
  justify-content: center;
  align-items: center;
  padding: 5px;
  height: 40px;
  min-width: 100px;
`;

BrooklinJazz

import {TouchableOpacity, Text} from "react-native";

// the following will fail because a string is not a valid child for the TouchableOpacity component.
<TouchableOpacity>Start</TouchableOpacity>

// You must wrap strings in a Text component in react native
<TouchableOpacity><Text>Start</Text></TouchableOpacity>

BrooklinJazz

const BaseText = styled.Text`
  color: ${props => props.color};
`

BrooklinJazz

export const Button = ({children, color, ...props}) => (
  <BaseButton {...props}>
    <BaseText color={color} >{children}</BaseText>
  </BaseButton>
);

BrooklinJazz

export const SuccessButton = styled(Button).attrs(props => ({
  color: "white",
}))`
  background-color: ${success};
`;

BrooklinJazz

import React from 'react';
import {Text} from "react-native";
import styled from "styled-components/native";

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

BrooklinJazz

import React, {useState} from 'react'; // make sure to import useState

// rather than use magic strings like "playing" and "starting" I'm using an object for our gameState options.
const GameState = {
  playing: "playing",
  starting: "starting"
}

const Game = () => {
  return (