Skip to content

Commit

Permalink
Merge pull request #9 from fielddaylab/staging
Browse files Browse the repository at this point in the history
Added Vault Dropdown ⬇️
  • Loading branch information
mrdavidgagnon authored Dec 18, 2024
2 parents 62e24ec + ecaff03 commit 20149dc
Show file tree
Hide file tree
Showing 21 changed files with 459 additions and 87 deletions.
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "Assets/WebGLTemplates/FloatingDropdown"]
path = Assets/WebGLTemplates/FloatingDropdown
url = https://github.com/fielddaylab/FloatingDropdown.git
8 changes: 8 additions & 0 deletions Assets/JSPlugins.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 33 additions & 0 deletions Assets/JSPlugins/VaultDropdownToggle.cs
Original file line number Diff line number Diff line change
@@ -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;
}
}
11 changes: 11 additions & 0 deletions Assets/JSPlugins/VaultDropdownToggle.cs.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions Assets/JSPlugins/vault-floating-dropdown.jslib
Original file line number Diff line number Diff line change
@@ -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>")
}
},
});
32 changes: 32 additions & 0 deletions Assets/JSPlugins/vault-floating-dropdown.jslib.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions Assets/Prefabs/_System/Boot.prefab
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion Assets/Scenes/MainScene.unity
Original file line number Diff line number Diff line change
Expand Up @@ -11035,7 +11035,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
Expand Down
8 changes: 8 additions & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
public/*
37 changes: 37 additions & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown/README.md
Original file line number Diff line number Diff line change
@@ -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">
...

```

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 37 additions & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js
Original file line number Diff line number Diff line change
@@ -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);
}
7 changes: 7 additions & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown/index.js.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

109 changes: 109 additions & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 13 additions & 0 deletions Assets/WebGLTemplates/FieldDay/FloatingDropdown/template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template id="floating-dropdown">
<div id="header">
<slot name="header"><h2>Header</h2></slot>
</div>
<div id="dropdown">
<p class="content"><slot name="desc">Description Here</slot></p>
<a href="https://vaultlearninggames.org/" target="_blank" class="content">
<button id="vault-button">
<slot name="button-label">Press Me</slot>
</button>
</a>
</div>
</template>

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 20149dc

Please sign in to comment.