diff --git a/src/components/ControlPanel.js b/src/components/ControlPanel.js index aec2f4f..dbae292 100644 --- a/src/components/ControlPanel.js +++ b/src/components/ControlPanel.js @@ -28,16 +28,16 @@ export class ControlPanel { // Label fill(colors.tertiary); noStroke(); - rect(this.x, this.y, this.getPanelWidth(), this.getTextBoxHeight(), 5); + rect(this.x, this.y, this._getPanelWidth(), this._getTextBoxHeight(), 5); fill(colors.secondary); textAlign(CENTER, CENTER); textSize(this.fontSize); - text(this.name, this.x + this.getPanelWidth() / 2, this.y + this.getTextBoxHeight() /2); + text(this.name, this.x + this._getPanelWidth() / 2, this.y + this._getTextBoxHeight() /2); // White panel fill(255); noStroke(); - rect(this.x, this.y + 24 + this.gap, this.getPanelWidth(), this.boxHeight + this.boxSpacing, 6); + rect(this.x, this.y + 24 + this.gap, this._getPanelWidth(), this.boxHeight + this.boxSpacing, 6); // Boxes for (let i = 0; i < this.numBoxes; i++) { @@ -58,17 +58,21 @@ export class ControlPanel { } else { this.empty.draw(bx + this.boxWidth / 2 - 20, by + this.boxHeight / 2 - 20); } - } - - - + } } - getPanelWidth() { + setPosition(x, y){ + blocks.x = x; + blocks.y = y; + } + + + //helper functions + _getPanelWidth() { return this.numBoxes * (this.boxWidth + this.boxSpacing) + 12; } - getTextBoxHeight(){ + _getTextBoxHeight(){ return this.fontSize + 16; } } diff --git a/src/scenes/gameScene.js b/src/scenes/gameScene.js index a8cfe63..afe4380 100644 --- a/src/scenes/gameScene.js +++ b/src/scenes/gameScene.js @@ -10,6 +10,8 @@ export default function GameScene() { let cat; let runButton; let blocks; + let steps; + let loops; this.name = "GameScene"; @@ -17,10 +19,10 @@ export default function GameScene() { cat = new Cat(width / 6, height - 167.5, 150); runButton = new MyButton({ - x: width / 16 * 15, - y: height / 16, + x: width / 32 * 28.5, + y: height / 32, text: "run >>", - mode: "CENTER", + mode: "CORNER", style: buttonS, onPress: () => { console.log("Run button pressed"); @@ -28,26 +30,40 @@ export default function GameScene() { }); blocks = new ControlPanel({ - name: 'blocks', - x: width / 32, + name: 'building blocks', + x: width / 32 * 7, + y: height / 32, + numBoxes: 3 + }); + + steps = new ControlPanel({ + name: 'steps', + x: width / 32 * 12, + y: height / 32, + numBoxes: 6 + }); + + loops = new ControlPanel({ + name: 'loop', + x: width / 32 * 21, y: height / 32, numBoxes: 4 - }); + }) }; this.draw = () => { background(colors.primary); - rectMode(CENTER); fill(colors.tertiary); textSize(128); stroke(colors.secondary); strokeWeight(7); - - text('dan yap', width / 2, height / 2 - 100); + textAlign(LEFT, TOP); + text('lvl.3', width / 32, height /32 - 4); // Ground + rectMode(CENTER); fill(colors.secondary); rect(width / 2, height - 100 / 2, width, 80); @@ -55,13 +71,15 @@ export default function GameScene() { cat.draw(); runButton.draw(); blocks.draw(); + steps.draw(); + loops.draw(); }; this.onResize = () => { cat.setPosition(width / 2, height - 177.5); runButton.setPosition((width / 16) * 15, height / 16); - blocks.x = width / 16 - 40; - blocks.y = height / 16 + 8; + blocks.setPosition(width / 32, height / 32); + steps.setPosition((width / 32) * 4, height / 32); } }