Closed plusflora closed 9 months ago
I think the issue is coming from this line:
const emptyIdx = cellEls.indexOf('#cell.empty')
I think you probably need to find another way of identifying this empty cell
Yeah, that's kinda what I've been trying to do. I've gotten a handful of things like this
Ok let's start at the top of the function then and figure this thing out, console log evt.target
and read through the values that print out for that specific element, look for anything that is a unique identifier, or something that implies what you've clicked on, and share your findings and thoughts here
My thought which goes back to where I think I'm spinning my wheels is that I see the existence of the class
empty
within the id of cell
. Also, the lack of innerText. Which to be fair was my first thought yesterday but figured since I'd need to change classes for the css to take hold, it was going to be easier to look for classes.
Edit: I've also tried removing the empty
class and looking for a lack of the tile
class but couldn't find anything like that online. At least not for classes.
Ok, we're getting somewhere here, so seeing that I'm noticing a BIG issue, that needs to be addressed before moving on.
<div id="cell" class="c1r2 tile">8</div>
<div id="cell" class="c2r2 tile">8</div>
The problem is this, id's are meant to be unique, only used on one element at a time, so the values 'cell' and the identifier classes you have need to be swapped so it looks like this:
<div id="c1r2" class="cell tile">8</div>
<div id="c2r2" class="cell tile">8</div>
Then you can use the id as it was intended, as a unique identifier
Aight, so hopefully I've followed what you mean here and I went back and followed along with the connect 4 lesson a little but the lesson, you get
whereas I am getting undefined in the array.
Now, I hit this point yesterday - getting the undefined
- and after doing a bunch of clicking with evt.target
and looking at the output - I figured I don't need the colArr
because the colIdx
is returning a number. I then did some googling and browsed stackoverflow and figured that for horizontal moves I only need to + or - 1 from the current colIdx
and for vertical moves I can + or - 3. Which is where I got stuck - and probably went in a huge circle of looking at classes and everything back to this point.
Edit: Looking at this after having typed it all out, my guess is I'm getting undefined because there isn't an array "under" each of these.
Can you share the updated code that those console logs are coming from?
//handleChoice - checks to see if the piece is a valid option
//checks to see if the piece can move - returns if it can't
function handleChoice(evt) {
// console.log('this is evt.target within handleChoice', evt.target)
// because I can get the idx of the target and not the array, I can check +1 and -1 for tiles to the right and +3 and -3 for tiles above and below.
const colIdx = cellEls.indexOf(evt.target)
console.log('this is colIdx inside of handleChoice', colIdx)
const colArr = board[colIdx]
console.log('this is colArr inside handleChoice', colArr)
// var emptyIdx = cellEls.indexOf('.empty')
// console.log('this is emptyIdx inside of handleChoice', emptyIdx)
//if the option clicked is not a "tile" return. we do this by searching for the class empty
if(evt.target.classList.contains('tile')) {
// console.log('this is what was clicked: \n', evt.target.className)
//if the clicked tile contains the class of 'tile', it looks for a connected tile without the same class,
//determine the column and row selected
//update the value of the board array
} else {return}
//after every move, we want to check for win
//after every move, we want to render changes
}
ok, share what the 'board' looks like as well
function init() {
//starting state on page load
//builds board
board = [
[0, 0, 0], //column 0
[0, 0, 0], //column 1
[0, 0, 0], //column 2
]
//sets moveCount
moveCount = 0;
//call render function when built
render()
}
init()
update: I am getting an array but only off the top 3.
ok we'll jump into a breakout room soon
Ok, here's an idea. I changed what I was working on and made an What if instead of a board that looks like this in JS
board = [
[0, 0, 0], //column 0
[0, 0, 0], //column 1
[0, 0, 0], //column 2
]
I instead do
board = [/*row 1*/ 0, 0, 0, /*row 2*/ 0, 0, 0, /*row 3*/ 0, 0, 0]
wouldn't that let me do the same thing? it's probably not as clean but it gives me the colIdx
that I can use. the colArr
doesn't matter and I can maybe do the + or - 1 thing to check horizontally?
Decided on a new direction
What's the problem you're trying to solve?
I am trying to identify the index of the empty cell. I tried assigning a new constant to it but it returns -1
Post any code you think might be relevant (one fenced block per file)
If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?
What is your best guess as to the source of the problem?
I think I'm just looking at it the wrong way.
What things have you already tried to solve the problem?
Honestly, this just feels like I tried a different way of what I was working on yesterday and couldn't get it then either. I have no idea what I should be looking at, at this point.
Paste a link to your repository here
https://github.com/plusflora/Project-1