{"id":19564271,"url":"https://github.com/ronenness/rpgui","last_synced_at":"2025-10-06T02:53:41.615Z","repository":{"id":39459457,"uuid":"48916085","full_name":"RonenNess/RPGUI","owner":"RonenNess","description":"Lightweight framework for old-school RPG GUI in web!","archived":false,"fork":false,"pushed_at":"2023-10-08T19:26:57.000Z","size":2205,"stargazers_count":913,"open_issues_count":7,"forks_count":78,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-09-23T07:16:12.690Z","etag":null,"topics":["css","game-development","gamedev","html","javascript","ui"],"latest_commit_sha":null,"homepage":"http://ronenness.github.io/RPGUI/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RonenNess.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-02T16:33:40.000Z","updated_at":"2025-09-14T13:43:39.000Z","dependencies_parsed_at":"2024-06-21T03:54:43.345Z","dependency_job_id":"7aa47592-76cb-4927-9659-44121cfebe16","html_url":"https://github.com/RonenNess/RPGUI","commit_stats":{"total_commits":56,"total_committers":4,"mean_commits":14.0,"dds":0.1964285714285714,"last_synced_commit":"538141d9c96d369e2bf34dc27c9e399ef03d4b2a"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/RonenNess/RPGUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonenNess%2FRPGUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonenNess%2FRPGUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonenNess%2FRPGUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonenNess%2FRPGUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RonenNess","download_url":"https://codeload.github.com/RonenNess/RPGUI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonenNess%2FRPGUI/sbom","scorecard":{"id":122630,"data":{"date":"2025-08-11","repo":{"name":"github.com/RonenNess/RPGUI","commit":"048859e6e1a73bd8f5615555609db098beba4e9c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 1/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE.txt:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-16T02:51:28.242Z","repository_id":39459457,"created_at":"2025-08-16T02:51:28.242Z","updated_at":"2025-08-16T02:51:28.242Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278551493,"owners_count":26005388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","game-development","gamedev","html","javascript","ui"],"created_at":"2024-11-11T05:21:08.920Z","updated_at":"2025-10-06T02:53:41.586Z","avatar_url":"https://github.com/RonenNess.png","language":"JavaScript","readme":"![Israel](We_stand_with_Israel.jpg \"Israel\")\n\nIsrael is under a brutal attack from Gaza on multiple fronts. \nHundreds of innocent civilians were murdered and kidnapped from their own homes. Hundreds are still missing.\n\nI won't show any gore and horrific photos here. But here's [some more information](https://www.youtube.com/watch?v=NCUsb621ELE).\n\nPlease support Israel in these dark times.\n\n# RPGUI\nLightweight framework for old-school RPG GUI in web!\n\n[Live examples here](http://ronenness.github.io/RPGUI/)\n\n## Table of Contents\n\n- [What is it?](#what-is-it)\n- [Key Features](#key-features)\n- [How to use](#how-to-use)\n- [Angular users](#angular-users)\n- [How to tweak](#how-to-tweak)\n- [License](#license)\n- [Contact Me](#contact-me)\n\n## What is it?\nThis framework provide out-of-the-box GUI for web games with old-school RPG style.\nOnce including this lib all you need to do is start adding regular html elements with RPGUI classes, and RPGUI will do all the rest!\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/screenshot.jpg)\n(Image is slightly outdated.)\n\n## Key Features\nThe following are the key features of RPGUI:\n\n- Using RPGUI don't require coding at all! Just using css classes.\n- A complete and whole CSS system that will cover most HTML elements.\n- Containers with several type of frames.\n- Dragging functionality.\n- Beautiful sliders and progress bars.\n- Customized cursors with 8-bit style.\n- A collection of build-in icons for rpgs.\n- Neat checkboxes and Radio buttons.\n- Styled buttons.\n- Sophisticated dropdown widget (based on \u0026lt;select\u0026gt;).\n- Pretty listbox (based on \u0026lt;select\u0026gt;).\n- Very easy to use. Create game GUI in seconds with only plain html code.\n- No dependencies, works right out of the box!\n- Very lightweight - just 25kb of css/js, + 1.35Mb of resources (images).\n\nRPGUI should work on all modern browsers, and its tested and confirmed on Chrome, FireFox, Opera, and Internet Explorer edge*.\n\n#### A word about IE\n\nOn IE Edge some minor things don't work properly, like cursors (IE demand full path instead of relative path), blurry instead of pixelated pictures (IE don't let you choose pictures magnifier filter) and other minor things.\nI guess some of it can be fixed with some extra css rules (and maybe extra set of high-res textures for IE), but I chose not to go that extra mile just for IE.\n\nAnyway if you develop a web game and want full IE support, these things will be the least of your problems...\n\n## How to use\n\nTo use RPGUI you only need to include the css and js files from the dist/ folder (make sure you include the 'img' dir as well).\nInclude the files from the html header, like this:\n\n```html\n\u003clink href=\"dist/rpgui.css\" rel=\"stylesheet\" type=\"text/css\" \u003e\n\u003cscript src=\"dist/rpgui.js\"\u003e\u003c/script\u003e\n```\n\n**The best way to understand PRGUI is to look at the included example and just copy their HTML.** \nBut if you prefer reading material, here's a tutorial that explains about the basic elements of RPGUI and how to use them.\n\n## Angular users\n\nIf you are using Angular you may want to include following snippet to your `angular.json`.\n\n```json\n\"assets\": [\n  \"src/favicon.ico\",\n  \"src/assets\"\n],\n\"styles\": [\n  \"src/styles.css\",\n  \"dist/rpgui.css\"\n],\n\"scripts\": []\n```\n\n### RPGUI Tutorial\n\nRPGUI is mainly CSS rules with some background JavaScript code to support some extra functionality.\n\nMost of the RPGUI elements are just plain HTML elements with RPGUI classes, but some elements are more complicated and are generated at runtime by the RPGUI JavaScript.\n\nWeather its a simple element or a complex one, all RPGUI elements are created by adding css class to base elements and you shouldn't use any code to create elements (unless you need to create them dynamically after page load).\nAll JavaScript events should work normally on RPGUI elements, and you should get / set elements value in the same way you would with normal HTML elements.\n\n### Helper functions\n\nThe following are few helper functions you can use with RPGUI. They are not mandatory, but useful.\n\n##### RPGUI.create\n\nThis function is used to create RPGUI elements dynamically, after page is loaded.\nIt takes a single base html element, and the RPGUI element you want to make out of it. For example:\n\n```javascript\n// will create a dropdown RPGUI element from a \u003cselect\u003e tag with id some_id\nvar select = document.getElementById(\"some_id\");\nRPGUI.create(select, \"dropdown\");\n```\n\n##### RPGUI.set_value\n\nThis is the most sure way to set the value of any RPGUI element. As mentioned before, RPGUI elements act like regular HTML elements, but even with plain HTML not every element is set in the same way.\nFor example, a checkbox value is set with \"elem.checked = true;\", while other input fields are set with \"elem.value = 'something';\".\n\nThis function gets the HTML element you want to set and a new value, and set it accordingly to its type. In addition it fires the \"onchange\" event which is not always triggered when setting values in JavaScript.\n\nIn short, whenever you want to set the value of an RPGUI element, use this function. For example:\n\n```javascript\n// will set the value of \"some_id\" to \"option1\"\nvar select = document.getElementById(\"some_id\");\nRPGUI.set_value(select, \"option1\");\n```\n\n##### RPGUI.get_value\n\nJust like RPGUI.set_value(), this function is used to get the value of any RPGUI element. For example:\n\n```javascript\n// will alert the value of \"some_id\" (a select tag)\nvar select = document.getElementById(\"some_id\");\nalert(RPGUI.get_value(select));\n```\n\n#### RPGUI elements\n\nNow its time to go over all the RPGUI elements and how to use them.\n\n### rpgui-content\n\nThis class is for a div element and set global RPGUI rules.\nEverything RPGUI-related must be inside a div with this class. For example:\n\n```html\n\u003cdiv class=\"rpgui-content\"\u003e\n\t\t\u003c!-- rpgui goes here --\u003e\n\u003c/div\u003e\n```\n\n**Even if not specified, all the html snippets in this tutorial from this point are assumed to be inside rpgui-content.**\n\nNote that this class already change some element styling and change the cursor, so if you want parts of your page to be without RPGUI style don't put them in the content div.\n\n### rpgui-container\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/frames.jpg)\n\nContainer is like a form or a \"window\" with gui elements.\nEven though everything is inside the rpgui-content div, you should put all your RPGUI elements inside rpgui-containers.\n\nA basic rpgui-container without any style or background is defined like this:\n\n```html\n\u003cdiv class=\"rpgui-container\"\u003e\n\t\u003c!-- rpgui elements goes here --\u003e\n\u003c/div\u003e\n```\n\n#### Frames (framed, framed-golden, framed-golden-2, framed-grey)\n\nrpgui-containers come with graphical frames, as seen in the example picture.\nBelow is the different frames you can use for containers:\n\n```html\n\u003c!-- all rpgui elements must be inside the rpgui-content --\u003e\n\u003cdiv class=\"rpgui-content\"\u003e\n\t\u003c!-- default frame, grey with orange borders --\u003e\n\t\u003cdiv class=\"rpgui-container framed\"\u003e\n\t\u003c/div\u003e\n\n\t\u003c!-- golden frame, with brown background --\u003e\n\t\u003cdiv class=\"rpgui-container framed-golden\"\u003e\n\t\u003c/div\u003e\n\n\t\u003c!-- brighter golden frame, with smoother borders --\u003e\n\t\u003cdiv class=\"rpgui-container framed-golden-2\"\u003e\n\t\u003c/div\u003e\n\n\t\u003c!-- grey frame. this is mostly fitting as internal container inside a \"rpgui-container framed\" div --\u003e\n\t\u003cdiv class=\"rpgui-container framed-grey\"\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo see all the frames take a look at the containers example, or play with them yourself in an html file.\n\n### rpgui-draggable\n\nAdd this class to any containers you want the user to be able to drag and drop.\nOnce a container has this class it will be moveable like a window form inside the page.\n\nNote that to drag you need to grab on the div itself and not elements on it.\n\nTo make a container draggable:\n\n```html\n\u003cdiv class=\"rpgui-container rpgui-draggable\"\u003e\n\t\u003c!-- rpgui elements goes here --\u003e\n\u003c/div\u003e\n```\n\n(rpgui-draggable is not just for containers, it can work on any element)\n\n### paragraphs, links, headers, labels and span\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/paragraph.jpg)\n\nAll paragraphs and header elements are automatically styled when inside the rpgui-content.\nThe default font is imported from google fonts (check out imports.css for more info), and all text is white with black outline.\n\nYou don't need to do anything special to use these elements, just put them inside the rpgui-content div:\n\n```html\n\u003cdiv class=\"rpgui-content\"\u003e\n\t\t\u003cp\u003eThis text will have the RPGUI style!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### input \u0026 textarea\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/input.jpg)\n\nSimilar to paragraphs, these elements are styled automatically when inside the rpgui-content. Use them as you would with normal HTML input and textarea elements.\n\n### rpgui-slider\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/sliders.jpg)\n\nA rpgui-slider is like an HTML range input but with RPGUI style. \nTo create an rpgui-slider just create an input element with type=\"range\" and class=\"rpgui-slider\":\n\n```html\n\u003cinput class=\"rpgui-slider\" type=\"range\" min=\"0\" max=\"10\" value=\"8\"\u003e\n```\n\nIf you try and look at the HTML you'd see RPGUI hide the original input element and replaced it with couple of elements that were created at runtime.\nThis should not bother you when using the slider. You can set/get its value regulary and register to any events that interest you.\n\n##### rpgui-slider golden\n\nThere's another variation of the slider with a more fancy style. To use it add the 'golden' class:\n\n```html\n\u003cinput class=\"rpgui-slider golden\" type=\"range\" min=\"0\" max=\"10\" value=\"8\"\u003e\n```\n\n### rpgui-progress\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/bars.jpg)\n\nA rpgui-progress is like a progress bar that can fills up. Or more useful for games, an health/mana bar.\nTo create a progress bar just create a div with the class \"rpgui-progress\":\n\n```html\n\u003cdiv class=\"rpgui-progress\"\u003e\u003c/div\u003e\n```\n\nBy default it will have purple color, but you have 3 other colors to use - red, green and blue:\n\n```html\n\u003clabel\u003eRed bar:\u003c/label\u003e\n\u003cdiv class=\"rpgui-progress red\"\u003e\u003c/div\u003e\n\n\u003clabel\u003eBlue bar:\u003c/label\u003e\n\u003cdiv class=\"rpgui-progress blue\"\u003e\u003c/div\u003e\n\n\u003clabel\u003eGreen bar:\u003c/label\u003e\n\u003cdiv class=\"rpgui-progress green\"\u003e\u003c/div\u003e\n```\n\nWhen the progress bar is created, it starts as full. To set its value you should use the RPGUI.set_value() function and give values that range from 0.0 to 1.0.\nFor example:\n\n```html\n\u003cdiv id=\"red-bar\" class=\"rpgui-progress red\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n\t// set the red bar into 50% full\n\tvar progress = document.getElementById(\"red-bar\");\n\tRPGUI.set_value(progress, 0.5);\n\u003c/script\u003e\n```\n\n### rpgui-icon\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/icons.jpg)\n\nThis class will create a simple square icon. There are 15 built-in icons in RPGUI, but its really easy to create new ones (check out icon.css file for more info).\nHere's how to use the icons:\n\n```html\n\t\u003cdiv class=\"rpgui-icon sword\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon shield\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon exclamation\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon potion-red\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon potion-green\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon potion-blue\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon weapon-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon shield-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon armor-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon helmet-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon ring-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon potion-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon magic-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon shoes-slot\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"rpgui-icon empty-slot\"\u003e\u003c/div\u003e\n```\n\n### rpgui-dropdown\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/dropdown.jpg)\n\nThis class is used for \u0026lt;select\u0026gt; with \u0026lt;option\u0026gt; tags, and it creates a dropdown select widget with the RPGUI design.\nTo use it create a \u0026lt;select\u0026gt; tag with \u0026lt;option\u0026gt;s inside, and add the \"rpgui-dropdown\" class to the \u0026lt;select\u0026gt; parent tag.\n\nFor example:\n\n```html\n\u003cselect class=\"rpgui-dropdown\"\u003e\n\t\u003coption value=\"option1\"\u003eoption1\u003c/option\u003e\n\t\u003coption value=\"option2\"\u003eoption2\u003c/option\u003e\n\t...\n\u003c/select\u003e\n```\n\nNote that once the page is fully loaded and the rpgui dropdown is created, you can no longer add new options to it.\nTo use the dropdown just use the \u0026lt;select\u0026gt; tag as you would normally do, but remember you can also use the RPGUI.set_value() and RPGUI.get_value() if you are uncertain.\n\n### rpgui-list\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/list.jpg)\n\nThis class is used for \u0026lt;select\u0026gt; with \u0026lt;option\u0026gt; tags, and it creates a list select widget with the RPGUI design.\nTo use it create a \u0026lt;select\u0026gt; tag with \u0026lt;option\u0026gt;s inside, and add the \"rpgui-list\" class to the \u0026lt;select\u0026gt; parent tag.\n\nFor example:\n\n```html\n\u003cselect class=\"rpgui-list\" size=\"5\"\u003e\n\t\u003coption value=\"option1\"\u003eoption1\u003c/option\u003e\n\t\u003coption value=\"option2\"\u003eoption2\u003c/option\u003e\n\t...\n\u003c/select\u003e\n```\n\nNote that once the page is fully loaded and the rpgui list is created, you can no longer add new options to it.\nTo use the dropdown just use the \u0026lt;select\u0026gt; tag as you would normally do, but remember you can also use the RPGUI.set_value() and RPGUI.get_value() if you are uncertain.\n\n### rpgui-button\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/buttons.jpg)\n\nrpgui-button is a styled Button with text on it. To use it, create a button with paragraph inside and give the button the \"rpgui-button\" class. For example:\n\n```html\n\u003cbutton class=\"rpgui-button\" type=\"button\"\u003e\u003cp\u003eClick me!\u003c/p\u003e\u003c/button\u003e\n```\n\n##### golden button\n\nThere's an alternative fancier button style you can use with the golden class:\n\n```html\n\u003cbutton class=\"rpgui-button golden\" type=\"button\"\u003e\u003cp\u003eClick me golden!\u003c/p\u003e\u003c/button\u003e\n```\n\nThis behaves like a regular rpgui-button but with a different graphics.\n\n### hr\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/hr.jpg)\n\nRPGUI gives automatic style to any \u0026lt;hr\u0026gt; tag inside the rpgui-content. You can use \u0026lt;hr\u0026gt; tags as a nice method to separate parts of a container.\n\nIn addition, there's a fancier version of an \u0026lt;hr\u0026gt; you can use with the \"golden\" class:\n\n```html\n\u003chr class=\"golden\"\u003e\n```\n\n### rpgui-checkbox\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/checkbox.jpg)\n\nrpgui-checkbox are Checkboxes with a nice RPGUI design. To use them create a checkbox input tag with a label after it (it won't work without the label!) and give it the \"rpgui-checkbox\" class.\nFor example:\n\n```html\n\u003cinput class=\"rpgui-checkbox\" type=\"checkbox\"\u003e\u003clabel\u003eThis is checkbox.\u003c/label\u003e\n```\n\nThat the RPGUI implement the checkbox by hiding the original checkbox input and link the \u0026lt;label\u0026gt; style to its state. Using JavaScript events, clicking the label will change the checkbox state.\n\nYou can use the checkbox just as you would with a regular checkbox element (don't worry about the label thing), or use RPGUI.set_value() and RPGUI.get_value() if you are unsure.\n\n#### rpgui-checkbox golden\n\nThere's a golden variation to the checkbox you can use for fancier graphics:\n\n```html\n\u003cinput class=\"rpgui-checkbox golden\" type=\"checkbox\"\u003e\u003clabel\u003eThis is golden checkbox.\u003c/label\u003e\n```\n\n### rpgui-radio\n\n![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/for_readme/radio.jpg)\n\nrpgui-radio are radio buttons with a nice RPGUI design. To use them create a radio input tag with a label after it (it won't work without the label!) and give it the \"rpgui-radio\" class.\nFor example:\n\n```html\n\u003cinput class=\"rpgui-radio\" type=\"radio\" value=\"some val\"\u003e\u003clabel\u003eThis is radio button!\u003c/label\u003e\n```\n\nThat the RPGUI implement the radio by hiding the original radio input and link the \u0026lt;label\u0026gt; style to its state. Using JavaScript events, clicking the label will change the radio state.\n\nYou can use the radio just as you would with a regular radio element (don't worry about the label thing), or use RPGUI.set_value() and RPGUI.get_value() if you are unsure.\n\n#### rpgui-radio golden\n\nThere's a golden variation to the radio you can use for fancier graphics:\n\n```html\n\u003cinput class=\"rpgui-radio golden\" type=\"radio\" value=\"some val\"\u003e\u003clabel\u003eThis is a golden radio button!\u003c/label\u003e\n```\n\n#### Cursors\n\nRPGUI comes with few built-in cursors you can use. To set an alternative cursor for an element, add one of the following css classes to it:\n\n- rpgui-cursor-default\n- rpgui-cursor-point\n- rpgui-cursor-select\n- rpgui-cursor-grab-open\n- rpgui-cursor-grab-close\n\n#### Disabled elements\n\nRPGUI supports the \"disabled\" attribute.\nYou can set any element to be disabled just as you would with plain html elements, and it will be greyed out and impossible to set.\n\n## How to Tweak\n\nTo change RPGUI into your own theme the easiest thing to do is to replace the images in dist/img/ folder.\nThe name of the files should be pretty easy to understand and change.\n\nTo change the css rules / JavaScript itself you will need to edit the source files. RPGUI wasn't originally planned to be a distributed lib (it was taken out of a hobby project) and as such its not written in the most flexible / generic way.\n\nFeel free to create alternatives of RPGUI and publish them as different themes.\n\n## How to build\n\nFirst install npm modules:\n\n```\nnpm install\n```\n\nThen use gulp:\n\n```\ngulp dist\n```\n\nOr on windows:\n\n```\nnode_modules\\.bin\\gulp dist\n```\n\n## Changelog\n\n### 1.03\n\n- Added full support in \"disabled\" attribute.\n- New grabbing cursor.\n- Fixed some font size problems.\n- Improved buttons css.\n\n### 1.02\n\n- Switched to gulp and scss.\n- Some sizing modification.\n- Fixed dropdown when nothing is selected.\n- Improved containers border slice.\n- Fixed bug in sliders min val.\n- Added \"disabled\" css.\n- Added \"rotated\" css.\n\n### 1.01\n\n- Updated checkbox and buttons images.\n- Code refactoring - init queue and global anonymous function for namespace.\n- Added option to register to RPGUI.on_load()\n- Bug fix when trying to create empty list.\n\n## Credits\n\n- PRGUI default theme uses the public-domain graphics made by Buch, aka Michele Bucelli ()http://opengameart.org/users/buch).\n- Special thanks to titoasty (https://github.com/titoasty) that contributed a lot to this lib.\n\t\n## License\n\nRPGUI is distributed under the zlib-license, and is absolutely free for use in any purpose (personal, educational, commercial, etc..).\nSee LICENSE.txt for more info.\n\n## Contact Me\n\nFor issues / bugs use the Report Issue button.\nFor anything else, feel free to contact me: ronenness@gmail.com.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronenness%2Frpgui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fronenness%2Frpgui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronenness%2Frpgui/lists"}