64 lines
2.3 KiB
PHP
64 lines
2.3 KiB
PHP
|
<x-app-layout>
|
||
|
|
<x-slot name="header">
|
||
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||
|
|
{{ __('Dashboard') }}
|
||
|
|
</h2>
|
||
|
|
</x-slot>
|
||
|
|
|
||
|
|
<div class="py-12">
|
||
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||
|
|
<div class="p-6 text-gray-900">
|
||
|
|
<div id="tmi-status" class="mt-4"></div>
|
||
|
|
<div id="chat-messages" class="mt-4"></div>
|
||
|
|
<div id="pixel-grid" class="mt-4 grid grid-cols-16 gap-1">
|
||
|
|
<!-- Grid will be rendered here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</x-app-layout>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const tmiStatus = document.getElementById('tmi-status');
|
||
|
|
const chatMessages = document.getElementById('chat-messages');
|
||
|
|
const pixelGrid = document.getElementById('pixel-grid');
|
||
|
|
|
||
|
|
window.addEventListener('tmi-connected', function() {
|
||
|
|
tmiStatus.innerText = 'Connected to Twitch chat!';
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('chat-message', function(event) {
|
||
|
|
console.log('Chat Message Event:', event.detail);
|
||
|
|
const message = document.createElement('div');
|
||
|
|
message.innerText = `${event.detail.user} : ${event.detail.message}`;
|
||
|
|
chatMessages.appendChild(message);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Fetch initial grid state
|
||
|
|
fetch('/api/current-state')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
data.forEach(pixel => {
|
||
|
|
const cell = document.createElement('div');
|
||
|
|
cell.className = 'w-6 h-6';
|
||
|
|
cell.style.backgroundColor = pixel.color;
|
||
|
|
cell.dataset.x = pixel.x;
|
||
|
|
cell.dataset.y = pixel.y;
|
||
|
|
pixelGrid.appendChild(cell);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Listen for pixel updates
|
||
|
|
window.addEventListener('pixel-update', function(event) {
|
||
|
|
const { x, y, color } = event.detail;
|
||
|
|
const cell = document.querySelector(`div[data-x="${x}"][data-y="${y}"]`);
|
||
|
|
if (cell) {
|
||
|
|
cell.style.backgroundColor = color;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|