diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..a61ee90b --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "Assets/WebGLTemplates/FloatingDropdown"] + path = Assets/WebGLTemplates/FloatingDropdown + url = https://github.com/fielddaylab/FloatingDropdown.git diff --git a/Assets/JSPlugins.meta b/Assets/JSPlugins.meta new file mode 100644 index 00000000..909139f3 --- /dev/null +++ b/Assets/JSPlugins.meta @@ -0,0 +1,8 @@ +fileFormatVersion: 2 +guid: 8174e3b576e3b3946bddecf0c3ff9a2a +folderAsset: yes +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/JSPlugins/VaultDropdownToggle.cs b/Assets/JSPlugins/VaultDropdownToggle.cs new file mode 100644 index 00000000..ac13b703 --- /dev/null +++ b/Assets/JSPlugins/VaultDropdownToggle.cs @@ -0,0 +1,33 @@ + +using System; +using System.Runtime.InteropServices; + +using UnityEngine; +using UnityEngine.SceneManagement; + +using Zavala; + +/// +/// 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. +/// +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; + } +} \ No newline at end of file diff --git a/Assets/JSPlugins/VaultDropdownToggle.cs.meta b/Assets/JSPlugins/VaultDropdownToggle.cs.meta new file mode 100644 index 00000000..33f928d9 --- /dev/null +++ b/Assets/JSPlugins/VaultDropdownToggle.cs.meta @@ -0,0 +1,11 @@ +fileFormatVersion: 2 +guid: d237f0078337fbf4f80d9b2e9bccd977 +MonoImporter: + externalObjects: {} + serializedVersion: 2 + defaultReferences: [] + executionOrder: 0 + icon: {instanceID: 0} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/JSPlugins/vault-floating-dropdown.jslib b/Assets/JSPlugins/vault-floating-dropdown.jslib new file mode 100644 index 00000000..80336727 --- /dev/null +++ b/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 ") + } + }, +}); \ No newline at end of file diff --git a/Assets/JSPlugins/vault-floating-dropdown.jslib.meta b/Assets/JSPlugins/vault-floating-dropdown.jslib.meta new file mode 100644 index 00000000..3bc616e6 --- /dev/null +++ b/Assets/JSPlugins/vault-floating-dropdown.jslib.meta @@ -0,0 +1,32 @@ +fileFormatVersion: 2 +guid: 51353c4cd89c1ae429fc029e690df030 +PluginImporter: + externalObjects: {} + serializedVersion: 2 + iconMap: {} + executionOrder: {} + defineConstraints: [] + isPreloaded: 0 + isOverridable: 0 + isExplicitlyReferenced: 0 + validateReferences: 1 + platformData: + - first: + Any: + second: + enabled: 0 + settings: {} + - first: + Editor: Editor + second: + enabled: 0 + settings: + DefaultValueInitialized: true + - first: + WebGL: WebGL + second: + enabled: 1 + settings: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/Prefabs/_System/Boot.prefab b/Assets/Prefabs/_System/Boot.prefab index 0d8aba98..ddb837e5 100644 --- a/Assets/Prefabs/_System/Boot.prefab +++ b/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 diff --git a/Assets/Scenes/MainScene.unity b/Assets/Scenes/MainScene.unity index 4797aca0..bece673c 100644 --- a/Assets/Scenes/MainScene.unity +++ b/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 diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown.meta new file mode 100644 index 00000000..f7ee9610 --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown.meta @@ -0,0 +1,8 @@ +fileFormatVersion: 2 +guid: d8678ec534263094e967d8c5e291cc14 +folderAsset: yes +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/.gitignore b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/.gitignore new file mode 100644 index 00000000..3b8bd73c --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/.gitignore @@ -0,0 +1 @@ +public/* \ No newline at end of file diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md new file mode 100644 index 00000000..3e8efdcc --- /dev/null +++ b/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 + +``` + +### 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 + + + + Vault Games Library + + Put the body text here + + + Put button label here + + +
+... + +``` diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md.meta new file mode 100644 index 00000000..5244b23c --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md.meta @@ -0,0 +1,7 @@ +fileFormatVersion: 2 +guid: 1f46e3295aa44c54e98e8d38f29a9a28 +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js new file mode 100644 index 00000000..e8f12e01 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta new file mode 100644 index 00000000..5b7d5e8c --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta @@ -0,0 +1,7 @@ +fileFormatVersion: 2 +guid: 6a7ff093b5a69ff4a837c15977f77cd2 +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css new file mode 100644 index 00000000..3bd0bc7a --- /dev/null +++ b/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; +} diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css.meta new file mode 100644 index 00000000..cceabd6d --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css.meta @@ -0,0 +1,7 @@ +fileFormatVersion: 2 +guid: 55a92fdd79d18954482106e70adda4f7 +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html new file mode 100644 index 00000000..a9cd1aa2 --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html @@ -0,0 +1,13 @@ + diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html.meta new file mode 100644 index 00000000..a7c9db08 --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html.meta @@ -0,0 +1,7 @@ +fileFormatVersion: 2 +guid: ec81e85465aaafc4fa5f830aef2c042c +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png new file mode 100644 index 00000000..d2501a52 Binary files /dev/null and b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png differ diff --git a/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png.meta b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png.meta new file mode 100644 index 00000000..13cf786c --- /dev/null +++ b/Assets/WebGLTemplates/FieldDay/FloatingDropdown/vault-library-logo.png.meta @@ -0,0 +1,7 @@ +fileFormatVersion: 2 +guid: cbe41da7b6076a5448b1b5c87184c405 +DefaultImporter: + externalObjects: {} + userData: + assetBundleName: + assetBundleVariant: diff --git a/Assets/WebGLTemplates/FieldDay/index.html b/Assets/WebGLTemplates/FieldDay/index.html index ad43ec63..9ca153a6 100644 --- a/Assets/WebGLTemplates/FieldDay/index.html +++ b/Assets/WebGLTemplates/FieldDay/index.html @@ -1,114 +1,134 @@ - - + + {{{ PRODUCT_NAME }}} - - - -#if BRAINPOP + + + + #if BRAINPOP -#endif + #endif - + + + + + Vault Games Library + + Field Day presents the largest collection of + FREE + learning games on the web. + + OPEN VAULT +
-
+
- -
+ +
-
-
-
+
+
+