diff --git a/public/frame.js b/public/frame.js
new file mode 100644
index 0000000..bfb4c1c
--- /dev/null
+++ b/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);
+ }
+
+
+}
diff --git a/public/host.html b/public/host.html
index e675252..32d972e 100644
--- a/public/host.html
+++ b/public/host.html
@@ -15,6 +15,7 @@
+
diff --git a/public/host.js b/public/host.js
index 6822a30..0490651 100644
--- a/public/host.js
+++ b/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;
diff --git a/public/lib/p5.multiplayer.js b/public/lib/p5.multiplayer.js
index e2ed95f..140930c 100644
--- a/public/lib/p5.multiplayer.js
+++ b/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();