refactor(utils): apply optimizations (#30)

Refactored the `utils.js` file by removing redundant code, adding missing typings and improving readability.
kenrick95 · Sep 25, 2021 · e6bea19 · e6bea19
1 parent 8b7f860
commit e6bea19
Showing 1 changed file with 76 additions and 78 deletions.
diff --git a/core/src/utils.ts b/core/src/utils.ts
@@ -1,44 +1,49 @@
 import { BoardPiece, BoardBase } from './board/base'
 
-export const BIG_POSITIVE_NUMBER = 10 ** 9 + 7
-export const BIG_NEGATIVE_NUMBER = -BIG_POSITIVE_NUMBER
-
-export function showMessage(message = '') {
-  const messageDOM = document.querySelector('.message')
-  if (!messageDOM) {
-    console.error('Message DOM is null!')
-    return
-  }
+export const BIG_POSITIVE_NUMBER: number = 10 ** 9 + 7
+export const BIG_NEGATIVE_NUMBER: number = -BIG_POSITIVE_NUMBER
+
+export function showMessage(message: string = ''): void {
+  const messageDOM: Element | null = document
+    .querySelector('.message')
+
+  if (!messageDOM)
+    return console.error('Message DOM is null!')
+
   messageDOM.classList.remove('hidden')
 
-  const messageContentDOM = document.querySelector('.message-body-content')
-  if (!messageContentDOM) {
-    console.error('Message body content DOM is null!')
-    return
-  }
+  const messageContentDOM: Element | null = document
+    .querySelector('.message-body-content')
+
+  if (!messageContentDOM)
+    return console.error('Message body content DOM is null!')
+
   messageContentDOM.innerHTML = message
 
-  const messageDismissDOM = document.querySelector('.message-body-dismiss')
-  if (!messageDismissDOM) {
-    console.error('Message body dismiss DOM is null!')
-    return
-  }
-  const dismissHandler = () => {
+  const messageDismissDOM: Element | null = document
+    .querySelector('.message-body-dismiss')
+
+  if (!messageDismissDOM)
+    return console.error('Message body dismiss DOM is null!')
+
+  const dismissHandler = (): void => {
     messageDOM.classList.add('invisible')
-    messageDOM.addEventListener('transitionend', () => {
+    messageDOM.addEventListener('transitionend', (): void => {
       messageDOM.classList.add('hidden')
       messageDOM.classList.remove('invisible')
     })
+
     messageDismissDOM.removeEventListener('click', dismissHandler)
   }
+
   messageDismissDOM.addEventListener('click', dismissHandler)
 }
 
 /**
  *
- * @param coord Coordinate of point to be checked
- * @param columnXBegin X-Coordinate of N-th column
- * @param radius Radius of a piece
+ * @param {{ x: number; y: number }} coord The Coordinates of the point to be checked.
+ * @param {number} columnXBegin The X-Coordinate of N-th column.
+ * @param {number} radius The radius of a piece.
  */
 export function isCoordOnColumn(
   coord: { x: number; y: number },
@@ -48,47 +53,43 @@ export function isCoordOnColumn(
   return (coord.x - columnXBegin) * (coord.x - columnXBegin) <= radius * radius
 }
 
-export function getColumnFromCoord(coord: { x: number; y: number }) {
-  for (let i = 0; i < BoardBase.COLUMNS; i++) {
-    if (
-      isCoordOnColumn(
-        coord,
-        3 * BoardBase.PIECE_RADIUS * i +
+export function getColumnFromCoord(coord: { x: number; y: number }): number {
+  for (let i: number = 0; i < BoardBase.COLUMNS; i++)
+    if (isCoordOnColumn(coord, 3 * BoardBase.PIECE_RADIUS * i +
           BoardBase.MASK_X_BEGIN +
-          2 * BoardBase.PIECE_RADIUS,
-        BoardBase.PIECE_RADIUS
-      )
-    ) {
+          2 * BoardBase.PIECE_RADIUS, BoardBase.PIECE_RADIUS))
       return i
-    }
-  }
+
   return -1
 }
 
 export function getRandomColumnNumber(): number {
   return Math.floor(Math.random() * BoardBase.COLUMNS)
 }
+
 export function choose(choice: Array<any>): any {
   return choice[Math.floor(Math.random() * choice.length)]
 }
 
 /**
  * @see https://esdiscuss.org/topic/promises-async-functions-and-requestanimationframe-together
  */
-export function animationFrame() {
-  let resolve = null
-  const promise = new Promise((r) => (resolve = r))
-  if (resolve) {
+export function animationFrame(): Promise<Function> {
+  let resolve: Function | null = null
+  const promise: Promise<Function> = new Promise((r: Function): Function => (resolve = r))
+
+  if (resolve)
     window.requestAnimationFrame(resolve)
-  }
+
   return promise
 }
 
 export function clone(array: Array<Array<any>>): Array<Array<any>> {
-  let arr = []
-  for (let i = 0; i < array.length; i++) {
+  const arr: Array<Array<any>> = []
+
+  for (let i: number = 0; i < array.length; i++)
     arr[i] = array[i].slice()
-  }
+
   return arr
 }
 
@@ -97,84 +98,81 @@ export function getMockPlayerAction(
   boardPiece: BoardPiece,
   column: number
 ): {
-  success: boolean
+  success: boolean;
   map: Array<Array<number>>
 } {
-  const clonedMap = clone(map)
-  if (
-    clonedMap[0][column] !== BoardPiece.EMPTY ||
-    column < 0 ||
-    column >= BoardBase.COLUMNS
-  ) {
+  const clonedMap: Array<Array<any>> = clone(map)
+
+  if (clonedMap[0][column] !== BoardPiece.EMPTY ||
+    column < 0 || column >= BoardBase.COLUMNS)
     return {
       success: false,
-      map: clonedMap,
+      map: clonedMap
     }
-  }
 
-  let isColumnEverFilled = false
-  let row = 0
-  for (let i = 0; i < BoardBase.ROWS - 1; i++) {
+  let isColumnEverFilled: boolean = false
+  let row: number = 0
+  for (let i: number = 0; i < BoardBase.ROWS - 1; i++)
     if (clonedMap[i + 1][column] !== BoardPiece.EMPTY) {
       isColumnEverFilled = true
       row = i
+
       break
     }
-  }
-  if (!isColumnEverFilled) {
+
+  if (!isColumnEverFilled)
     row = BoardBase.ROWS - 1
-  }
+
   clonedMap[row][column] = boardPiece
 
   return {
     success: true,
-    map: clonedMap,
+    map: clonedMap
   }
 }
 
 /**
  * From Mozilla Developer Network
  * https://developer.mozilla.org/en-US/docs/Web/Events/resize
  */
-export function onresize() {
-  var callbacks: Array<Function> = [],
-    running = false
+export function onresize(): { add: Function } {
+  const callbacks: Array<Function> = []
+  let running: boolean = false
 
-  // fired on resize event
+  // Fired on resize event.
   function resize() {
     if (!running) {
       running = true
 
-      if (window.requestAnimationFrame) {
+      if (window.requestAnimationFrame)
         window.requestAnimationFrame(runCallbacks)
-      } else {
+      else
         setTimeout(runCallbacks, 66)
-      }
     }
   }
 
-  // run the actual callbacks
+  // Run the actual callbacks.
   function runCallbacks() {
-    callbacks.forEach(function (callback) {
+    callbacks.forEach((callback: Function): void => {
       callback()
     })
+
     running = false
   }
 
-  // adds callback to loop
-  function addCallback(callback: Function) {
-    if (callback) {
+  // Adds callback to loop.
+  function addCallback(callback: Function): void {
+    if (callback)
       callbacks.push(callback)
-    }
   }
 
   return {
-    // public method to add additional callback
-    add: function (callback: Function) {
-      if (!callbacks.length) {
+    // Public method to add additional callback.
+    add: (callback: Function) => {
+      if (!callbacks.length)
         window.addEventListener('resize', resize)
-      }
+
       addCallback(callback)
-    },
+    }
   }
 }