copelandhouse2 · copelandhouse2 · Sep 3, 2017 · Sep 4, 2017 · Sep 4, 2017 · Sep 5, 2017
diff --git a/08week/star-wars/.gitignore b/08week/star-wars/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/08week/star-wars/README.md b/08week/star-wars/README.md
diff --git a/08week/star-wars/package.json b/08week/star-wars/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "star-wars",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-scripts": "1.0.12"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/08week/star-wars/public/index.html b/08week/star-wars/public/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>This is............</title>
+    <link href="https://fonts.googleapis.com/css?family=Kreon" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Noticia+Text:700i" rel="stylesheet">
+    <!-- Import Google Icon Font -->
+    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Import materialize.css -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
+    <link rel= 'stylesheet' href='style.css'/>
+  </head>
+  <body>
+
+    <div id="root"></div>
+    <!-- Import jQuery before materialize.js -->
+    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
+<!-- And then your bundled js -->
+
+  </body>
+</html>
diff --git a/08week/star-wars/public/lightSabre.SMALL.png b/08week/star-wars/public/lightSabre.SMALL.png
diff --git a/08week/star-wars/public/lightSabre.png b/08week/star-wars/public/lightSabre.png
diff --git a/08week/star-wars/public/style.css b/08week/star-wars/public/style.css
@@ -0,0 +1,185 @@
+body {
+  background-color:  #0d47a1;
+  text-align: center;
+}
+
+h1 {
+font-family: 'Open Sans', sans-serif;
+color: #FFD700;
+text-shadow: -1px 0 #FEFEFF, 0 3px #FEFEFF, 1px 0 #FEFEFF, 0 1px #FEFEFF;
+}
+h2 {
+  color: white;
+  font-family: sans-serif;
+  font-size: 20px;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  text-shadow: 2px 2px 2px black
+}
+Button:hover {
+  transform: scale(1.2);
+}
+Button {
+  width: 300px;
+  margin-top: 10px;
+}
+/*ul{
+  border: 1px solid black;
+}*/
+h4 {
+  color: #FFD700;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 30px;
+  background: #2962ff;
+  text-shadow: 3px 3px 3px black;
+  line-height: 100%;
+}
+h3 {
+  color: #FFD700;
+  font-family: sans-serif;
+  font-size: 40px;
+  background: #2962ff;
+  text-shadow: 3px 3px 3px black;
+  margin: 0px;
+}
+h6 {
+  color: white;
+  /*font-weight: bolder;*/
+  font-family: 'Noticia Text', serif;
+  font-weight: 100;
+  font-size: 20px;
+  background: #2962ff;
+}
+#board {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+}
+#control {
+  margin: 20px;
+  background-image: url('lightsabre.png');
+  background-repeat: no-repeat;
+  margin: 0px;
+  margin-bottom: 10px;
+}
+#category {
+  margin: 5px;
+  width: 15%;
+  text-align: center;
+  /*border: 10px solid black;*/
+}
+#collectionItem {
+  height: 50px;
+  margin: 5px;
+  border-radius: 5px;
+  border: none;
+  font-size: 50px;
+  background: #2962ff;
+  text-align: center;
+}
+#collectionItem:hover{
+  transform: scale(1.1);
+  /*border-top: 2px solid #FFD700;*/
+  border-bottom: 2px solid #FFD700;
+  border-radius: 10px;
+  text-align: center;
+}
+.collection.with-header .collection-header {
+  background-color: #2962ff;
+  border: none;
+  border-radius: 5px;
+}
+.collection {
+  width: 100%;
+  border: none;
+}
+#playersFrame{
+  width:100%;
+  display: flex;
+  justify-content: center;
+  /*justify-content: space-around;*/
+  height: 150px;
+  /*margin-bottom: 10px;
+  margin-top: 10px;*/
+}
+.scoreCard {
+  width: 25%;
+  margin-top: 10px;
+  background-color: #2962ff;
+  border: 10px solid #4e342e;
+  margin-left: 15px;
+  margin-right: 15px;
+  padding-top: 5px;
+  box-shadow: -1px 3px 10px black;
+}
+p {
+  font-size: 16px;
+  margin-bottom: 0px;
+  margin-top: 5px;
+  color: white;
+}
+#inputFrame {
+  display: flex;
+  justify-content: center;
+  height: 25px;
+}
+#keystrokeListener{
+  width: 30px;
+  height: 20px;
+  background: white;
+  box-shadow: 2px 2px 2px black;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bolder;
+  margin-right: 15px;
+}
+#guessInput{
+  width: 175px;
+  height: 20px;
+  background: white;
+  box-shadow: 2px black;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bolder;
+  margin:0px;
+  margin-right: 10px;
+  box-shadow: 2px 2px 2px black;
+}
+#submitGuess{
+  height: 20px;
+  box-shadow: 2px 2px 2px black;
+  background-color: white;
+  font-size: 12px;
+}
+.inputPara {
+  margin-top: 0px;
+  margin-right: 10px;
+  font-size: 15px;
+}
+#commentFrame {
+  diplay: flex;
+  justify-content: center;
+  /*height: 20px;*/
+  font-size: 24pt;
+
+}
+/*#answerBox{
+    height: 100%;
+    width:100%;
+}*/
+/*#answerDisplay {
+  position: absolute;
+  background: #2962ff;
+  /*border: 5px solid white;*/
+  /*width: 95%;
+  height: 500px;
+  margin-top: 7px;
+}
+
+#keyInput {
+  width: 10px;
+  background: white;
+  height: 25px;
+}*/
diff --git a/08week/star-wars/src/Board.js b/08week/star-wars/src/Board.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import Category from './Category';
+
+class Board extends Component {
+
+  render() {
+    // Planets, Spaceships, Vehicles, People, Films, Species
+    const categories = Object.keys(this.props.board);
+    // console.log(categories);
+    // console.log(this.props.board['vehicles']);
+    return (
+      this.props.boardState === 'question'? (
+        <div>
+          <h2>{this.props.board[this.props.actCat][this.props.actSq]['question']}</h2>
+        </div>
+      ) : (
+        <div
+          className='black'
+          id="board"
+        >
+        {
+          categories.map((cat, idx) =>
+            <Category
+              id={cat}
+              squares={this.props.board[cat]}
+              key={idx}
+              handleClick={this.props.handleClick}
+            />
+          )
+        }
+        </div>
+      )
+    ); // return
+  }  // render
+
+}  // class Board
+
+export default Board;
+// <input type="text"></input>
+// categories.map((cat, idx) => <Category id={cat} squares={this.props.board[cat]}/>);
+
+// <Category id={categories[0]} squares={this.props.board[categories]}/>
+// <Category id="spaceships"/>
+// <Category id="vehicles"/>
+// <Category id="people"/>
+// <Category id="films"/>
+// <Category id="species"/>
+
+// onKeyPress={this.props.handleKey}
diff --git a/08week/star-wars/src/Category.js b/08week/star-wars/src/Category.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import Square from './Square';
+import {Collection, CollectionItem} from 'react-materialize'
+
+const Category = (props) => {
+
+  return (
+    <div id='category'>
+      <Collection
+        s={1}
+        header={props.id.split(' ')
+                         .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
+                         .join(' ')}
+      >
+        {
+          props.squares.map((obj, idx) =>
+            <CollectionItem
+              key={idx}
+              className='blue accent-4'
+              id='collectionItem'
+              onClick={() => props.handleClick(props.id, idx)}
+            >
+              <Square
+                category={props.id}
+                square={obj}
+                key={idx}
+                handleClick={props.handleClick}
+              />
+            </CollectionItem>
+          )
+        }
+      </Collection>
+    </div>
+  ); // return
+
+}  // functional component Category
+
+export default Category;