define a frame

master
Jordan Orelli 5 years ago
parent d4f380089a
commit 23ed3541f5

@ -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);
}
}

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

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

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

Loading…
Cancel
Save