Finishing touch interface.
This commit is contained in:
parent
a2648ccadf
commit
3d20e94a75
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue