-### WinDo-7
-a web-based todo app with windows 7 theme that could somehow help you get productive.
+### QuestLog
+a web-based todo app with RPG theme that might gonna help you get productive.
-windows 7 theme: [khang_nd/7.css](https://github.com/khang-nd/7.css)
+RPG theme: [RonenNess/RPGUI](https://github.com/RonenNess/RPGUI)
_(under development...)_
\ No newline at end of file
-CREATE DATABASE IF NOT EXISTS windo7;
+CREATE DATABASE IF NOT EXISTS QuestLog;
-USE windo7;
+USE QuestLog;
CREATE TABLE users (
- user_id INT(11) NOT NULL AUTO_INCREMENT,
+ user_id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(20) NOT NULL,
email VARCHAR(30) NOT NULL,
pwd VARCHAR(255) NOT NULL,
);
CREATE TABLE tasks (
- task_id INT(11) NOT NULL AUTO_INCREMENT,
+ task_id INT(11) NOT NULL AUTO_INCREMENT,
task VARCHAR(255) NOT NULL,
created_datetime DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
user_id int(11) NOT NULL,
--- /dev/null
+RPGUI (RPG gui for web games) is distributed with the zlib-license:
+
+/*
+ This software is provided 'as-is', without any express or implied
+ warranty. In no event will the authors be held liable for any damages
+ arising from the use of this software.
+
+ Permission is granted to anyone to use this software for any purpose,
+ including commercial applications, and to alter it and redistribute it
+ freely, subject to the following restrictions:
+
+ 1. The origin of this software must not be misrepresented; you must not
+ claim that you wrote the original software. If you use this software
+ in a product, an acknowledgment in the product documentation would be
+ appreciated but is not required.
+ 2. Altered source versions must be plainly marked as such, and must not be
+ misrepresented as being the original software.
+ 3. This notice may not be removed or altered from any source distribution.
+
+ Ronen Ness
+ ronenness@gmail.com
+
+*/
\ No newline at end of file
--- /dev/null
+# RPGUI
+Lightweight framework for old-school RPG GUI in web!
+
+## Live example
+
+Live examples can be found [here](http://ronenness.github.io/RPGUI/).
+
+## What is it?
+This framework provide out-of-the-box GUI for web games with old-school RPG style.
+Once including this lib all you need to do is start adding regular html elements with RPGUI classes, and RPGUI will do all the rest!
+
+
+(Image is slightly outdated.)
+
+**RPGUI is a css+js framework for client side only, you don't need to require it on node.js side.**
+
+## Key Features
+The following are the key features of RPGUI:
+
+- Using RPGUI don't require coding at all! Just using css classes.
+- A complete and whole CSS system that will cover most HTML elements.
+- Containers with several type of frames.
+- Dragging functionality.
+- Beautiful sliders and progress bars.
+- Customized cursors with 8-bit style.
+- A collection of build-in icons for rpgs.
+- Neat checkboxes and Radio buttons.
+- Styled buttons.
+- Sophisticated dropdown widget (based on <select>).
+- Pretty listbox (based on <select>).
+- Very easy to use. Create game GUI in seconds with only plain html code.
+- No dependencies, works right out of the box!
+- Very lightweight - just ~25kb of css/js, + 1.5Mb of resources (images).
+
+RPGUI should work on all modern browsers, tested and confirmed on Chrome, FireFox, Opera, and Internet Explorer edge*.
+
+## How to use
+
+RPGUI docs can be found at the [github repo](https://github.com/RonenNess/RPGUI#rpgui), or you can watch some live example [here](http://ronenness.github.io/RPGUI/).
+
+## Credits
+
+- PRGUI default theme uses the public-domain graphics made by Buch, aka Michele Bucelli ()http://opengameart.org/users/buch).
+- Special thanks to titoasty (https://github.com/titoasty) that contributed a lot to this lib.
+
+## License
+
+RPGUI is distributed under the zlib-license, and is absolutely free for use in any purpose (personal, educational, commercial, etc..).
+See LICENSE.txt for more info.
+
+## Contact Me
+
+For issues / bugs use the Report Issue button.
+For anything else, feel free to contact me: ronenness@gmail.com.
+
+
--- /dev/null
+{
+ "name": "rpgui",
+ "version": "1.0.3",
+ "description": "Lightweight framework for old-school RPG GUI in web!",
+ "main": "",
+ "dependencies": {
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/RonenNess/RPGUI.git"
+ },
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [
+ "gui",
+ "rpg",
+ "game",
+ "interface",
+ "ui"
+ ],
+ "bugs": {
+ "url": "https://github.com/RonenNess/RPGUI/issues"
+ },
+ "author": "Ronen Ness",
+ "license": "Zlib",
+ "homepage": "http://ronenness.github.io/RPGUI/"
+}
--- /dev/null
+/*\r
+Import the font stylesheet.\r
+If not supported you can add backup via:\r
+<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>\r
+inside your html file.\r
+*/
+@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
+/**\r
+* Customized scrollbars\r
+*/
+/* to get pixelated images (nearest-neighbor filter) on all browsers */
+.rpgui-pixelated {
+ -ms-interpolation-mode: nearest-neighbor;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: -webkit-crisp-edges;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -o-crisp-edges;
+ image-rendering: pixelated; }
+
+/* unselectable text */
+.rpgui-noselect {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+
+/* center things */
+.rpgui-center {
+ text-align: center;
+ align-content: center; }
+
+/* rotate object 90 degrees */
+.rpgui-rotate-90 {
+ /* rotate 90 degrees */
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ /* rotate from center-left side */
+ -ms-transform-origin: 0% 50%;
+ /* IE 9 */
+ -webkit-transform-origin: 0% 50%;
+ /* Chrome, Safari, Opera */
+ transform-origin: 0% 50%; }
+
+/**\r
+* Styling for buttons\r
+*/
+/* button style */
+.rpgui-button {
+ /* hide button default stuff */
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ border: none;
+ overflow: hidden;
+ outline: none;
+ /* background */
+ background: url("img/button.png") no-repeat no-repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center;
+ background-size: 100% 100%;
+ /* font size */
+ font-size: 1.0em;
+ /* default size and display */
+ max-width: 100%;
+ min-width: 140px;
+ height: 60px;
+ display: inline-block;
+ /* padding */
+ padding-left: 35px;
+ padding-right: 35px; }
+
+/* button hover */
+.rpgui-button.hover,
+.rpgui-button:hover {
+ background-image: url("img/button-hover.png"); }
+
+/* button clicked */
+.rpgui-button.down,
+.rpgui-button:active {
+ background-image: url("img/button-down.png"); }
+
+/* golden button stuff */
+.rpgui-button.golden p {
+ display: inline-block; }
+
+/* golden button style */
+.rpgui-button.golden {
+ /* hide button default stuff */
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ border: none;
+ overflow: hidden;
+ outline: none;
+ /* background */
+ background: url("img/button-golden.png") no-repeat no-repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center;
+ background-size: 100% 80%;
+ /* default size and display */
+ max-width: 100%;
+ min-width: 140px;
+ height: 60px;
+ display: inline-block;
+ /* padding */
+ padding-top: 5px;
+ padding-left: 35px;
+ padding-right: 35px;
+ overflow: visible; }
+
+/* button hover */
+.rpgui-button.golden.hover,
+.rpgui-button.golden:hover {
+ background-image: url("img/button-golden-hover.png"); }
+
+/* button clicked */
+.rpgui-button.golden.down,
+.rpgui-button.golden:active {
+ background-image: url("img/button-golden-down.png"); }
+
+.rpgui-button.golden:before {
+ white-space: nowrap;
+ display: inline-block;
+ content: "";
+ width: 34px;
+ display: block;
+ height: 110%;
+ background: transparent url("img/button-golden-left.png") no-repeat right center;
+ background-size: 100% 100%;
+ margin: 0 0 0 0;
+ left: 0px;
+ float: left;
+ margin-left: -46px;
+ margin-top: -5%; }
+
+.rpgui-button.golden:after {
+ white-space: nowrap;
+ display: block;
+ content: "";
+ width: 34px;
+ height: 110%;
+ background: transparent url("img/button-golden-right.png") no-repeat left center;
+ background-size: 100% 100%;
+ margin: 0 0 0 0;
+ right: 0px;
+ float: right;
+ margin-right: -46px;
+ margin-top: -5%; }
+
+/*\r
+.rpgui-button.golden:hover:before {\r
+\r
+ background-image: url('img/button-golden-left-hover.png');\r
+}\r
+\r
+.rpgui-button.golden:hover:after {\r
+\r
+ background-image: url('img/button-golden-right-hover.png');\r
+}\r
+*/
+/**\r
+* style for checkboxes\r
+*/
+/* basic checkbox */
+.rpgui-content input[type=checkbox].rpgui-checkbox {
+ display: none; }
+
+.rpgui-content input[type=checkbox].rpgui-checkbox + label {
+ background: url("img/checkbox-off.png") no-repeat;
+ line-height: 24px;
+ display: inline-block;
+ background-size: auto 100%;
+ padding-left: 34px;
+ height: 24px;
+ margin-top: 10px;
+ margin-bottom: 10px; }
+
+.rpgui-content input[type=checkbox].rpgui-checkbox:checked + label {
+ background: url("img/checkbox-on.png") no-repeat;
+ line-height: 24px;
+ display: inline-block;
+ background-size: auto 100%;
+ padding-left: 34px;
+ height: 24px; }
+
+/* golden checkbox */
+.rpgui-content input[type=checkbox].rpgui-checkbox.golden + label {
+ background: url("img/checkbox-golden-off.png") no-repeat;
+ background-size: auto 100%; }
+
+.rpgui-content input[type=checkbox].rpgui-checkbox.golden:checked + label {
+ background: url("img/checkbox-golden-on.png") no-repeat;
+ background-size: auto 100%; }
+
+/**\r
+* global content styling\r
+*/
+/* game div with background image*/
+.rpgui-content {
+ padding: 0 0 0 0;
+ margin: 0 0 0 0;
+ width: 100%;
+ height: 100%;
+ left: 0px;
+ top: 0px;
+ position: fixed;
+ overflow: hidden;
+ font-size: 0.8em; }
+
+/* general rules to apply on anything inside the content */
+.rpgui-content * {
+ /* remove outline effect for input elements etc */
+ outline: none;
+ /* prevent dragging */
+ user-drag: none;
+ -webkit-user-drag: none;
+ /* prevent text selecting */
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ /* pixelated enlargement filter (to keep the pixel-art style when enlarging pictures) */
+ -ms-interpolation-mode: nearest-neighbor;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: -webkit-crisp-edges;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -o-crisp-edges;
+ image-rendering: pixelated;
+ /* default font */
+ font-family: 'Press Start 2P', cursive; }
+
+/**\r
+* customized divs (containers) and framed objects (background and frame image).\r
+*/
+/* game div without background image*/
+.rpgui-container {
+ /* position style and default z */
+ position: fixed;
+ z-index: 10;
+ overflow: show; }
+
+/* game div with background image*/
+.rpgui-container.framed {
+ /* border */
+ border-style: solid;
+ border-image-source: url("img/border-image.png");
+ border-image-repeat: repeat;
+ border-image-slice: 6 6 6 6;
+ border-image-width: 18px;
+ border-width: 15px;
+ padding: 12px;
+ /* internal border */
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ /* background */
+ background: url("img/background-image.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* game div with golden background image*/
+.rpgui-container.framed-golden {
+ /* border */
+ border-style: solid;
+ border-image-source: url("img/border-image-golden.png");
+ border-image-repeat: repeat;
+ border-image-slice: 4 4 4 4;
+ border-image-width: 18px;
+ border-width: 15px;
+ padding: 12px;
+ /* internal border */
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ /* background */
+ background: url("img/background-image-golden.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* game div with golden2 background image*/
+.rpgui-container.framed-golden-2 {
+ /* border */
+ border-style: solid;
+ border-image-source: url("img/border-image-golden2.png");
+ border-image-repeat: repeat;
+ border-image-slice: 8 8 8 8;
+ border-image-width: 18px;
+ border-width: 15px;
+ padding: 12px;
+ /* internal border */
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ /* background */
+ background: url("img/background-image-golden2.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* game div with soft grey background image*/
+.rpgui-container.framed-grey {
+ position: relative;
+ /* border */
+ border-style: solid;
+ border-image-source: url("img/border-image-grey.png");
+ border-image-repeat: repeat;
+ border-image-slice: 3 3 3 3;
+ border-image-width: 7px;
+ border-width: 7px;
+ padding: 12px;
+ /* internal border */
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ /* background */
+ background: url("img/background-image-grey.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/**\r
+* different cursor graphics\r
+*/
+/* default cursor important */
+/* this rule is for when you specifically request this cursor class */
+.rpgui-cursor-default {
+ cursor: url("img/cursor/default.png"), auto !important; }
+
+/* default cursor, not important, for all elements without any other rule. */
+.rpgui-content,
+label {
+ cursor: url("img/cursor/default.png"), auto; }
+
+/* pointer / hand cursor important */
+/* this rule is for when you specifically request this cursor class */
+.rpgui-cursor-point,
+.rpgui-cursor-point * {
+ cursor: url("img/cursor/point.png") 10 0, auto !important; }
+
+/* pointer / hand cursor, not important, for all elements that have pointer by-default */
+.rpgui-content a,
+.rpgui-content button,
+.rpgui-button,
+.rpgui-slider-container,
+.rpgui-content input[type=radio].rpgui-radio + label,
+.rpgui-list-imp,
+.rpgui-dropdown-imp,
+.rpgui-content input[type=checkbox].rpgui-checkbox + label {
+ cursor: url("img/cursor/point.png") 10 0, auto; }
+
+/* for input / text selection important */
+/* this rule is for when you specifically request this cursor class */
+.rpgui-cursor-select,
+.rpgui-cursor-select * {
+ cursor: url("img/cursor/select.png") 10 0, auto !important; }
+
+/* for input / text selection, not important, for all elements that have pointer by-default */
+.rpgui-cursor-select,
+.rpgui-content input,
+.rpgui-content textarea {
+ cursor: url("img/cursor/select.png") 10 0, auto; }
+
+/* for grabbing stuff */
+/* this rule is for when you specifically request this cursor class */
+.rpgui-cursor-grab-open,
+.rpgui-cursor-grab-open * {
+ cursor: url("img/cursor/grab-open.png") 10 0, auto !important; }
+
+/* for grabbing stuff */
+/* this rule is for when you specifically request this cursor class */
+.rpgui-cursor-grab-close,
+.rpgui-cursor-grab-close * {
+ cursor: url("img/cursor/grab-close.png") 10 0, auto !important; }
+
+/**\r
+* Customized dropdown with rpgui design.\r
+*/
+/* dropdown box implemented with list (see rpgui-dropdown.js for details) */
+/* note! this class rule affect both the dropdown header and the list elements! */
+.rpgui-dropdown-imp,
+.rpgui-dropdown {
+ /* font */
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ color: white;
+ /* default size */
+ min-height: 40px;
+ margin-top: 0px;
+ /* border */
+ border-style: solid;
+ border-width: 7px 7px 7px 7px;
+ -moz-border-image: url("img/select-border-image.png") 10% repeat repeat;
+ -webkit-border-image: url("img/select-border-image.png") 10% repeat repeat;
+ -o-border-image: url("img/select-border-image.png") 10% repeat repeat;
+ border-image: url("img/select-border-image.png") 10% repeat repeat;
+ /* background */
+ background: url("img/select-background-image.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* dropdown options list */
+ul.rpgui-dropdown-imp {
+ padding: 0 0 0 0 !important;
+ z-index: 100; }
+
+/* note! this affect only the dropdown header */
+/* shows the currently selected value from select element */
+.rpgui-content .rpgui-dropdown-imp-header {
+ color: white !important;
+ min-height: 22px !important;
+ padding: 5px 10px 0 10px !important;
+ margin: 0 0 0 0 !important;
+ position: relative !important; }
+
+/* dropdown options */
+.rpgui-dropdown-imp li {
+ /* font */
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ color: white;
+ height: 16px;
+ /* remove the dot */
+ list-style-type: none;
+ /* padding */
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-left: 6px;
+ /* background */
+ background: url("img/select-background-image.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* dropdown options hover */
+.rpgui-dropdown-imp li:hover {
+ color: yellow; }
+
+/* dropdown hover */
+.rpgui-dropdown-imp:hover {
+ color: yellow; }
+
+/**\r
+* hr styling\r
+*/
+/* rpgui hr */
+.rpgui-content hr {
+ display: block;
+ border: 0px;
+ height: 10px;
+ background: url("img/hr.png") repeat-x top left; }
+
+/* rpgui golden hr */
+.rpgui-content hr.golden {
+ display: block;
+ border: 0px;
+ height: 10px;
+ background: url("img/hr-golden.png") no-repeat top left;
+ background-size: 100% 100%; }
+
+/**\r
+* Icon styles.\r
+*/
+.rpgui-icon {
+ display: inline-block;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ width: 64px;
+ height: 64px; }
+
+.rpgui-icon.sword {
+ background-image: url("img/icons/sword.png"); }
+
+.rpgui-icon.shield {
+ background-image: url("img/icons/shield.png"); }
+
+.rpgui-icon.exclamation {
+ background-image: url("img/icons/exclamation.png"); }
+
+.rpgui-icon.potion-red {
+ background-image: url("img/icons/potion-red.png"); }
+
+.rpgui-icon.potion-green {
+ background-image: url("img/icons/potion-green.png"); }
+
+.rpgui-icon.potion-blue {
+ background-image: url("img/icons/potion-blue.png"); }
+
+.rpgui-icon.weapon-slot {
+ background-image: url("img/icons/weapon-slot.png"); }
+
+.rpgui-icon.shield-slot {
+ background-image: url("img/icons/shield-slot.png"); }
+
+.rpgui-icon.armor-slot {
+ background-image: url("img/icons/armor-slot.png"); }
+
+.rpgui-icon.helmet-slot {
+ background-image: url("img/icons/helmet-slot.png"); }
+
+.rpgui-icon.ring-slot {
+ background-image: url("img/icons/ring-slot.png"); }
+
+.rpgui-icon.potion-slot {
+ background-image: url("img/icons/potion-slot.png"); }
+
+.rpgui-icon.magic-slot {
+ background-image: url("img/icons/magic-slot.png"); }
+
+.rpgui-icon.shoes-slot {
+ background-image: url("img/icons/shoes-slot.png"); }
+
+.rpgui-icon.empty-slot {
+ background-image: url("img/icons/empty-slot.png"); }
+
+/**\r
+* input styling\r
+*/
+/* input/textarea input */
+.rpgui-content input,
+.rpgui-content textarea {
+ /* set size and colors */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 0.9em;
+ line-height: 32px;
+ background: #4e4a4e;
+ max-width: 100%;
+ width: 100%;
+ padding-left: 10px;
+ /* for ie */
+ min-height: 30px;
+ /* enable text selecting */
+ -webkit-touch-callout: text;
+ -webkit-user-select: text;
+ -khtml-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); }
+
+/* textarea extra rules */
+.rpgui-content textarea {
+ line-height: 22px;
+ padding-top: 7px;
+ height: 80px;
+ resize: none; }
+
+/* selection highlight */
+.rpgui-content input::selection,
+.rpgui-content textarea::selection {
+ background: rgba(0, 0, 0, 0.5); }
+
+.rpgui-content input::-moz-selection,
+.rpgui-content textarea::-moz-selection {
+ background: rgba(0, 0, 0, 0.5); }
+
+/* dropdown box implemented with list (see rpgui-dropdown.js for details) */
+/* note! this class rule affect both the dropdown header and the list elements! */
+.rpgui-list-imp {
+ /* font */
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ color: white;
+ /* default size */
+ min-height: 40px;
+ margin-top: 0px;
+ /* scrollers */
+ overflow-x: hidden;
+ overflow-y: scroll;
+ /* border */
+ border-style: solid;
+ border-width: 7px 7px 7px 7px;
+ -moz-border-image: url("img/select-border-image.png") 10% repeat repeat;
+ -webkit-border-image: url("img/select-border-image.png") 10% repeat repeat;
+ -o-border-image: url("img/select-border-image.png") 10% repeat repeat;
+ border-image: url("img/select-border-image.png") 10% repeat repeat;
+ /* background */
+ background: url("img/select-background-image.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* dropdown options list */
+ul.rpgui-list-imp {
+ padding: 0 0 0 0 !important;
+ z-index: 100; }
+
+/* dropdown options */
+.rpgui-list-imp li {
+ /* font */
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ color: white;
+ height: 16px;
+ margin-left: 5px !important;
+ /* remove the dot */
+ list-style-type: none;
+ /* padding */
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-left: 6px;
+ /* background */
+ background: url("img/select-background-image.png") repeat repeat;
+ background-clip: padding-box;
+ background-origin: padding-box;
+ background-position: center; }
+
+/* list options hover */
+.rpgui-list-imp li:hover {
+ color: yellow; }
+
+/* list hover */
+.rpgui-list-imp:hover {
+ color: yellow; }
+
+.rpgui-list-imp .rpgui-selected {
+ background: rgba(0, 0, 0, 0.3); }
+
+/**\r
+* Paragraphs and headers while inside an rpgui container.\r
+*/
+/* default gui header */
+.rpgui-content h1 {
+ /* color and border */
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.14em;
+ /* center text */
+ text-align: center;
+ /* padding */
+ padding: 0 0 0 0;
+ margin: 7px 7px 17px 7px; }
+
+/* default gui header2 */
+.rpgui-content h2 {
+ /* color and border */
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.25em;
+ /* center text */
+ text-align: center;
+ /* padding */
+ padding: 0 0 0 0;
+ margin: 7px 7px 17px 7px; }
+
+/* default gui header3 */
+.rpgui-content h3 {
+ /* color and border */
+ color: white;
+ font-weight: 1;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.15em;
+ text-decoration: underline;
+ /* center text */
+ text-align: center;
+ /* padding */
+ padding: 0 0 0 0;
+ margin: 7px 7px 17px 7px; }
+
+/* default gui header4 */
+.rpgui-content h4 {
+ /* color and border */
+ color: white;
+ font-weight: 1;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.0em;
+ text-decoration: underline;
+ /* center text */
+ text-align: center;
+ /* padding */
+ padding: 0 0 0 0;
+ margin: 7px 7px 17px 7px; }
+
+/* default p */
+.rpgui-content p {
+ /* color and border */
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.0em;
+ line-height: 22px; }
+
+/* default span */
+.rpgui-content span {
+ /* color and border */
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.0em;
+ line-height: 22px; }
+
+/* default gui link */
+.rpgui-content a {
+ /* color and border */
+ color: yellow;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.0em;
+ line-height: 22px;
+ text-decoration: none; }
+
+/* default gui link */
+.rpgui-content a:hover {
+ text-decoration: underline; }
+
+/* default gui label */
+.rpgui-content label {
+ /* color and border */
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.0em;
+ line-height: 20px;
+ display: inline; }
+
+/* default gui label */
+.rpgui-content li {
+ /* color and border */
+ margin-left: 20px;
+ color: white;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ font-size: 1.0em;
+ line-height: 22px; }
+
+/*\r
+* progress bar styling\r
+*/
+/* progress bar container */
+.rpgui-progress {
+ height: 42px;
+ width: 100%;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ position: relative; }
+
+/* progress bar left edge */
+.rpgui-progress-left-edge {
+ position: absolute;
+ height: 42px;
+ width: 40px;
+ left: 0px;
+ background-image: url("img/progress-bar-left.png");
+ background-size: 100% 100%; }
+
+/* progress bar right edge */
+.rpgui-progress-right-edge {
+ position: absolute;
+ height: 42px;
+ width: 40px;
+ right: 0px;
+ background-image: url("img/progress-bar-right.png");
+ background-size: 100% 100%; }
+
+/* progress bar background track */
+.rpgui-progress-track {
+ position: absolute;
+ height: 42px;
+ left: 40px;
+ right: 40px;
+ background-image: url("img/progress-bar-track.png");
+ background-repeat: repeat-x;
+ background-size: 36px 100%; }
+
+/* progress bar - the fill itself */
+.rpgui-progress-fill {
+ position: absolute;
+ top: 9px;
+ bottom: 8px;
+ left: 0;
+ width: 100%;
+ background-image: url("img/progress.png");
+ background-repeat: repeat-x;
+ background-size: 36px 100%; }
+
+/* progress bar - blue color */
+.rpgui-progress-fill.blue {
+ background-image: url("img/progress-blue.png"); }
+
+/* progress bar - green color */
+.rpgui-progress-fill.green {
+ background-image: url("img/progress-green.png"); }
+
+/* progress bar - red color */
+.rpgui-progress-fill.red {
+ background-image: url("img/progress-red.png"); }
+
+/**\r
+* style for radioes\r
+*/
+/* radio box */
+.rpgui-content input[type=radio].rpgui-radio {
+ display: none; }
+
+.rpgui-content input[type=radio].rpgui-radio + label {
+ background: url("img/radio-off.png") no-repeat;
+ line-height: 24px;
+ display: inline-block;
+ background-size: auto 100%;
+ padding-left: 34px;
+ height: 24px;
+ margin-top: 8px;
+ margin-bottom: 8px; }
+
+.rpgui-content input[type=radio].rpgui-radio:checked + label {
+ background: url("img/radio-on.png") no-repeat;
+ line-height: 24px;
+ display: inline-block;
+ background-size: auto 100%;
+ padding-left: 34px;
+ height: 24px; }
+
+/* golden radio */
+.rpgui-content .rpgui-radio.golden + label {
+ background: url("img/radio-golden-off.png") no-repeat !important;
+ background-size: auto 100% !important; }
+
+.rpgui-content .rpgui-radio.golden:checked + label {
+ background: url("img/radio-golden-on.png") no-repeat !important;
+ background-size: auto 100% !important; }
+
+/**\r
+* Rules for misc and general things.\r
+*/
+/* set scrollbars for webkit browsers (like chrome) */
+.rpgui-content ::-webkit-scrollbar,
+.rpgui-content::-webkit-scrollbar {
+ width: 18px; }
+
+/* Track */
+.rpgui-content ::-webkit-scrollbar-track,
+.rpgui-content::-webkit-scrollbar-track {
+ background-image: url("img/scrollbar-track.png");
+ background-size: 18px 60px;
+ background-repeat: repeat-y; }
+
+/* Handle */
+.rpgui-content ::-webkit-scrollbar-thumb,
+.rpgui-content::-webkit-scrollbar-thumb {
+ background-image: url("img/scrollbar-thumb.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat; }
+
+/* buttons */
+.rpgui-content ::-webkit-scrollbar-button,
+.rpgui-content::-webkit-scrollbar-button {
+ background-image: url("img/scrollbar-button.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat; }
+
+/**\r
+* for disabled elements\r
+*/
+/* disabled object */
+.rpgui-disabled,
+.rpgui-content :disabled,
+.rpgui-content input[type=radio]:disabled + label,
+.rpgui-content input[type=checkbox]:disabled + label,
+.rpgui-content input[type=range]:disabled + .rpgui-slider-container,
+.rpgui-content :disabled + .rpgui-dropdown-imp,
+.rpgui-content :disabled + .rpgui-dropdown-imp + .rpgui-dropdown-imp,
+.rpgui-content :disabled + .rpgui-list-imp {
+ cursor: url("img/cursor/default.png"), auto;
+ -webkit-filter: grayscale(1);
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ filter: url(#greyscale);
+ filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
+ filter: gray;
+ color: #999; }
+
+/**\r
+* Rules for the slider.\r
+*/
+/* regular slider stuff */
+/* slider container */
+.rpgui-slider-container {
+ height: 20px;
+ width: 100%;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ position: relative; }
+
+/* slider left edge */
+.rpgui-slider-left-edge {
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ left: 0px;
+ background-image: url("img/slider-left.png");
+ background-size: 100% 100%; }
+
+/* slider right edge */
+.rpgui-slider-right-edge {
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ right: 0px;
+ background-image: url("img/slider-right.png");
+ background-size: 100% 100%; }
+
+/* slider background track */
+.rpgui-slider-track {
+ position: absolute;
+ height: 20px;
+ left: 0;
+ right: 0;
+ background-image: url("img/slider-track.png");
+ background-repeat: repeat-x;
+ background-size: 24px 100%; }
+
+/* the part of the slider that moves and indicates the value */
+.rpgui-slider-thumb {
+ position: absolute;
+ height: 30px;
+ width: 15px;
+ margin-top: -5px;
+ left: 40px;
+ background-image: url("img/slider-thumb.png");
+ background-size: 100% 100%; }
+
+/* golden slider stuff */
+/* golden slider container */
+.rpgui-slider-container.golden {
+ height: 30px;
+ width: 100%;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ position: relative; }
+
+/* golden slider left edge */
+.rpgui-slider-left-edge.golden {
+ position: absolute;
+ height: 30px;
+ width: 30px;
+ left: 0px;
+ background-image: url("img/slider-left-golden.png");
+ background-size: 100% 100%; }
+
+/* golden slider right edge */
+.rpgui-slider-right-edge.golden {
+ position: absolute;
+ height: 30px;
+ width: 30px;
+ right: 0px;
+ background-image: url("img/slider-right-golden.png");
+ background-size: 100% 100%; }
+
+/* golden slider background track */
+.rpgui-slider-track.golden {
+ position: absolute;
+ height: 30px;
+ left: 0;
+ right: 0;
+ background-image: url("img/slider-track-golden.png");
+ background-repeat: repeat-x;
+ background-size: 40px 100%; }
+
+/* golden the part of the slider that moves and indicates the value */
+.rpgui-slider-thumb.golden {
+ position: absolute;
+ height: 36px;
+ width: 18px;
+ margin-top: -4px;
+ left: 40px;
+ background-image: url("img/slider-thumb-golden.png");
+ background-size: 100% 100%; }
--- /dev/null
+RPGUI = (function() {\r
+
+/**\r
+* init rpgui.\r
+* this is the first file included in the compiled js.\r
+*/\r
+\r
+// rpgui global namespace\r
+var RPGUI = RPGUI || {};\r
+\r
+// lib version\r
+RPGUI.version = 1.03;\r
+\r
+// author\r
+RPGUI.author = "Ronen Ness";\r
+\r
+// if true, will init rpgui as soon as page loads\r
+// if you set to false you need to call RPGUI.init(); yourself.\r
+RPGUI.init_on_load = true;\r
+window.addEventListener("load", function()\r
+{\r
+ if (RPGUI.init_on_load) {RPGUI.init();}\r
+});\r
+\r
+// init RPGUI and everything related\r
+RPGUI.init = function()\r
+{\r
+ if (RPGUI._was_init) {throw "RPGUI was already init!";}\r
+ for (var i = 0; i < RPGUI.__init_list.length; ++i)\r
+ {\r
+ RPGUI.__init_list[i]();\r
+ }\r
+ RPGUI._was_init = true;\r
+}\r
+\r
+// list of functions to run as part of the init process\r
+RPGUI.__init_list = [];\r
+\r
+// add a function to be called as part of the init process.\r
+// note: order is preserve. you may use this function to init things after RPGUI is fully loaded, since\r
+// all RPGUI will have its init functions during the inclusion of the script.\r
+RPGUI.on_load = function(callback)\r
+{\r
+ // if was already init call immediately\r
+ if (RPGUI._was_init) {callback();}\r
+ \r
+ // add to init list\r
+ RPGUI.__init_list.push(callback);\r
+}
+/**\r
+* Used to provide unified, easy javascript access to customized elements.\r
+*/\r
+\r
+\r
+// different callbacks for different methods and types\r
+RPGUI.__update_funcs = {};\r
+RPGUI.__create_funcs = {};\r
+RPGUI.__get_funcs = {}\r
+RPGUI.__set_funcs = {};\r
+\r
+// create a customized rpgui element ("list", "dropbox", etc.)\r
+// note: this function expect the original html element.\r
+RPGUI.create = function(element, rpgui_type)\r
+{\r
+ // call the creation func and set type\r
+ if (RPGUI.__create_funcs[rpgui_type])\r
+ {\r
+ element.dataset['rpguitype'] = rpgui_type;\r
+ RPGUI.__create_funcs[rpgui_type](element);\r
+ }\r
+ // not a valid type? exception.\r
+ else\r
+ {\r
+ throw "Not a valid rpgui type! options: " + Object.keys(RPGUI.__create_funcs);\r
+ }\r
+}\r
+\r
+// update an element after you changed it manually via javascript.\r
+// note: this function expect the original html element.\r
+RPGUI.update = function(element)\r
+{\r
+ // if have update callback for this type, use it\r
+ var type = element.dataset['rpguitype']\r
+ if (RPGUI.__update_funcs[type])\r
+ {\r
+ RPGUI.__update_funcs[type](element);\r
+ }\r
+ // if not, use the default (firing update event)\r
+ else\r
+ {\r
+ RPGUI.fire_event(element, "change");\r
+ }\r
+}\r
+\r
+\r
+// set & update the value of an element.\r
+// note: this function expect the original html element.\r
+RPGUI.set_value = function(element, value)\r
+{\r
+ // if have set value callback for this type, use it\r
+ var type = element.dataset['rpguitype'];\r
+ if (RPGUI.__set_funcs[type])\r
+ {\r
+ RPGUI.__set_funcs[type](element, value);\r
+ }\r
+ // if not, use the default (setting "value" member)\r
+ else\r
+ {\r
+ element.value = value;\r
+ }\r
+\r
+ // trigger update\r
+ RPGUI.update(element);\r
+}\r
+\r
+\r
+\r
+// get the value of an element.\r
+// note: this function expect the original html element.\r
+RPGUI.get_value = function(element)\r
+{\r
+ // if have get value callback for this type, use it\r
+ var type = element.dataset['rpguitype'];\r
+ if (RPGUI.__get_funcs[type])\r
+ {\r
+ return RPGUI.__get_funcs[type](element);\r
+ }\r
+ // if not, use the default (getting the "value" member)\r
+ else\r
+ {\r
+ return element.value;\r
+ }\r
+}
+/**\r
+* This script generate the rpgui checkbox class.\r
+* This will replace automatically every <input> element that has the "rpgui-checkbox" class.\r
+*/\r
+\r
+\r
+// class name we will convert to special checkbox\r
+var _checkbox_class = "rpgui-checkbox";\r
+\r
+// create a rpgui-checkbox from a given element.\r
+// note: element must be <input> of type "checkbox" for this to work properly.\r
+RPGUI.__create_funcs["checkbox"] = function(element)\r
+{\r
+ RPGUI.add_class(element, _checkbox_class);\r
+ create_checkbox(element);\r
+};\r
+\r
+// set function to set value of the checkbox\r
+RPGUI.__set_funcs["checkbox"] = function(elem, value)\r
+{\r
+ elem.checked = value;\r
+};\r
+\r
+// set function to get value of the checkbox\r
+RPGUI.__get_funcs["checkbox"] = function(elem)\r
+{\r
+ return elem.checked;\r
+};\r
+\r
+// init all checkbox elements on page load\r
+RPGUI.on_load(function()\r
+{\r
+ // get all the input elements we need to upgrade\r
+ var elems = document.getElementsByClassName(_checkbox_class);\r
+\r
+ // iterate the selects and upgrade them\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "checkbox");\r
+ }\r
+});\r
+\r
+// upgrade a single "input" element to the beautiful checkbox class\r
+function create_checkbox(elem)\r
+{\r
+ // get next sibling, assuming its the checkbox label.\r
+ // this object will be turned into the new checkbox.\r
+ var new_checkbox = elem.nextSibling;\r
+\r
+ // validate\r
+ if (!new_checkbox || new_checkbox.tagName !== "LABEL")\r
+ {\r
+ throw "After a '" + _checkbox_class + "' there must be a label!";\r
+ }\r
+\r
+ // copy all event listeners and events\r
+ RPGUI.copy_event_listeners(elem, new_checkbox);\r
+\r
+ // do the click event for the new checkbox\r
+ (function(elem, new_checkbox)\r
+ {\r
+ new_checkbox.addEventListener("click", function()\r
+ {\r
+ if (!elem.disabled)\r
+ {\r
+ RPGUI.set_value(elem, !elem.checked);\r
+ }\r
+\r
+ });\r
+ })(elem, new_checkbox);\r
+}\r
+
+/**\r
+* Init rpgui content and what's inside.\r
+*/\r
+\r
+// init all the rpgui containers and their children\r
+RPGUI.on_load(function()\r
+{\r
+ // get all containers and iterate them\r
+ var contents = document.getElementsByClassName("rpgui-content");\r
+ for (var i = 0; i < contents.length; ++i)\r
+ {\r
+ // get current container and init it\r
+ var content = contents[i];\r
+\r
+ // prevent dragging\r
+ RPGUI.prevent_drag(content);\r
+\r
+ // set default cursor\r
+ RPGUI.set_cursor(content, "default");\r
+ }\r
+});\r
+
+/**\r
+* This script add the dragging functionality to all elements with "rpgui-draggable" class.\r
+*/\r
+\r
+\r
+// element currently dragged\r
+var _curr_dragged = null;\r
+var _curr_dragged_point = null;\r
+var _dragged_z = 1000;\r
+\r
+// class name we consider as draggable\r
+var _draggable_class = "rpgui-draggable";\r
+\r
+// set element as draggable\r
+// note: this also add the "rpgui-draggable" css class to the element.\r
+RPGUI.__create_funcs["draggable"] = function(element)\r
+{\r
+ // prevent forms of default dragging on this element\r
+ element.draggable = false;\r
+ element.ondragstart = function() {return false;}\r
+\r
+ // add the mouse down event listener\r
+ RPGUI.add_class(element, _draggable_class);\r
+ element.addEventListener('mousedown', mouseDown);\r
+};\r
+\r
+// init all draggable elements (objects with "rpgui-draggable" class)\r
+RPGUI.on_load(function()\r
+{\r
+ // init all draggable elements\r
+ var elems = document.getElementsByClassName(_draggable_class);\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "draggable");\r
+ }\r
+\r
+ // add mouseup event on window to stop dragging\r
+ window.addEventListener('mouseup', mouseUp);\r
+});\r
+\r
+// stop drag\r
+function mouseUp(e)\r
+{\r
+ _curr_dragged = null;\r
+ window.removeEventListener('mousemove', divMove);\r
+}\r
+\r
+// start drag\r
+function mouseDown(e){\r
+\r
+ // set dragged object and make sure its really draggable\r
+ var target = e.target || e.srcElement;\r
+ if (!RPGUI.has_class(target, _draggable_class)) {return;}\r
+ \r
+ _curr_dragged = target;\r
+ \r
+ // set holding point\r
+ var rect = _curr_dragged.getBoundingClientRect();\r
+ _curr_dragged_point = {x: rect.left-e.clientX, y: rect.top-e.clientY};\r
+\r
+ // add z-index to top this element\r
+ target.style.zIndex = _dragged_z++;\r
+ \r
+ // begin dragging\r
+ window.addEventListener('mousemove', divMove, true);\r
+\r
+}\r
+\r
+// dragging\r
+function divMove(e){\r
+ if (_curr_dragged)\r
+ {\r
+ _curr_dragged.style.position = 'absolute';\r
+ _curr_dragged.style.left = (e.clientX + _curr_dragged_point.x) + 'px';\r
+ _curr_dragged.style.top = (e.clientY + _curr_dragged_point.y) + 'px';\r
+ }\r
+}\r
+
+/**\r
+ * This script generate the rpgui progress-bar class.\r
+ * This will replace automatically every <div> element that has the "rpgui-progress" class.\r
+ */\r
+\r
+\r
+// class name we will convert to special progress\r
+var _progress_class = "rpgui-progress";\r
+\r
+// create a rpgui-progress from a given element.\r
+// note: element must be <input> of type "range" for this to work properly.\r
+RPGUI.__create_funcs["progress"] = function(element)\r
+{\r
+ RPGUI.add_class(element, _progress_class);\r
+ create_progress(element);\r
+};\r
+\r
+// set function to set value of the progress bar\r
+// value should be in range of 0 - 1.0\r
+RPGUI.__set_funcs["progress"] = function(elem, value)\r
+{\r
+ // get trackbar and progress bar elements\r
+ var track = RPGUI.get_child_with_class(elem, "rpgui-progress-track");\r
+ var progress = RPGUI.get_child_with_class(track, "rpgui-progress-fill");\r
+\r
+ // get the two edges\r
+ var edge_left = RPGUI.get_child_with_class(elem, "rpgui-progress-left-edge");\r
+ var edge_right = RPGUI.get_child_with_class(elem, "rpgui-progress-right-edge");\r
+\r
+ // set progress width\r
+ progress.style.left = "0px";\r
+ progress.style.width = (value * 100) + "%";\r
+};\r
+\r
+// init all progress elements on page load\r
+RPGUI.on_load(function()\r
+{\r
+ // get all the select elements we need to upgrade\r
+ var elems = document.getElementsByClassName(_progress_class);\r
+\r
+ // iterate the selects and upgrade them\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "progress");\r
+ }\r
+});\r
+\r
+// upgrade a single "input" element to the beautiful progress class\r
+function create_progress(elem)\r
+{\r
+ // create the containing div for the new progress\r
+ progress_container = elem;\r
+\r
+ // insert the progress container\r
+ RPGUI.insert_after(progress_container, elem);\r
+\r
+ // create progress parts (edges, track, thumb)\r
+\r
+ // track\r
+ var track = RPGUI.create_element("div");\r
+ RPGUI.add_class(track, "rpgui-progress-track");\r
+ progress_container.appendChild(track);\r
+\r
+ // left edge\r
+ var left_edge = RPGUI.create_element("div");\r
+ RPGUI.add_class(left_edge, "rpgui-progress-left-edge");\r
+ progress_container.appendChild(left_edge);\r
+\r
+ // right edge\r
+ var right_edge = RPGUI.create_element("div");\r
+ RPGUI.add_class(right_edge, "rpgui-progress-right-edge");\r
+ progress_container.appendChild(right_edge);\r
+\r
+ // the progress itself\r
+ var progress = RPGUI.create_element("div");\r
+ RPGUI.add_class(progress, "rpgui-progress-fill");\r
+ track.appendChild(progress);\r
+\r
+ // set color\r
+ if (RPGUI.has_class(elem, "blue")) {progress.className += " blue";}\r
+ if (RPGUI.has_class(elem, "red")) {progress.className += " red";}\r
+ if (RPGUI.has_class(elem, "green")) {progress.className += " green";}\r
+\r
+ // set starting default value\r
+ var starting_val = elem.dataset.value !== undefined ? parseFloat(elem.dataset.value) : 1;\r
+ RPGUI.set_value(elem, starting_val);\r
+}\r
+
+/**\r
+* This script generate the rpgui radio class.\r
+* This will replace automatically every <input> element that has the "rpgui-radio" class.\r
+*/\r
+\r
+\r
+// class name we will convert to special radio\r
+var _radio_class = "rpgui-radio";\r
+\r
+// create a rpgui-radio from a given element.\r
+// note: element must be <input> of type "radio" for this to work properly.\r
+RPGUI.__create_funcs["radio"] = function(element)\r
+{\r
+ RPGUI.add_class(element, _radio_class);\r
+ create_radio(element);\r
+};\r
+\r
+// set function to set value of the radio\r
+RPGUI.__set_funcs["radio"] = function(elem, value)\r
+{\r
+ elem.checked = value;\r
+};\r
+\r
+// set function to get value of the radio button\r
+RPGUI.__get_funcs["radio"] = function(elem)\r
+{\r
+ return elem.checked;\r
+};\r
+\r
+// init all radio elements on page load\r
+RPGUI.on_load(function()\r
+{\r
+ // get all the input elements we need to upgrade\r
+ var elems = document.getElementsByClassName(_radio_class);\r
+\r
+ // iterate the selects and upgrade them\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "radio");\r
+ }\r
+});\r
+\r
+// upgrade a single "input" element to the beautiful radio class\r
+function create_radio(elem)\r
+{\r
+ // get next sibling, assuming its the radio label.\r
+ // this object will be turned into the new radio.\r
+ var new_radio = elem.nextSibling;\r
+\r
+ // validate\r
+ if (!new_radio || new_radio.tagName !== "LABEL")\r
+ {\r
+ throw "After a '" + _radio_class + "' there must be a label!";\r
+ }\r
+\r
+ // copy all event listeners and events\r
+ RPGUI.copy_event_listeners(elem, new_radio);\r
+\r
+ // do the click event for the new radio\r
+ (function(elem, new_radio)\r
+ {\r
+ new_radio.addEventListener("click", function()\r
+ {\r
+ if (!elem.disabled)\r
+ {\r
+ RPGUI.set_value(elem, true);\r
+ }\r
+ });\r
+ })(elem, new_radio);\r
+}\r
+
+/**\r
+* This script generate the rpgui dropdown <select>.\r
+* This will replace automatically every <select> element that has the "rpgui-dropdown" class.\r
+*/\r
+\r
+\r
+// class name we will convert to dropdown\r
+var _dropdown_class = "rpgui-dropdown";\r
+\r
+// create a rpgui-dropdown from a given element.\r
+// note: element must be <select> with <option> tags that will turn into the items\r
+RPGUI.__create_funcs["dropdown"] = function(element)\r
+{\r
+ RPGUI.add_class(element, _dropdown_class);\r
+ create_dropdown(element);\r
+};\r
+\r
+// init all dropdown elements on page load\r
+RPGUI.on_load(function()\r
+{\r
+ // get all the select elements we need to upgrade\r
+ var elems = document.getElementsByClassName(_dropdown_class);\r
+\r
+ // iterate the selects and upgrade them\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "dropdown");\r
+ }\r
+});\r
+\r
+// upgrade a single "select" element to the beautiful dropdown\r
+function create_dropdown(elem)\r
+{\r
+ // prefix to add arrow down next to selection header\r
+ var arrow_down_prefix = "<label>▼</label> ";\r
+\r
+ // create the paragraph that will display the select_header option\r
+ var select_header = RPGUI.create_element("p");\r
+ if (elem.id) {select_header.id = elem.id + "-rpgui-dropdown-head"};\r
+ RPGUI.add_class(select_header, "rpgui-dropdown-imp rpgui-dropdown-imp-header");\r
+ RPGUI.insert_after(select_header, elem);\r
+\r
+ // create the list to hold all the options\r
+ var list = RPGUI.create_element("ul");\r
+ if (elem.id) {list.id = elem.id + "-rpgui-dropdown"};\r
+ RPGUI.add_class(list, "rpgui-dropdown-imp");\r
+ RPGUI.insert_after(list, select_header);\r
+\r
+ // set list top to be right under the select header\r
+ var header_rect = select_header.getBoundingClientRect();\r
+ list.style.position = "absolute";\r
+\r
+ // set list width (-14 is to compensate borders)\r
+ list.style.width = (header_rect.right - header_rect.left - 14) + "px";\r
+ list.style.display = "none";\r
+\r
+ // now hide the original select\r
+ elem.style.display = "none";\r
+\r
+ // iterate over all the options in this select\r
+ for (var i = 0; i < elem.children.length; ++ i)\r
+ {\r
+ // if this child is not option, skip\r
+ var option = elem.children[i];\r
+ if (option.tagName != "OPTION") continue;\r
+\r
+ // add the new option as list item\r
+ var item = RPGUI.create_element("li");\r
+ item.innerHTML = option.innerHTML;\r
+ list.appendChild(item);\r
+\r
+ // copy all event listeners from original option to the new item\r
+ RPGUI.copy_event_listeners(option, item);\r
+\r
+ // set option callback (note: wrapped inside namespace to preserve vars)\r
+ (function(elem, option, item, select_header, list)\r
+ {\r
+ // when clicking the customized option\r
+ item.addEventListener('click', function()\r
+ {\r
+ // set the header html and hide the list\r
+ select_header.innerHTML = arrow_down_prefix + option.innerHTML;\r
+ list.style.display = "none";\r
+\r
+ // select the option in the original selection\r
+ option.selected = true;\r
+ RPGUI.fire_event(elem, "change");\r
+ });\r
+\r
+ })(elem, option, item, select_header, list);\r
+ }\r
+\r
+ // now set list and header callbacks\r
+ // create a namespace to preserve variables\r
+ (function(elem, list, select_header)\r
+ {\r
+ // when clicking the selected header show / hide the options list\r
+ select_header.onclick = function()\r
+ {\r
+ if (!elem.disabled)\r
+ {\r
+ var prev = list.style.display;\r
+ list.style.display = prev == "none" ? "block" : "none";\r
+ }\r
+ }\r
+\r
+ // when mouse leave the options list, hide it\r
+ list.onmouseleave = function()\r
+ {\r
+ list.style.display = "none";\r
+ }\r
+\r
+ })(elem, list, select_header);\r
+\r
+ // lastly, listen to when the original select changes and update the customized list\r
+ (function(elem, select_header, list)\r
+ {\r
+ // the function to update dropdown\r
+ _on_change = function()\r
+ {\r
+ // set the header html and hide the list\r
+ if (elem.selectedIndex != -1)\r
+ {\r
+ select_header.innerHTML = arrow_down_prefix + elem.options[elem.selectedIndex].text;\r
+ }\r
+ else\r
+ {\r
+ select_header.innerHTML = arrow_down_prefix;\r
+ }\r
+ list.style.display = "none";\r
+ }\r
+\r
+ // register the update function and call it to set initial state\r
+ elem.addEventListener('change', _on_change);\r
+ _on_change();\r
+ \r
+ })(elem, select_header, list);\r
+}\r
+
+/**\r
+* This script generate the rpgui list <select>.\r
+* This will replace automatically every <select> element that has the "rpgui-list" class.\r
+*/\r
+\r
+\r
+// class name we will convert to list\r
+var _list_class = "rpgui-list";\r
+\r
+// create a rpgui-list from a given element.\r
+// note: element must be <select> with <option> tags that will turn into the items\r
+RPGUI.__create_funcs["list"] = function(element)\r
+{\r
+ RPGUI.add_class(element, _list_class);\r
+ create_list(element);\r
+};\r
+\r
+// init all list elements on page load\r
+RPGUI.on_load(function()\r
+{\r
+ // get all the select elements we need to upgrade\r
+ var elems = document.getElementsByClassName(_list_class);\r
+\r
+ // iterate the selects and upgrade them\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "list");\r
+ }\r
+});\r
+\r
+// upgrade a single "select" element to the beautiful list\r
+function create_list(elem)\r
+{\r
+ // default list size is 3\r
+ if (!elem.size) elem.size = 3;\r
+\r
+ // create the list to hold all the options\r
+ var list = RPGUI.create_element("ul");\r
+ if (elem.id) {list.id = elem.id + "-rpgui-list"};\r
+ RPGUI.add_class(list, "rpgui-list-imp");\r
+ elem.parentNode.insertBefore(list, elem.nextSibling);\r
+\r
+ // now hide the original select\r
+ elem.style.display = "none";\r
+\r
+ // iterate over all the options in this select\r
+ var all_items = [];\r
+ for (var i = 0; i < elem.children.length; ++ i)\r
+ {\r
+ // if this child is not option, skip\r
+ var option = elem.children[i];\r
+ if (option.tagName != "OPTION") continue;\r
+\r
+ // add the new option as list item\r
+ var item = RPGUI.create_element("li");\r
+ item.innerHTML = option.innerHTML;\r
+ list.appendChild(item);\r
+\r
+ // set dataset value\r
+ item.dataset['rpguivalue'] = option.value;\r
+\r
+ // add to list of all items\r
+ all_items.push(item);\r
+\r
+ // copy all event listeners from original option to the new item\r
+ RPGUI.copy_event_listeners(option, item);\r
+\r
+ // set option callback (note: wrapped inside namespace to preserve vars)\r
+ (function(elem, option, item, list, all_items)\r
+ {\r
+ // when clicking the customized option\r
+ item.addEventListener('click', function()\r
+ {\r
+ // select the option in the original selection\r
+ if (!elem.disabled)\r
+ {\r
+ option.selected = true;\r
+ RPGUI.fire_event(elem, "change");\r
+ }\r
+ });\r
+\r
+ })(elem, option, item, list, all_items);\r
+ }\r
+\r
+ // if got any items set list height based on the size param\r
+ if (all_items.length && elem.size)\r
+ {\r
+ \r
+ // get the actual height of a single item in list\r
+ var height = all_items[0].offsetHeight;\r
+\r
+ // set list height based on size\r
+ list.style.height = (height * elem.size) + "px";\r
+ \r
+ }\r
+ \r
+ // lastly, listen to when the original select changes and update the customized list\r
+ (function(elem, all_items)\r
+ {\r
+ // handle value change\r
+ elem.addEventListener('change', function()\r
+ {\r
+ _on_change(this);\r
+ });\r
+ function _on_change(elem)\r
+ {\r
+ for (var i = 0; i < all_items.length; ++i)\r
+ {\r
+ var item = all_items[i];\r
+ if (item.dataset['rpguivalue'] == elem.value)\r
+ {\r
+ RPGUI.add_class(item, "rpgui-selected");\r
+ }\r
+ else\r
+ {\r
+ RPGUI.remove_class(item, "rpgui-selected");\r
+ }\r
+ }\r
+ }\r
+\r
+ // call the on-change on init to set initial state\r
+ _on_change(elem);\r
+\r
+ })(elem, all_items);\r
+}\r
+
+/**\r
+* This script generate the rpgui slider class.\r
+* This will replace automatically every <input> element that has the "rpgui-slider" class.\r
+*/\r
+\r
+\r
+// class name we will convert to special slider\r
+var _slider_class = "rpgui-slider";\r
+\r
+// create a rpgui-slider from a given element.\r
+// note: element must be <input> of type "range" for this to work properly.\r
+RPGUI.__create_funcs["slider"] = function(element)\r
+{\r
+ RPGUI.add_class(element, _slider_class);\r
+ create_slider(element);\r
+};\r
+\r
+// init all slider elements on page load\r
+RPGUI.on_load(function()\r
+{\r
+ // get all the select elements we need to upgrade\r
+ var elems = document.getElementsByClassName(_slider_class);\r
+\r
+ // iterate the selects and upgrade them\r
+ for (var i = 0; i < elems.length; ++i)\r
+ {\r
+ RPGUI.create(elems[i], "slider");\r
+ }\r
+});\r
+\r
+// upgrade a single "input" element to the beautiful slider class\r
+function create_slider(elem)\r
+{\r
+ // check if should do it golden slider\r
+ var golden = RPGUI.has_class(elem, "golden") ? " golden" : "";\r
+\r
+ // create the containing div for the new slider\r
+ var slider_container = RPGUI.create_element("div");\r
+ if (elem.id) {slider_container.id = elem.id + "-rpgui-slider"};\r
+ RPGUI.copy_css(elem, slider_container);\r
+ RPGUI.add_class(slider_container, "rpgui-slider-container" + golden);\r
+\r
+ // insert the slider container\r
+ RPGUI.insert_after(slider_container, elem);\r
+\r
+ // set container width based on element original width\r
+ slider_container.style.width = elem.offsetWidth + "px";\r
+\r
+ // create slider parts (edges, track, thumb)\r
+\r
+ // track\r
+ var track = RPGUI.create_element("div");\r
+ RPGUI.add_class(track, "rpgui-slider-track" + golden);\r
+ slider_container.appendChild(track);\r
+\r
+ // left edge\r
+ var left_edge = RPGUI.create_element("div");\r
+ RPGUI.add_class(left_edge, "rpgui-slider-left-edge" + golden);\r
+ slider_container.appendChild(left_edge);\r
+\r
+ // right edge\r
+ var right_edge = RPGUI.create_element("div");\r
+ RPGUI.add_class(right_edge, "rpgui-slider-right-edge" + golden);\r
+ slider_container.appendChild(right_edge);\r
+\r
+ // thumb (slider value show)\r
+ var thumb = RPGUI.create_element("div");\r
+ RPGUI.add_class(thumb, "rpgui-slider-thumb" + golden);\r
+ slider_container.appendChild(thumb);\r
+\r
+ // hide original slider\r
+ elem.style.display = "none";\r
+\r
+ // copy events from original slider to container.\r
+ // this will handle things like click, mouse move, mouse up, etc.\r
+ // it will not handle things like "onchange".\r
+ RPGUI.copy_event_listeners(elem, slider_container);\r
+\r
+ // now set events (wrap them in anonymous function to preserve local vars)\r
+ var state = {mouse_down: false};\r
+ (function(elem, slider_container, thumb, track, state, right_edge, left_edge)\r
+ {\r
+ // get the range of the original slider (min and max)\r
+ var min = parseFloat(elem.min);\r
+ var max = parseFloat(elem.max);\r
+\r
+ // calculate edges width and track actual width\r
+ var edges_width = right_edge.offsetWidth + left_edge.offsetWidth;\r
+ var track_width = track.offsetWidth - edges_width;\r
+\r
+ // set state if moving slider or not\r
+ slider_container.addEventListener('mouseup', function(e)\r
+ {\r
+ state.mouse_down = false;\r
+ });\r
+ window.addEventListener('mouseup', function(e)\r
+ {\r
+ state.mouse_down = false;\r
+ });\r
+ track.addEventListener('mousedown', function(e)\r
+ {\r
+ state.mouse_down = true;\r
+ slide(e.offsetX || e.layerX);\r
+ });\r
+ slider_container.addEventListener('mousedown', function(e)\r
+ {\r
+ state.mouse_down = true;\r
+ });\r
+\r
+ // handle clicking on edges (set to min / max)\r
+ left_edge.addEventListener('mousedown', function(e)\r
+ {\r
+ set_value(min);\r
+ });\r
+ right_edge.addEventListener('mousedown', function(e)\r
+ {\r
+ set_value(max);\r
+ });\r
+ left_edge.addEventListener('mousemove', function(e)\r
+ {\r
+ if (state.mouse_down) set_value(min);\r
+ });\r
+ right_edge.addEventListener('mousemove', function(e)\r
+ {\r
+ if (state.mouse_down) set_value(max);\r
+ });\r
+\r
+ // handle sliding\r
+ function slide(pos)\r
+ {\r
+ // calc new slider value\r
+ var new_val = min + Math.round((pos / track_width) * (max-min)) - 1;\r
+\r
+ // set thumb position\r
+ set_value(new_val);\r
+ }\r
+\r
+ // setting value\r
+ function set_value(new_val)\r
+ {\r
+ if (!elem.disabled &&\r
+ elem.value != new_val)\r
+ {\r
+ RPGUI.set_value(elem, new_val);\r
+ }\r
+ }\r
+\r
+ // moving the slider\r
+ track.addEventListener('mousemove', function(e)\r
+ {\r
+ if (state.mouse_down && !elem.disabled)\r
+ {\r
+ slide(e.offsetX || e.layerX);\r
+ }\r
+ });\r
+\r
+\r
+ // when original slider value change update thumb position\r
+ elem.addEventListener("change", function(e)\r
+ {\r
+ _onchange();\r
+ });\r
+ function _onchange()\r
+ {\r
+ // get the range of the original slider (min and max)\r
+ var step = track_width / (max-min);\r
+ var relative_val = Math.round(parseFloat(elem.value) - min);\r
+ thumb.style.left = (Math.floor(edges_width * 0.25) + (relative_val * step)) + "px";\r
+ }\r
+\r
+ // call "_onchange()" to init the thumb starting position\r
+ _onchange();\r
+\r
+ })(elem, slider_container, thumb, track, state, right_edge, left_edge);\r
+\r
+}
+/**\r
+* Some helpers and utils.\r
+*/\r
+\r
+\r
+// create and return html element for rpgui internal mechanisms\r
+// element is string, element type (like "div" or "p")\r
+RPGUI.create_element = function(element)\r
+{\r
+ // create element\r
+ element = document.createElement(element);\r
+\r
+ // return element\r
+ return element;\r
+};\r
+\r
+// set cursor for given element\r
+// element is element to set.\r
+// cursor is string, what cursor to use (default / point / .. see cursor.css for more info ).\r
+RPGUI.set_cursor = function(element, cursor)\r
+{\r
+ RPGUI.add_class(element, "rpgui-cursor-" + cursor);\r
+};\r
+\r
+// prevent element dragging\r
+RPGUI.prevent_drag = function(element)\r
+{\r
+ /*\r
+ // this code was removed because I found a cross-browser way to cover it all via css.\r
+ element.draggable=false;\r
+ element.ondrop=function(){return false;}\r
+ element.ondragstart=function(){return false;}\r
+ */\r
+};\r
+\r
+// copy the style of one element into another\r
+RPGUI.copy_css = function(from, to)\r
+{\r
+ to.style.cssText = from.style.cssText;\r
+};\r
+\r
+// check if element have class\r
+RPGUI.has_class = function(element, cls)\r
+{\r
+ return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;\r
+};\r
+\r
+// add class to element (but only if don't already have it)\r
+RPGUI.add_class = function(element, cls)\r
+{\r
+ if (!RPGUI.has_class(element, cls))\r
+ {\r
+ element.className += " " + cls;\r
+ }\r
+};\r
+\r
+// get child element with classname\r
+RPGUI.get_child_with_class = function(elem, cls)\r
+{\r
+ for (var i = 0; i < elem.childNodes.length; i++)\r
+ {\r
+ if (RPGUI.has_class(elem.childNodes[i], cls))\r
+ {\r
+ return elem.childNodes[i];\r
+ }\r
+ }\r
+};\r
+\r
+// remove a class from an element\r
+RPGUI.remove_class = function(element, cls)\r
+{\r
+ element.className = (' ' + element.className + ' ').replace(cls, "");\r
+ element.className = element.className.substring(1, element.className.length-1);\r
+};\r
+\r
+// fire event from element\r
+// type should be string like "change", "click", "mouseup", etc.\r
+RPGUI.fire_event = function(element, type)\r
+{\r
+ // firing the event properly according to StackOverflow\r
+ // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually\r
+ if ("createEvent" in document) {\r
+ var evt = document.createEvent("HTMLEvents");\r
+ evt.initEvent(type, false, true);\r
+ element.dispatchEvent(evt);\r
+ }\r
+ else {\r
+ element.fireEvent("on" + type);\r
+ }\r
+};\r
+\r
+// copy all event listeners from one element to the other\r
+RPGUI.copy_event_listeners = function(from, to)\r
+{\r
+ // copy all event listeners\r
+ if (typeof getEventListeners == "function")\r
+ {\r
+ var events = getEventListeners(from);\r
+ for(var p in events) {\r
+ events[p].forEach(function(ev) {\r
+ // {listener: Function, useCapture: Boolean}\r
+ to.addEventListener(p, ev.listener, ev.useCapture);\r
+ });\r
+ }\r
+ }\r
+\r
+ // now copy all attributes that start with "on"\r
+ for (attr in from)\r
+ {\r
+ if (attr.indexOf("on") === 0)\r
+ {\r
+ to[attr] = from[attr];\r
+ }\r
+ }\r
+};\r
+\r
+// insert one html element after another given element\r
+RPGUI.insert_after = function(to_insert, after_element)\r
+{\r
+ after_element.parentNode.insertBefore(to_insert, after_element.nextSibling);\r
+};
+return RPGUI;})();
\ No newline at end of file
--- /dev/null
+.rpgui-button,.rpgui-button.golden{border:none;min-width:140px;height:60px;display:inline-block;padding-left:35px;padding-right:35px;outline:0;max-width:100%}.rpgui-content *,.rpgui-noselect{-webkit-touch-callout:none;-khtml-user-select:none}.rpgui-content *,.rpgui-pixelated{-ms-interpolation-mode:nearest-neighbor}.rpgui-content h3,.rpgui-content h4{font-weight:1;text-decoration:underline}@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;src:local('Press Start 2P'),local('PressStart2P-Regular'),url(https://fonts.gstatic.com/s/pressstart2p/v4/8Lg6LX8-ntOHUQnvQ0E7o3uGXJk6cuEylToZ-uuaubQ.ttf) format('truetype')}.rpgui-pixelated{image-rendering:-webkit-optimize-contrast;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:pixelated}.rpgui-noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rpgui-center{text-align:center;align-content:center}.rpgui-rotate-90{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-ms-transform-origin:0 50%;-webkit-transform-origin:0 50%;transform-origin:0 50%}.rpgui-button{overflow:hidden;background:url(img/button.png) center no-repeat no-repeat;background-clip:padding-box;background-origin:padding-box;background-size:100% 100%;font-size:1em}.rpgui-button.hover,.rpgui-button:hover{background-image:url(img/button-hover.png)}.rpgui-button.down,.rpgui-button:active{background-image:url(img/button-down.png)}.rpgui-button.golden p{display:inline-block}.rpgui-button.golden{background:url(img/button-golden.png) center no-repeat no-repeat;background-clip:padding-box;background-origin:padding-box;background-size:100% 80%;padding-top:5px;overflow:visible}.rpgui-button.golden:after,.rpgui-button.golden:before{white-space:nowrap;display:block;content:"";width:34px;height:110%}.rpgui-button.golden.hover,.rpgui-button.golden:hover{background-image:url(img/button-golden-hover.png)}.rpgui-button.golden.down,.rpgui-button.golden:active{background-image:url(img/button-golden-down.png)}.rpgui-button.golden:before{background:url(img/button-golden-left.png) right center no-repeat;background-size:100% 100%;margin:-5% 0 0 -46px;left:0;float:left}.rpgui-button.golden:after{background:url(img/button-golden-right.png) left center no-repeat;background-size:100% 100%;margin:-5% -46px 0 0;right:0;float:right}.rpgui-content input[type=checkbox].rpgui-checkbox{display:none}.rpgui-content input[type=checkbox].rpgui-checkbox+label{background:url(img/checkbox-off.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px;margin-top:10px;margin-bottom:10px}.rpgui-content input[type=checkbox].rpgui-checkbox:checked+label{background:url(img/checkbox-on.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px}.rpgui-content input[type=checkbox].rpgui-checkbox.golden+label{background:url(img/checkbox-golden-off.png) no-repeat;background-size:auto 100%}.rpgui-content input[type=checkbox].rpgui-checkbox.golden:checked+label{background:url(img/checkbox-golden-on.png) no-repeat;background-size:auto 100%}.rpgui-content{padding:0;margin:0;width:100%;height:100%;left:0;top:0;position:fixed;overflow:hidden;font-size:.8em}.rpgui-content *{outline:0;user-drag:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;image-rendering:-webkit-optimize-contrast;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:pixelated;font-family:'Press Start 2P',cursive}.rpgui-container{position:fixed;z-index:10;overflow:show}.rpgui-container.framed{border-style:solid;border-image-source:url(img/border-image.png);border-image-repeat:repeat;border-image-slice:6 6 6 6;border-image-width:18px;border-width:15px;padding:12px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-container.framed-golden,.rpgui-container.framed-golden-2{border-image-width:18px;border-width:15px;box-sizing:border-box;border-image-repeat:repeat;padding:12px;border-style:solid}.rpgui-container.framed-golden{border-image-source:url(img/border-image-golden.png);border-image-slice:4 4 4 4;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image-golden.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-container.framed-golden-2{border-image-source:url(img/border-image-golden2.png);border-image-slice:8 8 8 8;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image-golden2.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-container.framed-grey{position:relative;border-style:solid;border-image-source:url(img/border-image-grey.png);border-image-repeat:repeat;border-image-slice:3 3 3 3;border-image-width:7px;border-width:7px;padding:12px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image-grey.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-dropdown,.rpgui-dropdown-imp,.rpgui-list-imp{border-image:url(img/select-border-image.png) 10% repeat repeat}.rpgui-cursor-default{cursor:url(img/cursor/default.png),auto!important}.rpgui-content,label{cursor:url(img/cursor/default.png),auto}.rpgui-cursor-point,.rpgui-cursor-point *{cursor:url(img/cursor/point.png) 10 0,auto!important}.rpgui-button,.rpgui-content a,.rpgui-content button,.rpgui-content input[type=checkbox].rpgui-checkbox+label,.rpgui-content input[type=radio].rpgui-radio+label,.rpgui-dropdown-imp,.rpgui-list-imp,.rpgui-slider-container{cursor:url(img/cursor/point.png) 10 0,auto}.rpgui-cursor-select,.rpgui-cursor-select *{cursor:url(img/cursor/select.png) 10 0,auto!important}.rpgui-content input,.rpgui-content textarea,.rpgui-cursor-select{cursor:url(img/cursor/select.png) 10 0,auto}.rpgui-cursor-grab-open,.rpgui-cursor-grab-open *{cursor:url(img/cursor/grab-open.png) 10 0,auto!important}.rpgui-cursor-grab-close,.rpgui-cursor-grab-close *{cursor:url(img/cursor/grab-close.png) 10 0,auto!important}.rpgui-dropdown,.rpgui-dropdown-imp{text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;color:#fff;min-height:40px;margin-top:0;border-style:solid;border-width:7px;-moz-border-image:url(img/select-border-image.png) 10% repeat repeat;-webkit-border-image:url(img/select-border-image.png) 10% repeat repeat;-o-border-image:url(img/select-border-image.png) 10% repeat repeat;background:url(img/select-background-image.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-dropdown-imp li,.rpgui-list-imp{background:url(img/select-background-image.png) center}ul.rpgui-dropdown-imp{padding:0!important;z-index:100}.rpgui-content .rpgui-dropdown-imp-header{color:#fff!important;min-height:22px!important;padding:5px 10px 0!important;margin:0!important;position:relative!important}.rpgui-dropdown-imp li{text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;color:#fff;height:16px;list-style-type:none;padding-top:6px;padding-bottom:6px;padding-left:6px;background-clip:padding-box;background-origin:padding-box}.rpgui-dropdown-imp li:hover,.rpgui-dropdown-imp:hover{color:#ff0}.rpgui-content input,.rpgui-content textarea,.rpgui-list-imp,.rpgui-list-imp li{text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;color:#fff}.rpgui-content hr{display:block;border:0;height:10px;background:url(img/hr.png) top left repeat-x}.rpgui-content hr.golden{display:block;border:0;height:10px;background:url(img/hr-golden.png) top left no-repeat;background-size:100% 100%}.rpgui-icon{display:inline-block;background-size:100% 100%;background-repeat:no-repeat;width:64px;height:64px}.rpgui-icon.sword{background-image:url(img/icons/sword.png)}.rpgui-icon.shield{background-image:url(img/icons/shield.png)}.rpgui-icon.exclamation{background-image:url(img/icons/exclamation.png)}.rpgui-icon.potion-red{background-image:url(img/icons/potion-red.png)}.rpgui-icon.potion-green{background-image:url(img/icons/potion-green.png)}.rpgui-icon.potion-blue{background-image:url(img/icons/potion-blue.png)}.rpgui-icon.weapon-slot{background-image:url(img/icons/weapon-slot.png)}.rpgui-icon.shield-slot{background-image:url(img/icons/shield-slot.png)}.rpgui-icon.armor-slot{background-image:url(img/icons/armor-slot.png)}.rpgui-icon.helmet-slot{background-image:url(img/icons/helmet-slot.png)}.rpgui-icon.ring-slot{background-image:url(img/icons/ring-slot.png)}.rpgui-icon.potion-slot{background-image:url(img/icons/potion-slot.png)}.rpgui-icon.magic-slot{background-image:url(img/icons/magic-slot.png)}.rpgui-icon.shoes-slot{background-image:url(img/icons/shoes-slot.png)}.rpgui-icon.empty-slot{background-image:url(img/icons/empty-slot.png)}.rpgui-content input,.rpgui-content textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:.9em;line-height:32px;background:#4e4a4e;max-width:100%;width:100%;padding-left:10px;min-height:30px;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,.5)}.rpgui-content a,.rpgui-content p,.rpgui-content span{line-height:22px}.rpgui-content textarea{line-height:22px;padding-top:7px;height:80px;resize:none}.rpgui-content input::selection,.rpgui-content textarea::selection{background:rgba(0,0,0,.5)}.rpgui-content input::-moz-selection,.rpgui-content textarea::-moz-selection{background:rgba(0,0,0,.5)}.rpgui-list-imp{min-height:40px;margin-top:0;overflow-x:hidden;overflow-y:scroll;border-style:solid;border-width:7px;-moz-border-image:url(img/select-border-image.png) 10% repeat repeat;-webkit-border-image:url(img/select-border-image.png) 10% repeat repeat;-o-border-image:url(img/select-border-image.png) 10% repeat repeat;background-clip:padding-box;background-origin:padding-box}ul.rpgui-list-imp{padding:0!important;z-index:100}.rpgui-list-imp li{height:16px;margin-left:5px!important;list-style-type:none;padding-top:6px;padding-bottom:6px;padding-left:6px;background:url(img/select-background-image.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-list-imp li:hover,.rpgui-list-imp:hover{color:#ff0}.rpgui-content h1,.rpgui-content h2,.rpgui-content h3{color:#fff;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;text-align:center;padding:0;margin:7px 7px 17px}.rpgui-list-imp .rpgui-selected{background:rgba(0,0,0,.3)}.rpgui-content h1{font-size:1.14em}.rpgui-content h2{font-size:1.25em}.rpgui-content h3{font-size:1.15em}.rpgui-content h4,.rpgui-content p,.rpgui-content span{color:#fff;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;font-size:1em}.rpgui-content h4{text-align:center;padding:0;margin:7px 7px 17px}.rpgui-content a{color:#ff0;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;font-size:1em;text-decoration:none}.rpgui-content label,.rpgui-content li{color:#fff;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;font-size:1em}.rpgui-content a:hover{text-decoration:underline}.rpgui-content label{line-height:20px;display:inline}.rpgui-content li{margin-left:20px;line-height:22px}.rpgui-progress{height:42px;width:100%;margin-top:5px;margin-bottom:5px;position:relative}.rpgui-progress-left-edge,.rpgui-progress-right-edge{position:absolute;width:40px;background-size:100% 100%;height:42px}.rpgui-progress-left-edge{left:0;background-image:url(img/progress-bar-left.png)}.rpgui-progress-right-edge{right:0;background-image:url(img/progress-bar-right.png)}.rpgui-progress-fill,.rpgui-progress-track{position:absolute;background-repeat:repeat-x;background-size:36px 100%}.rpgui-progress-track{height:42px;left:40px;right:40px;background-image:url(img/progress-bar-track.png)}.rpgui-progress-fill{top:9px;bottom:8px;left:0;width:100%;background-image:url(img/progress.png)}.rpgui-progress-fill.blue{background-image:url(img/progress-blue.png)}.rpgui-progress-fill.green{background-image:url(img/progress-green.png)}.rpgui-progress-fill.red{background-image:url(img/progress-red.png)}.rpgui-content input[type=radio].rpgui-radio{display:none}.rpgui-content input[type=radio].rpgui-radio+label{background:url(img/radio-off.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px;margin-top:8px;margin-bottom:8px}.rpgui-content input[type=radio].rpgui-radio:checked+label{background:url(img/radio-on.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px}.rpgui-content .rpgui-radio.golden+label{background:url(img/radio-golden-off.png) no-repeat!important;background-size:auto 100%!important}.rpgui-content .rpgui-radio.golden:checked+label{background:url(img/radio-golden-on.png) no-repeat!important;background-size:auto 100%!important}.rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:18px}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-image:url(img/scrollbar-track.png);background-size:18px 60px;background-repeat:repeat-y}.rpgui-content ::-webkit-scrollbar-thumb,.rpgui-content::-webkit-scrollbar-thumb{background-image:url(img/scrollbar-thumb.png);background-size:100% 100%;background-repeat:no-repeat}.rpgui-content ::-webkit-scrollbar-button,.rpgui-content::-webkit-scrollbar-button{background-image:url(img/scrollbar-button.png);background-size:100% 100%;background-repeat:no-repeat}.rpgui-content :disabled,.rpgui-content :disabled+.rpgui-dropdown-imp,.rpgui-content :disabled+.rpgui-dropdown-imp+.rpgui-dropdown-imp,.rpgui-content :disabled+.rpgui-list-imp,.rpgui-content input[type=checkbox]:disabled+label,.rpgui-content input[type=radio]:disabled+label,.rpgui-content input[type=range]:disabled+.rpgui-slider-container,.rpgui-disabled{cursor:url(img/cursor/default.png),auto;-webkit-filter:grayscale(1);-webkit-filter:grayscale(100%);filter:grayscale(100%);filter:url(#greyscale);filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");filter:gray;color:#999}.rpgui-slider-container{height:20px;width:100%;margin-top:15px;margin-bottom:15px;position:relative}.rpgui-slider-left-edge,.rpgui-slider-right-edge{width:20px;background-size:100% 100%;height:20px}.rpgui-slider-left-edge{position:absolute;left:0;background-image:url(img/slider-left.png)}.rpgui-slider-right-edge{position:absolute;right:0;background-image:url(img/slider-right.png)}.rpgui-slider-track{position:absolute;height:20px;left:0;right:0;background-image:url(img/slider-track.png);background-repeat:repeat-x;background-size:24px 100%}.rpgui-slider-thumb{position:absolute;height:30px;width:15px;margin-top:-5px;left:40px;background-image:url(img/slider-thumb.png);background-size:100% 100%}.rpgui-slider-container.golden{height:30px;width:100%;margin-top:15px;margin-bottom:15px;position:relative}.rpgui-slider-left-edge.golden{position:absolute;height:30px;width:30px;left:0;background-image:url(img/slider-left-golden.png);background-size:100% 100%}.rpgui-slider-right-edge.golden{position:absolute;height:30px;width:30px;right:0;background-image:url(img/slider-right-golden.png);background-size:100% 100%}.rpgui-slider-track.golden{position:absolute;height:30px;left:0;right:0;background-image:url(img/slider-track-golden.png);background-repeat:repeat-x;background-size:40px 100%}.rpgui-slider-thumb.golden{position:absolute;height:36px;width:18px;margin-top:-4px;left:40px;background-image:url(img/slider-thumb-golden.png);background-size:100% 100%}
\ No newline at end of file
--- /dev/null
+RPGUI=function(){function e(e){var n=e.nextSibling;if(!n||"LABEL"!==n.tagName)throw"After a '"+l+"' there must be a label!";c.copy_event_listeners(e,n),function(e,n){n.addEventListener("click",function(){e.disabled||c.set_value(e,!e.checked)})}(e,n)}function n(e){u=null,window.removeEventListener("mousemove",s)}function t(e){var n=e.target||e.srcElement;if(c.has_class(n,p)){u=n;var t=u.getBoundingClientRect();_={x:t.left-e.clientX,y:t.top-e.clientY},n.style.zIndex=f++,window.addEventListener("mousemove",s,!0)}}function s(e){u&&(u.style.position="absolute",u.style.left=e.clientX+_.x+"px",u.style.top=e.clientY+_.y+"px")}function a(e){progress_container=e,c.insert_after(progress_container,e);var n=c.create_element("div");c.add_class(n,"rpgui-progress-track"),progress_container.appendChild(n);var t=c.create_element("div");c.add_class(t,"rpgui-progress-left-edge"),progress_container.appendChild(t);var s=c.create_element("div");c.add_class(s,"rpgui-progress-right-edge"),progress_container.appendChild(s);var a=c.create_element("div");c.add_class(a,"rpgui-progress-fill"),n.appendChild(a),c.has_class(e,"blue")&&(a.className+=" blue"),c.has_class(e,"red")&&(a.className+=" red"),c.has_class(e,"green")&&(a.className+=" green");var i=void 0!==e.dataset.value?parseFloat(e.dataset.value):1;c.set_value(e,i)}function i(e){var n=e.nextSibling;if(!n||"LABEL"!==n.tagName)throw"After a '"+v+"' there must be a label!";c.copy_event_listeners(e,n),function(e,n){n.addEventListener("click",function(){e.disabled||c.set_value(e,!0)})}(e,n)}function r(e){var n="<label>▼</label> ",t=c.create_element("p");e.id&&(t.id=e.id+"-rpgui-dropdown-head"),c.add_class(t,"rpgui-dropdown-imp rpgui-dropdown-imp-header"),c.insert_after(t,e);var s=c.create_element("ul");e.id&&(s.id=e.id+"-rpgui-dropdown"),c.add_class(s,"rpgui-dropdown-imp"),c.insert_after(s,t);var a=t.getBoundingClientRect();s.style.position="absolute",s.style.width=a.right-a.left-14+"px",s.style.display="none",e.style.display="none";for(var i=0;i<e.children.length;++i){var r=e.children[i];if("OPTION"==r.tagName){var o=c.create_element("li");o.innerHTML=r.innerHTML,s.appendChild(o),c.copy_event_listeners(r,o),function(e,t,s,a,i){s.addEventListener("click",function(){a.innerHTML=n+t.innerHTML,i.style.display="none",t.selected=!0,c.fire_event(e,"change")})}(e,r,o,t,s)}}!function(e,n,t){t.onclick=function(){if(!e.disabled){var t=n.style.display;n.style.display="none"==t?"block":"none"}},n.onmouseleave=function(){n.style.display="none"}}(e,s,t),function(e,t,s){_on_change=function(){-1!=e.selectedIndex?t.innerHTML=n+e.options[e.selectedIndex].text:t.innerHTML=n,s.style.display="none"},e.addEventListener("change",_on_change),_on_change()}(e,t,s)}function o(e){e.size||(e.size=3);var n=c.create_element("ul");e.id&&(n.id=e.id+"-rpgui-list"),c.add_class(n,"rpgui-list-imp"),e.parentNode.insertBefore(n,e.nextSibling),e.style.display="none";for(var t=[],s=0;s<e.children.length;++s){var a=e.children[s];if("OPTION"==a.tagName){var i=c.create_element("li");i.innerHTML=a.innerHTML,n.appendChild(i),i.dataset.rpguivalue=a.value,t.push(i),c.copy_event_listeners(a,i),function(e,n,t,s,a){t.addEventListener("click",function(){e.disabled||(n.selected=!0,c.fire_event(e,"change"))})}(e,a,i,n,t)}}if(t.length&&e.size){var r=t[0].offsetHeight;n.style.height=r*e.size+"px"}!function(e,n){function t(e){for(var t=0;t<n.length;++t){var s=n[t];s.dataset.rpguivalue==e.value?c.add_class(s,"rpgui-selected"):c.remove_class(s,"rpgui-selected")}}e.addEventListener("change",function(){t(this)}),t(e)}(e,t)}function d(e){var n=c.has_class(e,"golden")?" golden":"",t=c.create_element("div");e.id&&(t.id=e.id+"-rpgui-slider"),c.copy_css(e,t),c.add_class(t,"rpgui-slider-container"+n),c.insert_after(t,e),t.style.width=e.offsetWidth+"px";var s=c.create_element("div");c.add_class(s,"rpgui-slider-track"+n),t.appendChild(s);var a=c.create_element("div");c.add_class(a,"rpgui-slider-left-edge"+n),t.appendChild(a);var i=c.create_element("div");c.add_class(i,"rpgui-slider-right-edge"+n),t.appendChild(i);var r=c.create_element("div");c.add_class(r,"rpgui-slider-thumb"+n),t.appendChild(r),e.style.display="none",c.copy_event_listeners(e,t);var o={mouse_down:!1};!function(e,n,t,s,a,i,r){function o(e){var n=u+Math.round(e/p*(_-u))-1;d(n)}function d(n){e.disabled||e.value==n||c.set_value(e,n)}function l(){var n=p/(_-u),s=Math.round(parseFloat(e.value)-u);t.style.left=Math.floor(.25*f)+s*n+"px"}var u=parseFloat(e.min),_=parseFloat(e.max),f=i.offsetWidth+r.offsetWidth,p=s.offsetWidth-f;n.addEventListener("mouseup",function(e){a.mouse_down=!1}),window.addEventListener("mouseup",function(e){a.mouse_down=!1}),s.addEventListener("mousedown",function(e){a.mouse_down=!0,o(e.offsetX||e.layerX)}),n.addEventListener("mousedown",function(e){a.mouse_down=!0}),r.addEventListener("mousedown",function(e){d(u)}),i.addEventListener("mousedown",function(e){d(_)}),r.addEventListener("mousemove",function(e){a.mouse_down&&d(u)}),i.addEventListener("mousemove",function(e){a.mouse_down&&d(_)}),s.addEventListener("mousemove",function(n){a.mouse_down&&!e.disabled&&o(n.offsetX||n.layerX)}),e.addEventListener("change",function(e){l()}),l()}(e,t,r,s,o,i,a)}var c=c||{};c.version=1.03,c.author="Ronen Ness",c.init_on_load=!0,window.addEventListener("load",function(){c.init_on_load&&c.init()}),c.init=function(){if(c._was_init)throw"RPGUI was already init!";for(var e=0;e<c.__init_list.length;++e)c.__init_list[e]();c._was_init=!0},c.__init_list=[],c.on_load=function(e){c._was_init&&e(),c.__init_list.push(e)},c.__update_funcs={},c.__create_funcs={},c.__get_funcs={},c.__set_funcs={},c.create=function(e,n){if(!c.__create_funcs[n])throw"Not a valid rpgui type! options: "+Object.keys(c.__create_funcs);e.dataset.rpguitype=n,c.__create_funcs[n](e)},c.update=function(e){var n=e.dataset.rpguitype;c.__update_funcs[n]?c.__update_funcs[n](e):c.fire_event(e,"change")},c.set_value=function(e,n){var t=e.dataset.rpguitype;c.__set_funcs[t]?c.__set_funcs[t](e,n):e.value=n,c.update(e)},c.get_value=function(e){var n=e.dataset.rpguitype;return c.__get_funcs[n]?c.__get_funcs[n](e):e.value};var l="rpgui-checkbox";c.__create_funcs.checkbox=function(n){c.add_class(n,l),e(n)},c.__set_funcs.checkbox=function(e,n){e.checked=n},c.__get_funcs.checkbox=function(e){return e.checked},c.on_load(function(){for(var e=document.getElementsByClassName(l),n=0;n<e.length;++n)c.create(e[n],"checkbox")}),c.on_load(function(){for(var e=document.getElementsByClassName("rpgui-content"),n=0;n<e.length;++n){var t=e[n];c.prevent_drag(t),c.set_cursor(t,"default")}});var u=null,_=null,f=1e3,p="rpgui-draggable";c.__create_funcs.draggable=function(e){e.draggable=!1,e.ondragstart=function(){return!1},c.add_class(e,p),e.addEventListener("mousedown",t)},c.on_load(function(){for(var e=document.getElementsByClassName(p),t=0;t<e.length;++t)c.create(e[t],"draggable");window.addEventListener("mouseup",n)});var g="rpgui-progress";c.__create_funcs.progress=function(e){c.add_class(e,g),a(e)},c.__set_funcs.progress=function(e,n){var t=c.get_child_with_class(e,"rpgui-progress-track"),s=c.get_child_with_class(t,"rpgui-progress-fill");c.get_child_with_class(e,"rpgui-progress-left-edge"),c.get_child_with_class(e,"rpgui-progress-right-edge");s.style.left="0px",s.style.width=100*n+"%"},c.on_load(function(){for(var e=document.getElementsByClassName(g),n=0;n<e.length;++n)c.create(e[n],"progress")});var v="rpgui-radio";c.__create_funcs.radio=function(e){c.add_class(e,v),i(e)},c.__set_funcs.radio=function(e,n){e.checked=n},c.__get_funcs.radio=function(e){return e.checked},c.on_load(function(){for(var e=document.getElementsByClassName(v),n=0;n<e.length;++n)c.create(e[n],"radio")});var h="rpgui-dropdown";c.__create_funcs.dropdown=function(e){c.add_class(e,h),r(e)},c.on_load(function(){for(var e=document.getElementsByClassName(h),n=0;n<e.length;++n)c.create(e[n],"dropdown")});var m="rpgui-list";c.__create_funcs.list=function(e){c.add_class(e,m),o(e)},c.on_load(function(){for(var e=document.getElementsByClassName(m),n=0;n<e.length;++n)c.create(e[n],"list")});var y="rpgui-slider";return c.__create_funcs.slider=function(e){c.add_class(e,y),d(e)},c.on_load(function(){for(var e=document.getElementsByClassName(y),n=0;n<e.length;++n)c.create(e[n],"slider")}),c.create_element=function(e){return e=document.createElement(e)},c.set_cursor=function(e,n){c.add_class(e,"rpgui-cursor-"+n)},c.prevent_drag=function(e){},c.copy_css=function(e,n){n.style.cssText=e.style.cssText},c.has_class=function(e,n){return(" "+e.className+" ").indexOf(" "+n+" ")>-1},c.add_class=function(e,n){c.has_class(e,n)||(e.className+=" "+n)},c.get_child_with_class=function(e,n){for(var t=0;t<e.childNodes.length;t++)if(c.has_class(e.childNodes[t],n))return e.childNodes[t]},c.remove_class=function(e,n){e.className=(" "+e.className+" ").replace(n,""),e.className=e.className.substring(1,e.className.length-1)},c.fire_event=function(e,n){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent(n,!1,!0),e.dispatchEvent(t)}else e.fireEvent("on"+n)},c.copy_event_listeners=function(e,n){if("function"==typeof getEventListeners){var t=getEventListeners(e);for(var s in t)t[s].forEach(function(e){n.addEventListener(s,e.listener,e.useCapture)})}for(attr in e)0===attr.indexOf("on")&&(n[attr]=e[attr])},c.insert_after=function(e,n){n.parentNode.insertBefore(e,n.nextSibling)},c}();
\ No newline at end of file
--- /dev/null
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+ <title>RPGUI - Everything</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+ <!-- include rpgui -->
+ <link href="rpgui.min.css" rel="stylesheet" type="text/css" >
+ <script src="rpgui.min.js"></script>
+
+ <style>
+ body
+ {
+ background: #aaf;
+ }
+ </style>
+
+</head>
+
+<body>
+
+ <style>
+
+ .rpgui-container {
+ height:540px;
+ width:280px;
+ }
+
+ </style>
+
+ <!-- all rpgui elements must be inside the rpgui-content -->
+ <div class="rpgui-content">
+
+ <p style="position:fixed; right:0px; bottom:0px;">This example shows all the key elements of RPGUI.<br />You might need to zoom-out a little to view all.</p>
+
+ <!-- simple inputs -->
+ <div class="rpgui-container framed rpgui-draggable" style="">
+ <h1>Inputs</h1>
+ <hr />
+
+ <label>Your hero name:</label>
+ <input type="text" name="FirstName" value="Bob" placeholder="Hero name">
+ <br/><br/>
+
+ <label>Your hero last name:</label>
+ <input type="text" name="FirstName" value="The Destroyer" placeholder="Hero last name">
+ <br /><br />
+
+ <label>Your hero bio:</label>
+ <textarea rows="3" cols="50">Bob The Destroyer likes to destroy stuff.</textarea>
+
+ <p>Here is a paragraph.</p>
+ <label>Golden hr:</label>
+ <hr class="golden" />
+ <a href="#"> And this is a link.</a>
+ </div>
+
+ <!-- Buttons, radio and checkbox -->
+ <div class="rpgui-container framed rpgui-draggable" style="left:280px">
+ <h1>Buttons</h1>
+ <hr />
+
+ <button class="rpgui-button" type="button" style="width:100%"><p>Button</p></button>
+ <br /><br />
+ <button class="rpgui-button golden" type="button" style="width:100%"><p>Gold Button</p></button>
+ <br /><br />
+
+ <h1>Radio/Check</h1>
+ <hr />
+ <form action="">
+ <label>Hero's gender:</label>
+ <br />
+ <input class="rpgui-radio" checked type="radio" name="sex" value="male"><label>Male</label>
+ <br />
+ <input class="rpgui-radio" type="radio" name="sex" value="female"><label>Female</label>
+ </form>
+ <hr />
+ <input class="rpgui-checkbox" type="checkbox" checked><label>Checkbox 1.</label>
+ <input class="rpgui-checkbox" type="checkbox"><label>Checkbox 2.</label>
+ </div>
+
+ <!-- Dropdown and list -->
+ <div class="rpgui-container framed rpgui-draggable" style="left:560px">
+ <h1>Drop & List</h1>
+ <hr />
+
+ <p>RPGUI dropdown</p>
+ <label>Select class:</label>
+ <select class="rpgui-dropdown">
+ <option value="Warrior" selected>Warrior</option>
+ <option value="Mage">Mage</option>
+ <option value="Rogue">Rogue</option>
+ <option value="Ranger">Ranger</option>
+ </select>
+ <hr />
+
+ <p>RPGUI list:</p>
+ <label>Profession:</label>
+ <select class="rpgui-list" id="background-select" size="4">
+ <option value="Blacksmith">Blacksmith</option>
+ <option value="Merchant">Merchant</option>
+ <option value="City Guard">City Guard</option>
+ <option value="Alchemist">Alchemist</option>
+ <option value="Explorer">Explorer</option>
+ <option value="Thug">Thug</option>
+ <option value="Mercenary">Mercenary</option>
+ <option value="Royalty">Royalty</option>
+ <option value="Gladiator">Gladiator</option>
+ </select>
+
+ <div class="rpgui-container framed-grey" style="width:100%; height:90px; left:0px; top:0px;">
+ <label>Here's a grey frame.</label>
+ </div>
+ </div>
+
+ <!-- Icons -->
+ <div class="rpgui-container framed rpgui-draggable" style="left:840px">
+ <h1>Icons</h1>
+ <hr />
+
+ <div class="rpgui-icon sword"></div>
+ <div class="rpgui-icon shield"></div>
+ <div class="rpgui-icon exclamation"></div>
+ <br /><br />
+
+ <div class="rpgui-icon potion-red"></div>
+ <div class="rpgui-icon potion-green"></div>
+ <div class="rpgui-icon potion-blue"></div>
+ <br /><br />
+
+ <div class="rpgui-icon weapon-slot"></div>
+ <div class="rpgui-icon shield-slot"></div>
+ <div class="rpgui-icon armor-slot"></div>
+ <br /><br />
+
+ <div class="rpgui-icon helmet-slot"></div>
+ <div class="rpgui-icon ring-slot"></div>
+ <div class="rpgui-icon potion-slot"></div>
+ <br /><br />
+
+ <div class="rpgui-icon magic-slot"></div>
+ <div class="rpgui-icon shoes-slot"></div>
+ <div class="rpgui-icon empty-slot"></div>
+ <br /><br />
+ </div>
+
+ <!-- Sliders and progress bars -->
+ <div class="rpgui-container framed rpgui-draggable" style="left:0px; top:540px;">
+ <h1>Sliders</h1>
+ <hr />
+
+ <label>Slider:</label>
+ <input class="rpgui-slider" type="range" min="0" max="10" value="8" style="width:100%">
+ <label>Golden slider:</label>
+ <input class="rpgui-slider golden" type="range" min="1" max="5" value="3" style="width:100%">
+
+ <h1>Bars</h1>
+ <hr />
+ <label>Health:</label>
+ <div id="hp-bar" data-value="0.4" class="rpgui-progress red"></div>
+ <label>Mana:</label>
+ <div id="mana-bar" data-value="0.8" class="rpgui-progress blue"></div>
+ <label>Stamina:</label>
+ <div id="stamina-bar" data-value="0.2" class="rpgui-progress green"></div>
+ </div>
+
+ <!-- some other frames -->
+ <div class="rpgui-container framed-golden rpgui-draggable" style="width:180px; height:180px; left:280px; top:540px;">
+ <p>This is a golden frame.</p>
+ </div>
+ <div class="rpgui-container framed-golden-2 rpgui-draggable" style="width:180px; height:180px; left:462px; top:540px;">
+ <p>This is a golden-2 frame.</p>
+ </div>
+ <div class="rpgui-container framed-grey rpgui-draggable" style="width:180px; height:180px; left:280px; top:720px;">
+ <p>This is a grey frame.</p>
+ </div>
+ </div>
+</body>
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- <title>Dashboard</title>
- <link rel="stylesheet" href="https://unpkg.com/7.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>My Quests</title>
+ <link href="./dist/rpgui.css" rel="stylesheet" type="text/css" >
+ <script src="./dist/rpgui.js"></script>
<style>
#new-task-popup-window {
- width: 300px;
- position: fixed;
+ width: 350px;
+ position: absolute;
z-index: 999;
top: 50%;
left: 50%;
transition-duration: 0.2s;
transition-property: visibility, opacity;
}
- .table-container {
- overflow: hidden;
- overflow-y: scroll;
- height: 200px;
- }
- thead {
- top: 0;
- z-index: 2;
- position: sticky;
- }
- table {
- width: 290px;
- }
</style>
</head>
-<body style="display: flex; justify-content: center; align-items: center;">
- <div class="window active" style="margin: 32px; width: fit-content;">
- <div class="title-bar">
- <div class="title-bar-title">ToDo App - Dashboard</div>
- <form action="../includes/logout.php" method="POST" class="title-bar-controls">
- <button type="submit" aria-label="Close"></button>
- </form>
+<body class="rpgui-content" style="display: flex; justify-content: center;">
+ <div class="rpgui-container framed" style="margin: 32px; width: 100%; max-width: 600px;">
+ <div style="text-align: right;">
+ <form action="../includes/logout.php" method="POST" class="title-bar-controls">
+ <button class="rpgui-button" type="submit">Exit</button>
+ </form>
</div>
- <main class="window-body has-space">
- <h1 class="instruction instruction-primary" style="text-align: center;">My ToDo List</h1>
- <p class="instruction" style="text-align: center;">"I must finish all of these!"</p>
- <div class="field-row">
- <input type="search" placeholder="Search task...">
- <select name="sort" id="sort">
- <option value="all" selected>All</option>
- <option value="incomplete">Incomplete</option>
- <option value="complete">Complete</option>
- </select>
- <button type="button" id="new-task-popup-open">Add task</button>
- </div>
-
- <div class="field-row-stacked" style="float: right; margin-left: 7px;">
- <button type="button" id="edit-task" disabled>Edit</button>
- <button type="button" id="delete-task" disabled>Delete</button>
+ <main>
+ <h1 style="text-align: center;">My ToDo List</h1>
+ <p style="text-align: center;">"I must finish all of these!"</p>
+ <hr class="golden">
+ <div>
+ <div>
+ <input type="search" id="search" placeholder="Search task...">
+ <select class="rpgui-dropdown" name="sort" id="sort">
+ <option value="all" selected>All</option>
+ <option value="incomplete">Incomplete</option>
+ <option value="complete">Complete</option>
+ </select>
+ </div>
+
+ <!-- action buttons for tasks -->
+ <div style="display: flex; justify-content: space-between; align-items: center;">
+ <div>
+ <button class="rpgui-button" type="button" id="new-task-popup-open">Add task</button>
+ </div>
+ <div>
+ <button class="rpgui-button" type="button" id="edit-task" disabled>Edit</button>
+ <button class="rpgui-button" type="button" id="delete-task" disabled>Delete</button>
+ </div>
+ </div>
</div>
- <div class="field-row-stacked table-container">
- <table class="has-shadow">
- <thead>
- <tr>
- <th style="width: 15%;"></th>
- <th style="width: 85%; text-align: center;">Task</th>
- </tr>
- </thead>
- <tbody id="task-body">
- <!-- ajax will insert the fetched task data here... -->
- </tbody>
- </table>
+ <div class="rpgui-container framed-grey" style="width: 80%; margin: auto;">
+ <h2 style="text-align: center;">Tasks</h2>
+ <hr>
+ <div id="task-body" style="width: 80%; margin: auto; word-break: break-all;">
+ <!-- ajax will insert the fetched task data here... -->
+ </div>
</div>
<!-- popup -->
- <div class="window active is-bright" id="new-task-popup-window" aria-labelledby="dialog-title">
- <div class="title-bar">
- <div class="title-bar-text" id="dialog-title">New Task</div>
- <div class="title-bar-controls">
- <button type="button" aria-label="Close" id="new-task-popup-close"></button>
+ <div class="rpgui-container framed golden rpgui-draggable" id="new-task-popup-window">
+ <h3>New Task</h3>
+ <p>Add the task you need to do.</p>
+ <form id="add-task-form">
+ <input type="text" id='task-name' name="task-name" placeholder="New task...">
+ <div style="display: flex; justify-content: center; align-items: center;">
+ <button class="rpgui-button" type="button" id="new-task-popup-close">Close</button>
+ <button class="rpgui-button" type="submit">Add</button>
</div>
- </div>
- <div class="window-body has-space">
- <p class="instruction instruction-primary">Create new task...</p>
- <p class="instruction">Add the task you need to do.</p>
- <form id="add-task-form" class="field-row-stacked">
- <input type="text" id='task-name' name="task-name" placeholder="New task...">
- <div style="text-align: right;">
- <button type="submit">Add</button>
- </div>
- </form>
- </div>
+ </form>
</div>
</main>
</div>
return response.json();
})
.then(function(data){
- const tbody = document.getElementById('task-body');
- tbody.innerHTML = '';
+ const taskBody = document.getElementById('task-body');
+ taskBody.innerHTML = '';
if(Array.isArray(data) && data.length > 0){
data.forEach(function(task){
- const tr = document.createElement('tr');
- tr.innerHTML = `
- <td style="text-align: center;">
- <input type="checkbox" id="${task.task_id}">
- <label for="${task.task_id}"></label>
- </td>
- <td>${task.task}</td>
+ const div = document.createElement('div');
+ div.innerHTML = `
+ <input class="rpgui-checkbox" type="checkbox" id="${task.task_id}">
+ <label for="${task.task_id}">${task.task}</label>
`;
- tbody.appendChild(tr);
+ taskBody.appendChild(div);
// listen for checkboxes after loading tasks in DOM
addCheckboxListeners();
});
} else{
- const tr = document.createElement('tr');
- tr.innerHTML = '<td colspan="3" style="color: red; text-align: center;">No tasks found.</td>';
- tbody.appendChild(tr);
+ const div = document.createElement('div');
+ div.innerHTML = '<p style="text-align: center; color: red;">No tasks found.</p>';
+ taskBody.appendChild(div);
}
})
.catch(function(error){
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Log in</title>
- <link rel="stylesheet" href="https://unpkg.com/7.css">
+ <link href="./dist/rpgui.css" rel="stylesheet" type="text/css" >
+ <script src="./dist/rpgui.js"></script>
</head>
-<body style="display: flex; justify-content: center; align-items: center;">
- <div class="window active" style="margin: 32px; width: fit-content;">
- <div class="title-bar">
- <div class="title-bar-title">ToDo App - Log in</div>
- </div>
+<body class="rpgui-content" style="display: flex; justify-content: center;">
+ <div class="rpgui-container framed" style="margin: 32px; width: 100%; max-width: 600px;">
- <main class="window-body has-space">
- <p class="instruction instruction-primary">You are now in the log in page.</p>
- <p class="instruction">Fill in the information below to access your account.</p>
- <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
- <fieldset class="field-row">
- <legend>Log in to your account</legend>
+ <main>
+ <h1 style="text-align: center;">Log in</h1>
+ <p>Fill in the information below to access your account.</p>
+ <div class="rpgui-container framed-grey" style="width: 80%; margin: auto;">
+ <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
<input type="text" name="username" placeholder="username">
<input type="password" name="pwd" placeholder="password">
- <button type="submit">Log In</button>
- </fieldset>
- </form>
+ <div style="text-align: right;">
+ <button class="rpgui-button" type="submit">Log In</button>
+ </div>
+ </form>
+ </div>
<?php if(!empty($errors)): ?>
<div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Sign up</title>
- <link rel="stylesheet" href="https://unpkg.com/7.css">
+ <link href="./dist/rpgui.css" rel="stylesheet" type="text/css" >
+ <script src="./dist/rpgui.js"></script>
</head>
-<body style="display: flex; justify-content: center; align-items: center;">
- <div class="window active" style="margin: 32px; width: fit-content;">
- <div class="title-bar">
- <div class="title-bar-title">ToDo App - Sign up</div>
- </div>
+<body class="rpgui-content" style="display: flex; justify-content: center;">
+ <div class="rpgui-container framed" style="margin: 32px; width: 100%; max-width: 600px;">
- <main class="window-body has-space">
- <p class="instruction instruction-primary">You are now in the sign up page.</p>
- <p class="instruction">Some recommendation on creating an account:</p>
- <ul class="instruction">
+ <main>
+ <h1 style="text-align: center;">Sign up</h1>
+ <p>Some recommendations on creating an account:</p>
+ <ul>
<li>Choose a password that is atleast 12 characters long.</li>
<li>Use a strong password. Combination of uppercase, lowercase, numbers, and special characters.</li>
</ul>
- <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
- <fieldset class="field-row">
- <legend>Create an account</legend>
+ <div class="rpgui-container framed-grey" style="width: 80%; margin: auto;">
+ <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
<input type="text" name="username" placeholder="username">
<input type="text" name="email" placeholder="email">
<input type="password" name="pwd" placeholder="password">
- <button type="submit">Register</button>
- </fieldset>
- </form>
+ <div style="text-align: right;">
+ <button class="rpgui-button" type="submit">Register</button>
+ </div>
+ </form>
+ </div>
+
<?php if(!empty($errors)): ?>
<div>
repos / QuestLog.git / commitdiff
