various improvments
This commit is contained in:
e7d
parent
052f9050a6
commit
1e92ac527f
52
css/main.css
52
css/main.css
@ -1,11 +1,8 @@
|
|||||||
.no-break {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#debug {
|
#debug {
|
||||||
@ -19,13 +16,50 @@ body {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#no-gamepad {
|
.no-gamepad {
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
display: none;
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
line-height: 2em;
|
height: 100vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes press-button {
|
||||||
|
0% {
|
||||||
|
fill: #898989;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
fill: #898989;
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
fill: #00e530;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
fill: #00e530;
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
fill: #898989;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
fill: #898989;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-gamepad svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-gamepad #a-button path {
|
||||||
|
animation: press-button 5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gamepad {
|
#gamepad {
|
||||||
|
|||||||
67
index.html
67
index.html
@ -14,7 +14,72 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="no-gamepad"><span class="no-break">No active gamepad detected.</span> <span class="no-break">Press <kbd>H</kbd> to read instructions.</span></div>
|
<div id="test"></div>
|
||||||
|
<div class="no-gamepad">
|
||||||
|
<p>Press <kbd>H</kbd> to read instructions.</p>
|
||||||
|
<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<clipPath id="a">
|
||||||
|
<path d="m0 294.39h439.45v-294.39h-439.45v294.39z"></path>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1.25 0 0 -1.25 0 367.99)">
|
||||||
|
<g clip-path="url(#a)">
|
||||||
|
<g transform="translate(291.61 74.1)">
|
||||||
|
<path
|
||||||
|
d="m0 0c12.566-4e-3 24.723-4.474 34.3-12.61 0.226-0.192 0.443-0.396 0.649-0.61l49.151-51.259c0.15-0.151 0.299-0.301 0.46-0.451 15.29-14 39.54-11.75 51.669 5.11 30.55 42.46-4.5 145.09-43.609 235.94-0.845 1.916-2.417 3.417-4.37 4.17l-2.521 1c-2.458 0.96-4.272 3.089-4.83 5.67-1.569 7.229-6.358 13.343-13 16.6-40.389 19.86-65.7 21.27-79.109 8.13-1.479-1.499-3.485-2.36-5.591-2.4h-110.17c-2.127 0.035-4.154 0.908-5.64 2.43-13.4 13.14-38.71 11.73-79.1-8.13-6.642-3.257-11.431-9.371-13-16.6-0.542-2.585-2.345-4.726-4.8-5.7l-2.52-1c-1.963-0.765-3.537-2.285-4.37-4.22-39.1-90.78-74.15-193.43-43.6-235.89 12.13-16.89 36.39-19.09 51.669-5.11 0.161 0.14 0.31 0.29 0.461 0.451l49.15 51.259c0.206 0.214 0.423 0.418 0.65 0.61 9.576 8.136 21.733 12.606 34.299 12.61h143.77z"
|
||||||
|
fill="#1f1f21"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(278.88 161.81)">
|
||||||
|
<path
|
||||||
|
d="m0 0c13.481 0 24.41-10.929 24.41-24.41 0-13.482-10.929-24.41-24.41-24.41s-24.41 10.928-24.41 24.41c0 13.481 10.929 24.41 24.41 24.41"
|
||||||
|
fill="#383838"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(278.88 112.99)">
|
||||||
|
<path
|
||||||
|
d="m0 0c-13.481 0-24.41 10.929-24.41 24.41 0 13.482 10.929 24.41 24.41 24.41s24.41-10.928 24.41-24.41v-0.01c-6e-3 -13.477-10.932-24.4-24.41-24.4m0 51.92c-15.193 0-27.51-12.316-27.51-27.51 0-15.193 12.317-27.51 27.51-27.51 15.189 0 27.505 12.311 27.51 27.5 6e-3 15.194-12.307 27.515-27.5 27.52h-0.01z"
|
||||||
|
fill="#191919"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(188.51 145.71)">
|
||||||
|
<path
|
||||||
|
d="m0 0h-11.88v11.87c0 3.314-2.686 6-6 6h-8.79c-3.313 0-6-2.686-6-6v-11.87h-11.84c-3.313 0-6-2.687-6-6v-8.79c0-3.314 2.687-6 6-6h11.87v-11.87c0-3.314 2.686-6 6-6h8.79c3.314 0 6 2.686 6 6v11.899h11.87c3.314 0 6 2.687 6 6v8.79c-0.016 3.311-2.71 5.982-6.02 5.971"
|
||||||
|
fill="#898989"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(111.34 230.94)">
|
||||||
|
<path
|
||||||
|
d="m0 0c14.735 0 26.68-11.945 26.68-26.68s-11.945-26.68-26.68-26.68-26.68 11.945-26.68 26.68 11.945 26.68 26.68 26.68"
|
||||||
|
fill="#191919"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(111.34 228.31)">
|
||||||
|
<path
|
||||||
|
d="m0 0c13.283 0 24.05-10.768 24.05-24.05 0-13.283-10.767-24.05-24.05-24.05-13.282 0-24.05 10.767-24.05 24.05 0 13.282 10.768 24.05 24.05 24.05"
|
||||||
|
fill="#383838"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(306.39 219)">
|
||||||
|
<path
|
||||||
|
d="m0 0c8.141 0 14.74-6.599 14.74-14.74 0-8.14-6.599-14.74-14.74-14.74s-14.739 6.6-14.739 14.74c0 8.141 6.598 14.74 14.739 14.74"
|
||||||
|
fill="#898989"></path>
|
||||||
|
</g>
|
||||||
|
<g id="a-button" transform="translate(335.87 189.37)">
|
||||||
|
<path
|
||||||
|
d="m0 0c8.141 0 14.74-6.599 14.74-14.74s-6.599-14.74-14.74-14.74-14.74 6.599-14.74 14.74 6.599 14.74 14.74 14.74"
|
||||||
|
fill="#898989"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(335.87 248.63)">
|
||||||
|
<path
|
||||||
|
d="m0 0c8.141 0 14.74-6.6 14.74-14.74 0-8.141-6.599-14.74-14.74-14.74s-14.74 6.599-14.74 14.74c0 8.14 6.599 14.74 14.74 14.74"
|
||||||
|
fill="#898989"></path>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(365.35 219)">
|
||||||
|
<path
|
||||||
|
d="m0 0c8.141 0 14.74-6.599 14.74-14.74 0-8.14-6.599-14.74-14.74-14.74s-14.739 6.6-14.739 14.74c0 8.141 6.598 14.74 14.739 14.74"
|
||||||
|
fill="#898989"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div id="gamepad"></div>
|
<div id="gamepad"></div>
|
||||||
<div id="help">
|
<div id="help">
|
||||||
<h2>Help</h2>
|
<h2>Help</h2>
|
||||||
|
|||||||
@ -38,13 +38,10 @@ class Demo {
|
|||||||
* @param {string} [id='xinput']
|
* @param {string} [id='xinput']
|
||||||
*/
|
*/
|
||||||
start(mode = 'random', id = 'xinput') {
|
start(mode = 'random', id = 'xinput') {
|
||||||
// remove any active gamepad
|
|
||||||
this.gamepad.removeGamepad(true);
|
|
||||||
|
|
||||||
// add the demo gamepad to the gamepads list
|
// add the demo gamepad to the gamepads list
|
||||||
this.gamepad.gamepads['demo'] = this.demoGamepad;
|
this.gamepad.gamepads['demo'] = this.demoGamepad;
|
||||||
// map the demo gamepad as active gamepad
|
// map the demo gamepad as active gamepad
|
||||||
this.gamepad.mapGamepad('demo');
|
this.gamepad.map('demo');
|
||||||
|
|
||||||
// determine the callback to use following the demo mode
|
// determine the callback to use following the demo mode
|
||||||
let callback;
|
let callback;
|
||||||
|
|||||||
@ -13,8 +13,7 @@ class Gamepad {
|
|||||||
// cached DOM references
|
// cached DOM references
|
||||||
this.$body = $("body");
|
this.$body = $("body");
|
||||||
this.$gamepad = $("#gamepad");
|
this.$gamepad = $("#gamepad");
|
||||||
this.$nogamepad = $("#no-gamepad");
|
this.$nogamepad = $(".no-gamepad");
|
||||||
this.$nogamepadLink = $("#no-gamepad a");
|
|
||||||
this.$help = $("#help");
|
this.$help = $("#help");
|
||||||
this.$gamepadList = $("#gamepad-list");
|
this.$gamepadList = $("#gamepad-list");
|
||||||
|
|
||||||
@ -36,17 +35,17 @@ class Gamepad {
|
|||||||
colors: [],
|
colors: [],
|
||||||
},
|
},
|
||||||
ds4: {
|
ds4: {
|
||||||
id: /054c/,
|
id: /054c|0810|2563/, // 054c = Sony vendor code, 0810,2563 = PS-like controllers vendor codes
|
||||||
name: "DualShock 4",
|
name: "DualShock 4",
|
||||||
colors: ["black", "white", "red", "blue"],
|
colors: ["black", "white", "red", "blue"],
|
||||||
},
|
},
|
||||||
// "switch-pro": {
|
// "switch-pro": {
|
||||||
// id: /057e/,
|
// id: /057e/, // 057e = Nintendo vendor code
|
||||||
// name: "Switch Pro Controller",
|
// name: "Switch Pro Controller",
|
||||||
// colors: ["black"],
|
// colors: ["black"],
|
||||||
// },
|
// },
|
||||||
"xbox-one": {
|
"xbox-one": {
|
||||||
id: /045e|xinput|XInput/,
|
id: /045e|xinput|XInput/, // 045e = Microsoft vendor code, xinput = standard Windows controller
|
||||||
name: "Xbox One",
|
name: "Xbox One",
|
||||||
colors: ["black", "white"],
|
colors: ["black", "white"],
|
||||||
},
|
},
|
||||||
@ -54,7 +53,7 @@ class Gamepad {
|
|||||||
|
|
||||||
// gamepad help default values
|
// gamepad help default values
|
||||||
this.helpTimeout = null;
|
this.helpTimeout = null;
|
||||||
this.helpDelay = 5000;
|
this.helpDelay = 12000;
|
||||||
|
|
||||||
// active gamepad default values
|
// active gamepad default values
|
||||||
this.scanDelay = 500;
|
this.scanDelay = 500;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user