docs: add basic browser example

Streamerbot · Sep 25, 2024 · cfe8e03 · cfe8e03
1 parent 6755ccb
commit cfe8e03
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Twitch Chat Example | Streamer.bot Client</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
+  <script type="text/javascript" src="script.js"></script>
+  <body>
+    <div id="chat"></div>
+  </body>
+</html>
diff --git a/examples/browser/script.js b/examples/browser/script.js
@@ -0,0 +1,5 @@
+const client = new StreamerbotClient();
+
+client.on('Twitch.ChatMessage', ({ data }) => {
+  document.getElementById('chat').innerHTML += `<div class="message"><span class="username" style="color: ${data.message.color}">${data.message.displayName}</span>${data.message.message}</div>`;
+});
diff --git a/examples/browser/style.css b/examples/browser/style.css
@@ -0,0 +1,17 @@
+body {
+  background-color: #222;
+  color: #fff;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
+
+.message {
+  margin: 1em;
+  padding: 1em;
+  border-radius: .5em;
+  background-color: #333;
+}
+
+.username {
+  font-weight: bold;
+  margin-right: .5em;
+}