Skip to content
Luca Ubiali Web Developer

Real Time Games With Laravel - Let's Take Turns

September 2nd, 2024
Continuous Learning

Episode - https://laracasts.com/series/real-time-games-with-laravel/episodes/6

In this episode it’s time to make sure the board is sync’d up as soon as a player makes a move:

 1<script>
 2  //...
 3 
 4  Echo.join(`games.${props.game.id}`) 
 5      .here((users) => players.value = users)
 6      .joining((user) => router.reload({
 7          onSuccess: () => players.value.push(user)
 8      }))
 9      .leaving((user) => players.value.filter(({id}) => id !== user.id))
10      .listen('PlayerMadeMove', ({game}) => { 
11          boardState.value = game.state; 
12      }) 
13  ;
14</script>

The code above is the relevant side of Echo needed for that. Of course in order for it to work, some other parts needed changes:

  • alter the games table migration to have a new state column to store the board state as string

  • alter the game model to cast state to json, so it’s easy to store and retrieve the state array

  • create the update method in GameController and reference it in web.php

  • use update method in the Vue component each time a player makes a move