diff --git a/app/Livewire/Modals/StickerModal.php b/app/Livewire/Modals/StickerModal.php new file mode 100644 index 0000000..867291d --- /dev/null +++ b/app/Livewire/Modals/StickerModal.php @@ -0,0 +1,44 @@ +stickers = collect(glob(storage_path('app/public/superstar-pic/*.png'))) + //->map(fn($path) => 'superstar-pic/' . basename($path)) + ->map(fn($path) => basename($path)) + ->toArray(); + } + + public function openModal() + { + $this->showModal = true; + } + public function closeModal() + { + $this->showModal = false; + } + + public function select($sticker) + { + $this->dispatch('stickerSelected', $sticker); + $this->selectedSticker =$sticker; + $this->showModal = false; + } + + public function render() + { + return view('livewire.modals.sticker-modal'); + } +} diff --git a/app/Livewire/Pages/Home.php b/app/Livewire/Pages/Home.php index 455b969..01a6ff6 100644 --- a/app/Livewire/Pages/Home.php +++ b/app/Livewire/Pages/Home.php @@ -11,7 +11,7 @@ class Home extends Component public function mount() { // 先從 URL 取得 room_code，再存進 session - session()->forget('room_code'); + //session()->forget('room_code'); $this->roomCode = request()->query('room_code', session('room_code', null)); if ($this->roomCode) { session(['room_code' => $this->roomCode]); diff --git a/app/Livewire/Pages/LoveMessage.php b/app/Livewire/Pages/LoveMessage.php new file mode 100644 index 0000000..03ba3c0 --- /dev/null +++ b/app/Livewire/Pages/LoveMessage.php @@ -0,0 +1,38 @@ + 'handleSticker']; + public $message = ''; + public $selectedSticker=null; + + public function handleSticker($sticker) + { + $this->selectedSticker = $sticker; + } + public function submitMessage() + { + // 實際存留言時，可同時存貼圖 + $data = [ + 'message' => $this->message, + 'sticker' => $this->selectedSticker, + 'user' => auth()->user()?->name ?? '訪客', + ]; + // 存到資料庫或送到 API + // ... + session()->flash('success', '留言已送出！'); + + // 重置 + $this->message = ''; + $this->selectedSticker = null; + } + + public function render() + { + return view('livewire.pages.love-message'); + } +} diff --git a/app/Livewire/Pages/SoundControl.php b/app/Livewire/Pages/SoundControl.php new file mode 100644 index 0000000..e5a570f --- /dev/null +++ b/app/Livewire/Pages/SoundControl.php @@ -0,0 +1,42 @@ +'音控-01.jpg', 'action'=>'pause'], + ['img'=>'音控-02.jpg', 'action'=>'volume_up'], + ['img'=>'音控-04.jpg', 'action'=>'mic_up'], + ['img'=>'音控-06.jpg', 'action'=>'mute'], + ['img'=>'音控-03.jpg', 'action'=>'volume_down'], + ['img'=>'音控-05.jpg', 'action'=>'mic_down'], + ['img'=>'音控-07.jpg', 'action'=>'original_song'], + ['img'=>'音控-08.jpg', 'action'=>'service'], + ['img'=>'音控-09.jpg', 'action'=>'replay'], + ['img'=>'音控-11.jpg', 'action'=>'male_key'], + ['img'=>'音控-12.jpg', 'action'=>'female_key'], + ['img'=>'音控-10.jpg', 'action'=>'cut'], + ['img'=>'音控-15.jpg', 'action'=>'lower_key'], + ['img'=>'音控-14.jpg', 'action'=>'standard_key'], + ['img'=>'音控-13.jpg', 'action'=>'raise_key'], + ]; + + public function sendVolumeControl(string $action) + { + // 這裡可以加你的 API 或邏輯 + // 範例：發送到後台控制音量 + info("Sound control action: ".$action); + + $this->dispatchBrowserEvent('notify', [ + 'message' => "已執行操作: {$action}" + ]); + } + + public function render() + { + return view('livewire.pages.sound-control'); + } +} diff --git a/resources/views/components/button/flat-card.blade.php b/resources/views/components/button/flat-card.blade.php index 146b1b7..b1846b7 100644 --- a/resources/views/components/button/flat-card.blade.php +++ b/resources/views/components/button/flat-card.blade.php @@ -3,12 +3,17 @@ 'href' => null, ]) +@php +// 使用 Tailwind aspect-auto 保持圖片原始比例 +$classes = 'relative w-full rounded-lg overflow-hidden shadow-md hover:scale-105 transition-transform cursor-pointer'; +@endphp + @if($href) - merge(['class' => 'relative w-full h-48 rounded-lg overflow-hidden shadow-md hover:scale-105 transition-transform cursor-pointer']) }}> - + merge(['class' => $classes]) }}> + @else -
merge(['class' => 'relative w-full h-48 rounded-lg overflow-hidden shadow-md hover:scale-105 transition-transform cursor-pointer']) }}> - +
merge(['class' => $classes]) }}> +
@endif \ No newline at end of file diff --git a/resources/views/livewire/modals/sticker-modal.blade.php b/resources/views/livewire/modals/sticker-modal.blade.php new file mode 100644 index 0000000..27603a2 --- /dev/null +++ b/resources/views/livewire/modals/sticker-modal.blade.php @@ -0,0 +1,27 @@ + + + + + + + + 選擇貼圖 + + +
+ @foreach($stickers as $sticker) + + @endforeach +
+ + diff --git a/resources/views/livewire/pages/love-message.blade.php b/resources/views/livewire/pages/love-message.blade.php new file mode 100644 index 0000000..a6a65a3 --- /dev/null +++ b/resources/views/livewire/pages/love-message.blade.php @@ -0,0 +1,50 @@ +
+
+

真情告白

+ +
+ +
+ 字串長度：{{ strlen($message) }} 個單位 +
+
+ + + {{-- 打開貼圖 Modal --}} + +
+ 已選貼圖： + @if($selectedSticker) + + @else + 選擇貼圖 + @endif + 點擊此處選擇 +
+ +
+ +
+
    +
  • 注意：不要使用特殊符號，可能無法正常顯示！
    • +
  • 播歌畫面可顯示的字串長度為64（會員名稱 + 訊息內容）！
    • +
  • 如果非要給這愛加個期限，我希望是一萬年…真情告白，等您留言！（每則留言輪播三次）
    • +
+
+ +
+ diff --git a/resources/views/livewire/pages/sound-control.blade.php b/resources/views/livewire/pages/sound-control.blade.php new file mode 100644 index 0000000..f9e7422 --- /dev/null +++ b/resources/views/livewire/pages/sound-control.blade.php @@ -0,0 +1,10 @@ +
+
+ @foreach($buttons as $btn) + + @endforeach +
+
\ No newline at end of file diff --git a/resources/views/love-message.blade.php b/resources/views/love-message.blade.php new file mode 100644 index 0000000..2be6155 --- /dev/null +++ b/resources/views/love-message.blade.php @@ -0,0 +1,10 @@ + + +
超級巨星 自助式KTV
+ + + + + \ No newline at end of file diff --git a/resources/views/sound-control.blade.php b/resources/views/sound-control.blade.php new file mode 100644 index 0000000..7cb25e7 --- /dev/null +++ b/resources/views/sound-control.blade.php @@ -0,0 +1,10 @@ + + +
超級巨星 自助式KTV
+ + + + + \ No newline at end of file diff --git a/routes/web.php b/routes/web.php index 29f4ce9..7813cb2 100644 --- a/routes/web.php +++ b/routes/web.php @@ -7,6 +7,8 @@ Route::view('/welcome', 'welcome')->name('welcome'); Route::view('/new-songs', 'new-songs')->name('new-songs'); Route::view('/top-ranking', 'top-ranking')->name('top-ranking'); Route::view('/search-song', 'search-song')->name('search-song'); +Route::view('/sound-control', 'sound-control')->name('sound-control'); +Route::view('/love-message', 'love-message')->name('love-message'); Route::view('dashboard', 'dashboard') ->middleware(['auth', 'verified']) diff --git a/開發手冊.ini b/開發手冊.ini index e5e26fe..de832c4 100644 --- a/開發手冊.ini +++ b/開發手冊.ini @@ -1,2 +1,5 @@ npm install && npm run build +https://ktvremote.test/?room_code=abc123 + +php artisan storage:link \ No newline at end of file