Add appreciate app as default app.

2025-04-08 07:32:10 +02:00 · 2021-01-18 19:56:12 -05:00 · 2021-01-18 19:56:12 -05:00 · 407d436ed0
commit 407d436ed0
parent 165537a4eb
46 changed files with 3770 additions and 1 deletions
--- a/scripts/defaultScripts.js
+++ b/scripts/defaultScripts.js
@ -36,7 +36,8 @@ var DEFAULT_SCRIPTS_COMBINED = [
    "system/inspect.js",
    "system/keyboardShortcuts/keyboardShortcuts.js",
    "system/checkForUpdates.js",
-    "system/onFirstRun.js"
+    "system/onFirstRun.js",
+    "system/appreciate/appreciate_app.js"
 ];
 var DEFAULT_SCRIPTS_SEPARATE = [
    "system/controllers/controllerScripts.js",
--- a/scripts/system/appreciate/README.md
+++ b/scripts/system/appreciate/README.md
@ -0,0 +1,40 @@
+# Appreciate
+
+## Description
+
+Show someone else that you like what they're doing. Open the app to see usage instructions and some options!
+
+## Releases
+
+### v1.5 | [48d8247](https://github.com/highfidelity/hifi-content/commit/48d8247)
+
+- Fixed an issue where Appreciate app users wearing avatars without a specific joint wouldn't hear the Appreciate sound or see the Appreciation Dodecahedron
+
+### 2019-03-08_11-37-00 | Marketplace v1.4 | [93bf464](https://github.com/highfidelity/hifi-content/commit/93bf464)
+
+- Fixed an issue where a user could press the "Z" key to appreciate while the Appreciate UI was focused even if the Appreciate switch was turned off
+- Fixed an issue where Appreciation Intensity decayed too quickly after switching from HMD mode to Desktop mode
+
+### 2019-02-22_10-49-00 | Marketplace v1.3 | [51704b5](https://github.com/highfidelity/hifi-content/commit/51704b5)
+
+- Optimize app
+- Add option to not show Appreciation Dodecahedron while Appreciating
+- Forward Z keypresses to the Appreciate script that the user makes when the App's HTML UI is focused
+
+### 2019-02-19_13-09-00 | Marketplace v1.2 | [0e2fa82](https://github.com/highfidelity/hifi-content/commit/0e2fa82)
+
+- Introduced functionality to stop running versions of Appreciate when those versions are baked into the client installation AND other versions of Appreciate are running
+
+### 2019-02-15_17-03-00 | Marketplace v1.1 | [83f8927](https://github.com/highfidelity/hifi-content/commit/83f8927)
+
+- Ensure that old Appreciation Dodecahedrons will be deleted in the event of a client crashing while Appreciating
+
+### 2019-02-14_10-00-00 | Marketplace v1.0 | [658ed4e](https://github.com/highfidelity/hifi-content/commit/658ed4e)
+
+- Initial Release
+
+## Project Links
+[Trello Card](https://trello.com/c/2iMbEgdw/36-appreciation-app)
+
+## Known issues
+- N/A
--- a/scripts/system/appreciate/appreciate.jpg
+++ b/scripts/system/appreciate/appreciate.jpg
--- a/scripts/system/appreciate/appreciate_app.js
+++ b/scripts/system/appreciate/appreciate_app.js
--- a/scripts/system/appreciate/resources/animations/Cheering.fbx
+++ b/scripts/system/appreciate/resources/animations/Cheering.fbx
--- a/scripts/system/appreciate/resources/animations/Clapping.fbx
+++ b/scripts/system/appreciate/resources/animations/Clapping.fbx
--- a/scripts/system/appreciate/resources/appreciate_ui.html
+++ b/scripts/system/appreciate/resources/appreciate_ui.html
@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+    Appreciate
+    Created by Zach Fox on 2019-01-30
+    Copyright 2019 High Fidelity, Inc.
+
+    Distributed under the Apache License, Version 2.0.
+    See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+-->
+
+<html>
+    <head>
+        <title>Appreciate</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="css/style.css">
+        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+        <!--I modified jscolor to prevent it from printing the color code to the value of the input onchange. -->
+        <script type="text/javascript" src="js/jscolor.js"></script>
+    </head>
+
+    <body>
+        <div id="loadingContainer">
+        </div>
+
+        <div id="mainContainer">
+            <div id="titleBarContainer">
+                <div id="titleText" style="font-weight:bold;">
+                    Appreciate v1.5
+                </div>
+                <label class="switch">
+                    <input id="appreciateSwitch" type="checkbox" onclick="appreciateSwitchClicked(this)">
+                    <span class="slider round"></span>
+                </label>
+            </div>
+
+            <div id="firstRun" style="display:none;">
+                <i id="tutorialArrow"></i>
+                <div>&nbsp;Use this switch to enable and disable the Appreciate app.</div>
+            </div>
+
+            <div id="progressBarContainer">
+                <span style="font-weight:bold;">Intensity Meter</span>
+                <div id="currentIntensityDisplay">
+                    <span id="currentIntensity" style="width:0%"></span>
+                </div>
+                <div id="crosshatch"></div>
+            </div>
+
+            <div id="optionsContainer">
+                <span style="font-weight:bold;">Options</span>
+
+                <label id="neverWhistleContainer">
+                    Never Whistle
+                    <input id="neverWhistleCheckbox" type="checkbox" onclick="neverWhistleCheckboxClicked(this)">
+                    <span class="checkmark"></span>
+                </label>
+
+                <label id="showAppreciationEntityContainer">
+                    Show Appreciation Dodecahedron
+                    <input id="showAppreciationEntityCheckbox" type="checkbox" onclick="showAppreciationEntityCheckboxClicked(this)">
+                    <span class="checkmark"></span>
+                </label>
+
+                <div id="colorPickerContainer">
+                    <input type="button" id="colorPicker" class="jscolor"
+                        onchange="setEntityColor(this.jscolor)" value="Choose Dodecahedron Color">
+                    </input>
+                </div>
+            </div>
+
+            <div id="instructions">
+                <div id="desktopModeInstructions">
+                    Desktop Mode:<br/>Tap or hold the Z key on your keyboard!
+                </div>
+                <div id="vrModeInstructions">
+                    VR Mode:<br/>Raise your hands above your head and shake them!
+                </div>
+            </div>
+        </div>
+        
+        <!--Include this script here so it only executes once the DOM is ready.-->
+        <script type="text/javascript" src="js/appreciate_ui.js"></script>
+    </body>
+</html>
--- a/scripts/system/appreciate/resources/css/style.css
+++ b/scripts/system/appreciate/resources/css/style.css
@ -0,0 +1,284 @@
+*, *:before, *:after {
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+html {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Raleway', sans-serif;
+    background-color: #393939;
+    color: #afafaf;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+
+#mainContainer {
+  width: 100vw;
+  height: 100vh;
+}
+
+#loadingContainer {
+    background-color: rgba(0, 0, 0, 0.8);
+    background-image: url('../images/loadingSpinner.svg');
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: 999;
+}
+
+#firstRun {
+  background-color: rgba(0, 0, 0, 0.9);
+  width: 100vw;
+  height: calc(100vh - 60px);
+  position: fixed;
+  z-index: 998;
+  padding: 8px 12px 0 50%;
+  font-size: 24px;
+  text-align: right;
+}
+
+#tutorialArrow {
+  border: solid #00b4ef;
+  border-width: 0 5px 5px 0;
+  margin-right: 28px;
+  display: inline-block;
+  padding: 5px;
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+
+/* START SWITCH CSS
+Mostly from: https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+#titleBarContainer {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding: 0 16px;
+  font-size: 24px;
+  background-color: #121212;
+  color: #ffffff;
+  justify-content: space-between;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: block;
+  width: 70px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #00b4ef;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #00b4ef;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(35px);
+  -ms-transform: translateX(35px);
+  transform: translateX(35px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+/* END SWITCH CSS */
+
+/* START PROGRESS BAR CSS */
+#progressBarContainer {
+  width: calc(100vw - 24px);
+  margin: 24px auto 0 auto;
+}
+
+#progressBarContainer > span {
+  font-size: 18px;
+}
+
+#currentIntensityDisplay {
+  width: 100%;
+  height: 175px;
+  margin-top: 8px;
+  background: #FFFFFF;
+  background-image: linear-gradient(to right, #EEE 0, #EEE 55%, #FFF 55%, #FFF 100%);
+}
+
+#crosshatch {
+  display: none;
+  float: right;
+  position: relative;
+  top: -175px;
+  height: 175px;
+  width: 45%;
+  background: repeating-linear-gradient(45deg, transparent 0px, transparent 4px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.1) 8px);
+}
+
+#currentIntensity {
+  display: block;
+  height: 100%;
+  background-color: #1ac567;
+  background-image: linear-gradient(to right,#1ac567 0, #C62147 100%);
+  position: relative;
+  overflow: hidden;
+}
+/* END PROGRESS BAR CSS */
+
+#optionsContainer {
+  display: flex;
+  flex-direction: column;
+  height: 150px;
+  width: calc(100vw - 24px);
+  margin: 12px 12px 0 12px;
+  position: absolute;
+}
+
+#colorPickerContainer {
+  margin: 8px 0 0 0;
+  visibility: hidden;
+}
+
+#colorPickerContainer > input {
+  font-family: 'Raleway', sans-serif;
+  height: 34px;
+  font-size: 18px;
+  min-width: 185px;
+}
+
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 25px;
+  width: 25px;
+  background-color: #eee;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+#neverWhistleContainer,
+#showAppreciationEntityContainer {
+  display: block;
+  margin: 8px 0 0 0;
+  height: 25px;
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  font-size: 18px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+#showAppreciationEntityContainer {
+  margin-top: 16px;
+}
+
+/* Hide the browser's default checkbox */
+#neverWhistleContainer input,
+#showAppreciationEntityContainer input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* On mouse-over, add a grey background color */
+#neverWhistleContainer:hover input ~ .checkmark,
+#showAppreciationEntityContainer:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+#neverWhistleContainer input:checked ~ .checkmark,
+#showAppreciationEntityContainer input:checked ~ .checkmark {
+  background-color: #0093C5;
+}
+
+/* Show the checkmark when checked */
+#neverWhistleContainer input:checked ~ .checkmark:after,
+#showAppreciationEntityContainer input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+#neverWhistleContainer .checkmark:after,
+#showAppreciationEntityContainer .checkmark:after {
+  left: 9px;
+  top: 3px;
+  width: 8px;
+  height: 15px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+#instructions {
+  position: fixed;
+  height: 150px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 12px;
+  font-size: 18px;
+}
+
+#instructions > div {
+  margin-top: 16px;
+}
--- a/scripts/system/appreciate/resources/images/icons/appreciate-a.svg
+++ b/scripts/system/appreciate/resources/images/icons/appreciate-a.svg
@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 91.046409 92.5831"
+   x="0px"
+   y="0px"
+   version="1.1"
+   id="svg16"
+   sodipodi:docname="appreciate-a.svg"
+   width="91.04641"
+   height="92.583099"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata22">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>SCHOOL_ICONS_100</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs20" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="1.888"
+     inkscape:cx="46.168739"
+     inkscape:cy="33.542603"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <title
+     id="title2">SCHOOL_ICONS_100</title>
+  <path
+     d="m 90.06874,62.450495 v -0.14 a 16.31,16.31 0 0 0 -1.58,-5.39 l -9.97,-27.22 a 5.72,5.72 0 0 0 -4.2,-4.08 7.27,7.27 0 0 0 -6.78,2 5.71,5.71 0 0 0 -1.37,5.67 v 0.17 l -13.51,-13.59 c -3.17,-3.17 -7.08,-2.58 -9.31,-0.36 a 6.31,6.31 0 0 0 -1.69,3 l -3.26,-3.26 a 6.42,6.42 0 0 0 -9.05,-0.33 6.83,6.83 0 0 0 -2.37,5.81 6.28,6.28 0 0 0 -6.32,5.71 l -3.68,-2.79 a 6.38,6.38 0 0 0 -6.460001,-1 7.12,7.12 0 0 0 -4.2399997,5.58 6.37,6.37 0 0 0 2.52,5.87 6.07,6.07 0 0 0 -2.87,2.07 c -1.92,2.53 -1.84,6.61 2,9.54 l 2.8099997,2.13 a 6.15,6.15 0 0 0 -3.1799997,2.3 c -1.76,2.49 -1.78,6.59 2.31,9.7 l 32.2300007,24.51 a 16.43,16.43 0 0 0 21.19,-1.08 16.49,16.49 0 0 0 15.06,-4.47 l 7,-7 a 16.49,16.49 0 0 0 4.79,-12.69 1.51,1.51 0 0 0 -0.07,-0.66 z m -65.9,-33.21 a 3.21,3.21 0 0 1 2.67,-1.48 3.72,3.72 0 0 1 1.65,0.41 v 0 l 0.33,0.37 a 6.15,6.15 0 0 0 -4.65,4.28 3.19,3.19 0 0 1 0,-3.58 z m -14.9100007,3.46 a 4.13,4.13 0 0 1 2.4300007,-3.16 3.36,3.36 0 0 1 3.49,0.58 l 7.79,5.9 1.56,1.18 c 0.05,0.13 0.1,0.26 0.16,0.39 a 9.06,9.06 0 0 0 1.75,2.4 l 2.47,2.48 a 6.24,6.24 0 0 0 -1.73,0.58 6.1,6.1 0 0 0 -2.9,3.17 l -8.47,-6.42 -0.15,-0.14 -4.910001,-3.72 a 3.36,3.36 0 0 1 -1.4899997,-3.24 z m 34.6600007,53.26 -32.21,-24.42 c -2.5200007,-1.91 -2.6600007,-4.18 -1.670001,-5.58 a 3.21,3.21 0 0 1 2.670001,-1.35 5.18,5.18 0 0 1 2.8,0.94 l 14.35,10.89 a 1.5,1.5 0 1 0 1.81,-2.39 l -13.72,-10.41 -0.11,-0.1 -0.22,-0.16 -7.8500007,-6 c -2.41,-1.82 -2.46,-4 -1.44,-5.33 1.02,-1.33 3.0900007,-1.86 5.4700007,-0.09 l 0.11,0.11 10,7.59 a 8.58,8.58 0 0 0 2.52,4.55 l 15,15 9.88,9.88 a 50.23,50.23 0 0 0 5.7,5.45 16.7,16.7 0 0 0 2.73,1.6 l 0.19,0.09 a 13.48,13.48 0 0 1 -16.01,-0.27 z m 39.25,-12.24 -7,7 a 13.51,13.51 0 0 1 -19.09,0 l -28.52,-28.62 a 5.35,5.35 0 0 1 -1.73,-3.34 3.14,3.14 0 0 1 1.71,-3.07 4.19,4.19 0 0 1 4.51,0.91 v 0 l 12.82,12.82 a 1.5,1.5 0 0 0 2.12,-2.12 l -19.43,-19.46 a 5.52,5.52 0 0 1 -1.39,-2.12 3.16,3.16 0 0 1 1.24,-3.8 c 1.13,-0.71 3,-0.78 4.94,1.14 0,0 0,0 0,0.07 l 19.43,19.41 a 1.5,1.5 0 0 0 2.12,-2.12 l -19.39,-19.42 a 0.76,0.76 0 0 0 -0.06,-0.08 l -4.35,-4.38 a 3.23,3.23 0 0 1 -0.41,-0.48 3.46,3.46 0 0 1 0.64,-4.88 3.44,3.44 0 0 1 5,0.19 l 23.81,23.8 a 1.5,1.5 0 0 0 2.03,-2.09 l -16.34,-16.38 c -1.87,-1.87 -1.53,-3.89 -0.36,-5.07 1.17,-1.18 3.19,-1.52 5.07,0.36 l 17.72,17.72 a 1.5,1.5 0 0 0 2.5,-1.48 l -1.68,-5.78 a 2.68,2.68 0 0 1 0.63,-2.77 4.3,4.3 0 0 1 3.9,-1.14 2.75,2.75 0 0 1 2.06,2.1 l 10,27.39 0.07,0.15 a 13.32,13.32 0 0 1 1.33,4.58 1.4,1.4 0 0 0 0,0.14 c 0,0 0,0.07 0,0.11 a 13.5,13.5 0 0 1 -3.9,10.71 z"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     d="m 7.2587393,5.1404947 a 1.5,1.5 0 1 0 -2.09,2.14 L 15.44874,17.440495 a 1.5,1.5 0 0 0 2.11,-2.13 z"
+     id="path6"
+     inkscape:connector-curvature="0"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     d="m 11.83874,22.870495 a 1.5,1.5 0 0 0 0.4,-2.95 l -9.5000007,-2.63 a 1.5,1.5 0 0 0 -0.8,2.89 l 9.5000007,2.63 a 1.5,1.5 0 0 0 0.4,0.06 z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     d="m 21.37874,0.88049471 a 1.5,1.5 0 0 0 -1.37,1.65999999 l 0.74,9.3300003 a 1.5,1.5 0 0 0 1.49,1.38 h 0.12 a 1.5,1.5 0 0 0 1.38,-1.71 l -0.74,-9.3300003 a 1.5,1.5 0 0 0 -1.62,-1.32999999 z"
+     id="path10"
+     inkscape:connector-curvature="0"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <text
+     x="-3.8312604"
+     y="111.54049"
+     font-size="5px"
+     font-weight="bold"
+     id="text12"
+     style="font-weight:bold;font-size:5px;font-family:'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif;fill:#000000">Created by Rena</text>
+  <text
+     x="-3.8312604"
+     y="116.54049"
+     font-size="5px"
+     font-weight="bold"
+     id="text14"
+     style="font-weight:bold;font-size:5px;font-family:'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif;fill:#000000">from the Noun Project</text>
+</svg>
--- a/scripts/system/appreciate/resources/images/icons/appreciate-i.svg
+++ b/scripts/system/appreciate/resources/images/icons/appreciate-i.svg
@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 91.046409 92.5831"
+   x="0px"
+   y="0px"
+   version="1.1"
+   id="svg16"
+   sodipodi:docname="appreciate-i.svg"
+   width="91.04641"
+   height="92.583099"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata22">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>SCHOOL_ICONS_100</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs20" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="1.888"
+     inkscape:cx="46.168739"
+     inkscape:cy="33.542603"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <title
+     id="title2">SCHOOL_ICONS_100</title>
+  <path
+     d="m 90.06874,62.450495 v -0.14 a 16.31,16.31 0 0 0 -1.58,-5.39 l -9.97,-27.22 a 5.72,5.72 0 0 0 -4.2,-4.08 7.27,7.27 0 0 0 -6.78,2 5.71,5.71 0 0 0 -1.37,5.67 v 0.17 l -13.51,-13.59 c -3.17,-3.17 -7.08,-2.58 -9.31,-0.36 a 6.31,6.31 0 0 0 -1.69,3 l -3.26,-3.26 a 6.42,6.42 0 0 0 -9.05,-0.33 6.83,6.83 0 0 0 -2.37,5.81 6.28,6.28 0 0 0 -6.32,5.71 l -3.68,-2.79 a 6.38,6.38 0 0 0 -6.460001,-1 7.12,7.12 0 0 0 -4.2399997,5.58 6.37,6.37 0 0 0 2.52,5.87 6.07,6.07 0 0 0 -2.87,2.07 c -1.92,2.53 -1.84,6.61 2,9.54 l 2.8099997,2.13 a 6.15,6.15 0 0 0 -3.1799997,2.3 c -1.76,2.49 -1.78,6.59 2.31,9.7 l 32.2300007,24.51 a 16.43,16.43 0 0 0 21.19,-1.08 16.49,16.49 0 0 0 15.06,-4.47 l 7,-7 a 16.49,16.49 0 0 0 4.79,-12.69 1.51,1.51 0 0 0 -0.07,-0.66 z m -65.9,-33.21 a 3.21,3.21 0 0 1 2.67,-1.48 3.72,3.72 0 0 1 1.65,0.41 v 0 l 0.33,0.37 a 6.15,6.15 0 0 0 -4.65,4.28 3.19,3.19 0 0 1 0,-3.58 z m -14.9100007,3.46 a 4.13,4.13 0 0 1 2.4300007,-3.16 3.36,3.36 0 0 1 3.49,0.58 l 7.79,5.9 1.56,1.18 c 0.05,0.13 0.1,0.26 0.16,0.39 a 9.06,9.06 0 0 0 1.75,2.4 l 2.47,2.48 a 6.24,6.24 0 0 0 -1.73,0.58 6.1,6.1 0 0 0 -2.9,3.17 l -8.47,-6.42 -0.15,-0.14 -4.910001,-3.72 a 3.36,3.36 0 0 1 -1.4899997,-3.24 z m 34.6600007,53.26 -32.21,-24.42 c -2.5200007,-1.91 -2.6600007,-4.18 -1.670001,-5.58 a 3.21,3.21 0 0 1 2.670001,-1.35 5.18,5.18 0 0 1 2.8,0.94 l 14.35,10.89 a 1.5,1.5 0 1 0 1.81,-2.39 l -13.72,-10.41 -0.11,-0.1 -0.22,-0.16 -7.8500007,-6 c -2.41,-1.82 -2.46,-4 -1.44,-5.33 1.02,-1.33 3.0900007,-1.86 5.4700007,-0.09 l 0.11,0.11 10,7.59 a 8.58,8.58 0 0 0 2.52,4.55 l 15,15 9.88,9.88 a 50.23,50.23 0 0 0 5.7,5.45 16.7,16.7 0 0 0 2.73,1.6 l 0.19,0.09 a 13.48,13.48 0 0 1 -16.01,-0.27 z m 39.25,-12.24 -7,7 a 13.51,13.51 0 0 1 -19.09,0 l -28.52,-28.62 a 5.35,5.35 0 0 1 -1.73,-3.34 3.14,3.14 0 0 1 1.71,-3.07 4.19,4.19 0 0 1 4.51,0.91 v 0 l 12.82,12.82 a 1.5,1.5 0 0 0 2.12,-2.12 l -19.43,-19.46 a 5.52,5.52 0 0 1 -1.39,-2.12 3.16,3.16 0 0 1 1.24,-3.8 c 1.13,-0.71 3,-0.78 4.94,1.14 0,0 0,0 0,0.07 l 19.43,19.41 a 1.5,1.5 0 0 0 2.12,-2.12 l -19.39,-19.42 a 0.76,0.76 0 0 0 -0.06,-0.08 l -4.35,-4.38 a 3.23,3.23 0 0 1 -0.41,-0.48 3.46,3.46 0 0 1 0.64,-4.88 3.44,3.44 0 0 1 5,0.19 l 23.81,23.8 a 1.5,1.5 0 0 0 2.03,-2.09 l -16.34,-16.38 c -1.87,-1.87 -1.53,-3.89 -0.36,-5.07 1.17,-1.18 3.19,-1.52 5.07,0.36 l 17.72,17.72 a 1.5,1.5 0 0 0 2.5,-1.48 l -1.68,-5.78 a 2.68,2.68 0 0 1 0.63,-2.77 4.3,4.3 0 0 1 3.9,-1.14 2.75,2.75 0 0 1 2.06,2.1 l 10,27.39 0.07,0.15 a 13.32,13.32 0 0 1 1.33,4.58 1.4,1.4 0 0 0 0,0.14 c 0,0 0,0.07 0,0.11 a 13.5,13.5 0 0 1 -3.9,10.71 z"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     d="m 7.2587393,5.1404947 a 1.5,1.5 0 1 0 -2.09,2.14 L 15.44874,17.440495 a 1.5,1.5 0 0 0 2.11,-2.13 z"
+     id="path6"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     d="m 11.83874,22.870495 a 1.5,1.5 0 0 0 0.4,-2.95 l -9.5000007,-2.63 a 1.5,1.5 0 0 0 -0.8,2.89 l 9.5000007,2.63 a 1.5,1.5 0 0 0 0.4,0.06 z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     d="m 21.37874,0.88049471 a 1.5,1.5 0 0 0 -1.37,1.65999999 l 0.74,9.3300003 a 1.5,1.5 0 0 0 1.49,1.38 h 0.12 a 1.5,1.5 0 0 0 1.38,-1.71 l -0.74,-9.3300003 a 1.5,1.5 0 0 0 -1.62,-1.32999999 z"
+     id="path10"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <text
+     x="-3.8312604"
+     y="111.54049"
+     font-size="5px"
+     font-weight="bold"
+     id="text12"
+     style="font-weight:bold;font-size:5px;font-family:'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif;fill:#000000">Created by Rena</text>
+  <text
+     x="-3.8312604"
+     y="116.54049"
+     font-size="5px"
+     font-weight="bold"
+     id="text14"
+     style="font-weight:bold;font-size:5px;font-family:'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif;fill:#000000">from the Noun Project</text>
+</svg>
--- a/scripts/system/appreciate/resources/images/loadingSpinner.svg
+++ b/scripts/system/appreciate/resources/images/loadingSpinner.svg
@ -0,0 +1 @@
+<svg width="72px"  height="72px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#00b4ef" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(239.933 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
--- a/scripts/system/appreciate/resources/js/appreciate_ui.js
+++ b/scripts/system/appreciate/resources/js/appreciate_ui.js
@ -0,0 +1,188 @@
+/*
+    Appreciate
+    Created by Zach Fox on 2019-01-30
+    Copyright 2019 High Fidelity, Inc.
+
+    Distributed under the Apache License, Version 2.0.
+    See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+
+/* globals document EventBridge setTimeout */
+
+// Called when the user clicks the switch in the top right of the app.
+// Sends an event to the App JS and clears the `firstRun` `div`.
+function appreciateSwitchClicked(checkbox) {
+    EventBridge.emitWebEvent(JSON.stringify({
+        app: "appreciate",
+        method: "appreciateSwitchClicked",
+        appreciateEnabled: checkbox.checked
+    }));
+    document.getElementById("firstRun").style.display = "none";
+}
+
+// Called when the user checks/unchecks the Never Whistle checkbox.
+// Adds the crosshatch div to the UI and sends an event to the App JS.
+function neverWhistleCheckboxClicked(checkbox) {
+    var crosshatch = document.getElementById("crosshatch");
+    if (checkbox.checked) {
+        crosshatch.style.display = "inline-block";
+    } else {
+        crosshatch.style.display = "none";
+    }
+
+    EventBridge.emitWebEvent(JSON.stringify({
+        app: "appreciate",
+        method: "neverWhistleCheckboxClicked",
+        neverWhistle: checkbox.checked
+    }));
+}
+
+// Called when the user checks/unchecks the Show Appreciation Entity checkbox.
+// Sends an event to the App JS.
+function showAppreciationEntityCheckboxClicked(checkbox) {
+    EventBridge.emitWebEvent(JSON.stringify({
+        app: "appreciate",
+        method: "showAppreciationEntityCheckboxClicked",
+        showAppreciationEntity: checkbox.checked
+    }));
+
+    if (checkbox.checked) {
+        document.getElementById("colorPickerContainer").style.visibility = "visible";
+    } else {
+        document.getElementById("colorPickerContainer").style.visibility = "hidden";
+    }
+}
+
+// Called when the user changes the entity's color using the jscolor picker.
+// Modifies the color of the Intensity Meter gradient and sends a message to the App JS.
+var START_COLOR_MULTIPLIER = 0.2;
+function setEntityColor(jscolor) {
+    var newEntityColor = {
+        "red": jscolor.rgb[0],
+        "green": jscolor.rgb[1],
+        "blue": jscolor.rgb[2]
+    };
+
+    var startColor = {
+        "red": Math.floor(newEntityColor.red * START_COLOR_MULTIPLIER),
+        "green": Math.floor(newEntityColor.green * START_COLOR_MULTIPLIER),
+        "blue": Math.floor(newEntityColor.blue * START_COLOR_MULTIPLIER)
+    };
+
+    var currentIntensityDisplayWidth = document.getElementById("currentIntensityDisplay").offsetWidth;
+    var bgString = "linear-gradient(to right, rgb(" + startColor.red + ", " +
+        startColor.green + ", " + startColor.blue + ") 0, " +
+        jscolor.toHEXString() + " " + currentIntensityDisplayWidth + "px)";
+    document.getElementById("currentIntensity").style.backgroundImage = bgString;
+
+    EventBridge.emitWebEvent(JSON.stringify({
+        app: "appreciate",
+        method: "setEntityColor",
+        entityColor: newEntityColor
+    }));
+}
+
+// Handle EventBridge messages from *_app.js.
+function onScriptEventReceived(message) {
+    try {
+        message = JSON.parse(message);
+    } catch (error) {
+        console.log("Couldn't parse script event message: " + error);
+        return;
+    }
+
+    // This message gets sent by `entityList.js` when it shouldn't!
+    if (message.type === "removeEntities") {
+        return;
+    }
+
+    switch (message.method) {
+        case "updateUI":
+            if (message.isFirstRun) {
+                document.getElementById("firstRun").style.display = "block";
+            }
+            document.getElementById("appreciateSwitch").checked = message.appreciateEnabled;
+            document.getElementById("neverWhistleCheckbox").checked = message.neverWhistleEnabled;
+
+            var showAppreciationEntityCheckbox = document.getElementById("showAppreciationEntityCheckbox");
+            showAppreciationEntityCheckbox.checked = message.showAppreciationEntity;
+            if (showAppreciationEntityCheckbox.checked) {
+                document.getElementById("colorPickerContainer").style.visibility = "visible";
+            } else {
+                document.getElementById("colorPickerContainer").style.visibility = "hidden";
+            }
+
+            if (message.neverWhistleEnabled) {
+                var crosshatch = document.getElementById("crosshatch");
+                crosshatch.style.display = "inline-block";
+            }
+
+            document.getElementById("loadingContainer").style.display = "none";
+
+            var color = document.getElementById("colorPicker").jscolor;
+            color.fromRGB(message.entityColor.red, message.entityColor.green, message.entityColor.blue);
+
+            var startColor = {
+                "red": Math.floor(color.rgb[0] * START_COLOR_MULTIPLIER),
+                "green": Math.floor(color.rgb[1] * START_COLOR_MULTIPLIER),
+                "blue": Math.floor(color.rgb[2] * START_COLOR_MULTIPLIER)
+            };
+            var currentIntensityDisplayWidth = document.getElementById("currentIntensityDisplay").offsetWidth;
+            document.getElementById("currentIntensity").style.backgroundImage = 
+                "linear-gradient(to right, rgb(" + startColor.red + ", " +
+                startColor.green + ", " + startColor.blue + ") 0, " +
+                color.toHEXString() + " " + currentIntensityDisplayWidth + "px)";
+            break;
+
+        case "updateCurrentIntensityUI":
+            document.getElementById("currentIntensity").style.width = message.currentIntensity * 100 + "%";
+            break;
+
+        default:
+            console.log("Unknown message received from appreciate_app.js! " + JSON.stringify(message));
+            break;
+    }
+}
+
+// This function detects a keydown on the document, which enables the app
+// to forward these keypress events to the app JS.
+function onKeyDown(e) {
+    var key = e.key.toUpperCase();
+    if (key === "Z") {
+        EventBridge.emitWebEvent(JSON.stringify({
+            app: "appreciate",
+            method: "zKeyDown",
+            repeat: e.repeat
+        }));
+    }
+}
+
+// This function detects a keyup on the document, which enables the app
+// to forward these keypress events to the app JS.
+function onKeyUp(e) {
+    var key = e.key.toUpperCase();
+    if (key === "Z") {
+        EventBridge.emitWebEvent(JSON.stringify({
+            app: "appreciate",
+            method: "zKeyUp"
+        }));
+    }
+}
+
+// This delay is necessary to allow for the JS EventBridge to become active.
+// The delay is still necessary for HTML apps in RC78+.
+var EVENTBRIDGE_SETUP_DELAY = 500;
+function onLoad() {
+    setTimeout(function() {
+        EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+        EventBridge.emitWebEvent(JSON.stringify({
+            app: "appreciate",
+            method: "eventBridgeReady"
+        }));
+    }, EVENTBRIDGE_SETUP_DELAY);
+
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+}
+
+onLoad();
--- a/scripts/system/appreciate/resources/js/jscolor.js
+++ b/scripts/system/appreciate/resources/js/jscolor.js
--- a/scripts/system/appreciate/resources/sounds/claps/01.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/01.wav
--- a/scripts/system/appreciate/resources/sounds/claps/02.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/02.wav
--- a/scripts/system/appreciate/resources/sounds/claps/03.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/03.wav
--- a/scripts/system/appreciate/resources/sounds/claps/04.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/04.wav
--- a/scripts/system/appreciate/resources/sounds/claps/05.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/05.wav
--- a/scripts/system/appreciate/resources/sounds/claps/06.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/06.wav
--- a/scripts/system/appreciate/resources/sounds/claps/07.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/07.wav
--- a/scripts/system/appreciate/resources/sounds/claps/08.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/08.wav
--- a/scripts/system/appreciate/resources/sounds/claps/09.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/09.wav
--- a/scripts/system/appreciate/resources/sounds/claps/10.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/10.wav
--- a/scripts/system/appreciate/resources/sounds/claps/11.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/11.wav
--- a/scripts/system/appreciate/resources/sounds/claps/12.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/12.wav
--- a/scripts/system/appreciate/resources/sounds/claps/13.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/13.wav
--- a/scripts/system/appreciate/resources/sounds/claps/14.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/14.wav
--- a/scripts/system/appreciate/resources/sounds/claps/15.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/15.wav
--- a/scripts/system/appreciate/resources/sounds/claps/16.wav
+++ b/scripts/system/appreciate/resources/sounds/claps/16.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/01.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/01.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/02.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/02.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/03.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/03.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/04.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/04.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/05.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/05.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/06.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/06.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/07.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/07.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/08.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/08.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/09.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/09.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/10.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/10.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/11.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/11.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/12.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/12.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/13.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/13.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/14.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/14.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/15.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/15.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/16.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/16.wav
--- a/scripts/system/appreciate/resources/sounds/whistles/17.wav
+++ b/scripts/system/appreciate/resources/sounds/whistles/17.wav
				`@ -0,0 +1 @@`
				<svg width="72px" height="72px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#00b4ef" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(239.933 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>