Mirrors
/
Zelda64Recomp
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

stick visual input

This commit is contained in:
thecozies 2024-03-03 14:06:13 -06:00
parent ab20eea803
commit c8333056ba
3 changed files with 71 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
assets/config_menu/controls.rml
View File

@ -76,8 +76,52 @@
<div class="input-config__visual"> <div class="input-config__visual">
<!-- stick only --> <!-- stick only -->
<div class="input-config__visual-stick-wrapper"> <div class="input-config__visual-stick-wrapper">
<div class="input-config__visual-stick"> <div
<div>stick!!</div> class="input-viz input-config__visual-stick"
visual-input="X_AXIS_NEG X_AXIS_POS Y_AXIS_NEG Y_AXIS_POS"
>
<div class="input-viz__stick-split input-viz__stick-split--vertical">
<div class="input-viz input-viz__mappings" visual-input="Y_AXIS_POS">
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.Y_AXIS_POS"
>
<div>{{cur_binding}}</div>
</div>
</div>
<div class="input-viz__dpad-divider" />
<div class="input-viz input-viz__mappings" visual-input="Y_AXIS_NEG">
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.Y_AXIS_NEG"
>
<div>{{cur_binding}}</div>
</div>
</div>
</div>
<div class="input-viz__stick-split input-viz__stick-split--horizontal">
<div class="input-viz input-viz__mappings" visual-input="X_AXIS_NEG">
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.X_AXIS_NEG"
>
<div>{{cur_binding}}</div>
</div>
</div>
<div class="input-viz__dpad-divider" />
<div class="input-viz input-viz__mappings" visual-input="X_AXIS_POS">
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.X_AXIS_POS"
>
<div>{{cur_binding}}</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- top half --> <!-- top half -->

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

43
assets/scss/styles/components/InputConfig.scss
View File

@ -102,17 +102,6 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
left: 0; left: 0;
} }
.input-config__visual-stick {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: space(200);
height: space(200);
border-radius: space(100);
background-color: $color-white-a5;
}
.input-viz { .input-viz {
@include trans-colors-opa; @include trans-colors-opa;
position: relative; position: relative;
@ -220,11 +209,23 @@ $dpad-size: 192;
.input-viz.input-viz__dpad { .input-viz.input-viz__dpad {
@include set-svgs-color($color-text); @include set-svgs-color($color-text);
@include set-sizes($dpad-size); @include set-sizes($dpad-size);
$edge-dist: space(32);
position: relative; position: relative;
} }
.input-viz__dpad-split { $stick-size: 200;
.input-config__visual-stick {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: space($stick-size);
height: space($stick-size);
border-radius: space(math.div($stick-size, 2));
background-color: $color-white-a5;
}
.input-viz__dpad-split,
.input-viz__stick-split {
@include inset-block(0); @include inset-block(0);
display: flex; display: flex;
width: 100%; width: 100%;
@ -245,18 +246,22 @@ $dpad-size: 192;
> div { > div {
display: flex; display: flex;
flex: 1 1 100%; flex: 1 1 100%;
width: space(math.div($dpad-size, 3));
height: space(math.div($dpad-size, 3));
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
// .input-config__visual-mapping {
// display: block;
// }
} }
} }
.input-viz__dpad-split > div {
width: space(math.div($dpad-size, 3));
height: space(math.div($dpad-size, 3));
}
.input-viz__stick-split > div {
width: space(math.div($stick-size, 3));
height: space(math.div($stick-size, 3));
}
.input-viz__dpad-arrow { .input-viz__dpad-arrow {
position: absolute; position: absolute;
width: space(60); width: space(60);