sergiotarxz
/
msgba-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding control pad.

This commit is contained in:
Sergiotarxz 2023-03-24 22:29:31 +01:00
parent 837d8b89e1
commit 282a4b671d
3 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js-src/components/overlay-controls.tsx
View File

@ -26,6 +26,10 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu}: Overl
</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-up control control-pad-button">&#94;</a>
<a href="#" className="control-down control control-pad-button">v</a>
<a href="#" className="control-left control control-pad-button">&lt;</a>
<a href="#" className="control-right control control-pad-button">&gt;</a>
</div>
</div>
);

48
public/css/styles.css
View File

@ -91,29 +91,39 @@ form label, form input {
}
.control-button {
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 40px;
height: 40px;
display: flex;
justify-content: center;
border-radius: 50%;
color: grey;
text-decoration: none;
line-height: 40px;
font-size: 35px;
border-radius: 50%;
}
.control-pad-button {
top: 50%;
left: 10px;
}
.control-a {
top: 50%;
left: 90%;
right: 10px;;
left: unset;
}
.control-b {
top: 60%;
left: 75%;
top: 50%;
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 {
height: 50%;
}
@ -141,6 +151,14 @@ form label, form input {
background: #343434;
border: none;
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 {

2
public/js/bundle.js
View File

@ -126,7 +126,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\************************************************/
/***/ ((__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?");
/***/ }),