From d3cf7f0f22daa69bf68fc784b5b6c0cd24ba5f4a Mon Sep 17 00:00:00 2001
From: Jonas Herzig <me@johni0702.de>
Date: Mon, 24 Sep 2018 21:05:22 +0200
Subject: [PATCH] Implement avatar upload and removal (not persistent access
 sessions)

---
 app/index.html |  6 ++++--
 app/index.js   | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/index.html b/app/index.html
index 760291a..5c0c221 100644
--- a/app/index.html
+++ b/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>
 
diff --git a/app/index.js b/app/index.js
index a65bc03..1b149ef 100644
--- a/app/index.js
+++ b/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]])
       })