fix merge conflics

LawEKS · LawEKS · commit 15309a6c65ae · 2018-05-24T12:00:37.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 .cache/
 dist/
 .vscode/
+coverage/
diff --git a/components/answer/answer.css b/components/answer/answer.css
@@ -0,0 +1,5 @@
+li {
+    list-style-type: none; 
+    display: inline; 
+    margin: 1em; 
+}
diff --git a/components/answer/answer.js b/components/answer/answer.js
@@ -0,0 +1,11 @@
+import React from 'react'; 
+
+const Answer = (props) => {
+    const city = props.city; 
+    const listItems = city.split('').map((char, index) => <li key={index + char.toUpperCase()}>_</li>); 
+    return (
+      <ul>{listItems}</ul>
+    )
+  }
+
+export default Answer; 
diff --git a/components/app/app.js b/components/app/app.js
@@ -3,10 +3,14 @@ import fetchGameData from '../../utils/fetchGameData/fetchGameData'
 import selectRandomCounty from "../../utils/selectRandomCounty/selectRandomCounty";
 import Title from '../title/title';
 import Hint from '../hint/hint'; 
+import Chance from '../chance/chance'; 
+import Answer from '../answer/answer'; 
+import Letters from '../letter/letter';
 
 export default class App extends React.Component {
     state = {
         playing: true,
+        chances: 5,
         country: '',
         city: '',
     }
@@ -20,10 +24,14 @@ export default class App extends React.Component {
     }
 
     render() {
+       
         return (
             <React.Fragment>
                 <Title />
                 <Hint country={this.state.country}/>
+                <Chance chances={this.state.chances} />
+                <Answer city={this.state.city} />
+                    <Letters />
             </React.Fragment>
         )
     }
diff --git a/components/app/app.test.js b/components/app/app.test.js
diff --git a/components/chance/chance.js b/components/chance/chance.js
@@ -0,0 +1,5 @@
+import React from 'react'; 
+
+const Chance = props => <h4>You have {props.chances} chances left</h4>; 
+
+export default Chance; 
diff --git a/components/game/game.js b/components/game/game.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Hint from '../hint/hint'; 
+import Chance from '../chance/chance'; 
+import Answer from '../answer/answer'; 
+import Letters from '../letter/letter';
+
+export default class Game extends React.Component {
+    state = {
+        chances: 5, 
+        country: 'Italy',
+        city: "Rome"
+    }
+    render() {
+       
+        return (
+            <React.Fragment>
+                <Hint country={this.state.country}/>
+                <Chance chances={this.state.chances} />
+                <Answer city={this.state.city} />
+                    <Letters />
+            </React.Fragment>
+        )
+    }
+}
diff --git a/components/hint/hint.js b/components/hint/hint.js
@@ -1,5 +1,5 @@
-import  React from 'react'; 
+import React from 'react'; 
 
 const Hint = props => <h3>What's the capital of {props.country}?</h3>; 
 
-export default Hint; 
+export default Hint; 
diff --git a/components/letter/letter.js b/components/letter/letter.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
+    'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
+    'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+
+const Letters = () => {
+    const listItems = alphabet.map((el) =>
+    <li key={el}><button>{el}</button></li>); 
+    return (
+        <ul className="letterName">{listItems}</ul>
+    );
+}
+
+export default Letters;
+
+
+
diff --git a/index.html b/index.html
@@ -1,12 +1,17 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="index.js"></script>
-  </body>
-</html>
+<html lang="en">
 
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Cities Hangman</title>
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
