Implement avatar upload and removal (not persistent access sessions)

app/index.html

@@ -223,11 +223,13 @@
           View Avatar
         </li>
         <!-- ko if: $data === $root.thisUser() -->
-        <li data-bind="css: { disabled: !canChangeAvatar() }, visible: true">
+        <li data-bind="css: { disabled: !canChangeAvatar() }, visible: true,
+                       click: changeAvatar">
           Change Avatar
         </li>
         <!-- /ko -->
-        <li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture">
+        <li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
+                       click: removeAvatar">
           Reset Avatar
         </li>
 

app/index.js

@@ -394,8 +394,7 @@ class GlobalBindings {
         // return this.thisUser() === ui // TODO check for perms
       }
       ui.canChangeAvatar = () => {
-        return false // TODO implement changing of avatar
-        // return this.thisUser() === ui // TODO check for perms
+        return this.thisUser() === ui // TODO check for perms
       }
       ui.toggleMute = () => {
         if (ui.selfMute()) {
@@ -414,6 +413,21 @@ class GlobalBindings {
       ui.viewAvatar = () => {
         this.avatarView(ui.texture())
       }
+      ui.changeAvatar = () => {
+        let input = document.createElement('input')
+        input.type = 'file'
+        input.addEventListener('change', () => {
+          let reader = new window.FileReader()
+          reader.onload = () => {
+            this.client.setSelfTexture(reader.result)
+          }
+          reader.readAsArrayBuffer(input.files[0])
+        })
+        input.click()
+      }
+      ui.removeAvatar = () => {
+        user.clearTexture()
+      }
       Object.entries(simpleProperties).forEach(key => {
         ui[key[1]] = ko.observable(user[key[0]])
       })