1
<script setup>
2
const gamepadStore = useGamepadStore();
3
const audioStore = useAudioStore();
4
</script>
5

6
<template>
7
<template v-for="cursor in gamepadStore.gamepadCursors">
8
    <font-awesome-icon v-if="cursor.showCursor"
9
        class="mohit-custom-cursor"
10
        :icon="cursor.icon"
11
        :class="cursor.animation"
12
        :style="cursor.style"
13
    />
14
</template>
15

16
<Transition name="gamepad-volumeMeter-transition" fade>
17
    <div class="gamepad-volume-meter" v-if="audioStore.showVolumeGamepadMenu">
18
        <div class="gamepadComp-input-section">
19
            <div class="left-icon"> <FontAwesomeIcon :icon="audioStore.volumeInputIcon" /> </div>
20
            <input type="range" min="0" max="100" disabled v-model="audioStore.volumeInput" />
21
            <span> {{ (audioStore.volumeInput + '%') }} </span>
22
        </div>
23
    </div>
24
</Transition>
25

26
<Transition name="cursorTitle-transition" fade>
27
    <div v-if="gamepadStore.cursorElementTitle !== ''" class="custom-cursor-titlePopup">
28
        {{ truncate(gamepadStore.cursorElementTitle, 70) }}
29
    </div>
30
</Transition>
31

32
<Transition name="gamepad-cursorSpeed-transition">
33
    <div class="gamepad-cursorSpeed-menu" v-if="gamepadStore.showCursorSpeedMenu">
34
        <h1> Cursor Speeds </h1>
35
        <div v-for="cursor in gamepadStore.gamepadCursors" class="gamepadComp-input-section" :style="('color: ' + cursor.color + ';')">
36
            <div class="left-icon" style="margin-left: 5px;"> <FontAwesomeIcon icon="fa-gauge" /> </div>
37
            <input type="range" min="0" max="30" disabled v-model="cursor.maxSpeed" />
38
            <span> {{ (cursor.maxSpeed + 'px') }} </span>
39
        </div>
40
    </div>
41
</Transition>
42
</template>
43

44
<style scoped lang="scss">
45
.mohit-custom-cursor {
46
    font-size: 27px;
47
    color: var(--vibrant-flame);
48
    padding: 5px;
49
    position: fixed;
50
    pointer-events: none;
51
    z-index: 9999;
52
    border: var(--empty-border);
53
    border-radius: 10px;
54
    transition: var(--default-transition);
55
}
56

57
.gamepad-volume-meter {
58
    overflow: hidden;
59
    position: fixed;
60
    top: 5px;
61
    left: calc(50% - 152px);
62
    height: 40px;
63
    width: 300px;
64
    z-index: 9000;
65
    background-color: var(--blue-one);
66
    border: 2px solid var(--blue-cobalt);
67
    border-radius: 10px;
68
    box-shadow: 0px 0px 10px 2px var(--blue-zero);
69
    color: black;
70
    display: flex;
71
    justify-content: center;
72
    align-items: center;
73
}
74
.gamepad-cursorSpeed-menu {
75
    overflow: hidden;
76
    position: fixed;
77
    bottom: 10px;
78
    left: calc(50% - 152px);
79
    z-index: 9000;
80
    width: 300px;
81
    height: 160px;
82
    background-color: black;
83
    border: 2px solid var(--website-text);
84
    border-radius: 10px;
85
    box-shadow: 0px 0px 10px 2px black;
86
}
87

88
.gamepad-cursorSpeed-menu h1 {
89
    margin: 5px auto 0px;
90
    height: 29px;
91
    width: fit-content;
92
    display: flex;
93
    justify-content: center;
94
    align-items: center;
95
    font-size: 25px;
96
    color: var(--website-light-text);
97
    font-family: 'Lexend', sans-serif;
98
    border-bottom: 1px solid;
99
    border-radius: 3px;
100
    padding: 0px 2px;
101
    user-select: none;
102
}
103

104
.gamepadComp-input-section {
105
    width: 300px;
106
    height: 30px;
107
    display: flex;
108
    justify-content: center;
109
    align-items: center;
110
    flex-direction: row;
111
    color: inherit;
112
}
113
.gamepadComp-input-section input {
114
    width: calc(100% - 110px);
115
}
116

117
.gamepadComp-input-section .left-icon {
118
    font-size: 15px;
119
    width: 35px;
120
    margin-left: 10px;
121
    text-align: center;
122
    display: flex;
123
    justify-content: center;
124
    align-items: center;
125
    position: relative;
126
    bottom: 0.5px;
127
    color: inherit;
128
}
129
.gamepadComp-input-section span {
130
    position: relative;
131
    bottom: 0.5px;
132
    cursor: default;
133
    user-select: none;
134
    font-family: 'Lexend', sans-serif;
135
    font-size: 15px;
136
    width: 55px;
137
    text-align: center;
138
    display: flex;
139
    justify-content: center;
140
    align-items: center;
141
    color: inherit;
142
}
143

144
.custom-cursor-titlePopup {
145
    position: fixed;
146
    z-index: 9998;
147
    bottom: 0px;
148
    left: 0px;
149
    background-color: black;
150
    color: white;
151
    width: fit-content;
152
    height: fit-content;
153
    padding: 2px 5px;
154
    font-size: 11px;
155
    font-family: 'Montserrat', sans-serif;
156
    font-weight: bold;
157
    display: flex;
158
    justify-content: center;
159
    align-items: center;
160
    text-align: center;
161
}
162

163
.cursorTitle-transition-enter-active, .cursorTitle-transition-leave-active {
164
    transition: opacity 0.75s;
165
}
166
.cursorTitle-transition-enter-from, .cursorTitle-transition-leave-to {
167
    opacity: 0
168
}
169
.cursorTitle-transition-enter-to, .cursorTitle-transition-leave-from {
170
    opacity: 1;
171
}
172

173
.gamepad-volumeMeter-transition-enter-active {
174
    transition: opacity 0.25s, top 0.25s;
175
}
176
.gamepad-volumeMeter-transition-leave-active {
177
    transition: opacity 0.75s, top 0.75s;
178
}
179
.gamepad-volumeMeter-transition-enter-from, .gamepad-volumeMeter-transition-leave-to {
180
    opacity: 0;
181
    top: -70px;
182
}
183
.gamepad-volumeMeter-transition-enter-to, .gamepad-volumeMeter-transition-leave-from {
184
    opacity: 1;
185
    top: 5px;
186
}
187

188
.gamepad-cursorSpeed-transition-enter-active {
189
    transition: opacity 0.25s, bottom 0.25s;
190
}
191
.gamepad-cursorSpeed-transition-leave-active {
192
    transition: opacity 0.75s, bottom 0.75s;
193
}
194
.gamepad-cursorSpeed-transition-enter-from, .gamepad-cursorSpeed-transition-leave-to {
195
    opacity: 0;
196
    bottom: -220px !important;
197
}
198
.gamepad-cursorSpeed-transition-enter-to, .gamepad-cursorSpeed-transition-leave-from {
199
    opacity: 1;
200
}
201

202
@include dynamic-less-equal-width-rule(500) {
203
    .custom-cursor-sensitivity {
204
        left: calc(50% - 150px);
205
        top: calc(50% - 75px);
206
        width: 300px;
207
        height: 150px;
208
    }
209
    .custom-cursor-sensitivity h1 {
210
        font-size: 22px;
211
    }
212
}
213
</style>