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 has_many I wanted to be able to create a new instance at the same time as a instance. If a with the given name already exists, create the and associate it with that . User Games Game User User Game 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 and could be handled on the backend, since the two were associated. User Game 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 and access it’s value with . The score was being rendered on the frontend so I could access it in a similar fashion. this.nameInput = document.querySelector("#name") .value body = { : .score.innerText, : .nameInput.value, } const score this name this Formatted as an object, I could pass it into the fetch request in . createGame() GamesAdapters.js createGame(body) { fetch( .baseURL, { : , : { : }, : .stringify(body) }) .then( res.json()) } return this method 'POST' headers 'content-type' 'application/json' body JSON => res Did I mention the page shouldn't reload either? Luckily, that could be solved by including within the function that is triggered by the form submission button. e.preventDefault() createGame() createGame(e) { .log( ) e.preventDefault() body = { : .score.innerText, : .nameInput.value, } .adapter.createGame(body) } console "Saving the game..." const score this name this this Rendering the New Score The POST request created a new record and returns the record object, which looks something like this. fetch() #<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 . 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 a page reload? user_id without 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 statement to the end of to handle this. .then createGame(e) createGame(e) { .log( ) e.preventDefault() body = { : .score.innerText, : .nameInput.value, } .adapter.createGame(body) .then( { gameObject = .leaderboard.innerHTML += gameObject .nameInput.value = }) } console "Saving the game..." const score this name this this => game let `<li> - </li>` ${game.score} ${ .nameInput.value} this this this "" 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 were a page refresh. there Also published on: https://shannoncrabill.com/blog/ruby-on-rails-api-single-page-javascript-application/
