Implement play-test feedback.

Author: lexjacobs

.babelrc

@@ -3,9 +3,9 @@ You'll need to add the following 2 string values
 inside the presets array:
 
 1. "@babel/preset-env"
-2. "@babel/preset-react"
+2. For the second one, go back to the `react-babel` script you wrote in package.json. Take that preset and include it in the presets array below as well.
 
-babel will use these (they are already npm installed via package.json)
+Babel, which is being used as a "loader" by webpack, will use these npm packages to handle transpiling jsx into browser-readable JavaScript. (you already installed these npm packages via package.json)
 */
 
 {

client/dist/index.html

@@ -50,7 +50,7 @@
     Both are available in the global scope.
 
     The browser can't understand our react code in "/client/babel-src" because it includes JSX.
-    Babel is a tool that will trasform (referred to as 'transpile') the code into javascript
+    Babel is a tool that will transform (referred to as 'transpile') the code into javascript
     that the browser can parse and run.
 
     Next, uncomment the 2 script tags for the react components below,

client/dist/lib/react-babel-hint.js

@@ -27,4 +27,4 @@ And then, your next task will be revealed!
 
 `
 
-console.log(chalk.white.bgGreen(next))
+console.log(chalk.white(next))

server/index.js

@@ -8,8 +8,8 @@ app.use(express.static(path.join(__dirname, '../client/dist')));
 
 app.listen(PORT, () => {
   console.log(`listening on ${PORT}`);
-  console.log(chalk.yellow.bgGreen('\nWecome to UNPACK.', '\n'));
-  console.log(chalk.yellow.bgBlue('Follow the instuctions that are revealed at each step.\nIt will lead you through the codebase.\nYou\'ll see a playable video game in the browser after completing the final step!', '\n'));
-  console.log(chalk.red.bgYellow.bold('This server doesn\'t do anything, aside from serving the static assets we\'ll need'));
-  console.log(chalk.blue.bgYellow('NEXT: Open your browser and navigate to localhost:3000'));
+  console.log(chalk.yellow('\nWecome to UNPACK.', '\n'));
+  console.log(chalk.yellow('Follow the instuctions that are revealed at each step.\nIt will lead you through the codebase.\nYou\'ll get a playable video game in the browser\nafter completing the final step!', '\n'));
+  console.log(chalk.red.bold('This server doesn\'t do anything, aside from serving the static assets we\'ll need'));
+  console.log(chalk.yellowBright.underline('NEXT: Open your browser and navigate to http://localhost:3000'));
 });

webpack.config.js

@@ -18,16 +18,17 @@ setTimeout(()=> {
 
 // Update this variable below to point to the folder with the file
 // that will be webpack's "entry point".
-// This is the first file that webpack puts into its final bundle,
-// as well as any dependencies reference by the file. Such as: other files,
-// npm modules, images, or css.
+// This is the first file that webpack puts into the "bundle.js" file it is creating.
+// Webpack will then create a "dependency graph", bundling any dependencies
+// referenced by the file. Such as: other files, npm modules, images, or css.
+// see https://webpack.js.org/concepts/dependency-graph/
 // Have this variable resolve to the "webpack-src" folder inside of "./client"
-var SRC_DIR = path.join(__dirname, 'edit this value according to the above');
+var SRC_DIR = path.join(__dirname, 'edit this value according to the paragraph above');
 
 // Update this next variable to point to the folder
 // where webpack will write the final bundled file.
 // Have this variable resolve to the "dist" folder inside of "./client"
-var DIST_DIR = path.join(__dirname, 'edit this value according to the above');
+var DIST_DIR = path.join(__dirname, 'edit this value according to the paragraph above');
 
 
 module.exports = {