mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
Eugene Serb
GitHub
commit
dfca84d039
72
404.md
Normal file
72
404.md
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="color-scheme" content="light dark" />
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="https://eugene-serb.github.io/img/favicon.ico" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://eugene-serb.github.io/css/styles.css" />
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
div.markdown-body > h1, div.footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 360px) {
|
||||||
|
.px-3 {
|
||||||
|
padding-right: 0 !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
.my-5 {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<meta name="google-site-verification" content="qLQbgnmQEfvprDF8WR6oL_b_Qt0R9kKcIEOfHqWlFm8" />
|
||||||
|
<meta name="yandex-verification" content="e6e0bff7caaa7ecd" />
|
||||||
|
<meta name="msvalidate.01" content="6E1771734F083E5366205F06314C3577" />
|
||||||
|
<meta name='wmail-verification' content='46d069b79f9c774ce0bbf55f46aef201' />
|
||||||
|
|
||||||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4NB4LGNNLB"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag() { dataLayer.push(arguments); }
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'G-4NB4LGNNLB');
|
||||||
|
</script>
|
||||||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
|
<!-- Yandex.Metrika counter -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
(function (m, e, t, r, i, k, a) {
|
||||||
|
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
|
||||||
|
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
|
||||||
|
})
|
||||||
|
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||||
|
|
||||||
|
ym(79722217, "init", {
|
||||||
|
clickmap: true,
|
||||||
|
trackLinks: true,
|
||||||
|
accurateTrackBounce: true,
|
||||||
|
webvisor: true
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- /Yandex.Metrika counter -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="banner-container">
|
||||||
|
<div class="banner">
|
||||||
|
<h1>404</h1>
|
||||||
|
<span>File not found. Please, go to the </span><a href="https://eugene-serb.github.io/" target="_self">homepage</a><br />
|
||||||
|
<span>Contact info: </span><a href="https://twitter.com/eugene_serb/" target="_blank">@eugene_serb</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="https://eugene-serb.github.io/js/scripts.js"></script>
|
||||||
|
<noscript><div><img src="https://mc.yandex.ru/watch/76610724" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
11
README.md
11
README.md
@ -1,2 +1,9 @@
|
|||||||
# vibration-master
|
# Vibration Master
|
||||||
Vibration Master in Javascript, HTML and CSS
|
Vibration Master in Javascript, HTML and CSS.
|
||||||
|
|
||||||
|
This is a browser vibration master that can make a vibration massager for your arms from your gamepad.
|
||||||
|
|
||||||
|
If you are interested in this or my other projects, or would like to suggest and share ideas with me, or just talk to me, contact me: *[@eugene_serb](https://t.me/eugene_serb)*
|
||||||
|
|
||||||
|
Follow me on Twitter: *[@eugene_serb](https://twitter.com/eugene_serb)*
|
||||||
|
|
||||||
|
|||||||
77
css/vibration-master.css
Normal file
77
css/vibration-master.css
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
/* -------------- */
|
||||||
|
/* GAMEPAD MASTER */
|
||||||
|
/* -------------- */
|
||||||
|
|
||||||
|
@charset 'UTF-8';
|
||||||
|
|
||||||
|
.vibration-master {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-box {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
border: 4px solid var(--color-background);
|
||||||
|
outline: 2px solid var(--color-border-alpha);
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 640px) {
|
||||||
|
.list-item {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item_selected {
|
||||||
|
outline: 2px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item__info {
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item__info > div {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-banner {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-banner__list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
134
index.html
Normal file
134
index.html
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>Eugene Serb – Vibration Master</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<meta name="color-scheme" content="light dark" />
|
||||||
|
<meta name="robots" content="all" />
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://eugene-serb.github.io/vibration-master/" />
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="https://eugene-serb.github.io/img/favicon.ico" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://eugene-serb.github.io/css/styles.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/vibration-master.css" />
|
||||||
|
|
||||||
|
<meta name="author" content="Eugene Serb" />
|
||||||
|
<meta name="copyright" content="Eugene Serb, 2021 – 2022" />
|
||||||
|
<meta name="publisher-email" content="eugene.serb@gmail.com" />
|
||||||
|
<meta name="publisher-url" content="https://eugene-serb.github.io/" />
|
||||||
|
<meta name="keywords" content="Eugene Serb, eugene-serb, eugene_serb, eugene.serb, Evgeniy Serb, Евгений Серб, Novorossiysk, Новороссийск, contacts, CV, resume, portfolio, repositories, services, coder, developer, software engineer, development, frontend, backend, fullstack, Gamepad, Vibration, Vibration Master, Massager, Vibrator" />
|
||||||
|
<meta name="description" content="This is a simple vibration master." />
|
||||||
|
|
||||||
|
<meta property="og:locale" content="en_US" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="Eugene Serb – Vibration Master" />
|
||||||
|
<meta property="og:site_name" content="Eugene Serb – Website" />
|
||||||
|
<meta property="og:description" content="This is a simple vibration master." />
|
||||||
|
<meta property="og:url" content="https://eugene-serb.github.io/" />
|
||||||
|
<meta property="og:image" content="https://eugene-serb.github.io/img/og.png" />
|
||||||
|
<meta property="vk:image" content="https://eugene-serb.github.io/img/og.png" />
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
<meta name="twitter:creator" content="@eugene_serb" />
|
||||||
|
<meta name="twitter:title" content="Eugene Serb – Vibration Master" />
|
||||||
|
<meta name="twitter:description" content="This is a simple vibration master." />
|
||||||
|
<meta name="twitter:image" content="https://eugene-serb.github.io/img/og.png" />
|
||||||
|
|
||||||
|
<meta name="google-site-verification" content="qLQbgnmQEfvprDF8WR6oL_b_Qt0R9kKcIEOfHqWlFm8" />
|
||||||
|
<meta name="yandex-verification" content="e6e0bff7caaa7ecd" />
|
||||||
|
<meta name="msvalidate.01" content="6E1771734F083E5366205F06314C3577" />
|
||||||
|
<meta name='wmail-verification' content='46d069b79f9c774ce0bbf55f46aef201' />
|
||||||
|
|
||||||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4NB4LGNNLB"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag() {dataLayer.push(arguments); }
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'G-4NB4LGNNLB');
|
||||||
|
</script>
|
||||||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
|
<!-- Yandex.Metrika counter -->
|
||||||
|
<script>
|
||||||
|
(function (m, e, t, r, i, k, a) {
|
||||||
|
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
|
||||||
|
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
|
||||||
|
})
|
||||||
|
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||||
|
|
||||||
|
ym(79722217, "init", {
|
||||||
|
clickmap: true,
|
||||||
|
trackLinks: true,
|
||||||
|
accurateTrackBounce: true,
|
||||||
|
webvisor: true
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- /Yandex.Metrika counter -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-wrapper container">
|
||||||
|
<div class="logo-wrapper">
|
||||||
|
<span class="logo-wrapper__logo">Eugene Serb.</span>
|
||||||
|
</div>
|
||||||
|
<nav class="menu-wrapper">
|
||||||
|
<ul class="navigation">
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="https://eugene-serb.github.io/" target="_self" class="navigation__link">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="https://eugene-serb.github.io/#skills" target="_self" class="navigation__link">Skills</a>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="https://eugene-serb.github.io/services.html" target="_self" class="navigation__link">Services</a>
|
||||||
|
</li>
|
||||||
|
<li class="navigation__item">
|
||||||
|
<a href="https://eugene-serb.github.io/projects.html" target="_self" class="navigation__link">Projects</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="page container">
|
||||||
|
<h1 class="visually-hidden">Eugene Serb – Vibration Master</h1>
|
||||||
|
<section class="post">
|
||||||
|
<h2 class="post__header">Vibration Master</h2>
|
||||||
|
<div class="vibration-master">
|
||||||
|
<div class="content-item content_bordered message-box">
|
||||||
|
<span id="message"></span>
|
||||||
|
</div>
|
||||||
|
<div id="device-box" class="content-item content_bordered device-box">
|
||||||
|
<h3>Device List</h3>
|
||||||
|
<div id="device-list" class="device-list"></div>
|
||||||
|
</div>
|
||||||
|
<section class="content-item content_bordered controls-banner">
|
||||||
|
<h3>Disclaimer</h3>
|
||||||
|
<div class="controls-banner__list">
|
||||||
|
<span>
|
||||||
|
The author of the program code and the publisher is not responsible for the possible consequences of using the program. You use the program at your own risk. Please consult your doctor before using the program.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-wrapper container">
|
||||||
|
<div class="annotation">
|
||||||
|
<span class="annotation__text">© 2021 – 2022 Eugene Serb. Content licensed under </span><a href="https://eugene-serb.github.io/vibration-master/LICENSE.md" target="_blank">GNU General Public License v3.0</a><br>
|
||||||
|
<span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/vibration-master/" target="_blank">Improve this page.</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/vibration-master.js"></script>
|
||||||
|
<script src="https://eugene-serb.github.io/js/scripts.js"></script>
|
||||||
|
<noscript><div><img src="https://mc.yandex.ru/watch/79722217" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
392
js/vibration-master.js
Normal file
392
js/vibration-master.js
Normal file
@ -0,0 +1,392 @@
|
|||||||
|
/* -------------- */
|
||||||
|
/* GAMEPAD MASTER */
|
||||||
|
/* -------------- */
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const __PATTERNS = [
|
||||||
|
/* Constant, 0s, 1s */
|
||||||
|
{
|
||||||
|
name: 'Constant Weak',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 1000,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 0.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Constant Strong',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 1000,
|
||||||
|
weakMagnitude: 0.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Constant Max',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 1000,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
/* Dotted, 0.1s, 0.1s */
|
||||||
|
{
|
||||||
|
name: 'Dotted Weak',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 100,
|
||||||
|
duration: 100,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 0.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Dotted Strong',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 100,
|
||||||
|
duration: 100,
|
||||||
|
weakMagnitude: 0.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Dotted Max',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 100,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
/* Short Dashed, 0.1s, 0.25s */
|
||||||
|
{
|
||||||
|
name: 'Short Dashed Weak',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 100,
|
||||||
|
duration: 250,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 0.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Short Dashed Strong',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 100,
|
||||||
|
duration: 250,
|
||||||
|
weakMagnitude: 0.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Short Dashed Max',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 250,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
/* Long Dashed, 0.1s, 0.5s */
|
||||||
|
{
|
||||||
|
name: 'Long Dashed Weak',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 100,
|
||||||
|
duration: 500,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 0.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Long Dashed Strong',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 100,
|
||||||
|
duration: 500,
|
||||||
|
weakMagnitude: 0.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Long Dashed Max',
|
||||||
|
type: 'Simple',
|
||||||
|
pattern: [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 500,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class Gamepad {
|
||||||
|
constructor(gamepad, $container, library) {
|
||||||
|
this.unit = gamepad;
|
||||||
|
this.$container = $container;
|
||||||
|
this.library = library;
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
|
||||||
|
init = () => {
|
||||||
|
this.id = Date.now();
|
||||||
|
this.isSelected = false;
|
||||||
|
this.isVibrating = false;
|
||||||
|
this.isLocked = false;
|
||||||
|
this.cooldown = 0;
|
||||||
|
this.index = 0;
|
||||||
|
this.pattern = [
|
||||||
|
{
|
||||||
|
startDelay: 0,
|
||||||
|
duration: 1000,
|
||||||
|
weakMagnitude: 1.0,
|
||||||
|
strongMagnitude: 1.0,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
this.generateBox();
|
||||||
|
};
|
||||||
|
|
||||||
|
delete = () => {
|
||||||
|
this.$list_item.parentNode.removeChild(this.$list_item);
|
||||||
|
};
|
||||||
|
generateBox = () => {
|
||||||
|
const $list_item = document.createElement('div');
|
||||||
|
const $info_box = document.createElement('div');
|
||||||
|
/*const $button = document.createElement('button');*/
|
||||||
|
|
||||||
|
$list_item.classList.add('list-item');
|
||||||
|
$info_box.classList.add('list-item__info');
|
||||||
|
/*$button.innerText = 'Select';*/
|
||||||
|
|
||||||
|
/*$button.addEventListener('click', () => {
|
||||||
|
this.isSelected = !this.isSelected;
|
||||||
|
});*/
|
||||||
|
|
||||||
|
$list_item.appendChild($info_box);
|
||||||
|
/*$list_item.appendChild($button);*/
|
||||||
|
this.$container.appendChild($list_item);
|
||||||
|
|
||||||
|
this.$list_item = $list_item;
|
||||||
|
this.$info_box = $info_box;
|
||||||
|
this.draw();
|
||||||
|
};
|
||||||
|
draw = () => {
|
||||||
|
this.$info_box.innerHTML = `
|
||||||
|
<h3>#${this.unit.index + 1}. ${this.unit.id}</h3>
|
||||||
|
<span>Vibration Actuator: ${this.unit.vibrationActuator ? 'Available' : 'missing'}</span>
|
||||||
|
<div>
|
||||||
|
<span>Status: </span>
|
||||||
|
<span>${this.isVibrating ? 'Vibrating' : 'Idle'}</span>
|
||||||
|
<span>A / B</span>
|
||||||
|
<span>Key locked: </span>
|
||||||
|
<span>${this.isLocked ? 'Yes' : 'No'}</span>
|
||||||
|
<span>X + Y</span>
|
||||||
|
<span>Mode: </span>
|
||||||
|
<span>${this.index + 1}. ${this.library[this.index].name}</span>
|
||||||
|
<span>LB / RB</span>
|
||||||
|
</div>`;
|
||||||
|
if (this.isSelected === true) {
|
||||||
|
this.$list_item.classList.add('list-item_selected');
|
||||||
|
} else {
|
||||||
|
this.$list_item.classList.remove('list-item_selected');
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
update = () => {
|
||||||
|
let gamepads = navigator.getGamepads();
|
||||||
|
this.unit = gamepads[this.unit.index];
|
||||||
|
};
|
||||||
|
|
||||||
|
reset = () => {
|
||||||
|
this.isVibrating = false;
|
||||||
|
this.unit.vibrationActuator.reset();
|
||||||
|
};
|
||||||
|
vibrate = async () => {
|
||||||
|
this.isVibrating = true;
|
||||||
|
this.pattern = this.library[this.index].pattern;
|
||||||
|
|
||||||
|
while (this.isVibrating) {
|
||||||
|
for (let i = 0; i < this.pattern.length; i++) {
|
||||||
|
if (this.isVibrating) {
|
||||||
|
this.unit.vibrationActuator.playEffect('dual-rumble', this.pattern[i]);
|
||||||
|
await this.sleep(this.pattern[i].startDelay + this.pattern[i].duration + 100);
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
sleep = (ms) => {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
};
|
||||||
|
previous = () => {
|
||||||
|
if (Date.now() >= this.cooldown) {
|
||||||
|
if (this.index === 0) {
|
||||||
|
this.index = this.library.length - 1;
|
||||||
|
} else {
|
||||||
|
this.index--;
|
||||||
|
};
|
||||||
|
this.pattern = this.library[this.index].pattern;
|
||||||
|
this.cooldown = Date.now() + 500;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
next = () => {
|
||||||
|
if (Date.now() >= this.cooldown) {
|
||||||
|
if (this.index === this.library.length - 1) {
|
||||||
|
this.index = 0;
|
||||||
|
} else {
|
||||||
|
this.index++;
|
||||||
|
};
|
||||||
|
this.pattern = this.library[this.index].pattern;
|
||||||
|
this.cooldown = Date.now() + 500;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
lock = () => {
|
||||||
|
if (Date.now() >= this.cooldown) {
|
||||||
|
this.isLocked = !this.isLocked;
|
||||||
|
this.cooldown = Date.now() + 500;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
class VibrationMaster {
|
||||||
|
constructor() {
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
init = () => {
|
||||||
|
this.#DOMs();
|
||||||
|
|
||||||
|
if (!this.checkGamepadSupport()) {
|
||||||
|
console.log(`This browser does not support of gamepads.`);
|
||||||
|
this.$MESSAGE.innerText = `This browser does not support of gamepads.`;
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
console.log(`Press any gamepad's button or connect new gamepad.`);
|
||||||
|
this.$MESSAGE.innerText = `Press any gamepad's button or connect new gamepad.`;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.gamepads = [];
|
||||||
|
this.#eventListeners();
|
||||||
|
|
||||||
|
this.interval = setInterval(this.eventLoop, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
eventLoop = () => {
|
||||||
|
this.update();
|
||||||
|
this.draw();
|
||||||
|
this.eventHandler();
|
||||||
|
};
|
||||||
|
update = () => {
|
||||||
|
if (this.gamepads.length > 0) {
|
||||||
|
this.$MESSAGE_BOX.classList.add('hidden');
|
||||||
|
this.$DEVICE_BOX.classList.remove('hidden');
|
||||||
|
this.gamepads.forEach(gamepad => {
|
||||||
|
gamepad.update();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$MESSAGE_BOX.classList.remove('hidden');
|
||||||
|
this.$DEVICE_BOX.classList.add('hidden');
|
||||||
|
};
|
||||||
|
};
|
||||||
|
draw = () => {
|
||||||
|
if (this.gamepads.length > 0) {
|
||||||
|
this.gamepads.forEach(gamepad => {
|
||||||
|
gamepad.draw();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
eventHandler = () => {
|
||||||
|
if (this.gamepads.length > 0) {
|
||||||
|
this.gamepads.forEach(gamepad => {
|
||||||
|
if (gamepad.unit.vibrationActuator) {
|
||||||
|
if (gamepad.unit.buttons[2].pressed === true &&
|
||||||
|
gamepad.unit.buttons[3].pressed === true) {
|
||||||
|
gamepad.lock();
|
||||||
|
};
|
||||||
|
if (gamepad.isLocked === false) {
|
||||||
|
if (gamepad.unit.buttons[0].pressed === true) {
|
||||||
|
if (gamepad.isVibrating === false) {
|
||||||
|
gamepad.vibrate();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
if (gamepad.unit.buttons[1].pressed === true) {
|
||||||
|
gamepad.reset();
|
||||||
|
};
|
||||||
|
if (gamepad.unit.buttons[4].pressed === true) {
|
||||||
|
gamepad.previous();
|
||||||
|
};
|
||||||
|
if (gamepad.unit.buttons[5].pressed === true) {
|
||||||
|
gamepad.next();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
checkGamepadSupport = () => {
|
||||||
|
return 'getGamepads' in window.navigator;
|
||||||
|
};
|
||||||
|
|
||||||
|
#DOMs = () => {
|
||||||
|
this.$MESSAGE = document.querySelector('#message');
|
||||||
|
this.$MESSAGE_BOX = document.querySelector('.message-box');
|
||||||
|
this.$DEVICE_LIST = document.querySelector('#device-list');
|
||||||
|
this.$DEVICE_BOX = document.querySelector('#device-box');
|
||||||
|
};
|
||||||
|
#eventListeners = () => {
|
||||||
|
window.addEventListener('gamepadconnected', (event) => {
|
||||||
|
this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, __PATTERNS));
|
||||||
|
});
|
||||||
|
window.addEventListener('gamepaddisconnected', (event) => {
|
||||||
|
this.gamepads.forEach((gamepad, index) => {
|
||||||
|
if (gamepad.unit.id === event.gamepad.id) {
|
||||||
|
this.gamepads[index].delete();
|
||||||
|
this.gamepads.splice(index, 1);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/* -------------- */
|
||||||
|
/* INITIALIZATION */
|
||||||
|
/* -------------- */
|
||||||
|
|
||||||
|
const VIBRATION_MASTER = new VibrationMaster();
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user