Refactor + styling changes

- Changed variable names to make more sense - Removed repetitive/useless code - Added Materialize for styling - Adding styling to make site mobile-ready/responsive
alexfrankcodes · Jan 15, 2021 · f1d2fc3 · f1d2fc3
1 parent 1f37723
commit f1d2fc3
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.eslintcache
+.eslintcache
+
+debug.log
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,17 @@
       content="An app that performs a random walk based on a name"
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
     <title>Name Walker</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -1,27 +1,94 @@
+:root {
+  --black: #000000ff;
+  --oxford-blue: #14213dff;
+  --orange-web: #fca311ff;
+  --platinum: #e5e5e5ff;
+  --white: #ffffffff;
+}
+
+* {
+  font-family: 'Quicksand', sans-serif;
+  color: var(--denim-blue)
+}
+
 .App {
-  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100vh;
 }
 
-.canvas {
-  display: flex;
-  flex-direction: column;
+h1 {
+  font-size: 3rem;
 }
 
-.canvas div {
+.sketch div {
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canvas p {
-  display: inline;
-  margin-right: 1rem;
+input {
+  padding: 0;
+}
+
+input:focus {
+  border-bottom-color: var(--oxford-blue) !important;
+  box-shadow: 0 1px 0 0 var(--oxford-blue) !important;
+}
+
+.btn {
+  background-color: var(--oxford-blue);
+  border-radius: 0%;
+}
+
+.btn:hover {
+  background-color: hsl(221, 51%, 20%);
 }
 
-.canvas input {
-  display: inline;
+.btn:focus {
+  background-color: hsl(221, 51%, 20%);
+}
+
+.navigation .btn {
+  min-width: 7rem;
+  max-width: 7rem;
+}
+
+.generateButton {
+  margin-left: 1rem;
+}
+
+@media only screen and (max-width: 600px) {
+  .App {
+    padding: 0;
+    margin-top: 2rem;
+  }
+
+  input {
+    max-width: 90vw;
+    margin: 0;
+    padding: 0;
+  }
+
+  canvas {
+    margin: 1rem;
+  }
+
+  .sketch div {
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+  }
+
+  .btn {
+    min-width: 90vw !important;
+    height: 4rem;
+    margin: 0;
+  }
+
+  .reverseButton {
+    margin: 1rem 0;
+  }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,11 @@
 import "./App.css";
-import Canvas from "./components/Canvas";
+import RandomWalkerSketch from "./components/RandomWalkerSketch";
 
 function App() {
   return (
     <div className="App">
       <h1>Name Walker</h1>
-      <Canvas className="canvas" />
+      <RandomWalkerSketch />
     </div>
   );
 }

diff --git a/src/components/Canvas.js → src/components/RandomWalkerSketch.js b/src/components/Canvas.js → src/components/RandomWalkerSketch.js
@@ -1,48 +1,75 @@
 import React, { Component, createRef } from "react";
 import p5 from "p5";
 
-export default class Canvas extends Component {
+export default class RandomWalkerSketch extends Component {
   constructor(props) {
     super(props);
     this.myRef = createRef();
   }
+
   Sketch = (p) => {
-    let width = 800;
+    // Responsive canvas size
+    let width = Math.min(p.windowWidth / 1.2, 600);
     let height = width;
 
+    // Starting point in center of canvas
     let x = width / 2;
     let y = height / 2;
 
+    // Walk variables
     let stepSize = 1;
-    let walkLength = 250000;
-
-    let navigationJump = 50;
+    let numberOfPoints = 125000;
 
     let name = "";
     let seed = 0;
 
+    let navigationJump = 50;
+
+    /* Canvas UI Elements */
+
+    // Name input and submission
     let userInput = p.createDiv();
-    let nameLabel = p.createElement("p", "Name:");
     let nameField = p.createInput();
-    let submitButton = p.createButton("Submit");
-
-    let navigation = p.createDiv();
-    let up = p.createButton("Up");
-    let down = p.createButton("Down");
-    let left = p.createButton("Left");
-    let right = p.createButton("Right");
+    nameField.attribute("placeholder", "Enter your name...");
+    let generateButton = p
+      .createButton("Generate Walk")
+      .class("generateButton btn waves-effect waves-light btn-large");
+
+    let walkDisplay = p.createDiv();
+
+    let navigation = p.createDiv().class("navigation");
+    let up = p
+      .createButton("Up")
+      .class("btn waves-effect waves-light btn-large");
+    let down = p
+      .createButton("Down")
+      .class("btn waves-effect waves-light btn-large");
+    let left = p
+      .createButton("Left")
+      .class("btn waves-effect waves-light btn-large");
+    let right = p
+      .createButton("Right")
+      .class("btn waves-effect waves-light btn-large");
 
     let reverse = p.createDiv();
-    let reverseButton = p.createButton("Reverse Controls");
+    let reverseButton = p
+      .createButton("Reverse Controls")
+      .class("reverseButton btn waves-effect waves-light btn-large");
 
     /* p5.js setup function */
     p.setup = () => {
-      userInput.child(nameLabel);
       userInput.child(nameField);
-      userInput.child(submitButton);
+      userInput.child(generateButton);
 
-      submitButton.mousePressed(convertNameToSeed);
-      p.randomSeed(seed);
+      generateButton.mousePressed(convertNameToSeed);
+
+      walkDisplay.child(p.createCanvas(width, height));
+
+      reverse.child(reverseButton);
+      reverseButton.mousePressed(reverseNavigationControls);
+
+      reverse.child(reverseButton);
+      reverseButton.mousePressed(reverseNavigationControls);
 
       navigation.child(up);
       navigation.child(down);
@@ -54,48 +81,36 @@ export default class Canvas extends Component {
       left.mousePressed(navigateLeft);
       right.mousePressed(navigateRight);
 
-      reverse.child(reverseButton);
-      reverseButton.mousePressed(reverseNavigationControls);
-
-      p.createCanvas(width, height);
       p.pixelDensity(1);
     };
 
     function convertNameToSeed() {
-      let counter = 0;
+      let accumulator = 0;
       name = nameField.value();
       for (let i = 0; i < name.length; i++) {
-        counter += name.charCodeAt(i);
+        accumulator += name.charCodeAt(i);
       }
-      seed = counter;
-      repaint();
-    }
-
-    function repaint() {
-      p.clear();
-      p.draw();
+      seed = accumulator;
+      p.redraw();
     }
 
     function navigateUp() {
-      console.log("up");
-      p.translate(0, navigationJump);
+      p.translate(0, -navigationJump);
       p.draw();
     }
 
     function navigateDown() {
-      console.log("up");
-      p.translate(0, -navigationJump);
+      p.translate(0, navigationJump);
       p.draw();
     }
 
     function navigateLeft() {
-      console.log("up");
-      p.translate(navigationJump, 0);
+      p.translate(-navigationJump, 0);
       p.draw();
     }
 
     function navigateRight() {
-      p.translate(-navigationJump, 0);
+      p.translate(navigationJump, 0);
       p.draw();
     }
 
@@ -107,14 +122,14 @@ export default class Canvas extends Component {
       x = width / 2;
       y = height / 2;
 
-      p.background(220);
+      p.background(229);
       p.randomSeed(seed);
 
-      for (let i = 0; i < walkLength; i++) {
-        let c = p.color(0, 0, 0);
+      for (let i = 0; i < numberOfPoints; i++) {
+        let c = p.color(0);
 
         p.stroke(c);
-        p.strokeWeight(1);
+        p.strokeWeight(stepSize);
 
         p.noSmooth();
         p.point(x, y);
@@ -143,6 +158,13 @@ export default class Canvas extends Component {
 
     // TODO: Animate through the walk
     //function realtimeRandomWalk() {}
+    p.windowResized = () => {
+      if (p.windowWidth < 600) {
+        p.resizeCanvas(p.windowWidth / 1.2, p.windowWidth / 1.2);
+      } else {
+        p.resizeCanvas(600, 600);
+      }
+    };
 
     p.draw = () => {
       staticRandomWalk();
@@ -154,6 +176,6 @@ export default class Canvas extends Component {
   }
 
   render() {
-    return <div className="canvas" ref={this.myRef}></div>;
+    return <div className="sketch" ref={this.myRef}></div>;
   }
 }