Finishing touch interface.

js-src/components/overlay-controls.tsx

@@ -46,15 +46,42 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
         ref: React.useRef<HTMLAnchorElement|null>(null),
         key: 0,
         sym: 'A',
-        classes: 'control-a control control-button',
+        classes: 'control-a control-button-a-b control control-button',
-    }
+    };
     controls.b = {
         ref: React.useRef<HTMLAnchorElement|null>(null),
         key: 1,
         sym: 'B',
         transformX: 50,
-        classes: 'control-b control control-button',
+        classes: 'control-b control-button-a-b control control-button',
-    }
+    };
+    controls.l = {
+        key: 2,
+        sym: 'L',
+        classes: 'control-l control-button-l-r control',
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+    };
+
+    controls.r = {
+        key: 3,
+        sym: 'R',
+        classes: 'control-r control-button-l-r control',
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+    };
+    controls.start = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 4,
+        sym: 'START',
+        classes: 'control-start control-button-start-select control',
+        transformX: 25,
+    };
+    controls.select = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 5,
+        sym: 'SEL',
+        classes: 'control-select control-button-start-select control',
+        transformX: -25,
+    };
     controls.up = {
         ref: React.useRef<HTMLAnchorElement|null>(null),
         key: 6,

public/css/styles.css

@@ -95,7 +95,11 @@ form label, form input {
 }
 
 .control-button {
-        border-radius: 50%;
+    border-radius: 50%;
+}
+
+.control-button-a-b {
+    top: 50%;
 }
 
 .control-pad-button {
@@ -104,13 +108,11 @@ form label, form input {
 }
 
 .control-a {
-    top: 50%;
     right: 10px;;
     left: unset;
 }
 
 .control-b {
-    top: 50%;
     transform: translateY(50%);
     right: 75px;
     left: unset;
@@ -141,7 +143,7 @@ form label, form input {
     width: 70%;
 }
 .overlay > div.controls > a.gear {
-    top: 0;
+    top: 10px;
     left: 50%;
     transform: translate(-50%, 0);
     width: 60px;
@@ -170,6 +172,35 @@ form label, form input {
     font-size: 20px;
 }
 
+.overlay > div.controls > a.control-button-l-r {
+    width: 100px;
+    left: 10px;
+    top: 10px;
+}
+
+.overlay > div.controls > a.control-r {
+    left: unset;
+    right: 10px;
+}
+
+.overlay > div.controls > a.control-button-start-select {
+    top: calc(50% + 40px + 20px);
+    height: 20px;
+    border-radius: 40%;
+    font-size: 11px;
+    line-height: 20px;
+}
+
+.overlay > div.controls > a.control-start {
+    left: 50%;
+    transform: translateX(25%); 
+}
+
+.overlay > div.controls > a.control-select {
+    right: 50%;
+    transform: translateX(-25%); 
+}
+
 @media (min-aspect-ratio: 176/241) {
     .overlay > div.vertical-padding {
         height: 0%;
@@ -180,4 +211,15 @@ form label, form input {
     .full-height {
         height: 100vh;
     }
+
+    .control-pad-button {
+        top: 75%;
+    }
+
+    .control-button-a-b {
+        top: 75%;
+    }
+    .overlay > div.controls > a.control-button-start-select {
+        top: calc(75% + 40px + 20px);
+    }
 }