Comments and MVC proposal. #1
Conversation
app.js
Outdated
| // draggedElement.firstChild.classList.contains(playerTurn); -> no " " around playerTurn. | ||
| // When you were trying to figure out your issue here with this code, it would be best if you peppered it with | ||
| // console.log(...) calls and that way you could confirm is stuff is happening as expected, and then you would | ||
| // realize that `correctTurn` is always false, whish is weird, and could investigate why is that. |
There was a problem hiding this comment.
@Martinsos Aaah, thank you! It's still not dropping the pieces for some reason, but I'll look into it!
Good point about the console.log() - I'm aware of it and I tried to do it, but I'm not quite clear on what I'm supposed to console.log, so I leave it out. I'll try to get a better understanding of this.
There was a problem hiding this comment.
The idea is, you have your code, and it is not behaving as it should (not dropping pieces).
That means your code is not behaving as you think it is behaving, because if it was, it would be dropping pieces :D. So you look at each step, and figure what you think should be happening here (what the values of variables should be). And you console.log them.
Then you execute the program (move the piece around) and look at the output in the console and consider if it is what you expected or not. At one moment you will notice something not behaving as expected and that is your clue to go dig there.
app.js
Outdated
| e.target.remove(); | ||
| // e.target.append(draggedElement); | ||
| changePlayer(); // how can the programme call the revertIds function already here if it's written only further below in the script? | ||
| // TODO(martin): To answer your question: Javascript interpreter first goes through the whole file and reads top level decalrations, which are `function ...`, without going into them. So first it learns about all the functions and remembers where they are. Then, it goes line by line and executes it all. Meaning that function F1 can call F2 even if F2 is below it, because at that point Javasccript already knows where to find it. This is called something like "2-step evluation/compilation/interpretation/something I can't remember exactly". This doesn't work for global varaibles though if I am correct, just functions I think (and classes probably). |
There was a problem hiding this comment.
@Martinsos That's super helpful, thanks for explaining! By the way, would you get a notification about this comment even if I don't "@" you? I need to understand better how GitHub works. :D
There was a problem hiding this comment.
I am not 100% sure, but I think I would because I am the author of this PR!
| const allSquares = document.querySelectorAll(".square"); // grab everything that has the class "square" | ||
| allSquares.forEach((square, i) => | ||
| // for each square, override the existing squareId with its reverse (width * width - 1) - i | ||
| // TODO(Martin): Oh wow what is the point of this, reversing all ids? I wonder why would we do that? Quite wild. |
There was a problem hiding this comment.
@Martinsos The reason is that for a black player, the square IDs are different than for a white player. So A1 for the white player is not the same A1 for the black player, if that makes sense. You need to essentially switch the board with every turn. At least that's how the video explained it.
There was a problem hiding this comment.
Uff, ok! Terrible solution engineering-wise and not something I would ever recommend in real code, but I guess it can be allowed for the learning purposes (since the author of the video already went with it). Although I don't see any reason to justify it, even for educational reasons.
There was a problem hiding this comment.
Lol, I'll try your version as soon as I'm done with this one. :)
app.js
Outdated
| // The whole point is, when doing complex stuff like chess rules and logic, you dont' have to dig through `docuemnt` and classes and DOM elements and stuff, you instead always focus on your simple list of lists and all is nice and simple. | ||
| // So you will want to rewrite your chess like this! | ||
| // I would suggest you forget drag and drop for start. Just try to get initial board to draw with this MVC approach, and then provide two input fields in your program, where user says initial field and end field, liek F1 and F2 and then they can press "move", and then try to get that move happening. Later we can upgrade that to be drag and drop instead of entering moves via text. | ||
|
|
There was a problem hiding this comment.
@Martinsos Ok cool, in principle I understand what you're saying. In practice I would most likely struggle to implement your suggestions.
I'm not too far off finishing my chess game, so I will complete that first. So at least I see a reward for my work. ;-) Then I will work on a v2, which will follow your directions. So then I not only cement my learnings, but also improve my code. :)
There was a problem hiding this comment.
Sounds like a good approach! I can maybe help you kickstart it, since I understand that it is a bit abstract at the moment -> once you get going with it, I believe you will be able to continue on your own, especially after finishing this first solution.
| } | ||
| break; | ||
|
|
||
| case "queen": |
There was a problem hiding this comment.
What are you referring to? Is this bad / complicated code or what? As it stands, I'm just happy if I can get anything to work! :D
…on and the checkForVictory function. Hoping that the drop functionality will work now.
2 participants
Here are some answers and comments, and at the end proposal to solve this in different (correct) way -> maybe this will be tricky for you if you don't have tutorial to follow, although I am sure you can find one. But I can guarantee it will be nicer and better to code this way (MVC).