1 files changed, 84 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e3c2dc0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <h1> Graffiti x JS </h1>
+
+  <p id="ID"></p>
+
+  <h2 id="status"></h2>
+
+  <button onclick="Subscribe()">
+    Subscribe
+  </button>
+
+  <button onclick="Unsubscribe()">
+    Unsubscribe
+  </button>
+
+  <button onclick="Update()">
+    Update
+  </button>
+
+  <button onclick="Remove()">
+    Remove
+  </button>
+
+  <button onclick="LogOut()">
+    Log Out
+  </button>
+
+<script type="module">
+  import Graffiti from "./graffiti.js"
+
+  // Connect to a local Graffiti instance
+  // (see the server README for how to n locally)
+  window.graffiti = new Graffiti("http://localhost:5001")
+  await graffiti.opened()
+
+  // Log in automatically if not already
+  // and supply a log out button
+  if (!graffiti.myID) graffiti.toggleLogIn()
+  window.LogOut = ()=> graffiti.toggleLogIn()
+  document.getElementById('ID').innerHTML = `Your Graffiti ID is: ${graffiti.myID}`
+
+  const myTag = "asdf"
+
+  // Make a display
+  async function displayObjects() {
+    let display = 'not subscribed'
+    try {
+      const objects = graffiti.objectsByTags(myTag)
+      display = `objects: ${JSON.stringify(objects)}`
+    } catch {}
+
+    document.getElementById('status').innerHTML = display
+  }
+
+  // Create an object containing a special string
+  window.Subscribe = async function() {
+    await graffiti.subscribe(myTag)
+    await new Promise(r => setTimeout(r, 1000));
+    displayObjects()
+  }
+
+  window.Unsubscribe = async function() {
+    await graffiti.unsubscribe(myTag)
+    await new Promise(r => setTimeout(r, 1000));
+    displayObjects()
+  }
+
+  // Create an object containing a special string
+  window.Update = async function() {
+    await graffiti.update({_tags: [myTag]})
+    displayObjects()
+  }
+
+  // Remove an existing object
+  window.Remove = async function() {
+    await graffiti.objectsByTags(myTag)[0]._remove()
+    displayObjects()
+  }
+
+</script>
+</body>
+</html>