pnx/wow-raid-bingo
Archived
1
0
Fork 0
Code Releases Activity

Initial Commit

Browse source
This commit is contained in:
Henrik Hautakoski 2021-10-18 11:53:33 +02:00
commit ddf09fe00c
113 changed files with 187148 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
resources/views/components/button.blade.php Normal file
View file

@ -0,0 +1,33 @@
@props(['href' => false, 'type' => 'default'])
@php
switch($type) {
case 'info':
$color = 'bg-blue-400 hover:bg-blue-500';
break;
case 'success':
$color = 'bg-green-400 hover:bg-green-500';
break;
case 'warning':
$color = 'bg-yellow-400 hover:bg-yellow-500';
break;
case 'danger':
$color = 'bg-red-400 hover:bg-red-500';
break;
default:
$color = 'bg-gray-400 hover:bg-gray-500';
}
if ($href) {
$element = 'a';
$attributes = $attributes->merge([ 'href' => $href ]);
} else {
$element = 'button';
}
@endphp
<{{$element}} {{ $attributes->merge(['class' => "inline-block px-4 py-2 rounded $color"]) }}>
{{ $slot }}
</{{$element}}>

37
resources/views/components/card.blade.php Normal file
View file

@ -0,0 +1,37 @@
@php
$size = 'h-32 md:h-44 lg:h-52';
$main_class = 'cursor-pointer relative transform-style-3d transition duration-500';
$base_class = "absolute backface-hidden flex items-center justify-center border w-full $size transition duration-500 px-4 py-2";
$frontface_class = "$base_class z-10 bg-gray-100 hover:bg-gray-200 rotate-y-0 transform hover:scale-105";
$backface_class = "$base_class rotate-y-180";
if ($flipped) {
$main_class .= ' rotate-y-180';
}
if ($win) {
$backface_class .= ' bg-green-300 hover:bg-green-400';
} else {
$backface_class .= ' bg-blue-300 hover:bg-blue-400';
}
@endphp
<div class="{{ $size }} perspective">
<div {!! $attributes->merge(['class' => $main_class]) !!}>
{{-- Card frontface --}}
<div class="{{ $frontface_class }}">
<h2 class="absolute top-1 left-2 text-xl text-gray-600">#{{ $number }}</h2>
<p>
<x-card-text :card="$card" />
</p>
</div>
{{-- Card backface --}}
<div class="{{ $backface_class }}">
<img src="{{ url('img/logo.png') }}" />
</div>
</div>
</div>

3
resources/views/components/form-section.blade.php Normal file
View file

@ -0,0 +1,3 @@
<div {!! $attributes->merge(['class' => "px-4 py-2 border rounded"]) !!}>
{{ $slot }}
</div>

22
resources/views/components/modal.blade.php Normal file
View file

@ -0,0 +1,22 @@
@props(['opacity' => '75'])
@php
switch($opacity) {
case 'light':
$opacity = "opacity-25";
break;
case 'medium':
$opacity = "opacity-50";
break;
case 'full':
default:
$opacity = "opacity-75";
}
@endphp
<div {{ $attributes->merge(['class' => 'fixed top-0 left-0 w-screen h-screen flex justify-center items-center z-50']) }}>
<div class="absolute h-full w-full bg-black {{ $opacity }}"></div>
<div class="relative p-12 bg-white rounded flex flex-col justify-center z-9999">
{{ $slot }}
</div>
</div>

47
resources/views/game.blade.php Normal file
View file

@ -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>

16
resources/views/layouts/app.blade.php Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bingo!</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>

56
resources/views/setup.blade.php Normal file
View file

@ -0,0 +1,56 @@
<div class="container mx-auto mt-10">
<div class="mb-10">
<x-button type="danger" wire:click="resetSettings()">{{ __('Clear') }}</x-button>
<x-button type="success" wire:click="save()">{{ __('Save') }}</x-button>
<x-button type="info" wire:click="share()">{{ __('Create shareable URL') }}</x-button>
</div>
@if ($shared_settings)
<div class="bg-blue-200 mb-10 px-6 py-4 rounded">
Sharable url: <strong>{{ route('setup-hash', [ 'setting' => $shared_settings ]) }}</strong>
</div>
@endif
<form class="flex gap-8" wire:submit.prevent="save" method="POST">
<div>
<x-form-section class="bg-yellow-200 border-yellow-300">
<h3 class="text-2xl">{{ __('Classes') }}</h3>
@foreach($all_classes as $class)
<div class="flex justify-between items-center space-x-4 my-2">
<label class="text-xl" for="class_{{ $class }}">{{ Str::ucFirst($class) }}</label>
<input id="class_{{ $class }}" type="checkbox" wire:model="values.classes.{{ $class }}" />
</div>
@endforeach
</x-form-section>
</div>
<div>
<x-form-section class="bg-blue-200 border-blue-300">
<h3 class="text-2xl">{{ __('Characters') }}</h3>
@foreach($all_characters as $ch)
<div class="flex justify-between items-center space-x-4 my-2">
<label class="text-xl" for="ch_{{ $ch->id }}">{{ $ch->name }}</label>
<input id="ch_{{ $ch->id }}" type="checkbox" wire:model="values.characters.{{ $ch->id }}" />
</div>
@endforeach
</x-form-section>
</div>
<div>
<x-form-section class="bg-green-200 border-green-300">
<h3 class="text-2xl">{{ __('Raids') }}</h3>
@foreach($all_raids as $raid)
<div class="flex justify-between items-center space-x-4 my-2">
<label class="text-xl" for="raid_{{ $raid->id }}">{{ $raid->name }}</label>
<input id="raid_{{ $raid->id }}" wire:model="values.raids.{{ $raid->id }}" type="checkbox" />
</div>
@endforeach
</x-form-section>
</div>
</form>
</div>