Added Vault Dropdown ⬇️

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "Assets/WebGLTemplates/FloatingDropdown"]
+	path = Assets/WebGLTemplates/FloatingDropdown
+	url = https://github.com/fielddaylab/FloatingDropdown.git

Assets/JSPlugins/VaultDropdownToggle.cs

@@ -0,0 +1,33 @@
+
+using System;
+using System.Runtime.InteropServices;
+
+using UnityEngine;
+using UnityEngine.SceneManagement;
+
+using Zavala;
+
+/// <summary>
+/// Note: This class is designed to be used with the `vault-floating-dropdown` jslib pluggin. 
+/// This script will remove the dropdown elment from the DOM after the target scene has been unloaded.
+/// </summary>
+public class VaultDropdownToggle : MonoBehaviour {
+    public string sceneToDisplay = "TitleScreen";
+
+    [DllImport("__Internal")]
+    private static extern void DisableVaultButton();
+
+    private void OnEnable() {
+        SceneManager.sceneUnloaded += OnSceneUnloaded;
+    }
+
+    private void OnSceneUnloaded(Scene current) {
+        if(current.name != sceneToDisplay) return;
+        Debug.Log("[VaultDropdownToggle] remove vault button");
+        DisableVaultButton();
+    }
+
+    private void OnDisable() {
+        SceneManager.sceneUnloaded -= OnSceneUnloaded;
+    }
+}

Assets/JSPlugins/vault-floating-dropdown.jslib

@@ -0,0 +1,11 @@
+mergeInto(LibraryManager.library, {
+  DisableVaultButton: function () {
+    var vaultDropdown = document.querySelector('floating-dropdown');
+    console.log("Debug [JSPlugin > DisableVaultButton]");
+    if (vaultDropdown) { 
+      vaultDropdown.remove();
+    } else {
+      console.warn("[Vault Plugin] Failed attempt to remove element <floating-dropdown>")
+    }
+  },
+});

Assets/Prefabs/_System/Boot.prefab

@@ -543,6 +543,7 @@ GameObject:
   m_Component:
   - component: {fileID: 3982528661941399492}
   - component: {fileID: 1439248957510760085}
+  - component: {fileID: 8428632132382256515}
   m_Layer: 0
   m_Name: LoggingService
   m_TagString: Untagged
@@ -587,6 +588,19 @@ MonoBehaviour:
     AppId: 1:568050537090:web:8aa10c815abe6b4057da9b
     MeasurementId: G-TKW6WFXF6G
   m_Testing: 0
+--- !u!114 &8428632132382256515
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 7045890445170681987}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: d237f0078337fbf4f80d9b2e9bccd977, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  sceneToDisplay: TitleScreen
 --- !u!1001 &1254169883870357413
 PrefabInstance:
   m_ObjectHideFlags: 0

Assets/Scenes/MainScene.unity

@@ -38,7 +38,6 @@ RenderSettings:
   m_ReflectionIntensity: 1
   m_CustomReflection: {fileID: 0}
   m_Sun: {fileID: 0}
-  m_IndirectSpecularColor: {r: 0.12731749, g: 0.13414757, b: 0.1210787, a: 1}
   m_UseRadianceAmbientProbe: 0
 --- !u!157 &3
 LightmapSettings:
@@ -11006,7 +11005,7 @@ PrefabInstance:
       objectReference: {fileID: 0}
     - target: {fileID: 3439126375216716605, guid: e92b035dfe8e9ba45a2b0da83420b417, type: 3}
       propertyPath: m_UVRect.width
-      value: 1.9999999
+      value: 3.681603
       objectReference: {fileID: 0}
     - target: {fileID: 3439126375216716605, guid: e92b035dfe8e9ba45a2b0da83420b417, type: 3}
       propertyPath: m_UVRect.height
@@ -11494,15 +11493,15 @@ PrefabInstance:
       objectReference: {fileID: 0}
     - target: {fileID: 7297974679213213785, guid: 976131e4d37ebdb47aa45193e59a170d, type: 3}
       propertyPath: m_AnchorMax.y
-      value: 0
+      value: 1
       objectReference: {fileID: 0}
     - target: {fileID: 7297974679213213785, guid: 976131e4d37ebdb47aa45193e59a170d, type: 3}
       propertyPath: m_AnchorMin.y
-      value: 0
+      value: 1
       objectReference: {fileID: 0}
     - target: {fileID: 7297974679213213785, guid: 976131e4d37ebdb47aa45193e59a170d, type: 3}
       propertyPath: m_SizeDelta.x
-      value: 0
+      value: 49.36
       objectReference: {fileID: 0}
     - target: {fileID: 7297974679213213785, guid: 976131e4d37ebdb47aa45193e59a170d, type: 3}
       propertyPath: m_SizeDelta.y
@@ -11514,7 +11513,7 @@ PrefabInstance:
       objectReference: {fileID: 0}
     - target: {fileID: 7297974679213213785, guid: 976131e4d37ebdb47aa45193e59a170d, type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: 0
+      value: -20
       objectReference: {fileID: 0}
     - target: {fileID: 8205640239879604044, guid: 976131e4d37ebdb47aa45193e59a170d, type: 3}
       propertyPath: m_fontSizeBase

Assets/WebGLTemplates/FieldDay/FloatingDropdown/.gitignore

@@ -0,0 +1 @@
+public/*

Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md

@@ -0,0 +1,37 @@
+# FloatingDropdown
+Simple reusable web component for web games linking to the [Vault](https://vault.fielddaylab.wisc.edu/)
+
+This repository houses a reusable HTML component for the Vault floating dropdown on free browser-based games. There are two pieces used for this component: 
+1. The HTML template used to display the component on the dom 
+2. the Unity javascript plugin to be used to remove the button after exiting the title screen.
+
+## 1. Adding the Component
+This example illustrates how this component can be added to a project
+
+### Step 1: Add a custom component to the header of the index file
+
+```javascript
+<script src="FloatingDropdown/index.js"></script>
+```
+
+### Step 2: Add the custom element to the body of the file
+
+This element uses ***slots*** to make the component more flexible. If you are unfamiliar with slots, you can read more [here](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots#adding_flexibility_with_slots)
+
+Example of Template:
+```javascript
+<body>
+    <floating-dropdown>
+        <style> /* Add custom fonts here */ </style>
+        <img slot="header" src="/path/to/header/image" alt="Vault Games Library" width="250px">
+        <span slot="desc" class="content">
+            Put the body text here
+        </span>
+        <span slot="button-label">
+            Put button label here
+        </span>
+    </floating-dropdown>
+    <div id="BrainPOPsnapArea">
+...
+
+```

Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js

@@ -0,0 +1,37 @@
+// This is where the custom component is defined
+fetch('FloatingDropdown/template.html')
+    .then(stream => stream.text())
+    .then(text => define(text))
+
+/**
+ * Sets up the custom component as defined in the FloatingDropdown template
+ * 
+ * @param {string} html the outerHTML attribute of the floating dropdown element defined in `index.html` 
+ */
+function define(html) {
+    class FloatingDropdown extends HTMLElement {
+        constructor() {
+            self = super();
+        }
+
+        connectedCallback() {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, "text/html");
+
+            const template = doc.getElementById("floating-dropdown");
+            //Custom element
+            const dropdown = template.content.cloneNode(true);
+
+            const shadowRoot = this.attachShadow({mode: "open"})
+            shadowRoot.appendChild(dropdown);
+
+            // Apply external styles to the shadow dom
+            const styles = document.createElement("link");
+            styles.setAttribute("rel", "stylesheet");
+            styles.setAttribute("href", "FloatingDropdown/styles.css");
+
+            shadowRoot.appendChild(styles);
+        }
+  }
+  customElements.define("floating-dropdown", FloatingDropdown);
+}

Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css

@@ -0,0 +1,109 @@
+#header {
+  content: "";
+  position: absolute;
+  transform: translate(-50%, 0%);
+
+  pointer-events: none;
+
+  top: 16px;
+  left: 50%;
+  z-index: 100;
+}
+
+#dropdown {
+  content: "";
+  background-color: #001e2a;
+
+  display: grid;
+  box-sizing: border-box;
+
+  border-bottom-left-radius: 7px;
+  border-bottom-right-radius: 7px;
+
+  margin: 0px auto;
+  padding-top: 256px;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: 275px;
+  height: 300px;
+
+  position: absolute;
+  transform: translate(-50%, -75%);
+  /* transform: translate(-50%, 0%); */
+  top: 0px;
+  left: 50%;
+  z-index: 10;
+
+  align-content: end;
+  justify-items: center;
+
+  &:hover,
+  &:focus {
+    transition: 0.3s;
+    transform: translate(-50%, 0%);
+  }
+
+  & > * {
+    opacity: 0;
+  }
+
+  &:hover > * {
+    opacity: 100;
+    transition: 0.5s ease-in;
+  }
+}
+
+#vault-button {
+  border: none;
+  padding: 5px;
+  margin: 0px auto 15px auto;
+  justify-content: center;
+  align-items: center;
+
+  border-bottom-right-radius: 32px;
+  border-bottom-left-radius: 32px;
+  border-top-right-radius: 32px;
+  background-color: #00ecd0;
+
+  width: 200px;
+  height: 40px;
+
+  font-size: 18px;
+  font-weight: bolder;
+  text-decoration: none;
+  line-height: 2px;
+  letter-spacing: 3px;
+
+  & > span {
+    color: #001e2a;
+    font-size: 18px;
+    font-weight: bolder;
+
+    line-height: 2px;
+    letter-spacing: 3px;
+  }
+
+  cursor: pointer;
+
+  &:hover {
+    scale: 1.1;
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+p.content {
+  color: white;
+  text-decoration: none;
+
+  font-family: "brandon-grotesque", sans-serif;
+  font-size: 24px;
+}