Before you go, check out these stories!

0
Hackernoon logoHow I Built a Simple Game via Ruby on Rails and Javascript by@scrabill

How I Built a Simple Game via Ruby on Rails and Javascript

Author profile picture

@scrabillShannon

Front End Software Engineer

A few months ago, I had the idea to build a simple game that functions something like this.

Above, An early, rough concept for the Food or Foe emoji game

The game mechanics changed in the early stages of building it in Ruby on Rails (Rails) and Javascript. One feature, I knew I wanted, was to be able to add a player's name and their score to the leaderboard at the end of a game.

Since a

User
has_many
Games
I wanted to be able to create a new
Game
instance at the same time as a
User
instance. If a
User
with the given name already exists, create the
Game
and associate it with that
User
.

Oh and this had to happen without reloading the page.

Was it possible?

Yes!

At first, I was overthinking how it might work on the frontend. Then, a classmate pointed out, that the creation of the

User
and
Game
could be handled on the backend, since the two were associated.

For this to happen, I need two pieces of data

The player’s name from the form input and their score

I could query the Document Object Model (DOM) for the input field with 

this.nameInput = document.querySelector("#name")
 and access it’s value with 
.value
. The score was being rendered on the frontend so I could access it in a similar fashion.

const body = {
      score: this.score.innerText,
      name: this.nameInput.value,
    }

Formatted as an object, I could pass it into the 

createGame()
 fetch request in 
GamesAdapters.js
.

 createGame(body) {
    return fetch(this.baseURL, {
      method: 'POST',
      headers: {
         'content-type': 'application/json'
      },
      body: JSON.stringify(body)
    })
    .then(res => res.json())
  }

Did I mention the page shouldn't reload either?

Luckily, that could be solved by including

e.preventDefault()
within the
createGame()
function that is triggered by the form submission button.

createGame(e) {
    console.log("Saving the game...")

    e.preventDefault()
    
    const body = {
      score: this.score.innerText,
      name: this.nameInput.value,
    }

    this.adapter.createGame(body)

  }

Rendering the New Score

The POST

fetch()
request created a new record and returns the record object, which looks something like this.

#<Game id: 85, user_id: 1, score: 37, created_at: "2020-02-24 00:25:42", updated_at: "2020-02-24 00:25:42">

Oh no.

I see a user_id. Within Rails. It's possible to get a Users name from their ID, but is there a way to access it on the front end without a page reload?

There is, but it would require a page reload, which we want to avoid for this project. But, we can fake it on the frontend UI by pulling the name from the input field and displaying that. Let's add a

.then
statement to the end of
createGame(e)
to handle this.

createGame(e) {
    console.log("Saving the game...")

    e.preventDefault()

    const body = {
      score: this.score.innerText,
      name: this.nameInput.value,
    }

    this.adapter.createGame(body)

    .then(game => {
      let gameObject = `<li>${game.score} - ${this.nameInput.value}</li>`
      this.leaderboard.innerHTML += gameObject
      this.nameInput.value = ""
    })

  }

Our leaderboard, now looks something like this.

A 3rd player and their score has been added to the leaderboard

If we were to refresh/reload the page, visually, we would not see anything different. This is an example of an optimistic user interface. We're anticipating that the data is successfully written to the server and are responding right away by displaying the data. We'll also clear out the input field when we're done, to mimic what would happen if there were a page refresh.

Also published on: https://shannoncrabill.com/blog/ruby-on-rails-api-single-page-javascript-application/

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!