The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-09-05 20:07:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

input viz WIP + icons

Browse Source
This commit is contained in:
thecozies 2024-01-21 13:07:37 -06:00 committed by Mr-Wiseguy
parent 214231de6c
commit 7b194955c5
9 changed files with 164 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/config_menu.rml
View File

@ -168,12 +168,44 @@
<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3>
<h3>Current focused row: {{cur_input_row}}</h3>
<div
class="input-config__visual-input"
class="input-viz"
data-for="input_bindings, i : inputs.array"
data-attr-visual-input="get_input_enum_name(i)"
>
{{get_input_name(i)}}
</div>
<div
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
visual-input="C_DOWN"
>
<svg src="icons/VizMap/ButtonMedium.svg" />
<div class="input-config__visual-mappings">
{{C_DOWN}}
<div
class="input-config__visual-mapping"
data-for="cur_binding, j : inputs[C_DOWN]"
>
<div>{{cur_binding}}</div>
<div>{{get_input_from_enum_name('C_DOWN')}}</div>
</div>
</div>
</div>
<div
class="input-viz input-viz__Z"
visual-input="Z"
>
<svg src="icons/VizMap/Target.svg" />
<div class="input-config__visual-mappings">
{{Z}}
<div
class="input-config__visual-mapping"
data-for="cur_binding, j : inputs[Z]"
>
<div>{{cur_binding}}</div>
<div>{{get_input_from_enum_name('Z')}}</div>
</div>
</div>
</div>
</div>
</div>
</div>

5
assets/icons/VizMap/ButtonLarge.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="42" cy="42" r="42" fill="#FFFFFF" fill-opacity="0.2"/>
<circle cx="42" cy="42" r="40" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

4
assets/icons/VizMap/ButtonMedium.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="38" cy="38" r="38" fill="#FFFFFF" fill-opacity="0.2"/>
<circle cx="38" cy="38" r="36" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

5
assets/icons/VizMap/ButtonSmall.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#FFFFFF" fill-opacity="0.2"/>
<circle cx="32" cy="32" r="30" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

46
assets/icons/VizMap/Target.svg Normal file
View File

@ -0,0 +1,46 @@
<svg width="154" height="154" viewBox="0 0 154 154" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="9" y="9" width="136" height="136" rx="68" fill="white" fill-opacity="0.05" />
<g clip-path="url(#clip0_162_1132)">
<path d="M76.9995 37L61.4111 22H92.588L76.9995 37Z" fill="#FFFFFF" />
<path d="M36.9995 77L21.9995 92.5885L21.9995 61.4115L36.9995 77Z" fill="#FFFFFF" />
<path d="M117 77L132 61.4115V92.5885L117 77Z" fill="#FFFFFF" />
<path d="M76.9995 117L92.588 132H61.4111L76.9995 117Z" fill="#FFFFFF" />
</g>
<g opacity="0.1">
<g clip-path="url(#clip1_162_1132)">
<path d="M83.9453 37.6077L71.1984 20.1287L101.902 25.5425L83.9453 37.6077Z"
fill="#FFFFFF" />
<path d="M37.6072 70.0542L20.1282 82.8011L25.542 52.0978L37.6072 70.0542Z"
fill="#FFFFFF" />
<path d="M116.392 83.9461L133.871 71.1992L128.457 101.902L116.392 83.9461Z"
fill="#FFFFFF" />
<path d="M70.0532 116.393L82.8001 133.872L52.0968 128.458L70.0532 116.393Z"
fill="#FFFFFF" />
</g>
</g>
<g opacity="0.05">
<g clip-path="url(#clip2_162_1132)">
<path d="M90.6807 39.4122L81.1627 19.9853L110.459 30.6484L90.6807 39.4122Z"
fill="#FFFFFF" />
<path d="M39.4125 63.319L19.9855 72.8371L30.6487 43.5403L39.4125 63.319Z" fill="#FFFFFF" />
<path d="M114.588 90.6807L134.014 81.1627L123.351 110.459L114.588 90.6807Z"
fill="#FFFFFF" />
<path d="M63.3193 114.588L72.8373 134.014L43.5406 123.351L63.3193 114.588Z"
fill="#FFFFFF" />
</g>
</g>
<defs>
<clipPath id="clip0_162_1132">
<rect x="16.9995" y="17" width="120" height="120" rx="60" fill="white" />
</clipPath>
<clipPath id="clip1_162_1132">
<rect x="28.3301" y="7.49268" width="120" height="120" rx="60"
transform="rotate(10 28.3301 7.49268)" fill="white" />
</clipPath>
<clipPath id="clip2_162_1132">
<rect x="41.1396" y="0.097168" width="120" height="120" rx="60"
transform="rotate(20 41.1396 0.097168)" fill="white" />
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

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

@ -61,6 +61,9 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
left: 0;
}
.input-viz {
position: relative;
}
$all-inputs:
A,
@ -83,12 +86,12 @@ $all-inputs:
Y_AXIS_POS;
// Show default state while no inputs are active
[cur-input="NONE"] .input-config__visual-input[visual-input] {
[cur-input="NONE"] .input-viz[visual-input] {
opacity: 1;
}
@each $inp in $all-inputs {
.input-config__visual-input[visual-input="#{$inp}"] {
.input-viz[visual-input="#{$inp}"] {
opacity: 0.5;
[cur-input="#{$inp}"] & {
@ -96,3 +99,46 @@ $all-inputs:
}
}
}
@mixin set-sizes($sz) {
width: space($sz);
height: space($sz);
svg {
width: space($sz);
height: space($sz);
}
}
.input-viz__button {
@include set-color($color-text);
&--sm {
@include set-sizes(64);
}
&--md {
@include set-sizes(76);
}
&--lg {
@include set-sizes(84);
}
&--C {
@include set-svgs-color($color-warning);
}
&--A {
@include set-svgs-color($color-a);
}
&--B {
@include set-svgs-color($color-success);
}
}
.input-viz__Z {
@include set-svgs-color($color-warning);
@include set-sizes(136);
}

14
assets/scss/styles/mixins/_helpers.scss
View File

@ -16,13 +16,15 @@
@extend %nav-foc;
}
/*
@include set-color(COLOR);
*/
@mixin set-color($col) {
color: $col;
@mixin set-svgs-color($col) {
svg {
image-color: $col;
}
}
/*
@include set-color(COLOR);
*/
@mixin set-color($col) {
@include set-svgs-color($col);
color: $col;
}

14
assets/scss/styles/vars/_colors.scss
View File

@ -55,3 +55,17 @@ $color-border-soft: rgba(255, 255, 255, 0.1000);
$color-border-hard: rgba(255, 255, 255, 0.3000);
$color-border-solid: rgba(255, 255, 255, 0.6000);
$color-transparent: rgba(0, 0, 0, 0.0000);
$color-a: #3333FF;
$color-a-l: #B2B2FF;
$color-a-d: #2020AC;
$color-a-a5: rgba(51, 51, 255, 0.0500);
$color-a-a20: rgba(51, 51, 255, 0.2000);
$color-a-a30: rgba(51, 51, 255, 0.3000);
$color-a-a50: rgba(51, 51, 255, 0.5000);
$color-a-a80: rgba(51, 51, 255, 0.8000);
$color-white: #FFFFFF;
$color-white-a5: rgba(255, 255, 255, 0.0500);
$color-white-a20: rgba(255, 255, 255, 0.2000);
$color-white-a30: rgba(255, 255, 255, 0.3000);
$color-white-a50: rgba(255, 255, 255, 0.5000);
$color-white-a80: rgba(255, 255, 255, 0.8000);