repository·master·Indexed 21 days ago
https://github.com/ronenness/rpguiA lightweight, CSS-driven framework for building old-school RPG-style user interfaces for web games. RPGUI allows developers to create game GUIs using standard HTML and predefined CSS classes for containers, sliders, progress bars, and 8-bit style aesthetics without external dependencies. Version 1.0.3 includes helper functions for dynamic element creation and value manipulation via the RPGUI object.
RPGUI provides a comprehensive CSS-driven system for game interfaces, including:
<select>) and listboxes.All RPGUI-related elements must be contained within a div that has the rpgui-content class. This class sets the global RPGUI rules, including font styles and cursor behaviors. Elements outside this container will not receive RPGUI styling.
<div class="rpgui-content">
<!-- All RPGUI elements must go here -->
</div><div class="rpgui-content">
<!-- rpgui goes here -->
</div>Both dropdowns and lists are created using <select> elements with <option> tags.
rpgui-dropdown class to the <select> tag.rpgui-list class to the <select> tag (use the size attribute to define the number of visible rows).Important: Once the page is loaded and the RPGUI elements are generated, you cannot add new <option> elements to them dynamically via standard DOM manipulation.
<!-- Dropdown -->
<select class="rpgui-dropdown">
<option value="option1">option1</option>
</select>
<!-- List -->
<select class="rpgui-list" size="5">
<option value="option1">option1</option>
</select>The easiest way to customize the look of RPGUI is to replace the existing images in the dist/img/ folder. The filenames are descriptive and correspond to the UI elements they represent.
Note that RPGUI is not designed as a highly flexible library for deep structural changes; to modify the CSS rules or JavaScript logic, you must edit the source files directly.
If you are using Angular, you must include the RPGUI CSS in your angular.json assets and styles arrays to ensure the styles are loaded correctly.
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"dist/rpgui.css"
],
"scripts": []Create a styled button by placing a <p> tag inside a <button> and adding the rpgui-button class. Use the golden class for a fancier version.
<button class="rpgui-button" type="button"><p>Click me!</p></button>Both require an <input> tag and a following <label> tag to function correctly. The RPGUI implementation hides the actual input and styles the label based on the input state.
<input class="rpgui-checkbox" type="checkbox"><label>Label text</label><input class="rpgui-radio" type="radio" value="val"><label>Label text</label>You can use the golden class on either for a fancier style.
<button class="rpgui-button"><p>Click me!</p></button>
<input class="rpgui-checkbox" type="checkbox"><label>Checkbox label</label>
<input class="rpgui-radio" type="radio" value="v"><label>Radio label</label>To build the distribution files, you must first install the npm dependencies and then run the gulp build task.
On Unix-like systems (macOS/Linux):
npm installgulp distOn Windows:
npm installnode_modules\.bin\gulp distnpm install
gulp distA rpgui-container acts as a window or form to hold GUI elements. You should place all your elements inside these containers. RPGUI provides several built-in frame styles:
framed: Default grey frame with orange borders.framed-golden: Golden frame with a brown background.framed-golden-2: Brighter golden frame with smoother borders.framed-grey: A grey frame, ideal for nesting as an internal container within a larger framed container.To make a container movable like a window, add the rpgui-draggable class. Note that dragging must be initiated by grabbing the container div itself, not the elements inside it.
<div class="rpgui-content">
<!-- default frame -->
<div class="rpgui-container framed"></div>
<!-- golden frame -->
<div class="rpgui-container framed-golden"></div>
<!-- draggable container -->
<div class="rpgui-container rpgui-draggable"></div>
</div>To use RPGUI, you must include the CSS and JavaScript files from the dist/ directory in your HTML <head>.
Important: You must also ensure the img directory from the dist/ folder is included in your project structure, as the framework relies on these image resources for its styling and icons.
<link href="dist/rpgui.css" rel="stylesheet" type="text/css" >
<script src="dist/rpgui.js"></script>Create a styled range input by using an <input type="range"> with the rpgui-slider class. You can also use the golden class for a fancier style.
<input class="rpgui-slider" type="range" min="0" max="10" value="8">
<input class="rpgui-slider golden" type="range" min="0" max="10" value="8">Progress bars (useful for health/mana bars) are created using a div with the rpgui-progress class. They default to purple, but you can use red, green, or blue classes.
Note: Progress bars use a value range from 0.0 to 1.0. Use RPGUI.set_value() to update them.
<div id="red-bar" class="rpgui-progress red"></div>
<script>
// Set the bar to 50% full
RPGUI.set_value(document.getElementById("red-bar"), 0.5);
</script><input class="rpgui-slider" type="range" min="0" max="10" value="8">
<div class="rpgui-progress red"></div>While most RPGUI elements are styled via CSS classes on standard HTML elements, the RPGUI object provides helper functions for dynamic creation and reliable value manipulation.
RPGUI.create(element, type): Dynamically transforms a base HTML element into an RPGUI element after the page has loaded.RPGUI.set_value(element, value): The most reliable way to set an element's value. It handles different input types (e.g., .checked for checkboxes vs .value for text) and manually triggers the onchange event.RPGUI.get_value(element): Retrieves the current value of an RPGUI element.// Create a dropdown from a <select> tag
var select = document.getElementById("some_id");
RPGUI.create(select, "dropdown");
// Set a value reliably (triggers onchange)
RPGUI.set_value(select, "option1");
// Get a value
var val = RPGUI.get_value(select);