47 lines
1.7 KiB
PHP
47 lines
1.7 KiB
PHP
@php
|
|
$card_class = 'absolute backface-hidden flex items-center justify-center border w-full h-52 transition duration-500 px-4 py-2'
|
|
@endphp
|
|
|
|
<div class="container mx-auto mt-4 sm:mt-4 md:mt-10 lg:mt-8">
|
|
|
|
<div class="flex justify-between items-center mb-4 md:mb-8">
|
|
|
|
<div class="flex items-end space-x-2">
|
|
<h2 class="text-2xl text-gray-600">Winning rows:</h2>
|
|
<p class="text-blue-600 text-4xl">{{ $this->state->getNumWinRows() }}</p>
|
|
</div>
|
|
|
|
<div class="space-x-2">
|
|
<x-button type="success" wire:click="restart">{{ __('New Game') }}</x-button>
|
|
<x-button type="warning" href="{{ url('/setup') }}">{{ __('Change Settings') }}</x-button>
|
|
<x-button type="danger" wire:click="clear">{{ __('Clear') }}</x-button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Gameboard grid --}}
|
|
<div class="mt-2 grid grid-cols-4 gap-4">
|
|
@foreach($this->board->getCards() as $pos => $item)
|
|
<x-card :number="$pos + 1" :card="$item"
|
|
:win="$this->state->isWin($pos)"
|
|
:flipped="$this->state->isPressed($pos)"
|
|
wire:click="toggle({{ $pos }})" />
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Loading modal --}}
|
|
<div wire:loading.delay>
|
|
<x-modal>
|
|
<h2 class="text-6xl">{{ __('Loading') }}</h2>
|
|
</x-modal>
|
|
</div>
|
|
|
|
@if ($this->board->hasGameEnded())
|
|
<x-modal wire:loading.remove>
|
|
<h2 class="text-6xl mb-12">{{ __('Game over!') }}</h2>
|
|
<div class="flex justify-between space-x-2">
|
|
<x-button type="info" wire:click="clear">{{ __('Go again?') }}</x-button>
|
|
<x-button type="success" wire:click="restart">{{ __('New Game') }}</x-button>
|
|
</div>
|
|
</x-modal>
|
|
@endif
|
|
</div>
|