diff --git a/index.html b/index.html
index f31589d..b6a99d3 100644
--- a/index.html
+++ b/index.html
@@ -87,7 +87,7 @@
-
+
diff --git a/js/gamepad-demo.js b/js/demo.js
similarity index 98%
rename from js/gamepad-demo.js
rename to js/demo.js
index 595969d..14c074e 100644
--- a/js/gamepad-demo.js
+++ b/js/demo.js
@@ -1,11 +1,11 @@
/**
* The Gamepad demo class
*
- * @class GamepadDemo
+ * @class Demo
*/
-class GamepadDemo {
+class Demo {
/**
- * Creates an instance of GamepadDemo.
+ * Creates an instance of Demo.
*
* @param Gamepad gamepad
*/
diff --git a/js/gamepad.js b/js/gamepad.js
index 3b11ee1..354202d 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -8,7 +8,7 @@ class Gamepad {
* Creates an instance of Gamepad.
*/
constructor() {
- this.gamepadDemo = new GamepadDemo(this);
+ this.demo = new Demo(this);
// cached DOM references
this.$body = $("body");
@@ -25,17 +25,16 @@ class Gamepad {
"lime",
"magenta",
];
- this.backgroundColorIndex = 0;
// gamepad collection default values
this.gamepads = {};
- this.gamepadIdentifiers = {
- "debug": {
+ this.identifiers = {
+ debug: {
id: /debug/,
name: "Debug",
colors: [],
},
- "ds4": {
+ ds4: {
id: /054c.*?05c4/,
name: "DualShock 4",
colors: ["black", "white", "red", "blue"],
@@ -53,19 +52,21 @@ class Gamepad {
};
// gamepad help default values
- this.gamepadHelpTimeout = null;
- this.gamepadHelpDelay = 5000;
+ this.helpTimeout = null;
+ this.helpDelay = 5000;
// active gamepad default values
- this.scanGamepadsDelay = 500;
+ this.scanDelay = 500;
this.debug = false;
- this.activeGamepadIndex = null;
- this.activeGamepadType = null;
- this.activeGamepadIdentifier = null;
- this.activeGamepadColorIndex = null;
- this.activeGamepadColorName = null;
- this.activeGamepadZoomMode = "manual";
- this.activeGamepadZoomLevel = 1;
+ this.index = null;
+ this.type = null;
+ this.identifier = null;
+ this.timestamp = null;
+ this.backgroundColorIndex = 0;
+ this.colorIndex = null;
+ this.colorName = null;
+ this.zoomMode = "manual";
+ this.zoomLevel = 1;
this.mapping = {
buttons: [],
axes: [],
@@ -92,10 +93,7 @@ class Gamepad {
window.addEventListener("resize", this.onResize.bind(this));
// bind a gamepads scan
- window.setInterval(
- this.scanGamepads.bind(this),
- this.scanGamepadsDelay
- );
+ window.setInterval(this.scan.bind(this), this.scanDelay);
// read URI for display parameters to initalize
this.params = {
@@ -110,30 +108,26 @@ class Gamepad {
if (this.params.background) {
for (let i = 0; i < this.backgroundColors.length; i++) {
if (this.params.background === this.backgroundColors[i]) {
- this.backgroundColorIndex = i;
+ this.index = i;
break;
}
}
- if (!this.backgroundColorIndex) {
+ if (!this.index) {
return;
}
- this.$body.css(
- "background",
- this.backgroundColors[this.backgroundColorIndex]
- );
+ this.$body.css("background", this.backgroundColors[this.index]);
}
// start the demo if requested by params
if (this.params.demo) {
- this.gamepadDemo.start(this.params.demo);
-
+ this.demo.start(this.params.demo);
return;
}
// by default, enqueue a delayed display of the help modal
- this.displayGamepadHelp();
+ this.displayHelp();
}
/**
@@ -155,19 +149,17 @@ class Gamepad {
/**
* Displays the help modal on screen
*/
- displayGamepadHelp() {
+ displayHelp() {
// do not display help if we have an active gamepad
- if (null !== this.activeGamepadIndex) {
- return;
- }
+ if (null !== this.index) return;
// cancel the queued display of the help modal, if any
- window.clearTimeout(this.gamepadHelpTimeout);
+ window.clearTimeout(this.helpTimeout);
// hide the help modal
this.$nogamepad.show();
// enqueue a delayed display of the help modal
- this.hideGamepadHelp();
+ this.hideHelp();
}
/**
@@ -175,16 +167,16 @@ class Gamepad {
*
* @param {boolean} [hideNow=false]
*/
- hideGamepadHelp(hideNow = false) {
+ hideHelp(hideNow = false) {
// hide the message right away if needed
if (hideNow) {
this.$nogamepad.hide();
}
// hide help modal if no gamepad is active after X ms
- this.gamepadHelpTimeout = window.setTimeout(() => {
+ this.helpTimeout = window.setTimeout(() => {
this.$nogamepad.fadeOut();
- }, this.gamepadHelpDelay);
+ }, this.helpDelay);
}
/**
@@ -193,8 +185,8 @@ class Gamepad {
* @param {GamepadEvent} e
*/
onGamepadConnect(e) {
- // on gamepad connection, add it to the list
- this.addGamepad(e.gamepad);
+ // on gamepad connection, refresh available gamepads list
+ this.refresh(e.gamepad);
}
/**
@@ -204,7 +196,7 @@ class Gamepad {
*/
onGamepadDisconnect(e) {
// on gamepad disconnection, remove it from the list
- this.removeGamepad(e.gamepad.index);
+ this.disconnect(e.gamepad.index);
}
/**
@@ -213,7 +205,7 @@ class Gamepad {
* @param {MouseEvent} e
*/
onMouseMove() {
- this.displayGamepadHelp();
+ this.displayHelp();
}
/**
@@ -225,7 +217,7 @@ class Gamepad {
switch (e.code) {
case "Delete":
case "Escape":
- this.removeGamepad(true);
+ this.disconnect(true);
break;
case "KeyB":
this.changeBackgroundColor();
@@ -240,7 +232,7 @@ class Gamepad {
this.toggleHelp();
break;
case "KeyO":
- this.gamepadDemo.start();
+ this.demo.start();
break;
case "NumpadAdd":
case "Equal":
@@ -251,7 +243,7 @@ class Gamepad {
this.changeZoom("-");
break;
case "NumpadDecimal":
- this.autoAdjustZoom(1);
+ this.adjustZoom(1);
break;
case "Numpad0":
case "Digit0":
@@ -266,7 +258,7 @@ class Gamepad {
* @param {WindowEvent} e
*/
onResize(e) {
- if (this.activeGamepadZoomMode === "auto") this.autoAdjustZoom(1);
+ if (this.zoomMode === "auto") this.adjustZoom(1);
}
/**
@@ -283,7 +275,7 @@ class Gamepad {
/**
* Reloads gamepads data
*/
- refreshGamepads() {
+ refresh() {
// get fresh information from DOM about gamepads
this.gamepads = this.getNavigatorGamepads();
@@ -315,16 +307,16 @@ class Gamepad {
/**
* Return the connected gamepad
*/
- getActiveGamepad() {
- return this.gamepads[this.activeGamepadIndex];
+ getActive() {
+ return this.gamepads[this.index];
}
/**
* Return the gamepad type for the connected gamepad
*
- * @param {object} activeGamepad
+ * @param {object} gamepad
*/
- getActiveGamepadType(activeGamepad) {
+ getType(gamepad) {
if (this.debug) {
// if the debug option is active, use the associated template
return "debug";
@@ -336,76 +328,26 @@ class Gamepad {
}
// else, determine the template to use from the gamepad identifier
- for (let gamepadType in this.gamepadIdentifiers) {
- if (
- this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)
- ) {
+ for (let gamepadType in this.identifiers) {
+ if (this.identifiers[gamepadType].id.test(gamepad.id)) {
return gamepadType;
}
}
- }
-
- /**
- * Adds a gamepad to the gamepads collection
- *
- * @param {object} gamepad
- */
- addGamepad(gamepad) {
- this.gamepads[gamepad.index] = gamepad;
- }
-
- /**
- * Removes a gamepad to the gamepads collection
- *
- * @param {object} gamepad
- */
- removeGamepad(gamepadIndex) {
- // ensure we have an index to remove
- if ("undefined" === typeof gamepadIndex) {
- return;
- }
-
- // ensure to kill demo mode
- if ("demo" === this.activeGamepadIndex) {
- this.gamepadDemo.stop();
- }
-
- // if this is the active gamepad
- if (true === gamepadIndex || this.activeGamepadIndex === gamepadIndex) {
- // clear associated date
- this.activeGamepadIndex = null;
- this.activeGamepadType = null;
- this.activeGamepadIdentifier = null;
- this.activeGamepadColorIndex = null;
- this.activeGamepadColorName = null;
- this.activeGamepadZoomLevel = 1;
- this.$gamepad.empty();
- }
- delete this.gamepads[gamepadIndex];
-
- // enqueue a display of the help modal
- this.displayGamepadHelp();
- this.debug = false;
+ return "debug";
}
/**
* Scans gamepads for activity
*/
- scanGamepads() {
+ scan() {
// don't scan if we have an active gamepad
- if (null !== this.activeGamepadIndex) {
- return;
- }
+ if (null !== this.index) return;
// refresh gamepad information
- this.refreshGamepads();
+ this.refresh();
- for (
- let gamepadIndex = 0;
- gamepadIndex < this.gamepads.length;
- gamepadIndex++
- ) {
- const gamepad = this.gamepads[gamepadIndex];
+ for (let index = 0; index < this.gamepads.length; index++) {
+ const gamepad = this.gamepads[index];
if (!gamepad) continue;
// read the gamepad buttons
@@ -419,7 +361,7 @@ class Gamepad {
// if one of its button is pressed, activate this gamepad
if (button.pressed) {
- this.mapGamepad(gamepad.index);
+ this.map(gamepad.index);
return;
}
}
@@ -429,102 +371,117 @@ class Gamepad {
/**
* Sets a gamepad as active from its index
*
- * @param {int} gamepadIndex
+ * @param {int} index
*/
- mapGamepad(gamepadIndex) {
+ map(index) {
// ensure a gamepad need to be mapped
- if ("undefined" === typeof gamepadIndex) {
- return;
- }
+ if ("undefined" === typeof index) return;
- // hide the help message
- this.hideGamepadHelp(true);
+ // hide the help messages
+ this.hideHelp(true);
+ this.$help.removeClass("active");
// update local references
- this.activeGamepadIndex = gamepadIndex;
- const activeGamepad = this.getActiveGamepad();
+ this.index = index;
+ const gamepad = this.getActive();
// ensure that a gamepad was actually found for this index
- if (!activeGamepad) {
+ if (!gamepad) {
// this mapping request was probably a mistake :
// - remove the active gamepad index and reference
- this.activeGamepadIndex = null;
+ this.index = null;
// - enqueue a display of the help modal right away
- this.displayGamepadHelp(true);
+ this.displayHelp(true);
return;
}
// determine gamepad type
- this.activeGamepadType = this.getActiveGamepadType(activeGamepad);
- this.activeGamepadIdentifier = this.gamepadIdentifiers[
- this.activeGamepadType
- ];
- this.activeGamepadColorIndex = 0;
+ this.type = this.getType(gamepad);
+ this.identifier = this.identifiers[this.type];
+ this.colorIndex = 0;
// ensure a valid gamepad type was discovered
- if (!this.activeGamepadType) {
- return;
- }
+ if (!this.type) return;
// load the HTML template file
- this.loadTemplate(activeGamepad);
+ this.loadTemplate(gamepad);
// hide the help before displaying the template
- this.hideGamepadHelp();
+ this.hideHelp();
+ }
+
+ /**
+ * Disconnect the active gamepad
+ *
+ * @param {object} gamepad
+ */
+ disconnect(index) {
+ // ensure we have an index to remove
+ if ("undefined" === typeof index) return;
+
+ // ensure to kill demo mode
+ if ("demo" === this.index) {
+ this.demo.stop();
+ }
+
+ // if this is the active gamepad
+ if (true === index || this.index === index) {
+ // clear associated date
+ this.index = null;
+ this.type = null;
+ this.identifier = null;
+ this.colorIndex = null;
+ this.colorName = null;
+ this.zoomLevel = 1;
+ this.$gamepad.empty();
+ }
+
+ // enqueue a display of the help modal
+ this.displayHelp();
+ this.debug = false;
}
/**
* Load the HTML template file for the active gamepad
*
- * @param {*} activeGamepad
+ * @param {*} gamepad
*/
- loadTemplate(activeGamepad) {
- $.ajax("templates/" + this.activeGamepadType + "/template.html").done(
- (template) => {
- // inject the template HTML
- this.$gamepad.html(template);
- window.setTimeout(() => {
- this.autoAdjustZoom(1);
- });
+ loadTemplate(gamepad) {
+ $.ajax(`templates/${this.type}/template.html`).done((template) => {
+ // inject the template HTML
+ this.$gamepad.html(template);
+ window.setTimeout(() => {
+ this.adjustZoom(1);
+ });
- // read for parameters to apply:
- // - color
- if (this.params.color) {
- this.changeGamepadColor(this.params.color);
- }
- // - zoom
- if (this.params.zoom) {
- this.changeZoom(this.params.zoom);
- }
-
- // save the buttons mapping of this template
- this.mapping.buttons = [];
- for (
- let buttonIndex = 0;
- buttonIndex < activeGamepad.buttons.length;
- buttonIndex++
- ) {
- this.mapping.buttons[buttonIndex] = $(
- `[data-button="${buttonIndex}"]`
- );
- }
-
- // save the axes mapping of this template
- this.mapping.axes = [];
- for (
- let axisIndex = 0;
- axisIndex < activeGamepad.axes.length;
- axisIndex++
- ) {
- this.mapping.axes[axisIndex] = $(
- `[data-axis=${axisIndex}], [data-axis-x=${axisIndex}], [data-axis-y=${axisIndex}], [data-axis-z=${axisIndex}]`
- );
- }
-
- // enqueue the initial display refresh
- this.updateStatus();
+ // read for parameters to apply:
+ // - color
+ if (this.params.color) {
+ this.changeGamepadColor(this.params.color);
}
- );
+ // - zoom
+ if (this.params.zoom) {
+ this.changeZoom(this.params.zoom);
+ }
+
+ // save the buttons mapping of this template
+ this.mapping.buttons = [];
+ for (let index = 0; index < gamepad.buttons.length; index++) {
+ this.mapping.buttons[index] = $(`[data-button="${index}"]`);
+ }
+
+ // save the axes mapping of this template
+ this.mapping.axes = [];
+ for (let index = 0; index < gamepad.axes.length; index++) {
+ this.mapping.axes[index] = $(
+ `[data-axis=${index}], [data-axis-x=${index}], [data-axis-y=${index}], [data-axis-z=${index}]`
+ );
+ }
+
+ // enqueue the initial display refresh
+ this.timestamp = null;
+ this.updateStatus();
+ });
}
/**
@@ -532,22 +489,18 @@ class Gamepad {
*/
updateStatus() {
// ensure that a gamepad is currently active
- if (null === this.activeGamepadIndex) {
- return;
- }
+ if (null === this.index) return;
// enqueue the next refresh right away
- // window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
window.requestAnimationFrame(this.updateStatus.bind(this));
+ // window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
// load latest gamepad data
- this.refreshGamepads();
- const activeGamepad = this.getActiveGamepad();
+ this.refresh();
+ const activeGamepad = this.getActive();
- if (activeGamepad.timestamp === this.activeGamepadTimestamp) {
- return;
- }
- this.activeGamepadTimestamp = activeGamepad.timestamp;
+ if (activeGamepad.timestamp === this.timestamp) return;
+ this.timestamp = activeGamepad.timestamp;
this.updateButtons(activeGamepad);
this.updateAxes(activeGamepad);
@@ -556,24 +509,20 @@ class Gamepad {
/**
* Updates the buttons status of the active gamepad
*
- * @param {*} activeGamepad
+ * @param {*} gamepad
*/
- updateButtons(activeGamepad) {
+ updateButtons(gamepad) {
// update the buttons
- for (
- let buttonIndex = 0;
- buttonIndex < activeGamepad.buttons.length;
- buttonIndex++
- ) {
+ for (let index = 0; index < gamepad.buttons.length; index++) {
// find the DOM element
- const $button = this.mapping.buttons[buttonIndex];
+ const $button = this.mapping.buttons[index];
if (!$button) {
// nothing to do for this button if no DOM element exists
break;
}
// read the button data
- const button = activeGamepad.buttons[buttonIndex];
+ const button = gamepad.buttons[index];
// update the display values
$button.attr("data-pressed", button.pressed);
@@ -589,36 +538,32 @@ class Gamepad {
/**
* Updates the axes status of the active gamepad
*
- * @param {*} activeGamepad
+ * @param {*} gamepad
*/
- updateAxes(activeGamepad) {
+ updateAxes(gamepad) {
// update the axes
- for (
- let axisIndex = 0;
- axisIndex < activeGamepad.axes.length;
- axisIndex++
- ) {
+ for (let index = 0; index < gamepad.axes.length; index++) {
// find the DOM element
- const $axis = this.mapping.axes[axisIndex];
+ const $axis = this.mapping.axes[index];
if (!$axis) {
// nothing to do for this button if no DOM element exists
break;
}
// read the axis data
- const axis = activeGamepad.axes[axisIndex];
+ const axis = gamepad.axes[index];
// update the display values
- if ($axis.is("[data-axis=" + axisIndex + "]")) {
+ if ($axis.is("[data-axis=" + index + "]")) {
$axis.attr("data-value", axis);
}
- if ($axis.is("[data-axis-x=" + axisIndex + "]")) {
+ if ($axis.is("[data-axis-x=" + index + "]")) {
$axis.attr("data-value-x", axis);
}
- if ($axis.is("[data-axis-y=" + axisIndex + "]")) {
+ if ($axis.is("[data-axis-y=" + index + "]")) {
$axis.attr("data-value-y", axis);
}
- if ($axis.is("[data-axis-z=" + axisIndex + "]")) {
+ if ($axis.is("[data-axis-z=" + index + "]")) {
$axis.attr("data-value-z", axis);
}
@@ -632,16 +577,16 @@ class Gamepad {
/**
* Changes the background color
*
- * @param {any} backgroundColor
+ * @param {any} color
*/
- changeBackgroundColor(backgroundColor) {
- if ("undefined" === typeof gamepadColor) {
+ changeBackgroundColor(color) {
+ if ("undefined" === typeof color) {
this.backgroundColorIndex++;
if (this.backgroundColorIndex > this.backgroundColors.length - 1) {
this.backgroundColorIndex = 0;
}
} else {
- this.backgroundColorIndex = backgroundColor;
+ this.backgroundColorIndex = color;
}
this.$body.css(
@@ -653,65 +598,53 @@ class Gamepad {
/**
* Changes the active gamepad color
*
- * @param {any} gamepadColor
+ * @param {any} color
*/
- changeGamepadColor(gamepadColor) {
+ changeGamepadColor(color) {
// ensure that a gamepad is currently active
- if (null === this.activeGamepadIndex) {
- return;
- }
+ if (null === this.index) return;
- if ("undefined" === typeof gamepadColor) {
+ if ("undefined" === typeof color) {
// no color was specified, load the next one in list
- this.activeGamepadColorIndex++;
- if (
- this.activeGamepadColorIndex >
- this.activeGamepadIdentifier.colors.length - 1
- ) {
- this.activeGamepadColorIndex = 0;
+ this.colorIndex++;
+ if (this.colorIndex > this.identifier.colors.length - 1) {
+ this.colorIndex = 0;
}
- this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
- this.activeGamepadColorIndex
- ];
+ this.colorName = this.identifier.colors[this.colorIndex];
} else {
- if (!isNaN(parseInt(gamepadColor))) {
+ if (!isNaN(parseInt(color))) {
// the color is a number, load it by its index
- this.activeGamepadColorIndex = gamepadColor;
- this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
- this.activeGamepadColorIndex
- ];
+ this.colorIndex = color;
+ this.colorName = this.identifier.colors[this.colorIndex];
} else {
// the color is a string, load it by its name
- this.activeGamepadColorName = gamepadColor;
- this.activeGamepadColorIndex = 0;
- for (let gamepadColorIndex in this.activeGamepadIdentifier
- .colors) {
+ this.colorName = color;
+ this.colorIndex = 0;
+ for (let gamepadColorIndex in this.identifier.colors) {
if (
- this.activeGamepadColorName ===
- this.activeGamepadIdentifier.colors[gamepadColorIndex]
+ this.colorName ===
+ this.identifier.colors[gamepadColorIndex]
) {
break;
}
- this.activeGamepadColorIndex++;
+ this.colorIndex++;
}
}
}
// update the DOM with the color value
- this.$gamepad.attr("data-color", this.activeGamepadColorName);
+ this.$gamepad.attr("data-color", this.colorName);
}
/**
* Adjusts the zoom level to the available space
*/
- autoAdjustZoom(maxZoom = null) {
+ adjustZoom(maxZoom = null) {
// let the browser the time to paint
const smallerRatio = Math.min(
- window.innerWidth /
- (this.$gamepad.width() / this.activeGamepadZoomLevel),
- window.innerHeight /
- (this.$gamepad.height() / this.activeGamepadZoomLevel)
+ window.innerWidth / (this.$gamepad.width() / this.zoomLevel),
+ window.innerHeight / (this.$gamepad.height() / this.zoomLevel)
);
this.changeZoom(
maxZoom !== null && smallerRatio >= maxZoom
@@ -724,42 +657,38 @@ class Gamepad {
/**
* Changes the active gamepad zoom level
*
- * @param {any} zoomLevel
+ * @param {any} level
*/
- changeZoom(zoomLevel, zoomMode = "manual") {
+ changeZoom(level, mode = "manual") {
// ensure that a gamepad is currently active
- if (null === this.activeGamepadIndex) {
- return;
- }
+ if (null === this.index) return;
// ensure we have some data to process
- if ("undefined" === typeof zoomLevel) {
- return;
- }
+ if ("undefined" === typeof level) return;
- this.activeGamepadZoomMode = zoomMode;
+ this.zoomMode = mode;
- if ("0" === zoomLevel) {
+ if ("0" === level) {
// "0" means a zoom reset
- this.activeGamepadZoomLevel = 1;
- } else if ("+" === zoomLevel && this.activeGamepadZoomLevel < 2) {
+ this.zoomLevel = 1;
+ } else if ("+" === level && this.zoomLevel < 2) {
// "+" means a zoom in if we still can
- this.activeGamepadZoomLevel += 0.1;
- } else if ("-" === zoomLevel && this.activeGamepadZoomLevel > 0.2) {
+ this.zoomLevel += 0.1;
+ } else if ("-" === level && this.zoomLevel > 0.2) {
// "-" means a zoom out if we still can
- this.activeGamepadZoomLevel -= 0.1;
- } else if (!isNaN((zoomLevel = parseFloat(zoomLevel)))) {
+ this.zoomLevel -= 0.1;
+ } else if (!isNaN((level = parseFloat(level)))) {
// an integer value means a value-based zoom
- this.activeGamepadZoomLevel = zoomLevel;
+ this.zoomLevel = level;
}
// hack: fix js float issues
- this.activeGamepadZoomLevel = +this.activeGamepadZoomLevel.toFixed(2);
+ this.zoomLevel = +this.zoomLevel.toFixed(2);
// update the DOM with the zoom value
this.$gamepad.css(
"transform",
- `translate(-50%, -50%) scale(${this.activeGamepadZoomLevel}, ${this.activeGamepadZoomLevel})`
+ `translate(-50%, -50%) scale(${this.zoomLevel}, ${this.zoomLevel})`
);
}
@@ -775,15 +704,13 @@ class Gamepad {
*/
toggleDebug() {
// ensure that a gamepad is currently active
- if (null === this.activeGamepadIndex) {
- return;
- }
+ if (null === this.index) return;
// update debug value
this.debug = !this.debug;
// remap current gamepad
- this.mapGamepad(this.activeGamepadIndex);
+ this.map(this.index);
}
}
diff --git a/templates/debug/template.js b/templates/debug/template.js
index efde37d..2da8787 100644
--- a/templates/debug/template.js
+++ b/templates/debug/template.js
@@ -7,7 +7,7 @@
$buttons = $(".buttons .container");
gamepad = window.gamepad;
- activeGamepad = gamepad.getActiveGamepad();
+ activeGamepad = gamepad.getActive();
if (!activeGamepad) {
return;
@@ -27,7 +27,7 @@