diff --git a/public/components/w95/ContextButton.jsx b/public/components/w95/ContextButton.jsx
new file mode 100644
index 0000000..aa2e1f2
--- /dev/null
+++ b/public/components/w95/ContextButton.jsx
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+import ContextMenuButton from './ContextMenuButton';
+
+class ContextButton extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClick = function(e) {
+ if(this.isOpen()) {
+ //Already active, close menu.
+ this.props.menu.closeMenu();
+ } else {
+ this.props.menu.openMenu(this.props.selfRef, this);
+ }
+ e.stopPropagation();
+ }.bind(this);
+
+ this.handleHover = function() {
+ this.props.menu.hoverMenu(this.props.selfRef, this);
+ }.bind(this);
+ }
+
+ componentDidMount() {
+ let e = this.refs[this.props.selfRef];
+
+ e.addEventListener('click', this.handleClick);
+ e.addEventListener('mouseover', this.handleHover);
+ }
+
+ componentWillUmount() {
+ let e = this.refs[this.props.selfRef];
+
+ e.removeEventListener('click', this.handleClick);
+ e.removeEventListener('mouseover', this.handleHover);
+ }
+
+ open() {
+ if(this.isDisabled()) return this.hide();
+ this.refs[this.props.selfRef].addClass("active");
+ }
+
+ isDisabled() {return this.refs[this.props.selfRef].hasClass("disabled");}
+
+ hide() {
+ this.refs[this.props.selfRef].removeClass("active");
+ }
+
+ isOpen() {
+ return this.refs[this.props.selfRef].hasClass("active");
+ }
+
+ render() {
+ let cls = "btn";
+
+ let options = [];
+ if(this.props.data === "disabled") {
+ cls += " disabled";
+ } else {
+ let opts = Object.keys(this.props.data);
+ for(let i = 0; i < opts.length; i++) {
+ let k = opts[i];
+ let o = this.props.data[k];
+ //options.push({k}
);
+ options.push();
+ }
+ }
+
+ let menu = ;
+ if(options.length > 0) {
+ menu = (
+
+ {options}
+
+ );
+ }
+
+ return (
+
+ {this.props.title}
+ {menu}
+
+ )
+ }
+}
+
+export default ContextButton;
diff --git a/public/components/w95/ContextMenu.jsx b/public/components/w95/ContextMenu.jsx
new file mode 100644
index 0000000..eede9fa
--- /dev/null
+++ b/public/components/w95/ContextMenu.jsx
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+import ContextButton from './ContextButton';
+import ContextMenuButton from './ContextMenuButton';
+
+class ContextMenu extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClickOutside = function(e) {
+ this.closeMenu();
+ e.stopPropagation();
+ }.bind(this);
+ }
+
+ isOpen() {
+ return this.open;
+ }
+
+ openMenu(ref, el) {
+ let keys = Object.keys(this.refs);
+ for(let i = 0; i < keys.length; i++) {
+ this.refs[keys[i]].hide(ref, el);
+ }
+ el.open();
+ this.open = true;
+ }
+
+ closeMenu() {
+ let keys = Object.keys(this.refs);
+ for(let i = 0; i < keys.length; i++) {
+ this.refs[keys[i]].hide();
+ }
+ this.open = false;
+ }
+
+ hoverMenu(ref, el) {
+ if(!this.isOpen()) return;
+ this.openMenu(ref, el);
+ }
+
+ componentDidMount() {
+ document.addEventListener('click', this.handleClickOutside);
+ }
+
+ componentWillUmount() {
+ document.removeEventListener('click', this.handleClickOutside);
+ }
+
+ render() {
+ let contextButtons = [];
+ let btnKeys = Object.keys(this.props.menu);
+ for(let i = 0; i < btnKeys.length; i++) {
+ let key = btnKeys[i];
+ var b = this.props.menu[key];
+ if(b === false) continue;
+ contextButtons.push();
+ }
+
+ return (
+
+ {contextButtons}
+
+ );
+ }
+}
+
+export default ContextMenu;
diff --git a/public/components/w95/ContextMenuButton.jsx b/public/components/w95/ContextMenuButton.jsx
new file mode 100644
index 0000000..98b9647
--- /dev/null
+++ b/public/components/w95/ContextMenuButton.jsx
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+class ContextMenuButton extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClick = function(e) {
+ e.stopPropagation();
+ if(this.isDisabled()) return;
+ this.props.button.props.menu.closeMenu();
+ this.clicked();
+ }.bind(this);
+ }
+
+ clicked() {
+ if(typeof this.props.data === 'function') {
+ this.props.data();
+ }
+ }
+
+ componentDidMount() {
+ this.refs.option.addEventListener('click', this.handleClick);
+ }
+
+ componentWillUmount() {
+ this.refs.option.removeEventListener('click', this.handleClick);
+ }
+
+ isDisabled() {return this.props.data === "disabled";}
+
+ render() {
+ let cls = "menu-option";
+
+ if(this.isDisabled()) cls += " disabled";
+
+ return (
+
+ {this.props.title}
+
+ );
+ }
+}
+
+export default ContextMenuButton;
diff --git a/public/components/w95/Window95.jsx b/public/components/w95/Window95.jsx
new file mode 100644
index 0000000..8f93936
--- /dev/null
+++ b/public/components/w95/Window95.jsx
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+
+import ContextMenuButton from './ContextMenuButton';
+import ContextButton from './ContextButton';
+import ContextMenu from './ContextMenu';
+
+const defaultButtons = {
+ maximize: false,
+ minimize: "disabled",
+ close: true
+};
+
+const defaultMenus = {
+ "File": {
+ "New...": true,
+ "Open...": "disabled",
+ "Exit": true,
+ },
+
+ "Edit": "disabled",
+ "Help": {
+ "View Help...": true,
+ "About domsPlace();": true
+ }
+};
+
+class Window95 extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ title: this.props.title ? this.props.title : "Untitled",
+ buttons: this.props.buttons ? this.props.buttons : defaultButtons,
+ menu: this.props.menu ? this.props.menu : defaultMenus
+ };
+ }
+
+ render() {
+ let btns = [];
+ let btnKeys = Object.keys(this.state.buttons);
+ for(let i = 0; i < btnKeys.length; i++) {
+ let key = btnKeys[i];
+ var b = this.state.buttons[key];
+ if(b === false) continue;
+ let cls = "btn " + btnKeys[i];
+ if(b !== true && b !== false) cls += " " + b;
+ btns.push();
+ }
+
+ let menu =
+ if(this.state.menu !== "false") {
+ menu = ;
+ }
+
+ let clss = "window ";
+ if(this.props.className) clss += this.props.className;
+
+ return (
+
+
+
+ {this.state.title}
+
+ {btns}
+
+
+ {menu}
+
+ {this.props.children}
+