Files belonging to Livewire explained: Emitting events using emit, emitUp and emitTo (an event based Guessing game) (https://youtu.be/DN-ABpxnrrI)

Player.blade.php

<div class="shadow border-2 rounded p-1">
    <div class="flex justify-between  gap-4">
        <h2>Player</h2>
    </div>

    <x-list-texts :texts="$myText"></x-list-texts>

    <div>
        <x-list-listeners :listeners="$this->getListeners()"></x-list-listeners>
    </div>
</div>

Player.php

<?php

namespace App\Http\Livewire\Game;

use App\Traits\RevealsListeners;
use Livewire\Component;

class Player extends Component
{
    use RevealsListeners;

    public $myText = [];
    public $name;
    public $listeners = [
        'startGuessing',
        'announceWinner'
    ];

    public function startGuessing()
    {
        $myGuess = random_int(1,10);
        $this->myText['2'] = 'received: startGuessing.I guess '.$myGuess . '. emit: attemptGuess ';
        $this->emit('attemptGuess', $myGuess, $this->name);
    }

    public function announceWinner($playerName)
    {
        if($playerName === $this->name){
            $this->myText[3] = 'received: announceWinner. I won';
        } else {
            $this->myText[3] = 'received: announceWinner. I lost. I want to go home. emitUp: wantsToGoHome';
            $this->emitUp('wantToGoHome');
        }

    }

    public function render()
    {
        return view('livewire.game.player');
    }
}

PlayerParent.blade.php

<div class="shadow border-2 rounded p-2">
   <div class="flex justify-between  gap-4">
       <h2>Parent</h2>
   </div>

    <x-list-texts :texts="$myText"></x-list-texts>
    <x-list-listeners :listeners="$this->getListeners()"></x-list-listeners>

    <livewire:game.player :name="$playerName">

    </livewire:game.player>
</div>

PlayerParent.php

<?php

namespace App\Http\Livewire\Game;

use App\Traits\RevealsListeners;
use Livewire\Component;

class PlayerParent extends Component
{
    use RevealsListeners;

    public $myText = [];
    public $listeners = [
        'wantToGoHome',
        'announceWinner'
    ];
    public $playerName;
    public $guess = null;

    public function announceWinner($playerName)
    {
        $this->myText["3*"] = 'I know who won!';
    }

    public function wantToGoHome()
    {
        $this->myText[4] = "Received: wantsToGoHome.Okay, let's go home ". $this->playerName;
    }

    public function render()
    {
        return view('livewire.game.player-parent');
    }
}

Referee.blade.php

<div class="shadow border-2 rounded p-2">
    <div class="flex justify-between items-center">
        <h2>Referee</h2>
        <div>
            <x-tallui::app.button.success class="text-sm" wire:click="start">
                Start
            </x-tallui::app.button.success>
        </div>
    </div>
    <x-list-texts :texts="$myText"></x-list-texts>
    <x-list-listeners :listeners="$this->getListeners()"></x-list-listeners>
</div>

Referee.php

<?php

namespace App\Http\Livewire\Game;

use App\Traits\RevealsListeners;
use Livewire\Component;

class Referee extends Component
{
    use RevealsListeners;

    protected $listeners = [
        'attemptGuess'
    ];
    public $myText = [];
    public $winner;
    public $guesses = [];

    public function attemptGuess($number, $player)
    {
        $this->guesses[$player] = $number;


        if(count($this->guesses) === 2){
            $this->myText[3] = 'received: attemptGuess. emitTo: announceWinner';
            $this->emitTo('game.player','announceWinner', $this->winner);
        }
    }

    public function start()
    {
        $this->myText['1'] = 'emitTo players: Start guessing';
        $this->emit('startGuessing');
    }

    public function render()
    {
        return view('livewire.game.referee');
    }
}

RiggedGame.blade.php

<div class="bg-dark">
    <div class="grid place-items-center min-h-screen">
        <div class="shadow rounded p-4 border bg-white flex flex-col gap-4 w-[520px] h-[780px]">
            <h1 class="text-xl font-semibold text-gray-700 flex items-center gap-2"><span>Guessing Game </span><x-branding.logo class="w-8 h-8"></x-branding.logo> </h1>
            <div class="space-y-2">
                <livewire:game.referee winner="Player-1"></livewire:game.referee>

                <livewire:game.player-parent player-name="Player-1"></livewire:game.player-parent>

                <livewire:game.player-parent player-name="Player-2" ></livewire:game.player-parent>
            </div>
            <div>

            </div>
        </div>
    </div>
</div>

RiggedGame.php

<?php

namespace App\Http\Livewire\Game;

use Livewire\Component;

class RiggedGame extends Component
{
    public function render()
    {
        return view('livewire.game.rigged-game');
    }
}

web.php

Route::get('guessing-game', \App\Http\Livewire\Game\RiggedGame::class);