mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-14 18:25:04 +01:00
253 lines
16 KiB
Plaintext
253 lines
16 KiB
Plaintext
|
<template name="config-menu__controls">
|
||
|
|
<head>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form class="config__form" data-attr-cur-input="cur_input_row" data-attr-cur-binding-slot="active_binding_slot">
|
||
|
|
<div class="config__header">
|
||
|
|
<div class="config__header-left">
|
||
|
|
<button
|
||
|
|
class="toggle"
|
||
|
|
data-class-toggle--checked="input_device_is_keyboard"
|
||
|
|
onclick="toggle_input_device"
|
||
|
|
>
|
||
|
|
<div class="toggle__border" />
|
||
|
|
<div class="toggle__floater" />
|
||
|
|
<div class="toggle__icons">
|
||
|
|
<div class="toggle__icon toggle__icon--left"><div></div></div>
|
||
|
|
<div class="toggle__icon toggle__icon--right"><div></div></div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
class="button button--warning"
|
||
|
|
>
|
||
|
|
<div class="button__label">Reset to defaults</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="config__wrapper input-config">
|
||
|
|
<div class="input-config__horizontal-split">
|
||
|
|
<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
|
||
|
|
<div class="input-config__mappings-scroll">
|
||
|
|
<div class="input-config__mappings-wrapper">
|
||
|
|
<div
|
||
|
|
class="control-option"
|
||
|
|
id="input_row"
|
||
|
|
data-for="input_bindings, i : inputs.array"
|
||
|
|
data-event-mouseover="set_input_row_focus(i)"
|
||
|
|
data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
|
||
|
|
>
|
||
|
|
<label
|
||
|
|
class="control-option__label"
|
||
|
|
>{{get_input_name(i)}}</label>
|
||
|
|
<div class="control-option__bindings">
|
||
|
|
<button
|
||
|
|
data-event-blur="set_input_row_focus(-1)"
|
||
|
|
data-event-focus="set_input_row_focus(i)"
|
||
|
|
data-for="cur_binding, j : input_bindings"
|
||
|
|
data-event-click="set_input_binding(i,j)"
|
||
|
|
class="prompt-font control-option__binding"
|
||
|
|
data-attr-bind-slot="j"
|
||
|
|
>
|
||
|
|
<div class="control-option__binding-recording">
|
||
|
|
<div class="control-option__binding-circle" />
|
||
|
|
<div class="control-option__binding-edge">
|
||
|
|
<svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-option__binding-icon">{{cur_binding}}</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
data-event-blur="set_input_row_focus(-1)"
|
||
|
|
data-event-focus="set_input_row_focus(i)"
|
||
|
|
data-event-click="clear_input_bindings(i)"
|
||
|
|
class="icon-button icon-button--danger"
|
||
|
|
>
|
||
|
|
<svg src="icons/Trash.svg" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-config__visual-wrapper">
|
||
|
|
<div class="input-config__visual-aspect">
|
||
|
|
<div class="input-config__visual">
|
||
|
|
<!-- stick only -->
|
||
|
|
<div class="input-config__visual-stick-wrapper">
|
||
|
|
<div class="input-config__visual-stick">
|
||
|
|
<div>stick!!</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- top half -->
|
||
|
|
<div class="input-config__visual-half">
|
||
|
|
<div class="input-config__visual-quarter-left">
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__dpad"
|
||
|
|
visual-input="DPAD_UP DPAD_DOWN DPAD_LEFT DPAD_RIGHT"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/DPad.svg" />
|
||
|
|
<div class="input-viz__dpad-split input-viz__dpad-split--vertical">
|
||
|
|
<div class="input-viz input-viz__mappings" visual-input="DPAD_UP">
|
||
|
|
<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.DPAD_UP"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-viz__dpad-divider" />
|
||
|
|
<div class="input-viz input-viz__mappings" visual-input="DPAD_DOWN">
|
||
|
|
<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.DPAD_DOWN"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-viz__dpad-split input-viz__dpad-split--horizontal">
|
||
|
|
<div class="input-viz input-viz__mappings" visual-input="DPAD_LEFT">
|
||
|
|
<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.DPAD_LEFT"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-viz__dpad-divider" />
|
||
|
|
<div class="input-viz input-viz__mappings" visual-input="DPAD_RIGHT">
|
||
|
|
<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.DPAD_RIGHT"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-config__visual-quarter-right">
|
||
|
|
<div class="input-config__c-buttons">
|
||
|
|
<div class="input-config__c-buttons-lr">
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||
|
|
visual-input="C_LEFT"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||
|
|
<div class="input-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.C_LEFT"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||
|
|
visual-input="C_RIGHT"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||
|
|
<div class="input-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.C_RIGHT"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-config__c-buttons-du">
|
||
|
|
<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-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.C_DOWN"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
|
||
|
|
visual-input="C_UP"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||
|
|
<div class="input-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.C_UP"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- bottom half -->
|
||
|
|
<div class="input-config__visual-half input-config__visual-half--bottom">
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__Z"
|
||
|
|
visual-input="Z"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/Target.svg" />
|
||
|
|
<div class="input-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.Z"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__R"
|
||
|
|
visual-input="R"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/Shield.svg" />
|
||
|
|
<div class="input-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.R"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="input-viz input-viz__L"
|
||
|
|
visual-input="L"
|
||
|
|
>
|
||
|
|
<svg src="icons/VizMap/Map.svg" />
|
||
|
|
<div class="input-viz__mappings">
|
||
|
|
<div
|
||
|
|
class="input-config__visual-mapping"
|
||
|
|
data-for="cur_binding, i : inputs.L"
|
||
|
|
>
|
||
|
|
<div>{{cur_binding}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</template>
|
||
|
|
|