Merge pull request #42 from Ido-Barnea/41-add-format-checker-action-w…

…orkflow

.github/workflows/commit-message-checker.yml

@@ -1,4 +1,4 @@
-name: 'Commit Message Check'
+name: "[📒] Commit Message Checker"
 on:
   pull_request:
     types:
@@ -9,11 +9,11 @@ on:
 
 jobs:
   check-commit-message:
-    name: Check Commit Message
+    name: Check Commit Messages
     runs-on: ubuntu-latest
     steps:
       - name: Get PR Commits
-        id: 'get-pr-commits'
+        id: "get-pr-commits"
         uses: tim-actions/get-pr-commits@master
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -22,12 +22,11 @@ jobs:
         with:
           commits: ${{ steps.get-pr-commits.outputs.commits }}
           pattern: '^.{0,75}(\n.*)*$'
-          error: 'Subject too long (max 75)'
+          error: "Subject too long (max 75)"
       - name: Check Syntax
-        if: ${{ success() || failure() }}
         uses: tim-actions/[email protected]
         with:
           commits: ${{ steps.get-pr-commits.outputs.commits }}
           pattern: '\[#\d+\] [a-zA-Z]+|\[trivial\] [a-zA-Z]+'
-          error: 'Commit messages must start with an issue number. For example "[#42] MESSAGE"'
-          one_pass_all_pass: 'true'
+          error: 'Commit messages must start with an issue number. For example "[#21] MESSAGE"'
+          one_pass_all_pass: "false"

.github/workflows/style-checker.yml

@@ -0,0 +1,19 @@
+name: "[🎨] Style Checker"
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - reopened
+      - synchronize
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: nrwl/nx-set-shas@v3
+      - run: npm ci
+      - run: npx nx format:check

development/src/board.ts

@@ -1,88 +1,106 @@
 import { pieces } from "./logic";
 import { Piece, Square } from "./pieces";
 
-const boardDisplay = document.querySelector('#board-display')!;
-const bottomBoardContainer = document.getElementById("bottom-notations-container")!;
+const boardDisplay = document.querySelector("#board-display")!;
+const bottomBoardContainer = document.getElementById(
+  "bottom-notations-container",
+)!;
 const leftBoardContainer = document.getElementById("left-notations-container")!;
 
 const boardWidth = 8;
-const notationsLetters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+const notationsLetters = ["a", "b", "c", "d", "e", "f", "g", "h"];
 
 export function initializeBoard() {
-    for (let row = 0; row < boardWidth; row++) {
-        for (let column = 0; column < boardWidth; column++) {
-            createSquare([column, row]);
-        }
+  for (let row = 0; row < boardWidth; row++) {
+    for (let column = 0; column < boardWidth; column++) {
+      createSquare([column, row]);
     }
-
-    for(let column = 0; column < boardWidth; column++) {
-        createNotation((column + 1).toString());
-        createNotation(notationsLetters[boardWidth - column - 1]);
-    }
-
-    pieces.forEach((piece) => {
-        const pieceElement = createPieceElement(piece);
-        const square = document.querySelectorAll(`[square-id="${piece.position}"]`)[0];
-        square.appendChild(pieceElement);
-    });
+  }
+
+  for (let column = 0; column < boardWidth; column++) {
+    createNotation((column + 1).toString());
+    createNotation(notationsLetters[boardWidth - column - 1]);
+  }
+
+  pieces.forEach((piece) => {
+    const pieceElement = createPieceElement(piece);
+    const square = document.querySelectorAll(
+      `[square-id="${piece.position}"]`,
+    )[0];
+    square.appendChild(pieceElement);
+  });
 }
 
 function createSquare(position: [number, number]) {
-    const squareElement = document.createElement('div');
-    squareElement.classList.add('square');
-    squareElement.setAttribute('square-id', position.join(','));
+  const squareElement = document.createElement("div");
+  squareElement.classList.add("square");
+  squareElement.setAttribute("square-id", position.join(","));
 
-    const backgroundColor = getBackgroundColor(position);
-    squareElement.classList.add(backgroundColor);
+  const backgroundColor = getBackgroundColor(position);
+  squareElement.classList.add(backgroundColor);
 
-    boardDisplay.appendChild(squareElement);
+  boardDisplay.appendChild(squareElement);
 }
 
 function createNotation(notation: string) {
-    const notationElement = document.createElement('p');
-    notationElement.classList.add('notation');
-    notationElement.innerHTML = notation;
-
-    if (notationsLetters.includes(notation)) {
-        notationElement.classList.add('letter');
-        bottomBoardContainer.appendChild(notationElement);
-    } else {
-        notationElement.classList.add('number');
-        leftBoardContainer.appendChild(notationElement);
-    }
+  const notationElement = document.createElement("p");
+  notationElement.classList.add("notation");
+  notationElement.innerHTML = notation;
+
+  if (notationsLetters.includes(notation)) {
+    notationElement.classList.add("letter");
+    bottomBoardContainer.appendChild(notationElement);
+  } else {
+    notationElement.classList.add("number");
+    leftBoardContainer.appendChild(notationElement);
+  }
 }
 
 function getBackgroundColor(position: [number, number]) {
-    const isEvenColumn = position[0] % 2 === 0;
-    const isEvenRow = position[1] % 2 === 0;
-    return isEvenRow ? (isEvenColumn ? 'beige-background' : 'brown-background') : (isEvenColumn ? 'brown-background' : 'beige-background');
+  const isEvenColumn = position[0] % 2 === 0;
+  const isEvenRow = position[1] % 2 === 0;
+  return isEvenRow
+    ? isEvenColumn
+      ? "beige-background"
+      : "brown-background"
+    : isEvenColumn
+    ? "brown-background"
+    : "beige-background";
 }
 
 function createPieceElement(piece: Piece) {
-    const pieceElement = document.createElement('div');
-    pieceElement.classList.add('piece');
-    pieceElement.setAttribute('draggable', 'true');
-    pieceElement.setAttribute('id', piece.name);
+  const pieceElement = document.createElement("div");
+  pieceElement.classList.add("piece");
+  pieceElement.setAttribute("draggable", "true");
+  pieceElement.setAttribute("id", piece.name);
 
-    pieceElement.classList.add(piece.player.color);
+  pieceElement.classList.add(piece.player.color);
 
-    pieceElement.innerHTML = piece.resource;
+  pieceElement.innerHTML = piece.resource;
 
-    return pieceElement;
+  return pieceElement;
 }
 
 export function movePieceOnBoard(draggedPiece: Piece, targetSquare: Square) {
-    const draggedPieceSquareElement = document.querySelector(`[square-id="${draggedPiece.position.join(',')}"]`) as HTMLElement;
-    const draggedPieceElement = draggedPieceSquareElement?.firstElementChild as HTMLElement;
+  const draggedPieceSquareElement = document.querySelector(
+    `[square-id="${draggedPiece.position.join(",")}"]`,
+  ) as HTMLElement;
+  const draggedPieceElement =
+    draggedPieceSquareElement?.firstElementChild as HTMLElement;
 
-    const targetSquareElement = document.querySelector(`[square-id="${targetSquare.position.join(',')}"]`) as HTMLElement;
+  const targetSquareElement = document.querySelector(
+    `[square-id="${targetSquare.position.join(",")}"]`,
+  ) as HTMLElement;
 
-    targetSquareElement.appendChild(draggedPieceElement);
+  targetSquareElement.appendChild(draggedPieceElement);
 }
 
 export function destroyPieceOnBoard(targetPiece: Piece) {
-    const targetPieceSquareElement = document.querySelector(`[square-id="${targetPiece.position.join(',')}"]`);
-    const targetPieceElement = targetPieceSquareElement?.firstElementChild as HTMLElement;
+  const targetPieceSquareElement = document.querySelector(
+    `[square-id="${targetPiece.position.join(",")}"]`,
+  );
+  const targetPieceElement =
+    targetPieceSquareElement?.firstElementChild as HTMLElement;
 
-    targetPieceElement.remove();
-}
+  targetPieceElement.remove();
+}

development/src/events.ts

@@ -1,76 +1,86 @@
 let draggedElement: HTMLElement;
 
-let triggerOnAction: (draggedElement: HTMLElement, targetElement: HTMLElement) => void;
+let triggerOnAction: (
+  draggedElement: HTMLElement,
+  targetElement: HTMLElement,
+) => void;
 let triggerOnFallOffTheBoard: (draggedElement: HTMLElement) => void;
 
 export function initializeEventListeners() {
-    const squares = document.querySelectorAll('.square');
-    squares.forEach((square) => {
-        square.addEventListener('dragstart', onDragStart);
-        square.addEventListener('dragover', onDragOver);
-        square.addEventListener('drop', onDragDrop);
-        square.addEventListener('mouseover', onMouseOver);
-        square.addEventListener('mouseout', onMouseOut);
-    });
+  const squares = document.querySelectorAll(".square");
+  squares.forEach((square) => {
+    square.addEventListener("dragstart", onDragStart);
+    square.addEventListener("dragover", onDragOver);
+    square.addEventListener("drop", onDragDrop);
+    square.addEventListener("mouseover", onMouseOver);
+    square.addEventListener("mouseout", onMouseOut);
+  });
 
-    // Support pieces falling off the board
-    document.body.addEventListener('dragover', onDragOver);
-    document.body.addEventListener('drop', onDragOffTheBoard);
+  // Support pieces falling off the board
+  document.body.addEventListener("dragover", onDragOver);
+  document.body.addEventListener("drop", onDragOffTheBoard);
 }
 
 function onDragStart(event: Event) {
-    const targetElement = event.target as HTMLElement;
-    if (targetElement.classList.contains('piece')) {
-        draggedElement = event.target as HTMLElement;
-    }
+  const targetElement = event.target as HTMLElement;
+  if (targetElement.classList.contains("piece")) {
+    draggedElement = event.target as HTMLElement;
+  }
 }
 
 function onDragDrop(event: Event) {
-    event.stopPropagation();
-    let targetElement = event.target as HTMLElement;
-    // Make sure target is not a resource
-    while (targetElement.classList.contains('untargetable')) {
-        targetElement = targetElement.parentNode as HTMLElement;
-    }
+  event.stopPropagation();
+  let targetElement = event.target as HTMLElement;
+  // Make sure target is not a resource
+  while (targetElement.classList.contains("untargetable")) {
+    targetElement = targetElement.parentNode as HTMLElement;
+  }
 
-    triggerOnAction(draggedElement, targetElement);
+  triggerOnAction(draggedElement, targetElement);
 }
 
 function onDragOver(event: Event) {
-    event.preventDefault();
+  event.preventDefault();
 }
 
 function onDragOffTheBoard(_: Event) {
-    triggerOnFallOffTheBoard(draggedElement);
+  triggerOnFallOffTheBoard(draggedElement);
 }
 
 function handleMouseEvents(event: Event, shouldAddClass: boolean) {
-    let target = event.target as HTMLElement;
-    const targetParentElement = target.parentNode as HTMLElement;
-    if (targetParentElement.classList.contains('square')) {
-        target = target.parentNode as HTMLElement;
-    }
-    if (target.classList.contains('square')) {
-        if (shouldAddClass) {
-            target.classList.add('light-gray-background');
-        } else {
-            target.classList.remove('light-gray-background');
-        }
+  let target = event.target as HTMLElement;
+  const targetParentElement = target.parentNode as HTMLElement;
+  if (targetParentElement.classList.contains("square")) {
+    target = target.parentNode as HTMLElement;
+  }
+  if (target.classList.contains("square")) {
+    if (shouldAddClass) {
+      target.classList.add("light-gray-background");
+    } else {
+      target.classList.remove("light-gray-background");
     }
+  }
 }
 
 function onMouseOver(event: Event) {
-    handleMouseEvents(event, true);
+  handleMouseEvents(event, true);
 }
 
 function onMouseOut(event: Event) {
-    handleMouseEvents(event, false);
+  handleMouseEvents(event, false);
 }
 
-export function setOnAction(_triggerOnAction: (draggedElement: HTMLElement, targetElement: HTMLElement) => void) {
-    triggerOnAction = _triggerOnAction;
+export function setOnAction(
+  _triggerOnAction: (
+    draggedElement: HTMLElement,
+    targetElement: HTMLElement,
+  ) => void,
+) {
+  triggerOnAction = _triggerOnAction;
 }
 
-export function setOnFallOffTheBoard(_triggerOnFallOffTheBoard: (draggedElement: HTMLElement) => void) {
-    triggerOnFallOffTheBoard = _triggerOnFallOffTheBoard;
-}
+export function setOnFallOffTheBoard(
+  _triggerOnFallOffTheBoard: (draggedElement: HTMLElement) => void,
+) {
+  triggerOnFallOffTheBoard = _triggerOnFallOffTheBoard;
+}