Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Abbie Bowen
Full Stack JavaScript Techdegree Graduate 16,210 PointsGame board only rendering the top left corner?
I'm only getting a board of 4 columns of spaces and 2 rows. There aren't any errors in the console. Any idea where to start looking for issues?
6 Answers
Peter Vann
36,427 PointsHi Abbie!
I agree with Michael that it would help to see your actual code to pinpoint the issue.
Having reviewed the videos, though, it does seem logical that your issue is likely in the Board class, specifically in the constructor or the createSpaces method (or both).
If your code looks like this:
class Board {
constructor() {
this.rows = 6; // Does your code say 6?
this.columns = 7; // Does your code say 7?
this.spaces = this.createSpaces();
}
/**
* Generates 2D array of spaces.
* @ return {array} An Array of space objects
*/
createSpaces() {
const spaces = [];
for (let x = 0; x < this.columns; x++) { // Is the loop right?
const col = [];
for (let y = 0; y < this.columns; y++) { // Is the loop right?
const space = new Space(x, y);
col.push(space);
}
spaces.push(col);
}
return spaces;
}
drawSVGSpace() {
// This code not relevant to your issue
}
}
If your rows are 6 and your columns are 7 and your loops are typed/coded correctly, it seems to me it should render the board correctly as well.
If you are having trouble spotting typos or other errors, I find this can help:
Put your code on one side and the example code above on the other and see if you can spot differences.
I hope that at least points you in the right direction.
Feel free to ask for additional help if you need it, though, of course!
I hope that helps.
Stay safe and happy coding!
Peter Vann
36,427 PointsOh - yea - wow -,that happens!?!
For future reference, sometimes I will set a CSS rule on an element to something gross/stark like background-color: lime;
If it doesn't show up, I can pretty much know that the HTML isn't seeing the CSS,!?!
Abbie Bowen
Full Stack JavaScript Techdegree Graduate 16,210 PointsThat's a great idea! I figured it out by going through the inspect element in the developer tools but it would be way faster in the future to do it that way. Thanks for the suggestion!
Abbie Bowen
Full Stack JavaScript Techdegree Graduate 16,210 PointsThank you for the quick responses! That text compare tool is amazing. From that and what I can see, what I have is the same as the files that were given except that I named my variable for columns differently.
It seems to be very small at the beginning before the start button is even clicked. The svg#game-board says it is 300x150 but the rect#board-back is 548x742. Is that where the issue is?
class Board {
//only one board created so no arguments are passed, set as a static board
constructor () {
this.rows = 6;
this.columns = 7;
this.spaces = this.createSpaces();
}
/*
* Generates 2D array of spaces.
* @return {Array} An array of space objects
*/
createSpaces(){
const spaces = [];
for (let x=0; x<this.columns; x++){
const columns = [];
for (let y=0; y<this.rows; y++) {
const space = new Space (x, y);
columns.push(space);
}
spaces.push(columns);
}
return spaces;
}
drawHTMLBoard(){
for (let column of this.spaces) {
for (let space of column) {
space.drawSVGSpace();
}
}
}
}
Peter Vann
36,427 PointsPerhaps check for any typos/discrepancie in your space class.
I'm getting my first Covid shot now so I'll look into it more when I get home.
Abbie Bowen
Full Stack JavaScript Techdegree Graduate 16,210 PointsCongrats on the covid shot! 🎉
I figured it out! Turns out my CSS file was disconnected from the html file. It looks so pretty now! Thanks for looking into things for me.
Michael Hulet
47,913 PointsMichael Hulet
47,913 PointsIt's really difficult to say without posting your code or a snapshot of your workspace here. Would you mind adding one of those?