soon(tm) is now (6.4)

Sorry it took so long to get this update done. Changes in this update:

- 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

Author: BinBashBanana

assets/base.css

@@ -280,7 +280,12 @@ input[type="file"] {
 	cursor: pointer;
 }
 
-.upload+.uploadlabel {
+.uploadimage {
+	width: 20px;
+	vertical-align: middle;
+}
+
+#upload {
 	border: 1px solid rgb(118, 118, 118);
 	border-radius: 2px;
 	padding: 4px;
@@ -289,15 +294,10 @@ input[type="file"] {
 	transition: ease .1s;
 }
 
-.upload+.uploadlabel:hover {
+#upload:hover {
 	background-color: #eee;
 }
 
-.uploadimage {
-	width: 20px;
-	vertical-align: middle;
-}
-
 #ffdcontent {
 	height: calc(100% - 45px);
 	padding: 10px;
@@ -425,3 +425,220 @@ body.paused #resume {
 	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;
+}

assets/base.js

@@ -101,4 +101,117 @@ var charToCodeMap = {
 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"
+};

assets/charToCodeMap.js

@@ -1,6 +1,6 @@
 {
 	"infoVer": 1,
-	"webretro": 6.3,
+	"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"]
@@ -13,6 +13,9 @@
 		},
 		"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"]
 		}
 	}
 }