Let's Make Dice Wars, Part 3

We have previously created the skeletons of the game in part 1, and completed the game in part 2. We now add some "chrome" to the game, to make it look better, prettier, and so on. 

And there are a LOT of things we can do, but we may need to rewrite a part of the program to accommodate the changes. This is normal and a part of the learning process. 

Let's try making some simple changes. I am not going to show you ALL the changes as you can easily figure out the exact syntax with the steps I described. You can see the source code at the end. This is what it will look like:

Change the Button Colors

When you think about it, War button should be red, and maybe the reset button should be blue... and maybe rename it "Peace" as a joke? 

Well, that's easy enough, with Bootstrap. btn-danger is red, and btn-primary is blue, so we just swap that around. 

Keep a "log" of previous battles

To clarify, we are adding ANOTHER field called "battle log" where we store the battle results. 

We will add another row, and a single column inside, and a paragraph with ID of "battlelog". This one, we will use a different shade as the white on dark is a bit... dark.  We'll use text-white and bg-secondary. 

Now we have to modify the game code to add this status display, and it keeps adding on to the original string, with new line added between updates. The logical place to add this would be in updateScore()

We will create a new function called battleLogAppend(msg) where msg is what we wish to append.Then we can call it when we have a draw, when A wins or B wins, and when we reset the board

What if we just want to keep the... say, last 25 lines of the log, rather than infinite? 

Let's put this aside for the moment and come back to this later. 

Can we have a graphical representation of the dice, rather than just the 3 numbers?

Absolutely. The simplest way would be to use a font, or fontawesome.com if you don't want to look very far. 

We do need to change the way the results are displayed, and we need to add fontawesome calls to the page itself. We can declare an array that corresponds to the right fontawesome string, and use the dice value to get the right string to display. 

Then we can just adjust the size and spacing to make it look good! 

(Hint: use non-breakable-space, i.e.  

Can we have a graphical display of the score as well? 

Of course, as this can be representing what? Cities? We can write a function that loops however many times the score is and display it just under "Player A" and "Player B"

Can we have a nicer title? 

Well, I can bookend it with dice icons... 

Well, what do we do next?

The source code can be found in the archives as DiceWars3.html

In part 4, let's rewrite the code so it can be genericized, so we can play with variants of the game. Different number of dice, different number of starting score/cities, doubles wins over singles, and so on. We need to design a "game options" panel. Probably a title screen, a rules page, and setup vs. play button, and ability to save the options locally via localstorage.