define a frame

public/frame.js

@@ -0,0 +1,19 @@
+// Frame represents an embroidery frame
+class Frame {
+  constructor(options) {
+    this.x = options.x;
+    this.y = options.y;
+    this.width = options.width;
+    this.height = options.height;
+  }
+
+  draw() {
+    stroke(Colors.DarkTan);
+    strokeWeight(4);
+    fill(Colors.Tan);
+    rectMode(CORNERS);
+    rect(this.x, this.y, this.width, this.height);
+  }
+
+
+}

public/host.html

@@ -15,6 +15,7 @@
     <!-- p5.multiplayer-->
     <script src="lib/p5.multiplayer.js"></script>
     <!-- p5 sketch -->
+    <script src="frame.js"></script>
     <script src="host.js"></script>
     <style> body {padding: 0; margin: 0;} </style>
   </head>

public/host.js

@@ -47,7 +47,7 @@ function windowResized() {
 }
 
 function draw () {
-  background(15);
+  background(255);
 
   if(isHostConnected(display=true)) {
     // Host/Game draw here. --->
@@ -73,7 +73,7 @@ function onClientConnect (data) {
     game.add(data.id,
             random(0.25*width, 0.75*width),
             random(0.25*height, 0.75*height),
-            60, 60
+            20, 20
     );
   }
 
@@ -154,6 +154,14 @@ class Game {
     this.numPlayers	= 0;
     this.id         = 0;
     this.colliders	= new Group();
+    this.frames = [
+      new Frame({
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 200
+      })
+    ];
   }
 
   add (id, x, y, w, h) {
@@ -171,6 +179,7 @@ class Game {
   }
 
   draw() {
+    this.frames.forEach(f => f.draw());
     this.checkBounds();
     drawSprites();
   }
@@ -197,12 +206,12 @@ class Game {
   printPlayerIds (x, y) {
       push();
           noStroke();
-          fill(255);
+          fill(Colors.Blackish);
           textSize(16);
           text("# players: " + this.numPlayers, x, y);
 
           y = y + 16;
-          fill(200);
+          fill(Colors.Blackish);
           for (let id in this.players) {
               text(this.players[id].id, x, y);
               y += 16;

public/lib/p5.multiplayer.js

@@ -1,3 +1,11 @@
+const Colors = {
+  Tan: "#D8BDB3",
+  DarkTan: "#A58072",
+  Blackish: "#262523",
+  Blood: "#8C021C",
+  Rust: "#590910",
+};
+
 ////////////
 // COMMON
 
@@ -83,7 +91,8 @@ function onHostConnect (data) {
 // Displays server address in lower left of screen
 function displayAddress() {
   push();
-    fill(255);
+    fill(Colors.Blackish);
+    noStroke();
     textSize(50);
     text(serverIp+"/?="+roomId, 10, height-50);
   pop();