Skip to content

Commit b823592

Browse files
ebbbangebbbang
committed
Study feature | Hide breadcrumb on mobile device
1 parent b6e28a1 commit b823592

File tree

9 files changed

+301
-42
lines changed

9 files changed

+301
-42
lines changed

‎app/Livewire/Studies/Index.php‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<?php
2+
3+
namespace App\Livewire\Studies;
4+
5+
use App\Models\Card;
6+
use App\Models\Deck;
7+
use Illuminate\Contracts\Support\Renderable;
8+
use Livewire\Attributes\Computed;
9+
use Livewire\Component;
10+
11+
class Index extends Component
12+
{
13+
public Deck $deck;
14+
15+
public array $cards;
16+
17+
public int $totalCards;
18+
19+
public int $currentCardIndex = 0;
20+
21+
public function mount(Deck $deck): void
22+
{
23+
$this->deck = $deck;
24+
25+
$this->cards = $this->deck
26+
->cards
27+
->map(fn (Card $card) => [
28+
'question' => $card->question,
29+
'answer' => $card->answer,
30+
'answerRevealed' => false,
31+
'answeredCorrectly' => false,
32+
])
33+
->toArray();
34+
35+
$this->totalCards = count($this->cards);
36+
}
37+
38+
#[Computed]
39+
public function currentCard(): array
40+
{
41+
return $this->cards[$this->currentCardIndex];
42+
}
43+
44+
#[Computed]
45+
public function score(): int
46+
{
47+
$score = 0;
48+
49+
foreach ($this->cards as $card) {
50+
if ($card['answeredCorrectly']) {
51+
$score++;
52+
}
53+
}
54+
55+
return $score;
56+
}
57+
58+
#[Computed]
59+
public function progress(): float
60+
{
61+
return ($this->currentCardIndex * 100) / $this->totalCards;
62+
}
63+
64+
public function render(): Renderable
65+
{
66+
return view('livewire.studies.index');
67+
}
68+
69+
public function revealAnswer(): void
70+
{
71+
$this->cards[$this->currentCardIndex]['answerRevealed'] = true;
72+
}
73+
74+
public function setAnsweredCorrectly(bool $answeredCorrectly): void
75+
{
76+
$this->cards[$this->currentCardIndex]['answeredCorrectly'] = $answeredCorrectly;
77+
78+
$this->currentCardIndex++;
79+
}
80+
}

‎resources/views/livewire/cards/create.blade.php‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
<div>
22
<flux:breadcrumbs class="mb-6">
3-
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate>
3+
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate class="hidden md:flex">
44
{{ __('Home') }}
55
</flux:breadcrumbs.item>
6-
7-
<flux:breadcrumbs.item>
8-
<flux:dropdown>
9-
<flux:button icon="ellipsis-horizontal" variant="ghost" size="sm"/>
10-
11-
<flux:navmenu>
12-
<flux:navmenu.item :href="route('decks.index')" wire:navigate>
13-
{{ __('My Decks') }}
14-
</flux:navmenu.item>
15-
<flux:navmenu.item :href="route('cards.index', $deck)" wire:navigate icon="arrow-turn-down-right">
16-
{{ $deck->name }}
17-
</flux:navmenu.item>
18-
</flux:navmenu>
19-
</flux:dropdown>
6+
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate class="hidden md:flex">
7+
{{ __('My Decks') }}
8+
</flux:breadcrumbs.item>
9+
<flux:breadcrumbs.item :href="route('cards.index', $deck)" wire:navigate class="hidden md:flex">
10+
{{ $deck->name }}
2011
</flux:breadcrumbs.item>
21-
2212
<flux:breadcrumbs.item>
23-
{{ __('Add Card') }}
13+
{{ __('Add Deck') }}
2414
</flux:breadcrumbs.item>
2515
</flux:breadcrumbs>
2616

‎resources/views/livewire/cards/edit.blade.php‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
<div>
22
<flux:breadcrumbs class="mb-6">
3-
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate>
3+
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate class="hidden md:flex">
44
{{ __('Home') }}
55
</flux:breadcrumbs.item>
6-
7-
<flux:breadcrumbs.item>
8-
<flux:dropdown>
9-
<flux:button icon="ellipsis-horizontal" variant="ghost" size="sm"/>
10-
11-
<flux:navmenu>
12-
<flux:navmenu.item :href="route('decks.index')" wire:navigate>
13-
{{ __('My Decks') }}
14-
</flux:navmenu.item>
15-
<flux:navmenu.item :href="route('cards.index', $deck)" wire:navigate icon="arrow-turn-down-right">
16-
{{ $deck->name }}
17-
</flux:navmenu.item>
18-
</flux:navmenu>
19-
</flux:dropdown>
6+
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate class="hidden md:flex">
7+
{{ __('My Decks') }}
8+
</flux:breadcrumbs.item>
9+
<flux:breadcrumbs.item :href="route('cards.index', $deck)" wire:navigate class="hidden md:flex">
10+
{{ $deck->name }}
2011
</flux:breadcrumbs.item>
21-
2212
<flux:breadcrumbs.item>
2313
{{ __('Edit Card') }}
2414
</flux:breadcrumbs.item>

‎resources/views/livewire/cards/index.blade.php‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
<div>
22
<div class="flex mb-6 justify-between">
33
<flux:breadcrumbs>
4-
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate>
4+
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate class="hidden md:flex">
55
{{ __('Home') }}
66
</flux:breadcrumbs.item>
7-
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate>
7+
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate class="hidden md:flex">
88
{{ __('My Decks') }}
99
</flux:breadcrumbs.item>
1010
<flux:breadcrumbs.item :href="route('cards.index', $deck)" wire:navigate>
1111
{{ $deck->name }}
1212
</flux:breadcrumbs.item>
1313
</flux:breadcrumbs>
1414

15-
<flux:button icon="plus" variant="primary" :href="route('cards.create', $deck)" wire:navigate>
16-
{{ __('Add Card') }}
17-
</flux:button>
15+
<div class="flex gap-2">
16+
@if($cards->count())
17+
<flux:button icon="academic-cap" variant="primary" :href="route('studies.index', $deck)" wire:navigate>
18+
{{ __('Study Deck') }}
19+
</flux:button>
20+
@endif
21+
<flux:button icon="plus" variant="primary" :href="route('cards.create', $deck)" wire:navigate>
22+
{{ __('Add Card') }}
23+
</flux:button>
24+
</div>
1825
</div>
1926

2027
<flux:separator variant="subtle" class="mb-6"/>

‎resources/views/livewire/decks/create.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div>
22
<flux:breadcrumbs class="mb-6">
3-
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate>
3+
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate class="hidden md:flex">
44
{{ __('Home') }}
55
</flux:breadcrumbs.item>
6-
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate>
6+
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate class="hidden md:flex">
77
{{ __('My Decks') }}
88
</flux:breadcrumbs.item>
99
<flux:breadcrumbs.item>

‎resources/views/livewire/decks/index.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div>
22
<div class="flex mb-6 justify-between">
33
<flux:breadcrumbs>
4-
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate>
4+
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate class="hidden md:flex">
55
{{ __('Home') }}
66
</flux:breadcrumbs.item>
77
<flux:breadcrumbs.item>

‎resources/views/livewire/studies/index.blade.php‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<div class="flex flex-col h-full">
2+
<flux:breadcrumbs class="mb-6">
3+
<flux:breadcrumbs.item :href="route('dashboard')" wire:navigate class="hidden md:flex">
4+
{{ __('Home') }}
5+
</flux:breadcrumbs.item>
6+
<flux:breadcrumbs.item :href="route('decks.index')" wire:navigate class="hidden md:flex">
7+
{{ __('My Decks') }}
8+
</flux:breadcrumbs.item>
9+
<flux:breadcrumbs.item :href="route('cards.index', $deck)" wire:navigate class="hidden md:flex">
10+
{{ $deck->name }}
11+
</flux:breadcrumbs.item>
12+
<flux:breadcrumbs.item>
13+
{{ __('Study Deck') }}
14+
</flux:breadcrumbs.item>
15+
</flux:breadcrumbs>
16+
17+
<flux:separator variant="subtle" class="mb-6"/>
18+
19+
<div class="flex-1 flex justify-center">
20+
<div class="max-w-md w-full flex-1 flex flex-col justify-between">
21+
@if($currentCardIndex < $totalCards)
22+
<div class="flex flex-col space-y-6">
23+
<div>
24+
{{ $currentCardIndex + 1 }} / {{ $totalCards }} Cards
25+
</div>
26+
27+
<div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
28+
<div class="bg-blue-600 h-4" style="width: {{ $this->progress }}%"></div>
29+
</div>
30+
31+
<div class="text-center">
32+
{{ $this->currentCard['question'] }}
33+
</div>
34+
35+
@if($this->currentCard['answerRevealed'])
36+
<div class="text-center">
37+
{{ $this->currentCard['answer'] }}
38+
</div>
39+
@else
40+
<div class="text-center">
41+
<flux:button variant="primary" class="w-min" wire:click="revealAnswer()">
42+
{{ __('Reveal Answer') }}
43+
</flux:button>
44+
</div>
45+
@endif
46+
</div>
47+
48+
@if($this->currentCard['answerRevealed'])
49+
<div class="flex flex-col gap-4 justify-center items-center">
50+
<flux:button
51+
icon="hand-thumb-up"
52+
variant="primary"
53+
class="w-min"
54+
wire:click="setAnsweredCorrectly(true)"
55+
>
56+
{{ __('I got it right!') }}
57+
</flux:button>
58+
<flux:button
59+
icon="hand-thumb-down"
60+
variant="primary"
61+
color="red"
62+
class="w-min"
63+
wire:click="setAnsweredCorrectly(false)"
64+
>
65+
{{ __('Maybe next time...') }}
66+
</flux:button>
67+
</div>
68+
@endif
69+
@else
70+
<div class="flex flex-col gap-6 justify-center items-center h-full">
71+
<div>
72+
Score: {{ $this->score }} / {{ $totalCards }}
73+
</div>
74+
<flux:button
75+
icon="arrow-uturn-left"
76+
variant="primary"
77+
:href="route('cards.index', $deck)"
78+
wire:navigate
79+
>
80+
{{ $deck->name }}
81+
</flux:button>
82+
</div>
83+
@endif
84+
</div>
85+
</div>
86+
</div>

‎routes/web.php‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
use App\Livewire\Settings\Appearance;
66
use App\Livewire\Settings\Password;
77
use App\Livewire\Settings\Profile;
8+
use App\Livewire\Studies;
89
use App\Models\Card;
910
use App\Models\Deck;
1011
use Illuminate\Support\Facades\Route;
@@ -30,9 +31,9 @@
3031
->can('create', Deck::class)
3132
->name('decks.create');
3233

33-
// Cards
3434
Route::prefix('decks/{deck}')
3535
->group(function () {
36+
// Cards
3637
Route::get('/cards', Cards\Index::class)
3738
->can('view', 'deck')
3839
->name('cards.index');
@@ -44,6 +45,11 @@
4445
->can('view', 'deck')
4546
->can('update', 'card')
4647
->name('cards.edit');
48+
49+
// Studies
50+
Route::get('/studies', Studies\Index::class)
51+
->can('view', 'deck')
52+
->name('studies.index');
4753
});
4854
});
4955

0 commit comments

Comments
 (0)