Yahtzee

So some more scoring for the 2s through 6s in multiplayer. Pretty straightforward I though, until during recording I encountered some bugs that I have no clue whats up with that, but Im not touching them today. dont have the energy for that.

So I added started Scoring if there is a 2 player. I spent some time trying to find out the best way to tackle it while adding the least amount as possible, and I believe I did. while It will be a while before I bug test the whole thing, theres 2 situations in which you score the first column, so thats an if ((situation1)||(situation2)){scoring1} and then an else{scoring2} for the second column, so I think it works out nice. So i think it should become easier for the rest. Also a snippet of code if you’re interested

Ughhh, this is more complicated than I thought. So initially my codespace was buggin out cus stuff wouldnt load, took me some time to make the second chart for scoring, and positioning the circles and Multi/Single player circles to show modes. And now Ive though of how much of a headache this is gonna be to make. But we’ll persevere

Ok, so now I am done with the basic version, everything should work, touched up the intro stuff, and added one page for how to play and rules, and another for scoring. I also topped up an issue I just had with myself that you can open multiple tabs like how to play and New game that overlay each other, so I made sure that doesnt happen.
Also when touching up the intro, I wanted Next page and Close next to each other, but then they didnt have any bottom margin, so I used bottom: 16px that applied only to the visible box and not the whole scrollable thing, so then I had to create a div with display: flex, and do it there, which worked out, but still annoying nonetheless when im just about done.
I’ll add a version where you can do 2 player, and then I’ll ship!

Worked on the New Game button. Just a monolith of a hundred different verifiers getting reset to false, and a bunch of .innerhtml = "" Also, fun quirk in my code I figured when I tried to copy all the verifiers. My OneChecker variable was actually OneChekcer, so the ck was a kc, so when I try to copy paste and all of the other checkers arent recognized, I quickly figured it out.

Getting there.
So I added the grand total mechanism, then also decided to pop up a window with you’re score and how good of a score that is. And then theres some bugs I encountered, so some general fixes and making sure everything works smoothly. I’m gonna work on new game now, and then the intro

Almost Done (for the basic version)
So I added the things for 3 of a kind, 4 of a kind, and Full house, which is all of them!!! I did a quick optimization because for chance, 3 of a kind, and 4 of a kind, the score is all the dice added. So I did a quick adding function, but then for some reason it wouldn’t work, even though the variable was global, but apparantly i needed to store it, even though I thought I did, so the fix was score = adding() But thats kinda it, everything can get scored now, so I need to make sure it can all get added up to the Lower score, then the grand total, make sure new game works, and I’ll touch up the intro, make it better.

Some complicated work done and learnt some new stuff BY MYSELF!!!
So basically, a long straight is all 5 in a row, like 1,2,3,4,5, or 2,3,4,5,6, and its going to be an if statement of doom and despair if I do it like that. SO, I put them in an array, and sort them from least to greatest, so my long straight code looks like this if (Dice[0] + 1 == Dice[1] && Dice[1] + 1 == Dice[2] && Dice[2] + 1 == Dice[3] && Dice[3] + 1 == Dice[4]) and I also remembed to make Dice a global value, so it doesnt exist only in that function, which is what I didnt realize a couple days ago, which is why it was better to start from simple to harder. and I figured this out ALL BY MYSELF, NO AI, JUST PURE LOGIC
now for small straight, it was a bit more complicated, cus its only 4 in a row, so there can be duplicates, so theres 4 situtaions in which it can work. I got the first 2 light work, then I realized later I needed the other 2. Now here is where AI got involved, cus Im thinking if I do if (situation1) else if (situation 2) else if (situation 3 ) else if (situation 4) else and repeat the same instructions 4 times, if it can be condensed, and then Gemini told me about if ((situation 1) || (situation2) || (situation3) || (situation4)) and then only one set of instructions. Nice to know that. Happy with my progress here.

So I fixed the previous bug, by making creating a variable that each section has a specific number, so the score 0 can only be applied when the section number matches the variables number at that time. I then also added scoring for chance and yahtzee (which dont require an array) That was pretty simple, just adding em all up for chance, and making sure they all equal each other for yahtzee, which took a long time becuase I limited myself to only 3 rolls Then I had the bright idea to just change the amount of rolls im allowed so I make sure it works. It does.

So maybe less visual progres today: I just made sure that if the score is 0, then you gotta confirm that you’re scoring a zero. I’m getting better at recognizing that when I have a lot of repeting code, to start using functions But sadly not for this, because I though that itll do the function, and then just record a zero without waiting for my input, so I added event listeners everywhere, and it worked so I’m not complaining. I caught a bug that if you hit no multiple times, then if you hit yes it logs multiple 0s, but the fix was ___Score.innerhtml = Score instead of ___Score.innerhtml += Score Then there was an issue where the confirmation window vertically stacked Yes and no, which is not what I wanted, but I forgot to add Position: absolute And lastly theres a bug where if you click multiple sections that can be 0, when you eventually click yes on one of them, it logs 0 to all I clicked. But I aint fixing that today, thats a tomorrow problem, so see you all tomorrow.

Perhaps a day with more noticable progress. I finished up the scoring for the upper section, and added the function to check if you get the bonus or not, and making sure that you’ve scored everything before deserving it or not. So a bunch of copy pasting the same code for the 2s-6s, and then some writing for the Bonus function, tomorrow will probably be less work, just confirming that is you’re scoring a 0 you know you’re doing it.

I am continously amazed at how much more work is actually showing itself up rn. I planned to start the 2s, 3s, 4s, 5s, 6s, but I just spent today with rules. I wanted to commit on pop-ups removing everything except the warning so it looks nice, but closing a bunch of windows each time is tedious. Lucky me.. I remembered functions exist!!!! so now I have a closebunch and openbunch functions that close or open a bunch of windows depending on what I want it to do. so nice. and then theres a bunch of things you can do, so instead of each being its own warning, I bunched that into one with just a list of things you cant do should you try, and I called that one function NoNo() I also reset the dice after you score yourself, can’t lock the dice when they’re reset and made sure you can only score yourself in proper conditions, and cant rescore So no bugs now, which is great. Heres some good progress (longer video, more to show off). But hey, I also figured out that this qualifies as making a game in a non-game engine, so if I have 10 hours from now till then I get it so got my work cut out for me.

Man………………… I’ve got a LOT to learn.
So I started out with a filter function, just to arrange the dice rolls from greatest to largest, then started an if statement were if any equal 1, then thats the score, and put it into the innerhtml. If only it were that easy right.
I dont think a single line of code was right there . I didn’t put the filter function outside of it, so it wasnt even called upon, and basically nothing was right.
So I decided to start with basics, if I click this button will it show a number. It does, So then if this die value is 1, add 1 to the tally, and then display the tally score. That doesnt work. It was because the die’s value is locked in a function, so it needs to exist in the main script. easy fix, and now it works . But the code is very simple, it’ll work for 1s-6s, which is nice, but I want a deeper code understanding. I’ll have to use an array, and index it for short/long straight. I’ll have to make sure you can only click it once, verify if your score will be 0, and reset dice rolls to make sure you can roll again. But thats a problem for another day. So adios

Gotta do something everyday, and today was busy so not much. Before I start the array of doom and despair, I first needed to assign variables to all sections of the table, and then put that over into the javascript. How Fun. So that means 34 variable names I gotta put in the HTML and in the JavaScript. So after all that, I go to make sure my website still runs.
Ladies and Gentlemen… The close button on how to play no longer works. So now I gotta look through all variable names to see my error. And it was because SixeScore was supposed to be SixScore, and GrandScore was actually GrandTotalScore. So 2 fixes, not bad, but it still doesnt work. Then the big GPT tells me that I have id 3Kind and 4Kind, instead of ThreeKind and FourKind, which I did change for the scores but not for the original. I changed because javadoesnt like a number as the leading string for a variable so I changed it, but then forgot to change it on the other end of the line. So overall, very fun guys trust. Heres a video of what my UI does so far:

It’s slowly coming to fruition
I added the rest of the tables for scoring and it’s looking good now, less janky when just the left side was there

But now I get to the hard part
I need to store the dice’s values in an array, and then call on specific values based on what scoring category. While that’s easy for 1s-6s, and chance, it gets harder for more specialized sections. Also I need to make sure you cant score for the same thing. and then add all the values up and make sure you can actually get a bonus….
All in all… its gonna be a learning experience (hopefully a fun one)

So I’m starting the table of the scoring, and I’m doing that through separate divs and css. Now you might wonder, why dont you use <table> <tr> <td></td></tr></table>? and thats a completely valid question
your answer: I dont want to

I find it much easier to copy paste divs with the same border box class and a <p> and do that. I am not you
Great, we got that out of the way. Overall light work, looks kinda weird right now but I think when I add the other stuff its gonna look good.
also I fixed a thing from last time, in which when you get the roll warning or the how to play, it would keep the dice lock on, and I need that display off, but when you come back, you need it back on. That took some time as well

So I comitted to a sticky streak so I gotta do stuff everyday, and today was lowkey tiring so I didnt do much. Just added some technicalities and made it look a little better cus when the rules open on top the dice it looks terrible so I just made the dice disappear when rules are open, and made sure you can’t roll more than 3 times.

YES IT’S WORKING!!!

You can now keep a dice value that you like, and it was surprisingly simple to make if im being honest. First, I added the toggle to show when the die is locked or not (took a bit of time to position properly). Next, I gave an id, and created a true false value to track, and when you click the die, it toggles it on/off. and then I went into the functions that handle the dice roll, and only allow it when the lock is off. Good job, me

Guys, I’m genuinely getting better at this I created the function that can roll the dice and create random values. Little bit help from W3 school on creating the random number, but I got the comparison right and making sure that the correct dice value is added. Very little debugging. That being said, its SUPER repetitive code and copy+paste gonna come in clutch, so theres definitely going to be a more optimized way, but the lion does not concern himself with optimizations while working on the cloud

Anyway, gotta make sure you can keep dice rolls that you like.

I genuinely believe that Fraud Squad gonna reduce my hours on this project 😭 Heres Why: I spend an hour creating dice . While I know how to create dice under NORMAL circumstance (create a box and put pips in them), these are not normal circumstances, because I will need to manipulate their values. The rightmost die might be a 3 this turn, but in a minute it could become a 5, and I need to adjust for that. Therefore, I need CSS, and if you’ve seen my ChessOS project, you know that CSS and me are no bueno for the most part. Dont understand it at all for the most part, and definitely not incorporating multiple CSS into one element.

1st Attempt

I tried styling the base box, a dice pip and putting multiple pips in a dice, I got this far:
.dice{stuff} .dicepip{stuff} .dice1{ .dice .dicepip}
Shocker, CSS doesn’t work that way

2nd Attempt

On the main div that’ll display dice, I need to just put multiple classes in, and create a second div that contains the dicepip div
<div class="dice dice1 dice2> <div class="dicepip">
That worked for die #1, so I thought, lets do it for the other 6, cus monkey see monkey do . That resulted in one pip per dice in one of the correct spots, because as Gemini told me, It can only include 1 pip. So theres some time over there

3rd Attempt

So AI directed me over to multiple background images, with positioning, with code radial-gradiant... then background-positioning and I only got a singular centre pip for all dice no matter if the code had more than 1 (image to show this) The answer to this one is that radial-gradient naturally wants to take up all the space so only one can fit in.

4th Attempt

radial-gradient(circle at 15% 15%, black 12px, transparent 13px), For all the pips in die, and now it works!!! works, and I can manipulate which dies get which value, which will be hopefully smooth sailing in that aspect

I’MMMM BAAACKKK!!!

After some slight demoralization in the fact I had to do a lot of things in a little amount of time, hearing stardance get extended revived me, as I now have more time, and will do a lot more things. It starts with Yahtzee. I did the rules, and now Im going to start getting into the hard stuff

I can’t lie, Fraud Squad gonna have a field day with me A whole 30 minutes to create this I’m genuinely fried. But I have a reason behind that: I spent the first 15 or so minutes trying to get the correct background because even though I was doing background-size: cover It would show a blurry-ish image that was not the whole image, it was cut-off, and idk why. So I went with this. Then I spent some trouble with centring yahtzee, then the 2 boxes I needed to be perfect. So yeah, I deeply apologize fraud squad. Also here’s some pictures of the first wallpapers I tried to put.