Adding control pad.
This commit is contained in:
parent
837d8b89e1
commit
282a4b671d
|
@ -26,6 +26,10 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu}: Overl
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="control-a control control-button">A</a>
|
<a href="#" className="control-a control control-button">A</a>
|
||||||
<a href="#" className="control-b control control-button">B</a>
|
<a href="#" className="control-b control control-button">B</a>
|
||||||
|
<a href="#" className="control-up control control-pad-button">^</a>
|
||||||
|
<a href="#" className="control-down control control-pad-button">v</a>
|
||||||
|
<a href="#" className="control-left control control-pad-button"><</a>
|
||||||
|
<a href="#" className="control-right control control-pad-button">></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -91,29 +91,39 @@ form label, form input {
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-button {
|
.control-button {
|
||||||
top: 0;
|
border-radius: 50%;
|
||||||
left: 50%;
|
}
|
||||||
transform: translate(-50%, 0);
|
|
||||||
width: 40px;
|
.control-pad-button {
|
||||||
height: 40px;
|
top: 50%;
|
||||||
display: flex;
|
left: 10px;
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: grey;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 35px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-a {
|
.control-a {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 90%;
|
right: 10px;;
|
||||||
|
left: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-b {
|
.control-b {
|
||||||
top: 60%;
|
top: 50%;
|
||||||
left: 75%;
|
transform: translateY(50%);
|
||||||
|
right: 75px;
|
||||||
|
left: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.control-right {
|
||||||
|
transform: translateX(200%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-up {
|
||||||
|
transform: translateX(100%) translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-down {
|
||||||
|
transform: translateX(100%) translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
.overlay > div.vertical-padding {
|
.overlay > div.vertical-padding {
|
||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
@ -141,6 +151,14 @@ form label, form input {
|
||||||
background: #343434;
|
background: #343434;
|
||||||
border: none;
|
border: none;
|
||||||
opacity: 75%;
|
opacity: 75%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: grey;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay-menu-select-files {
|
.overlay-menu-select-files {
|
||||||
|
|
|
@ -126,7 +126,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
||||||
\************************************************/
|
\************************************************/
|
||||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||||
|
|
||||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ OverlayControls)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\n;\nfunction OverlayControls({ firstMenuElement, setHiddenMenu }) {\n function showOverlayMenu() {\n setHiddenMenu(false);\n setTimeout(() => {\n if (firstMenuElement.current == null) {\n return;\n }\n firstMenuElement.current.focus();\n }, 100);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"gear control\", onClick: showOverlayMenu },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: _constants__WEBPACK_IMPORTED_MODULE_1__.HOME_BUTTON_IMAGE, alt: \"Go to menu. (House icon)\" })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-a control control-button\" }, \"A\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-b control control-button\" }, \"B\"))));\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/overlay-controls.tsx?");
|
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ OverlayControls)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\n;\nfunction OverlayControls({ firstMenuElement, setHiddenMenu }) {\n function showOverlayMenu() {\n setHiddenMenu(false);\n setTimeout(() => {\n if (firstMenuElement.current == null) {\n return;\n }\n firstMenuElement.current.focus();\n }, 100);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"gear control\", onClick: showOverlayMenu },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: _constants__WEBPACK_IMPORTED_MODULE_1__.HOME_BUTTON_IMAGE, alt: \"Go to menu. (House icon)\" })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-a control control-button\" }, \"A\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-b control control-button\" }, \"B\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-up control control-pad-button\" }, \"^\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-down control control-pad-button\" }, \"v\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-left control control-pad-button\" }, \"<\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-right control control-pad-button\" }, \">\"))));\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/overlay-controls.tsx?");
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue