',
+ '
',
+ '
'
+ ],
+ rewards: [
+ 'Highlight My Message',
+ 'Play Sound Effect',
+ 'Choose Next Game',
+ 'Song Request',
+ 'Dad Joke',
+ 'Hydration Check'
+ ],
+ announcements: [
+ 'Welcome to the stream everyone!',
+ 'Don\'t forget to follow for stream notifications!',
+ 'We\'re going to raid someone awesome after this game!',
+ 'Thanks for all the subs today!',
+ 'New emotes coming next week!'
+ ]
+};
+
+// Function to generate a random mockup event
+function generateMockEvent() {
+ const eventTypes = [
+ 'chat', 'chat', 'chat', 'chat', 'chat', 'chat', 'chat', 'chat', // More weight to regular chat messages
+ 'follow', 'sub', 'bits', 'raid', 'superchat', 'gift',
+ 'announcement', 'reward', 'resub', 'giftsub'
+ ];
+
+ // Select random event type and user
+ const eventType = eventTypes[Math.floor(Math.random() * eventTypes.length)];
+ const user = mockData.users[Math.floor(Math.random() * mockData.users.length)];
+ const messageId = createRandomString(40);
+
+ switch(eventType) {
+ case 'chat':
+ // Generate a regular chat message
+ const message = mockData.messages[Math.floor(Math.random() * mockData.messages.length)];
+ // Randomly add an emote
+ const includeEmote = Math.random() > 0.7;
+ const fullMessage = includeEmote ?
+ message + ' ' + mockData.emotes[Math.floor(Math.random() * mockData.emotes.length)] :
+ message;
+
+ const platform = Math.random() > 0.5 ? 'twitch' : (Math.random() > 0.5 ? 'youtube' : 'tiktok');
+
+ const messageData = {
+ classes: Math.random() > 0.8 ? 'sub' : '',
+ avatar: user.avatar,
+ badges: Math.random() > 0.8 ? '' : '',
+ userName: user.name,
+ color: `hsl(${Math.random() * 360}, 100%, 75%)`,
+ message: fullMessage,
+ reply: '',
+ shared: ''
+ };
+
+ addMessageToChat(user.id, messageId, platform, messageData);
+ break;
+
+ case 'follow':
+ const followData = {
+ classes: 'follow',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.twitch.follow(),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', followData);
+ break;
+
+ case 'sub':
+ const subData = {
+ classes: 'sub',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.twitch.sub({
+ months: Math.floor(Math.random() * 24) + 1,
+ isPrime: Math.random() > 0.5,
+ tier: Math.floor(1000 * randomIntFromInterval(1,3))
+ }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', subData);
+ break;
+
+ case 'resub':
+ const resubData = {
+ classes: 'sub',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.twitch.resub({
+ months: Math.floor(Math.random() * 24) + 1,
+ isPrime: Math.random() > 0.5,
+ tier: Math.floor(1000 * randomIntFromInterval(1,3))
+ }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', resubData);
+ break;
+
+ case 'bits':
+ const bitsAmount = Math.floor(Math.random() * 5000) + 100;
+ const bitsData = {
+ classes: 'bits',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.twitch.bits({ bits: bitsAmount }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', bitsData);
+ break;
+
+ case 'raid':
+ const viewerCount = Math.floor(Math.random() * 500) + 10;
+ const raidData = {
+ classes: 'raid',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.twitch.raid({ viewers: viewerCount }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', raidData);
+ break;
+
+ case 'superchat':
+ const amount = (Math.random() * 100 + 5).toFixed(2);
+ const currencies = ['USD', 'EUR', 'CAD', 'GBP', 'AUD'];
+ const currency = currencies[Math.floor(Math.random() * currencies.length)];
+
+ const superChatData = {
+ classes: 'superchat',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.youtube.superchat({
+ money: formatCurrency(amount, currency),
+ message: mockData.messages[Math.floor(Math.random() * mockData.messages.length)]
+ }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'youtube', superChatData);
+ break;
+
+ case 'gift':
+ const giftData = {
+ classes: 'gift',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.tiktok.gift({
+ gift: 'Rose',
+ count: Math.floor(Math.random() * 50) + 1,
+ coins: Math.floor(Math.random() * 1000) + 100
+ }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'tiktok', giftData);
+ break;
+
+ case 'announcement':
+ const announcementText = mockData.announcements[Math.floor(Math.random() * mockData.announcements.length)];
+ const announcementData = {
+ classes: 'announcement',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: ` ${announcementText}`,
+ reply: currentLang.twitch.announcement(),
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', announcementData);
+ break;
+
+ case 'reward':
+ const rewardTitle = mockData.rewards[Math.floor(Math.random() * mockData.rewards.length)];
+ const userInput = Math.random() > 0.5 ? mockData.messages[Math.floor(Math.random() * mockData.messages.length)] : '';
+
+ const rewardData = {
+ classes: 'rewards-redemption',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: ` ${userInput}`,
+ reply: currentLang.twitch.channelpoints({ title : rewardTitle }),
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', rewardData);
+ break;
+
+ case 'giftsub':
+ const recipientUser = mockData.users[Math.floor(Math.random() * mockData.users.length)];
+
+ const giftsubData = {
+ classes: 'sub',
+ avatar: user.avatar,
+ badges: '',
+ userName: user.name,
+ color: '#FFF',
+ message: currentLang.twitch.gifted({
+ gifted: recipientUser.name,
+ months: Math.floor(Math.random() * 12) + 1,
+ tier: Math.floor(1000 * randomIntFromInterval(1,3)),
+ total: Math.floor(Math.random() * 50) + 1
+ }),
+ reply: '',
+ };
+
+ addEventToChat(user.id, messageId, 'twitch', giftsubData);
+ break;
+ }
+}
+
+// Function to start the mockup system
+function startMockupSystem() {
+ if (!isMockupActive) {
+ console.debug('Starting mockup system...');
+ isMockupActive = true;
+ mockupConnectionState = false;
+
+ // Add a notification about mockup mode
+ notifyInfo({
+ title: currentLang.streamerbotdisconnected || "Streamer.Bot Disconnected",
+ text: "Running in mockup mode. Showing sample events."
+ });
+
+ // Start with a few initial events
+ for (let i = 0; i < 3; i++) {
+ setTimeout(() => generateMockEvent(), i * 500);
+ }
+
+ // Set interval for regular events
+ mockupInterval = setInterval(generateMockEvent, mockupDelay);
+
+ // Update statistics for demo
+ updateMockStatistics();
+ }
+}
+
+// Function to stop the mockup system
+function stopMockupSystem() {
+ if (isMockupActive) {
+ console.debug('Stopping mockup system...');
+ isMockupActive = false;
+ mockupConnectionState = true;
+ clearInterval(mockupInterval);
+ mockupInterval = null;
+
+ // Clear chat to start fresh with real events
+ chatContainer.innerHTML = '';
+ }
+}
+
+// Function to update mock statistics
+function updateMockStatistics() {
+ if (showPlatformStatistics) {
+ if (showTwitchViewers) {
+ document.querySelector('#statistics #twitch .viewers span').textContent = formatNumber(Math.floor(Math.random() * 500) + 50);
+ }
+
+ if (showYouTubeStatistics) {
+ document.querySelector('#statistics #youtube .viewers span').textContent = formatNumber(Math.floor(Math.random() * 300) + 20);
+ document.querySelector('#statistics #youtube .likes span').textContent = formatNumber(Math.floor(Math.random() * 1000) + 100);
+ }
+
+ if (showTikTokStatistics) {
+ document.querySelector('#statistics #tiktok .viewers span').textContent = formatNumber(Math.floor(Math.random() * 800) + 200);
+ document.querySelector('#statistics #tiktok .likes span').textContent = formatNumber(Math.floor(Math.random() * 5000) + 500);
+ }
+ }
+}
+
+
+
+
+function randomIntFromInterval(min, max) { // min and max included
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..be35ded
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,287 @@
+/* ----------------------- */
+/* OPTIONS */
+/* ----------------------- */
+
+const streamerBotServerAddress = getURLParam("streamerBotServerAddress", "127.0.0.1");
+const streamerBotServerPort = getURLParam("streamerBotServerPort", "8080");
+const chatThreshhold = 50;
+const chatContainer = document.querySelector('#chat');
+const currentLang = lang[getURLParam("language", 'ptbr')];
+const showPlatform = getURLParam("showPlatform", false);
+const showAvatar = getURLParam("showAvatar", false);
+const showTimestamps = getURLParam("showTimestamps", false);
+const ampmTimeStamps = getURLParam("ampmTimeStamps", false);
+const showBadges = getURLParam("showBadges", true);
+const showPlatformStatistics = getURLParam("showPlatformStatistics", false);
+const hideAfter = getURLParam("hideAfter", 0);
+const ignoreChatters = getURLParam("ignoreChatters", "");
+const excludeCommands = getURLParam("excludeCommands", true);
+
+const avatars = new Map();
+const userColors = new Map();
+
+const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || [];
+
+/* ----------------------- */
+/* START */
+/* ----------------------- */
+
+if (showPlatformStatistics == false) { document.querySelector('#statistics').style.display = 'none'; }
+
+/* ----------------------- */
+/* STREAMER.BOT CONNECTION */
+/* ----------------------- */
+
+const streamerBotClient = new StreamerbotClient({
+ host: streamerBotServerAddress,
+ port: streamerBotServerPort,
+ onConnect: (data) => {
+ console.debug( currentLang.streamerbotconnected );
+ console.debug(data);
+ notifySuccess({
+ title: currentLang.streamerbotconnected,
+ text: ``
+ });
+ stopMockupSystem();
+ },
+ onDisconnect: () => {
+ console.error(currentLang.streamerbotdisconnected);
+ startMockupSystem();
+ }
+});
+
+streamerBotClient.on('WebsocketClient.Message', (response) => {
+ console.debug('Event Received:', response);
+});
+
+
+
+
+/* ----------------------- */
+/* UTILITIES */
+/* ----------------------- */
+
+
+
+async function addMessageToChat(userID, messageID, platform, data) {
+
+ const html = DOMPurify.sanitize(`
+
+
+ ${!data.shared ? '' : data.shared}
+
+ ${showTimestamps == true ? ''+whatTimeIsIt()+'' : ''}
+
+ ${showPlatform == true ? '' : '' }
+
+ ${showAvatar == true ? '
' : ''}
+
+ ${showBadges == true ? ''+data.badges+'' : ''}
+
+ ${data.userName}:
+
+ ${!data.reply ? '' : data.reply}
+
+ ${data.message}
+
+