Initial Commit

resources/views/game.blade.php

@@ -0,0 +1,47 @@
+@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>