tipz

client/lib/fizzy-text.js

@@ -10,7 +10,7 @@ function fizzyText(message) {
 
   this.growthSpeed = 0.2;       // how fast do particles change size?
   this.minSize = 1;
-  this.maxSize = 4;          // how big can they get?
+  this.maxSize = 6;          // how big can they get?
   this.noiseStrength = 10;      // how turbulent is the flow?
   this.speed = 0.4;             // how fast do particles move?
   this.displayOutline = false;  // should we draw the message as a stroke?
@@ -216,7 +216,8 @@ function fizzyText(message) {
 
       // Draw the circle.
       g.beginPath();
-      g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
+      // g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
+      g.rect(this.x, this.y, this.r, this.r);
       g.fill();
 
     }

client/package.json

@@ -14,6 +14,7 @@
     "borc": "^2.0.3",
     "bulma-toast": "^1.2.0",
     "docco": "^0.7.0",
+    "jdenticon": "^2.1.0",
     "jest": "^18.0.0",
     "parcel": "^1.9.7",
     "preact": "^8.3.1",

client/src/navbar.jsx

@@ -1,39 +1,48 @@
 const preact = require('preact');
 const jdenticon = require('jdenticon');
 
-{/*Test to render navbar and some identicons*/}
-const Navbar = () => (
-  <div> 
-    <nav class="navbar"> 
-      <div class="navbar-end"> 
-        <a class="navbar-item is-active"> 
-          Home 
-        </a> 
-        <a class="navbar-item"> 
-          Store 
-        </a> 
-        <a class="navbar-item"> 
-          FAQ 
-        </a> 
-        <span class="navbar-item"> 
-          <a class="button is-info is-inverted"> 
-            <span class="icon"> 
-              <svg width="80" height="80" data-jdenticon-value="Blog"></svg>
-            </span> 
-            <span>Blog</span> 
-          </a> 
-        </span> 
-      </div> 
-    </nav>
+// components all the way down
+const Icon = name => (
     <span>
-      Mashy ->
-      <svg width="80" height="80" data-jdenticon-value="Mashy"></svg>
+        {name}
+        <svg width="80" height="80" data-jdenticon-value={name} />
     </span>
-    <span>
-      Ntr ->
-      <svg width="80" height="80" data-jdenticon-value="Ntr"></svg>
-    </span>
-  </div>
 );
 
+// the css attribute name `class` is reserved in js
+// so in react you have to call it `className`
+function Navbar() {
+    const NAMES = ['Mashy', 'ntr'];
+
+    return (
+        <div>
+            <nav className="navbar">
+                <div className="navbar-end">
+                    <a href="/somewhere" className="navbar-item is-active">
+                        Home
+                    </a>
+                    <a href="/somewhere" className="navbar-item">
+                        Store
+                    </a>
+                    <a href="/somewhere" className="navbar-item">
+                        FAQ
+                    </a>
+                    <span className="navbar-item">
+                        <a href="/somewhere" className="button is-info is-inverted">
+                            <span className="icon">
+                                <svg width="80" height="80" data-jdenticon-value="Blog" />
+                            </span>
+                            <span>Blog</span>
+                        </a>
+                    </span>
+                </div>
+            </nav>
+            {NAMES.map(Icon)}
+        </div>
+    );
+    // map is a function that is called on every element of an array
+    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
+    // that gets put into the dom
+}
+
 module.exports = Navbar;

client/src/socket.jsx

@@ -1,9 +1,8 @@
 const { toast } = require('bulma-toast');
+const cbor = require('borc');
 
 const actions = require('./actions');
 
-const cbor = require('borc');
-
 function errorToast(err) {
     console.error(err);
     return toast({