Simple reusable web component for web games linking to the Vault
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:
- The HTML template used to display the component on the dom
- the Unity javascript plugin to be used to remove the button after exiting the title screen.
This example illustrates how this component can be added to a project
<script src="FloatingDropdown/index.js"></script>This element uses slots to make the component more flexible. If you are unfamiliar with slots, you can read more here
Example template use:
<body>
<floating-dropdown>
<style>
/* custom styles here */
</style>
<img slot="header" src="FloatingDropdown/vault-library-logo.png" alt="Vault Games Library">
<span slot="desc" class="content">
Field Day presents the largest collection of
<span style="color:#00ECD0">FREE</span>
learning games on the web.
</span>
<span slot="button-label" class="content">
OPEN VAULT
</span>
</floating-dropdown>
<div id="BrainPOPsnapArea">
...The Vault component is designed to be adjusted across different games. Using a custom style tag (see example from step 1) you can easily modify these parameters with the following custom properties:
--left-offset : Controls the horizontal position of the dropdown. The dropdown is controlled by an offset from the left of the screen that uses a "" value.
--custom-font : Defines the value used for the font-family parameter of the body of the dropdown. Accepts any "" value
--scale-factor : Allows the size of the entire dropdown to be altered. Accepts any "" value.
Example:
floating-dropdown {
--custom-font: "brandon-grotesque";
--left-offset: 65%;
--scale-factor: 0.9;
}