Skip to content

Feature/rtl #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feature/rtl #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1b959f
add rtl chars
faisalfazily Nov 4, 2023
2c07b2d
add button
faisalfazily Nov 4, 2023
da4c1d1
fix random generation
faisalfazily Nov 4, 2023
20770f8
code format
faisalfazily Nov 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 174 additions & 31 deletions app/Livewire/CreateCode.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,197 @@

namespace App\Livewire;

use Illuminate\Support\Arr;
use Livewire\Attributes\Computed;
use Livewire\Component;

class CreateCode extends Component
{
public string $message;

protected array $symbols = [
'enable',
'public',
'grade',
'rocket',
'cookie',
'thunderstorm',
'face',
'skull',
'home',
'mode_cool',
'bedroom_baby',
'flatware',
'single_bed',
'sprinkler',
'umbrella',
'token',
'skillet',
'stadia_controller',
'airwave',
'floor_lamp',
'close',
'quiet_time',
'heat',
'tools_power_drill',
'nest_eco_leaf',
'air_freshener',
];
public bool $rtl;

#[Computed(persist: true)]
public function letters(): array
{
shuffle($this->symbols);
$symbols = $this->getSymbols();
shuffle($symbols);

return collect(range('a', 'z'))
->combine($this->symbols)
return collect($this->getAlphabets())
->combine($symbols)
->toArray();
}

public function mount(bool $rtl): void
{
$this->rtl = $rtl;
}

public function render()
{
return view('livewire.create-code');
}

protected function getAlphabets(): array
{
$english = range('a', 'z');
$arabic = array(
'ا',
'ب',
'ت',
'ث',
'ج',
'ح',
'خ',
'د',
'ذ',
'ر',
'ز',
'س',
'ش',
'ص',
'ض',
'ط',
'ظ',
'ع',
'غ',
'ف',
'ق',
'ك',
'ل',
'م',
'ن',
'ه',
'و',
'ء',
'ي'
);
$farsi = ['پ', 'چ', 'ژ', 'گ'];
$urdu = ['ڈ', 'ڑ', 'ں', 'ھ', 'ہ'];
$pashto = ['ټ', 'ځ', 'څ', 'ډ', 'ړ', 'ږ', 'ښ', 'ګ', 'ڼ', 'ء', 'ې', 'ۍ', 'ي', 'ې', 'ۍ'];
$miscellaneous = ['ی', 'ک', 'ئ', 'ة', 'ؤ', 'أ', 'آ',];

return $this->rtl ? array_unique(array_merge($arabic, $farsi, $urdu, $pashto, $miscellaneous)) : $english;
}

public function getSymbols(): array
{
$symbols = [
'enable',
'public',
'grade',
'rocket',
'cookie',
'thunderstorm',
'face',
'skull',
'home',
'mode_cool',
'bedroom_baby',
'flatware',
'single_bed',
'sprinkler',
'umbrella',
'token',
'skillet',
'stadia_controller',
'airwave',
'floor_lamp',
'close',
'quiet_time',
'heat',
'tools_power_drill',
'nest_eco_leaf',
'air_freshener',
'alarm',
'coffee',
'cloud',
'build',
'dashboard',
'lightbulb',
'notifications',
'palette',
'search',
'shopping_cart',
'print',
'volume_up',
'wifi',
'account_circle',
'attach_file',
'book',
'check_circle',
'cloud_upload',
'email',
'favorite',
'gamepad',
'help',
'insert_chart',
'language',
'mic',
'notifications_active',
'laptop',
'lock',
'send',
'settings',
'thumb_up',
'add_circle',
'edit',
'radio_button_checked',
'person',
'accessibility',
'alarm_add',
'videogame_asset',
'map',
'watch',
'attach_money',
'build_circle',
'card_giftcard',
'done_all',
'event',
'hotel',
'local_shipping',
'mood',
'phone',
'favorite_border',
'history',
'keyboard',
'palette',
'record_voice_over',
'save',
'cloud_done',
'chat',
'flight_takeoff',
'grade',
'notifications_off',
'perm_identity',
'pets',
'portrait',
'restaurant',
'rotate_left',
'timer',
'toys',
'wb_sunny'
];

return $this->generateRandomUniqueArray($symbols, count($this->getAlphabets()));
}

public function toggleDirection(): bool
{
return !$this->rtl;
}

public function generateRandomUniqueArray($symbols, $length): array
{
$randomSymbols = [];

while (count($randomSymbols) < $length) {
$randomItem = Arr::random($symbols);
if (!in_array($randomItem, $randomSymbols)) {
$randomSymbols[] = $randomItem;
}
}

return $randomSymbols;
}
}
19 changes: 11 additions & 8 deletions resources/views/components/code.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
@props([
'message',
'letters'
'letters',
'rtl'
])

<div {{ $attributes->class(['text-center flex flex-wrap gap-8 mt-auto']) }}>
@foreach(array_filter(explode(' ', trim($message))) as $word)
<div class="word flex flex-wrap gap-2">
@foreach(str_split($word) as $character)
@foreach (array_filter(explode(' ', trim($message))) as $word)
<div class="word flex flex-wrap gap-2 flex-row-reverse">
@php
$characters = $rtl ? array_reverse(preg_split('//u', $word, -1, PREG_SPLIT_NO_EMPTY)) : str_split($word);
@endphp
@foreach ($characters as $character)
<div>
<span class="material-symbols-outlined character !text-4xl">
{{ $letters[strtolower($character)] ?? $character }}
</span>

<span class="material-symbols-outlined character !text-4xl">
{{ $letters[strtolower($character)] ?? $character }}
</span>
<div class="bg-gray-200 w-12 h-12"></div>
</div>
@endforeach
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/layout.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" class="h-full">
<html lang="en" class="h-full" @if($rtl) dir="rtl" @endif>
<head>
<meta charset="UTF-8">
<meta name="viewport"
Expand All @@ -9,7 +9,7 @@
@vite('resources/css/app.css')
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body class="pt-8 bg-primary text-white print:bg-white print:text-black grid place-items-center h-full">
<body class="pt-8 bg-primary text-white print:bg-white print:text-black grid place-items-center h-full" @if($rtl) dir="rtl" @endif>
{{ $slot }}
</body>
</html>
2 changes: 1 addition & 1 deletion resources/views/livewire/create-code.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ class="bg-white/10 text-white py-2 px-3 rounded-xl w-full"></textarea>
</div>
</form>

<x-code :message="$message" :letters="$this->letters"/>
<x-code :message="$message" :letters="$this->letters" :rtl="$rtl" />

@if ($message)
<x-legend :letters="$this->letters" />
Expand Down
7 changes: 4 additions & 3 deletions resources/views/welcome.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<x-layout>
<x-layout :rtl="$rtl">
<section class="container mx-auto px-6 h-full flex flex-col" style="max-width: 1000px;">
<header class="flex">
<header class="flex justify-between">
<h1>
<img src="/logo.svg" alt="Codebreaker" aria-label="Codebreaker" class="print:invert w-52 print:w-36">
</h1>
<button class="px-2 py-1 text-sm font-semibold rounded-md disabled:bg-gray-300 print:hidden h-1/3 hover:bg-gray-400 transition" onclick="window.location.href = '{{ Request::fullUrlWithQuery(['rtl' => Request::query('rtl') === 'true' ? 'false' : 'true']) }}'">@if($rtl) ABC @else ا ب ت @endif</button>
</header>

<livewire:create-code/>
<livewire:create-code :rtl="$rtl"/>
</section>
</x-layout>
3 changes: 2 additions & 1 deletion routes/web.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,6 @@
*/

Route::get('/', function () {
return view('welcome');
$rtl = isset($_GET['rtl']) && $_GET['rtl'] === 'true';
return view('welcome', compact('rtl'));
});