PixelPlacerBot/resources/js/client.js

const ws = new WebSocket('wss://irc-ws.chat.twitch.tv:443');

ws.onopen = () => {
    console.log('Connected to Twitch chat');

    const oauthToken = import.meta.env.VITE_TWITCH_BOT_OAUTH_TOKEN;
    const username = import.meta.env.VITE_TWITCH_BOT_USERNAME;
    const channel = import.meta.env.VITE_TWITCH_CHANNEL;

    console.log('OAuth Token:', oauthToken ? 'Loaded' : 'Missing');
    console.log('Username:', username ? username : 'Missing');
    console.log('Channel:', channel ? channel : 'Missing');

    if (!oauthToken || !username || !channel) {
        console.error('Missing required environment variables');
        return;
    }

    ws.send(`PASS ${oauthToken}`);
    ws.send(`NICK ${username}`);
    ws.send(`JOIN #${channel}`);
};

ws.onmessage = (event) => {
    console.log('Received:', event.data);

    const parsedMessage = parseTwitchMessage(event.data);
    console.log('Parsed Message:', parsedMessage);

    if (parsedMessage && parsedMessage.command === 'PRIVMSG') {
        const chatMessage = parsedMessage.params.slice(1).join(' ').trim();
        const username = parsedMessage.tags['display-name'] || parsedMessage.prefix.split('!')[0];
        console.log('Chat Message:', chatMessage);
        console.log('Username:', username);

        window.dispatchEvent(new CustomEvent('chat-message', { detail: { user: username, message: chatMessage } }));

        // Process !place command
        fetch('/twitch/parse', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ message: chatMessage })
        })
        .then(response => response.json())
        .then(data => {
            if (data && data.command === 'place') {
                console.log('Parsed Command:', data);
                // Call the existing API with parsed coordinates and color
                // Example API call: /api/place/{x}/{y}/{color}
                fetch(`/api/place/${data.x}/${data.y}/${data.color}`, { method: 'POST' })
                    .then(response => response.json())
                    .then(result => {
                        console.log('API Result:', result);
                    })
                    .catch(error => {
                        console.error('API Error:', error);
                    });
            }
        })
        .catch(error => {
            console.error('Parsing Error:', error);
        });
    }
};

ws.onerror = (error) => {
    console.error('WebSocket Error:', error);
};

ws.onclose = () => {
    console.log('WebSocket connection closed');
};

function parseTwitchMessage(message) {
    console.log('Raw Message:', message);

    const prefixEnd = message.indexOf(' ');
    const prefix = message.substring(1, prefixEnd);

    const commandEnd = message.indexOf(' ', prefixEnd + 1);
    const command = message.substring(prefixEnd + 1, commandEnd);

    const params = message.substring(commandEnd + 1).split(' :');
    const tagsStart = message.indexOf('@');
    const tagsEnd = message.indexOf(' ', tagsStart + 1);
    const tagsRaw = message.substring(tagsStart + 1, tagsEnd);
    const tags = tagsRaw.split(';').reduce((acc, tag) => {
        const [key, value] = tag.split('=');
        acc[key] = value;
        return acc;
    }, {});

    console.log('Parsed Tags:', tags);
    console.log('Parsed Command:', command);
    console.log('Parsed Params:', params);

    return { prefix, command, params, tags };
}