Do flag guessing exercise

Author: rvvergara

Section29-Component-LifeCycle-Methods/flag-guessing-game/package-lock.json

@@ -5,12 +5,13 @@
   "dependencies": {
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react-scripts": "1.1.4",
+    "shuffle-array": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

Section29-Component-LifeCycle-Methods/flag-guessing-game/package.json

@@ -1,28 +1,38 @@
-.App {
-  text-align: center;
+body{
+  background-color: #ccc;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.container {
+  margin: 20px auto;
+  display: flex;
+  justify-content: space-around;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+img {
+  max-width: 550px;
+  max-height: 250px;
+  box-shadow: 1px 1px #ccc;
 }
 
-.App-title {
-  font-size: 1.5em;
+li{
+  list-style: none;
+}
+
+label{
+  display: inline-block;
+  margin-right: 20px;
+  margin-top: 20px;
 }
 
-.App-intro {
-  font-size: large;
+button{
+  display: block;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.options {
+  margin: 10px;
 }
+
+.result{
+  margin: 20px 0;
+  font-size: 1.5em;
+}

Section29-Component-LifeCycle-Methods/flag-guessing-game/src/App.css

@@ -1,18 +1,111 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import shuffle from "shuffle-array";
+import Navbar from "./Navbar";
 
 class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      countries: [],
+      flag:"",
+      name: "",
+      options: [],
+      result : "",
+      disabled: false,
+      newGame: false,
+    };
+    this.handleCheck = this.handleCheck.bind(this);
+    this.handleNewGame = this.handleNewGame.bind(this);
+  }
+  componentDidMount(){
+    const countriesUrl = "https://restcountries.eu/rest/v2/all";
+    fetch(countriesUrl)
+        .then(d=>d.json())
+        .then(countries => {
+          let country = this.generateRandomCountries(countries);
+          let flag = country.flag;
+          let name = country.name;
+          let options = country.options;
+          this.setState({countries,flag,name,options});
+        });
+  }
+  generateRandomCountries(countries){
+    const len = countries.length;
+    
+    let randomCountries = Array.from(new Set([Math.floor(Math.random()*len),Math.floor(Math.random()*len),Math.floor(Math.random()*len),Math.floor(Math.random()*len)]));
+    
+    while(randomCountries.length<4){
+      randomCountries = Array.from(new Set([Math.floor(Math.random()*len),Math.floor(Math.random()*len),Math.floor(Math.random()*len),Math.floor(Math.random()*len)]));
+    };
+
+    let choices = [countries[randomCountries[0]],countries[randomCountries[1]],countries[randomCountries[2]],countries[randomCountries[3]]];
+    let options = choices.map(c => c.name);
+    let rightIndex = Math.floor(Math.random()*choices.length);
+    let rightCountry = choices[rightIndex];
+    let name = rightCountry.name;
+    let flag = rightCountry.flag;
+
+    return {flag,name,options};
+  }
+  handleCheck(e){
+    let result;
+    let disabled = true;
+    let newGame = true;
+    e.target.value === this.state.name?result ="Correct!":result="Wrong. The right answer is "+this.state.name;
+    this.setState({...this.state,result,disabled,newGame});
+    console.log(e.target.checked)
+  }
+
+  handleNewGame(e){
+    let newGame = false;
+    let result = "";
+    let disabled = false;
+    let countries = shuffle([...this.state.countries]);
+    let country = this.generateRandomCountries(countries);
+    let flag = country.flag;
+    let name = country.name;
+    let options = country.options;
+    let inputs = Array.from(document.querySelectorAll("input"));
+    inputs.forEach(i=>{
+      if(i.checked) i.checked = false;
+    })
+
+    this.setState({flag,name,options,newGame,result,disabled,countries});
+  }
+
   render() {
+    let views = <div>Loading...</div>;
+    let next = <button onClick={this.handleNewGame}>New Game</button>;
+    const flag = this.state.flag;
+    
+    const selections = <div className="options">
+    <ul>
+      {this.state.options.map((c,i)=>(
+        <li key={i}><label><input 
+        type="radio" 
+        name="country" 
+        value={c} 
+        onClick={this.handleCheck} 
+        disabled={this.state.disabled}
+        />{c}</label></li>
+      ))}
+    </ul>
+  </div>;
+
+    if(this.state.countries && flag) views = (<div className="container">
+        <div>
+          <img src={flag} alt="flag" />
+          {selections}
+          <div className="result">{this.state.result}</div>
+          {this.state.newGame?next:null}
+        </div>
+      </div>)
+
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <Navbar />
+        {views}
       </div>
     );
   }

Section29-Component-LifeCycle-Methods/flag-guessing-game/src/App.js

@@ -0,0 +1,56 @@
+header {
+    background-color: #2c3e50;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: white;
+    padding: 0 15px;
+  }
+  
+  header h1 {
+    text-align: center;
+  }
+  
+  header a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.9;
+  }
+  
+  header a:hover {
+    opacity: 1;
+  }
+  
+  header nav {
+    display: flex;
+  }
+  
+  header nav li {
+    margin: 0 15px;
+  }
+  
+  header nav li:first-child {
+    margin-left: 0;
+  }
+  
+  header nav li:last-child {
+    margin-right: 0;
+  }
+  
+  @media (max-width: 1000px) {
+    header{
+      padding: 20px 50px;
+    }
+  }
+  
+  
+  @media (max-width: 700px) {
+    header{
+      flex-direction: column;
+    }
+  
+    header h2{
+      margin-bottom: 15px;
+    }
+  }

Section29-Component-LifeCycle-Methods/flag-guessing-game/src/Navbar.css

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Navbar.css";
+
+const Navbar = (props) => {
+    return(
+        <header>
+            <h1><a>Guess the Flag</a></h1>
+        </header>
+    );
+}
+
+export default Navbar;