From 109082b28299cb35e8d0fc2ce7bf7ab8fca6e9d4 Mon Sep 17 00:00:00 2001
From: haad <haad@headbanggames.com>
Date: Fri, 28 Oct 2016 13:23:14 +0300
Subject: [PATCH] Add browser example with orbit-db distributable

---
 examples/browser/browser.html | 83 +++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 examples/browser/browser.html
diff --git a/examples/browser/browser.html b/examples/browser/browser.html
new file mode 100644
index 0000000..c61e5b5
--- /dev/null
+++ b/examples/browser/browser.html
@@ -0,0 +1,83 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div id="result">Loading...</div>
+
+    <script type="text/javascript" src="../../dist/orbitdb.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../node_modules/ipfs-api/dist/index.min.js" charset="utf-8"></script>
+
+    <script type="text/javascript">
+
+      const username = new Date().getTime()
+      const channel  = 'browser-example'
+      const key      = 'greeting'
+
+      try {
+        const elm = document.getElementById("result")
+        const ipfs = IpfsApi('localhost', '5001')
+        const orbit = new OrbitDB(ipfs, username)
+
+        const db = orbit.kvstore(channel)
+        const log = orbit.eventlog(channel + ".log")
+        const counter = orbit.counter(channel + ".count")
+
+        const creatures = ['👻', '🐙', '🐷', '🐬', '🐞', '🐈', '🙉', '🐸', '🐓']
+
+        let count = 1
+        const query = () => {
+          const startTime = new Date().getTime()
+          const idx = Math.floor(Math.random() * creatures.length)
+
+          // Set a key-value pair
+          db.put(key, "db.put #" + count + " - GrEEtinGs to " + creatures[idx])
+            .then((res) => {
+              const endTime = new Date().getTime()
+              console.log(`db.put (#${count}) took ${(endTime - startTime)} ms\n`)
+              count ++
+            })
+            .then(() => counter.inc()) // Increase the counter by one
+            .then(() => log.add(creatures[idx])) // Add an event to 'latest visitors' log
+            .then(() => {
+                const result = db.get(key)
+                const latest = log.iterator({ limit: 5 }).collect()
+                const count  = counter.value
+
+                const output = 
+      `<b>Key-Value Store</b>
+      -------------------------------------------------------
+      Key | Value
+      -------------------------------------------------------
+      ${key} | ${result}
+      -------------------------------------------------------
+
+      <b>Eventlog</b>
+      -------------------------------------------------------
+      Latest Visitors
+      -------------------------------------------------------
+      ${latest.reverse().map((e) => e.payload.value + "   at " + new Date(e.payload.meta.ts).toISOString()).join('\n')}
+
+      <b>Counter</b>
+      -------------------------------------------------------
+      Visitor Count: ${count}
+      -------------------------------------------------------
+      `
+                elm.innerHTML = output.split("\n").join("<br>")
+            })
+            .catch((e) => {
+              elm.innerHTML = "<i>" + e.message + "</i><br><br>" + "Waiting for IPFS daemon to start..."
+              console.error(e.stack)
+            })
+        }
+        setInterval(query, Math.random() * 3 * 1000)
+
+      } catch(e) {
+        console.error(e.stack)
+        elm.innerHTML = e.message
+      }
+
+
+    </script>
+  </body>
+</html>
