Wiring your API together

To further understand the gameplay, we'll walk through the steps involved in firing a torpedo from a ship:

1. Locate the frontend JavaScript in public/javascripts/play.js:

document.querySelectorAll('.fire').forEach((el) => {
 el.addEventListener('click', (e) => {
   const weapon = (e.target.classList.value.indexOf('fire-torpedo') 
   > 0) ? "torpedo" : "phasers"
   const target = e.target.parentNode.getElementsByTagName
   ('select')[0].value

2. Here we've made a click handler on the fire buttons in our interface and identified our weapon and target ship:

fetch(
`/play/fire?  attacker=${e.target.closest('td').dataset.attacker}&target=${target}&weapon=${weapon}`)
.then(response => response.json())
.then(data => {

This line might take a bit of unpacking. We're making an AJAX call to our Node application from our JavaScript with certain query string parameters: attacker...