small medium large xlarge

13 Jan 2018, 18:03
Jack A Clark (2 posts)

The book says there is a React frontend application in the code bundle. Has that been added yet? I couldn’t find it.



13 Jan 2018, 18:12
Lance Halvorsen (46 posts)

I have added code for a demo front-end, but it likely hasn’t been published yet. The book is going through the final processes to get it ready for publication, and the code bundle should be updated when all of that is ready.

Thanks for asking!

02 Mar 2018, 06:43
Alan Barnett (1 post)

Have followed along and felt as if I was getting near the summit of Mount Everest. But now I have stumbled into a ravine and fallen 5,000 feet with your words…. “The steps that remain are to model the game state, render the player and opponent boards for each player, and map DOM events to the functions we just wrote, updating the game state appropriately along the way”.

Would you please explain in more detail what this means and involves, outlining the steps from here on in required to produce a conventional web application. Also, would you quote some sources that show how to do this.

I have really enjoyed the book and think you have described a complex subject very clearly.

08 Mar 2018, 05:03
Lance Halvorsen (46 posts)

Hi Alan,

Please don’t despair! All will be well. :^)

The first thing to point out is that there is code for a demo version of a front end already in the code bundle for the book. Please do have a look.

The rest of these steps don’t involve Elixir, OTP, or Phoenix. It’s all about HTML, CSS, and JavaScript.

Here’s a quick synopsis.

  • Render your board and your opponent’s board in HTML. Maybe you hard code this, or more likely, you write JavaScript that does this programmatically. Maybe you define a data structure that represents the coordinates of each board and uniquely identifies them with the row/column coordinates.

  • Define styles for the coordinates according to whether they are in an island or not, whether they are guessed or not, and whether they are hit or not.

  • Wire up click events on these HTML elements that represent the actions of the game. The JavaScript functions we wrote in the last chapter of the book can act as the handlers for these events.

One example might be clicking on a coordinate on your opponent’s board. That would represent guessing that coordinate. We wrote code that will send that guess down the channel and get a response, and we can use that response to determine whether the guess was a miss or a hit, whether it forested and island, which island if it did forest one, and whether the guess resulted in a win.

With that information, we can apply the correct CSS to the clicked coordinate and write messages to each player saying what happened.

I hope that helps! Again, please do look for the demo code.

You must be logged in to comment