Dinir · January 2, 2018 05:49
diff --git a/startCounter.html b/startCounter.html
 <!DOCTYPE html>
 <html>

 <style>
  body {
    background-color: black;
    font-family: "Fira Code";
    color: white;
  }
  #counter {
    display: inline-block;
    width: 1.8em;
    text-align: right;
  }
  .isNotPressed {
    transition: color 1s, text-shadow 1s;
  }
  .isPressed {
    color: yellow;
    text-shadow: 0 0 1px orange;
    transition: color 0, text-shadow 0;
  }
 </style>

 <!-- grabGamepadInfo.js: https://gist.github.com/Dinir/75bf0d028cf30f27e131364dc4905cd4 -->
 <script src="grabGamepadInfo.js"></script>

 <body>
 </body>

 <script>
  // the button with this index number will be tracked.
  const numberOfStartButton = 9;

  // this function stores a variable, increment/decrement it according to the button's state change.
  const buttonCount = (()=>{
    const state = {
      count: 0,
      beingPressed: false
    }
    return isPressed => {
      switch (isPressed) {
        case true:
          if(state.beingPressed) {}
          else {
            state.beingPressed = true;
          }
          break;
        case false:
          if(state.beingPressed) {
            state.beingPressed = false;
            state.count++;
          }
          break;
      }
      if(typeof isPressed === 'number') {
        state.count += isPressed;
      }

      return state.count;
    }
  })();

  // this function is a kind of wrapper for `buttonCount`,
  // pass the button state change to that function and get the return value,
  // and make it shown on the html page in a single dom referred as `doms.counter`.
  const updateCountNumber = isPressed => {
    doms.counter.innerHTML = buttonCount(isPressed);
    doms.counter.setAttribute('class', 
      isPressed ? 'isPressed' : 'isNotPressed'
    );
  }

  // for every browser animation frame any `handler.update` function will be executed.
  // see the `grabGamepadInfo.js` linked above.
  handler.update = () => {
    updateCountNumber(
      gamepads[0].buttons[numberOfStartButton].pressed
    );
  }
  rAF(() => handler.refresh(gamepads));

  // this object will contain all doms needed.
  const doms = {};

  doms.counterContainer = document.createElement('div');
  document.body.appendChild(doms.counterContainer);

  doms.counter = document.createElement('span');
  doms.counter.setAttribute('id', 'counter');
  doms.counterContainer.appendChild(doms.counter);	

  doms.manipulators = {
    'left': document.createElement('span'),
    'right': document.createElement('span')
  }
  doms.manipulators.left.setAttribute('class', 'left');
  doms.manipulators.left.setAttribute('data-adjustment', -1);
  doms.manipulators.right.setAttribute('class', 'right');
  doms.manipulators.right.setAttribute('data-adjustment', 1);

  doms.manipulators.left.innerHTML = 'Total ';
  doms.manipulators.right.innerHTML = 'Credits: ';

  // let the manipulative dom parts act as a button for the counter number.
  // this part assigns an event listener to every manipulator in `doms`.
  for (let key in doms.manipulators) {
    if (doms.manipulators.hasOwnProperty(key)) {
      doms.manipulators[key].addEventListener('click', () => {
        updateCountNumber(parseInt(doms.manipulators[key].dataset.adjustment));
      });
      doms.counterContainer.insertBefore(
        doms.manipulators[key], doms.counter
      );
    }
  }
 </script>

 </html>
	<!DOCTYPE html>
	<html>

	<style>
	body {
	background-color: black;
	font-family: "Fira Code";
	color: white;
	}
	#counter {
	display: inline-block;
	width: 1.8em;
	text-align: right;
	}
	.isNotPressed {
	transition: color 1s, text-shadow 1s;
	}
	.isPressed {
	color: yellow;
	text-shadow: 0 0 1px orange;
	transition: color 0, text-shadow 0;
	}
	</style>

	<!-- grabGamepadInfo.js: https://gist.github.com/Dinir/75bf0d028cf30f27e131364dc4905cd4 -->
	<script src="grabGamepadInfo.js"></script>

	<body>
	</body>

	<script>
	// the button with this index number will be tracked.
	const numberOfStartButton = 9;

	// this function stores a variable, increment/decrement it according to the button's state change.
	const buttonCount = (()=>{
	const state = {
	count: 0,
	beingPressed: false
	}
	return isPressed => {
	switch (isPressed) {
	case true:
	if(state.beingPressed) {}
	else {
	state.beingPressed = true;
	}
	break;
	case false:
	if(state.beingPressed) {
	state.beingPressed = false;
	state.count++;
	}
	break;
	}
	if(typeof isPressed === 'number') {
	state.count += isPressed;
	}

	return state.count;
	}
	})();

	// this function is a kind of wrapper for `buttonCount`,
	// pass the button state change to that function and get the return value,
	// and make it shown on the html page in a single dom referred as `doms.counter`.
	const updateCountNumber = isPressed => {
	doms.counter.innerHTML = buttonCount(isPressed);
	doms.counter.setAttribute('class',
	isPressed ? 'isPressed' : 'isNotPressed'
	);
	}

	// for every browser animation frame any `handler.update` function will be executed.
	// see the `grabGamepadInfo.js` linked above.
	handler.update = () => {
	updateCountNumber(
	gamepads[0].buttons[numberOfStartButton].pressed
	);
	}
	rAF(() => handler.refresh(gamepads));

	// this object will contain all doms needed.
	const doms = {};

	doms.counterContainer = document.createElement('div');
	document.body.appendChild(doms.counterContainer);

	doms.counter = document.createElement('span');
	doms.counter.setAttribute('id', 'counter');
	doms.counterContainer.appendChild(doms.counter);

	doms.manipulators = {
	'left': document.createElement('span'),
	'right': document.createElement('span')
	}
	doms.manipulators.left.setAttribute('class', 'left');
	doms.manipulators.left.setAttribute('data-adjustment', -1);
	doms.manipulators.right.setAttribute('class', 'right');
	doms.manipulators.right.setAttribute('data-adjustment', 1);

	doms.manipulators.left.innerHTML = 'Total ';
	doms.manipulators.right.innerHTML = 'Credits: ';

	// let the manipulative dom parts act as a button for the counter number.
	// this part assigns an event listener to every manipulator in `doms`.
	for (let key in doms.manipulators) {
	if (doms.manipulators.hasOwnProperty(key)) {
	doms.manipulators[key].addEventListener('click', () => {
	updateCountNumber(parseInt(doms.manipulators[key].dataset.adjustment));
	});
	doms.counterContainer.insertBefore(
	doms.manipulators[key], doms.counter
	);
	}
	}
	</script>

	</html>