Vendor in webretro for now

emus/static/js/webretro/.gitattributes

@@ -0,0 +1,2 @@
+source/* linguist-detectable=false
+source/* linguist-vendored=false

emus/static/js/webretro/.gitignore

@@ -0,0 +1,3 @@
+/roms/
+workstuff.txt
+/backup/

emus/static/js/webretro/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 BinBashBanana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

emus/static/js/webretro/assets/base.css

@@ -0,0 +1,644 @@
+body {
+	overflow: hidden;
+	font-family: sans-serif;
+}
+
+#mainarea {
+	background-color: black;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	overflow: hidden;
+}
+
+#canvas {
+	display: block;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	/*image-resolution: 2dppx;*/
+	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iNTAiPjx0ZXh0IHN0eWxlPSJmb250OiAzMHB4IHNhbnMtc2VyaWY7IiBmaWxsPSJ3aGl0ZSIgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkxvYWRpbmc8L3RleHQ+PC9zdmc+");
+	background-repeat: no-repeat;
+	background-position: center;
+	z-index: 4;
+	height: 100vh !important;
+	width: auto !important;
+}
+
+#canvasmask {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateX(-100vw) translate(-50%, -50%);
+	z-index: 5;
+}
+
+@media (min-height: 75vw) {
+	#canvas {
+		height: auto !important;
+		width: 100vw !important;
+	}
+}
+
+#canvasmask>* {
+	transform: translateX(100vw);
+}
+
+#canvas.textureSmooth {
+	image-rendering: auto;
+}
+
+#canvas.texturePixelated {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}
+
+.console, .consolemarker, .consoleinput {
+	display: block;
+	outline: none;
+	appearance: none;
+	margin: 0px;
+	padding: 2px;
+	border: none;
+	background-color: black;
+	color: #EEE;
+	font-family: monospace;
+}
+
+.console {
+	width: calc(100% - 4px);
+	height: calc(100% - 24px);
+	resize: none;
+	overflow: auto;
+	white-space: pre;
+}
+
+.console::selection, .consoleinput::selection {
+	background-color: #f3f3f3;
+	color: black;
+}
+
+.consolemarker {
+	width: 16px;
+	height: 16px;
+	float: left;
+	user-select: none;
+	text-align: center;
+	font-weight: bold;
+	color: #367cf1;
+}
+
+.consolemarker::after {
+	content: ">";
+}
+
+.consoleinput {
+	width: calc(100% - 24px);
+	height: 16px;
+	float: right;
+}
+
+ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+#menu {
+	position: fixed;
+	display: none;
+	background-color: #ffffff;
+	transition: opacity 0.3s ease;
+	z-index: 20;
+	opacity: 0;
+}
+
+#menu:hover, #menu.show {
+	opacity: 0.9;
+}
+
+#menuindicator {
+	position: absolute;
+	display: none;
+	left: 50%;
+	transform: translateX(-50%);
+	top: 50px;
+	background-color: black;
+	border-radius: 2px;
+	color: white;
+	text-align: center;
+	padding: 20px;
+	font-size: 20px;
+}
+
+#menuindicator.show {
+	display: block;
+}
+
+#menuindicator h1, #menuindicator h2 {
+	margin: 0px;
+}
+
+#menu li {
+	white-space: nowrap;
+	max-width: 250px;
+	position: relative;
+}
+
+#menu>li {
+	padding: 12px 16px;
+	cursor: pointer;
+	display: inline-block;
+	float: left;
+}
+
+#menu li:not(.disabled, .menu-nohover):hover {
+	background-color: rgba(0, 0, 0, .1);
+}
+
+#menu .menu-long {
+	white-space: normal;
+}
+
+#menu li input {
+	transform: scale(1.5);
+	cursor: pointer;
+	margin: 0px 12px 0px 0px;
+}
+
+#menu li a {
+	text-decoration: underline;
+	color: black;
+}
+
+/* both opacity AND visibility are important in this case */
+#menu li:hover>ul {
+	visibility: visible;
+	opacity: 1;
+}
+
+#menu ul {
+	visibility: hidden;
+	opacity: 0;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	background-color: rgb(245, 245, 245);
+	transition: opacity 0.3s ease;
+}
+
+#menu ul li {
+	padding: 4px 12px;
+	cursor: default;
+}
+
+#menu ul li.pointer {
+	cursor: pointer;
+}
+
+#menu li.disabled {
+	color: #666;
+	cursor: not-allowed !important;
+}
+
+#menu ul.disabled li:hover, #menu ul.menu-nohover li:hover {
+	background-color: rgb(245, 245, 245);
+}
+
+input[disabled] {
+	cursor: not-allowed !important;
+}
+
+#menu ul.xlmenu li {
+	max-width: none;
+}
+
+#ffd {
+	height: 200px;
+	width: 400px;
+	position: absolute;
+	background-color: #dddddd;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	text-align: center;
+	border-radius: 2px;
+	overflow: auto;
+	z-index: 8;
+}
+
+#ffd::before {
+	opacity: 0;
+	width: 100%;
+	height: 0px;
+	background-color: #333333;
+	content: "Drop File";
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30px;
+	font-weight: bold;
+	color: white;
+}
+
+#ffd.filehover::before {
+	opacity: 1;
+	height: 100%;
+}
+
+#ffd.filehover {
+	border: 2px dashed #dddddd;
+	background-color: #333333;
+}
+
+#ffd ul li {
+	margin-bottom: 3px;
+}
+
+#ffd ul li a {
+	text-decoration: none;
+	color: black;
+}
+
+input[type="file"] {
+	display: none;
+}
+
+.uploadbutton {
+	margin: 8px 10px;
+	display: inline-block;
+	user-select: none;
+	cursor: pointer;
+}
+
+.uploadimage {
+	width: 20px;
+	vertical-align: middle;
+}
+
+#upload {
+	border: 1px solid rgb(118, 118, 118);
+	border-radius: 2px;
+	padding: 4px;
+	font-size: 13px;
+	background-color: white;
+	transition: ease .1s;
+}
+
+#upload:hover {
+	background-color: #eee;
+}
+
+#ffdcontent {
+	height: calc(100% - 45px);
+	padding: 10px;
+	overflow: auto;
+}
+
+#ffd .source {
+	width: calc(100% - 10px);
+	height: 15px;
+	padding: 5px;
+}
+
+#ffd .source * {
+	text-decoration: none;
+	color: black;
+	font-size: 10px;
+	margin: 0px 5px;
+	vertical-align: top;
+	display: inline-block;
+	height: 15px;
+	line-height: 15px;
+}
+
+#versionindicator {
+	font-weight: bold;
+	position: absolute;
+	right: 5px;
+	cursor: help;
+}
+
+.greyer {
+	color: #404040 !important;
+}
+
+#resume {
+	z-index: 10;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	user-select: none;
+	display: none;
+}
+
+body.paused #canvas {
+	filter: blur(10px);
+}
+
+body.paused #resume {
+	display: block;
+}
+
+#resume div {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: black;
+	color: white;
+	padding: 20px;
+	text-align: center;
+	border-radius: 2px;
+}
+
+#resume div h1 {
+	margin-top: 0px;
+}
+
+#resume div h3 {
+	margin-bottom: 0px;
+}
+
+#sidealertholder {
+	position: absolute;
+	right: 10px;
+	bottom: 0px;
+	width: 200px;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+}
+
+.sidealert {
+	background-color: rgb(49, 113, 152);
+	color: white;
+	user-select: none;
+	cursor: default;
+	margin: 0px;
+	padding: 5px 8px;
+	opacity: 0;
+	transition: all 0.1s ease-in;
+	position: relative;
+}
+
+.sidealert.on {
+	opacity: 1;
+	margin-bottom: 10px;
+}
+
+#startbutton {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-size: 40px;
+	padding: 10px 20px;
+	z-index: 100;
+	outline: none;
+	border-radius: 4px;
+	cursor: pointer;
+	display: none;
+}
+
+#updatenotice {
+	position: absolute;
+	top: calc(50% + 120px);
+	left: 50%;
+	transform: translateX(-50%);
+	max-height: calc(50% - 140px);
+	max-width: 400px;
+	overflow-y: auto;
+	margin: 0px;
+	padding: 0px 10px;
+	color: white;
+	white-space: pre-wrap;
+	z-index: 8;
+	display: none;
+}
+
+#modals {
+	background-color: rgba(255, 255, 255, 0.5);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	overflow: hidden;
+	z-index: 30;
+	display: none;
+}
+
+#managers {
+	background-color: white;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	height: calc(100vh - 50px);
+}
+
+.modaltop {
+	height: 30px;
+	line-height: 30px;
+	padding: 10px;
+}
+
+.modaltop h2 {
+	display: inline;
+	margin: 5px;
+	text-transform: capitalize;
+}
+
+.modaltop span {
+	float: right;
+	display: inline-block;
+	width: 30px;
+	text-align: center;
+	cursor: pointer;
+	font-size: 24px;
+}
+
+#keybindmanager, #screenshotmanager, #savemanager {
+	height: calc(100% - 90px);
+	padding: 20px;
+	padding-top: 10px;
+}
+
+#keybindmanager {
+	display: none;
+	width: 500px;
+}
+
+#screenshotmanager {
+	display: none;
+	width: 1000px;
+}
+
+#savemanager {
+	display: none;
+	width: 750px;
+}
+
+.managertableparent {
+	height: calc(100% - 78px);
+	width: 100%;
+	display: block;
+	overflow: auto;
+	margin-bottom: 20px;
+}
+
+.managertable {
+	box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 16, 0.15);
+	display: block;
+	width: 100%;
+	vertical-align: top;
+}
+
+.managertable tr {
+	display: block;
+	width: 100%;
+}
+
+.managertable td {
+	display: inline-block;
+	height: 100%;
+	padding: 2px;
+	padding-left: 6px;
+	white-space: nowrap;
+	overflow-x: auto;
+	
+	scrollbar-width: none;
+}
+
+#keybindtable td {
+	width: calc(50% - 8px);
+}
+
+.managertable td::-webkit-scrollbar {
+	display: none;
+}
+
+.managertable tr:nth-child(even) {
+	background-color: #ace9fa;
+}
+
+.managertable td:nth-child(even) {
+	background-color: rgba(0, 0, 0, 0.05);
+}
+
+#keybindtable td:last-child {
+	cursor: pointer;
+}
+
+#keybindtable td:last-child:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+#savetable tr {
+	display: flex;
+}
+
+#savetable td:first-child {
+	flex-grow: 1;
+}
+
+#savetable td:last-child {
+	flex-shrink: 0;
+	padding-left: 2px;
+}
+
+#savetable td:last-child span {
+	cursor: pointer;
+	margin: 4px;
+	padding: 1px 4px;
+	user-select: none;
+	background: white;
+	background: linear-gradient(#ffffff, #f3f3f3);
+}
+
+#savetable td:last-child span:active {
+	background: linear-gradient(#f3f3f3, #ffffff);
+}
+
+#modals input[type="button"] {
+	background-color: white;
+	border-radius: 0px;
+	border: 2px solid black;
+	padding: 4px 8px;
+	cursor: pointer;
+}
+
+#modals input[type="button"]:active {
+	background-color: #efefef;
+}
+
+#modals .specialblue {
+	background-color: #1e90ff !important;
+	color: white;
+}
+
+#modals input[type="button"].specialblue:active {
+	background-color: #0e80ef !important;
+}
+
+#keybindtable .conflict {
+	color: red;
+}
+
+#keybindmanager h4 {
+	margin-top: 0px;
+}
+
+#screenshotsdiv {
+	background-color: pink;
+	height: calc(100% - 40px);
+	width: calc(100% + 20px);
+	overflow-y: auto;
+	overflow-x: hidden;
+	margin-bottom: 20px;
+	display: flex;
+    flex-wrap: wrap;
+	background-color: #efefef;
+	box-shadow: inset -20px 0px 0px 0px white;
+}
+
+#screenshotmanager h4 {
+	display: inline-block;
+	margin: 0px;
+	margin-right: 10px;
+}
+
+#screenshotsdiv .screenshot {
+	width: 180px;
+	height: min-content;
+	padding: 10px;
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}
+
+#screenshotsdiv .screenshot img {
+	width: 180px;
+	display: block;
+}
+
+#screenshotsdiv .screenshot input[type="button"] {
+	width: 180px;
+	display: block;
+	margin-top: 5px;
+}
+
+dji-cowriter {
+	display: none !important;
+}

emus/static/js/webretro/assets/charToCodeMap.js

@@ -0,0 +1,217 @@
+var charToCodeMap = {
+"q": {code: "KeyQ"},
+"w": {code: "KeyW"},
+"e": {code: "KeyE"},
+"r": {code: "KeyR"},
+"t": {code: "KeyT"},
+"y": {code: "KeyY"},
+"u": {code: "KeyU"},
+"i": {code: "KeyI"},
+"o": {code: "KeyO"},
+"p": {code: "KeyP"},
+"a": {code: "KeyA"},
+"s": {code: "KeyS"},
+"d": {code: "KeyD"},
+"f": {code: "KeyF"},
+"g": {code: "KeyG"},
+"h": {code: "KeyH"},
+"j": {code: "KeyJ"},
+"k": {code: "KeyK"},
+"l": {code: "KeyL"},
+"z": {code: "KeyZ"},
+"x": {code: "KeyX"},
+"c": {code: "KeyC"},
+"v": {code: "KeyV"},
+"b": {code: "KeyB"},
+"n": {code: "KeyN"},
+"m": {code: "KeyM"},
+"Q": {code: "KeyQ", shift: true},
+"W": {code: "KeyW", shift: true},
+"E": {code: "KeyE", shift: true},
+"R": {code: "KeyR", shift: true},
+"T": {code: "KeyT", shift: true},
+"Y": {code: "KeyY", shift: true},
+"U": {code: "KeyU", shift: true},
+"I": {code: "KeyI", shift: true},
+"O": {code: "KeyO", shift: true},
+"P": {code: "KeyP", shift: true},
+"A": {code: "KeyA", shift: true},
+"S": {code: "KeyS", shift: true},
+"D": {code: "KeyD", shift: true},
+"F": {code: "KeyF", shift: true},
+"G": {code: "KeyG", shift: true},
+"H": {code: "KeyH", shift: true},
+"J": {code: "KeyJ", shift: true},
+"K": {code: "KeyK", shift: true},
+"L": {code: "KeyL", shift: true},
+"Z": {code: "KeyZ", shift: true},
+"X": {code: "KeyX", shift: true},
+"C": {code: "KeyC", shift: true},
+"V": {code: "KeyV", shift: true},
+"B": {code: "KeyB", shift: true},
+"N": {code: "KeyN", shift: true},
+"M": {code: "KeyM", shift: true},
+"0": {code: "Digit0"},
+"1": {code: "Digit1"},
+"2": {code: "Digit2"},
+"3": {code: "Digit3"},
+"4": {code: "Digit4"},
+"5": {code: "Digit5"},
+"6": {code: "Digit6"},
+"7": {code: "Digit7"},
+"8": {code: "Digit8"},
+"9": {code: "Digit9"},
+")": {code: "Digit0", shift: true},
+"!": {code: "Digit1", shift: true},
+"@": {code: "Digit2", shift: true},
+"#": {code: "Digit3", shift: true},
+"$": {code: "Digit4", shift: true},
+"%": {code: "Digit5", shift: true},
+"^": {code: "Digit6", shift: true},
+"&": {code: "Digit7", shift: true},
+"*": {code: "Digit8", shift: true},
+"(": {code: "Digit9", shift: true},
+"`": {code: "Backquote"},
+"-": {code: "Minus"},
+"=": {code: "Equal"},
+"[": {code: "BracketLeft"},
+"]": {code: "BracketRight"},
+"\\": {code: "Backslash"},
+";": {code: "Semicolon"},
+"'": {code: "Quote"},
+",": {code: "Comma"},
+".": {code: "Period"},
+"/": {code: "Slash"},
+"~": {code: "Backquote", shift: true},
+"_": {code: "Minus", shift: true},
+"+": {code: "Equal", shift: true},
+"{": {code: "BracketLeft", shift: true},
+"}": {code: "BracketRight", shift: true},
+"|": {code: "Backslash", shift: true},
+":": {code: "Semicolon", shift: true},
+"\"": {code: "Quote", shift: true},
+"<": {code: "Comma", shift: true},
+">": {code: "Period", shift: true},
+"?": {code: "Slash", shift: true},
+"\t": {code: "Tab"},
+"\n": {code: "Enter"},
+" ": {code: "Space"}
+};
+
+var charToKeyMap = {
+"\t": {key: "Tab"},
+"\n": {key: "Enter"}
+};
+
+var codeToConfigIDMap = {
+"KeyA": "a",
+"KeyB": "b",
+"KeyC": "c",
+"KeyD": "d",
+"KeyE": "e",
+"KeyF": "f",
+"KeyG": "g",
+"KeyH": "h",
+"KeyI": "i",
+"KeyJ": "j",
+"KeyK": "k",
+"KeyL": "l",
+"KeyM": "m",
+"KeyN": "n",
+"KeyO": "o",
+"KeyP": "p",
+"KeyQ": "q",
+"KeyR": "r",
+"KeyS": "s",
+"KeyT": "t",
+"KeyU": "u",
+"KeyV": "v",
+"KeyW": "w",
+"KeyX": "x",
+"KeyY": "y",
+"KeyZ": "z",
+"ArrowLeft": "left",
+"ArrowRight": "right",
+"ArrowUp": "up",
+"ArrowDown": "down",
+"Enter": "enter",
+"NumpadEnter": "kp_enter",
+"Tab": "tab",
+"Insert": "insert",
+"Delete": "del",
+"End": "end",
+"Home": "home",
+"ShiftRight": "rshift",
+"ShiftLeft": "shift",
+"ControlLeft": "ctrl",
+"AltLeft": "alt",
+"Space": "space",
+"Escape": "escape",
+"NumpadAdd": "add",
+"NumpadSubtract": "subtract",
+"F1": "f1",
+"F2": "f2",
+"F3": "f3",
+"F4": "f4",
+"F5": "f5",
+"F6": "f6",
+"F7": "f7",
+"F8": "f8",
+"F9": "f9",
+"F10": "f10",
+"F11": "f11",
+"F12": "f12",
+"Digit0": "num0",
+"Digit1": "num1",
+"Digit2": "num2",
+"Digit3": "num3",
+"Digit4": "num4",
+"Digit5": "num5",
+"Digit6": "num6",
+"Digit7": "num7",
+"Digit8": "num8",
+"Digit9": "num9",
+"PageUp": "pageup",
+"PageDown": "pagedown",
+"Numpad0": "keypad0",
+"Numpad1": "keypad1",
+"Numpad2": "keypad2",
+"Numpad3": "keypad3",
+"Numpad4": "keypad4",
+"Numpad5": "keypad5",
+"Numpad6": "keypad6",
+"Numpad7": "keypad7",
+"Numpad8": "keypad8",
+"Numpad9": "keypad9",
+"Period": "period",
+"CapsLock": "capslock",
+"NumLock": "numlock",
+"Backspace": "backspace",
+"NumpadMultiply": "multiply",
+"NumpadDivide": "divide",
+"PrintScreen": "print_screen",
+"ScrollLock": "scroll_lock",
+"Backquote": "tilde",
+"Pause": "pause",
+"Quote": "quote",
+"Comma": "comma",
+"Minus": "minus",
+"Slash": "slash",
+"Semicolon": "semicolon",
+"Equal": "equals",
+"BracketLeft": "leftbracket",
+"Backslash": "backslash",
+"BracketRight": "rightbracket",
+"NumpadDecimal": "kp_period",
+"NumpadEqual": "kp_equals",
+"ControlRight": "rctrl",
+"AltRight": "ralt",
+"F13": "f13",
+"F14": "f14",
+"F15": "f15",
+"MetaRight": "rmeta",
+"MetaLeft": "lmeta",
+"Help": "help",
+"ContextMenu": "menu",
+"Power": "power"
+};

emus/static/js/webretro/assets/info.json

@@ -0,0 +1,21 @@
+{
+	"infoVer": 1,
+	"webretro": 6.4,
+	"versions": {
+		"6": {
+			"changeList": ["replace vba_next with mgba for gb and gbc support", "rebuilt with undo save/load state, toggle menu", "absolute url support for rom query", "canvas mask for pause screen and alerts", "point to menu on first time use", "source overrides included in repository"]
+		},
+		"6.1": {
+			"changeList": ["upload roms via google drive, dropbox, onedrive", "how to cheat", "ctrl+v inside canvas", "SMAS Brick Fix hotfix (md5.js)", "allow roms in zip file (zip.js)", "carrying states (Use indexedDB) + migrate saves to IDB", "upload any rom type detector", "added start button to querystring roms", "dynamic title"]
+		},
+		"6.2": {
+			"changeList": ["choose core by ?system querystring option", "easy embed api", "check for updates feature"]
+		},
+		"6.3": {
+			"changeList": ["remove missing assets warning"]
+		},
+		"6.4": {
+			"changeList": ["ability to change keybinds", "take and download screenshots", "recover saves and states from lost or renamed roms", "shaders added to bundle", "disable webcam usage for gameboy"]
+		}
+	}
+}

emus/static/js/webretro/assets/jswindow.css

@@ -0,0 +1,77 @@
+body {
+	overflow: hidden;
+}
+
+.window {
+	resize: both;
+	overflow: hidden;
+	position: absolute;
+	border: 2px solid darkgrey;
+	margin: 0px;
+	background-color: #DDD;
+	cursor: default;
+	min-width: 20px;
+	min-height: 20px;
+	padding: 0px;
+	z-index: 1000;
+}
+
+.windowbar {
+	font-family: sans-serif;
+	user-select: none;
+	width: calc(100% - 4px);
+	padding: 2px;
+	height: 16px;
+	line-height: 16px;
+	color: black;
+	background-color: lightblue;
+	background-image: url("bar.png");
+	font-size: 12px;
+	border-bottom: 2px solid darkgrey;
+	overflow: hidden;
+}
+
+.windowicon, .windowtitle, .windowclose {
+	display: inline-block;
+}
+
+.windowicon {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+}
+
+.windowtitle {
+	position: relative;
+}
+
+.windowicon+.windowtitle {
+	left: 18px;
+}
+
+.windowclose {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	width: 14px;
+	height: 14px;
+	line-height: 14px;
+	text-align: center;
+	background-color: tomato;
+	border: 1px outset lightgray;
+}
+
+.windowclose:active {
+	border-style: inset;
+}
+
+.windowcontent {
+	width: 100%;
+	height: calc(100% - 22px);
+	overflow: auto;
+}

emus/static/js/webretro/assets/jswindow.js

@@ -0,0 +1,117 @@
+// creation args: title (string), icon(url string)
+// open args: width, height, left, top (all are numbers)
+
+function jswindow(args) {
+	// specify options here
+	var borderThickness = 2;
+	var defaultWidth = 250;
+	var defaultHeight = 150;
+	var topClip = 0;
+	var bottomClip = 24;
+	var leftClip = 48;
+	var rightClip = 24;
+	
+	// vWindow instead of this for event.target workaround
+	var vWindow = this;
+	
+	function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
+	function clipRight() { return parseInt(vWindow.outerWindow.style.width) + parseInt(vWindow.outerWindow.style.left) + (borderThickness * 2) > window.innerWidth; }
+	function clipBottom() { return parseInt(vWindow.outerWindow.style.height) + parseInt(vWindow.outerWindow.style.top) + (borderThickness * 2) > window.innerHeight; }
+	
+	this.setTitle = function(text) {
+		vWindow.outerWindow.bar.wname.textContent = text;
+	}
+	
+	this.setIcon = function(url) {
+		vWindow.outerWindow.bar.icon.style.backgroundImage = 'url("' + url + '")';
+	}
+	
+	// open window with optional width and height (will otherwise be default) and distances from the top left (otherwise random)
+	this.open = function(args) {
+		vWindow.outerWindow.style.width = (args && args.width ? args.width + "px" : defaultWidth + "px");
+		vWindow.outerWindow.style.height = (args && args.height ? args.height + "px" : defaultHeight + "px");
+		vWindow.outerWindow.style.left = (args && args.left ? args.left + "px" : randInt(0, window.innerWidth - parseInt(vWindow.outerWindow.style.width)) + "px");
+		vWindow.outerWindow.style.top = (args && args.top ? args.top + "px" : randInt(0, window.innerHeight - parseInt(vWindow.outerWindow.style.height)) + "px");
+		vWindow.outerWindow.style.maxWidth = (window.innerWidth - (parseInt(vWindow.outerWindow.style.left) + (borderThickness * 2))) + "px";
+		vWindow.outerWindow.style.maxHeight = (window.innerHeight - (parseInt(vWindow.outerWindow.style.top) + (borderThickness * 2))) + "px";
+		document.body.appendChild(vWindow.outerWindow);
+	}
+	
+	this.onclose = function() {}
+	
+	this.close = function() {
+		vWindow.outerWindow.remove();
+		vWindow.onclose();
+	}
+	
+	// start constructor creation
+	// make nodes
+	vWindow.outerWindow = document.createElement("div");
+	vWindow.outerWindow.classList.add("window");
+	
+	vWindow.outerWindow.bar = document.createElement("div");
+	vWindow.outerWindow.bar.classList.add("windowbar");
+	
+	if (args && args.icon) {
+		vWindow.outerWindow.bar.icon = document.createElement("span");
+		vWindow.outerWindow.bar.icon.classList.add("windowicon");
+		vWindow.outerWindow.bar.icon.style.backgroundImage = 'url("' + args.icon + '")';
+		vWindow.outerWindow.bar.appendChild(vWindow.outerWindow.bar.icon);
+	}
+	
+	vWindow.outerWindow.bar.wname = document.createElement("span");
+	vWindow.outerWindow.bar.wname.appendChild(document.createTextNode(args && args.title ? args.title : ""));
+	vWindow.outerWindow.bar.wname.classList.add("windowtitle");
+	
+	vWindow.outerWindow.bar.close = document.createElement("span");
+	vWindow.outerWindow.bar.close.appendChild(document.createTextNode(String.fromCharCode(10006)));
+	vWindow.outerWindow.bar.close.classList.add("windowclose");
+	vWindow.outerWindow.bar.close.title = "Close";
+	vWindow.outerWindow.bar.close.onclick = vWindow.close;
+	
+	vWindow.innerWindow = document.createElement("div");
+	vWindow.innerWindow.classList.add("windowcontent");
+	
+	// icon already appended if specified
+	vWindow.outerWindow.bar.appendChild(vWindow.outerWindow.bar.wname);
+	vWindow.outerWindow.bar.appendChild(vWindow.outerWindow.bar.close);
+	vWindow.outerWindow.appendChild(vWindow.outerWindow.bar);
+	vWindow.outerWindow.appendChild(vWindow.innerWindow);
+	
+	// move window to front
+	vWindow.outerWindow.addEventListener("mousedown", function(e) {
+		var allwindows = Array.from(document.querySelectorAll("div.window"));
+		if ((allwindows.indexOf(vWindow.outerWindow) != (allwindows.length - 1)) && e.target != vWindow.outerWindow.bar.close) document.body.appendChild(vWindow.outerWindow);
+	}, false);
+	
+	// move window around
+	var oldcursorX, oldcursorY;
+	vWindow.outerWindow.bar.addEventListener("mousedown", function(e) {
+		if ((e.target != vWindow.outerWindow.bar.close) && (e.button == 0)) {
+			e.preventDefault();
+			oldcursorX = e.clientX;
+			oldcursorY = e.clientY;
+			document.addEventListener("mousemove", windowDrag, false);
+			document.addEventListener("mouseup", windowDragEnd, false);
+		}
+	}, false);
+	
+	function windowDrag(e) {
+		e.preventDefault();
+		vWindow.outerWindow.style.left = (vWindow.outerWindow.offsetLeft - (oldcursorX - e.clientX)) + "px";
+		oldcursorX = e.clientX;
+		vWindow.outerWindow.style.top = (vWindow.outerWindow.offsetTop - (oldcursorY - e.clientY)) + "px";
+		oldcursorY = e.clientY;
+	}
+	
+	// pop window back into view area, and set max dimensions if it's not clipping into bottom right
+	function windowDragEnd() {
+		document.removeEventListener("mousemove", windowDrag);
+		document.removeEventListener("mouseup", windowDragEnd);
+		vWindow.outerWindow.style.left = Math.min(Math.max(vWindow.outerWindow.offsetLeft, 0 - parseInt(vWindow.outerWindow.style.width) + leftClip), window.innerWidth - rightClip) + "px";
+		vWindow.outerWindow.style.top = Math.min(Math.max(vWindow.outerWindow.offsetTop, topClip), window.innerHeight - bottomClip) + "px";
+		if (!clipRight()) vWindow.outerWindow.style.maxWidth = (window.innerWidth - (parseInt(vWindow.outerWindow.style.left) + (borderThickness * 2))) + "px";
+		if (!clipBottom()) vWindow.outerWindow.style.maxHeight = (window.innerHeight - (parseInt(vWindow.outerWindow.style.top) + (borderThickness * 2))) + "px";
+	}
+	// end constructor creation
+}