Add linting workflow

.eslintrc.js

@@ -16,4 +16,9 @@ module.exports = {
   rules: {
     "react/prop-types": "off",
   },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
 };

.github/workflows/lint.yml

@@ -0,0 +1,26 @@
+name: Lint
+
+on:
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install requirements
+        run: npm ci
+
+      - name: Prettier
+        run: npx prettier -c src/ README.md .github/workflows
+
+      - name: ES lint
+        run: npx eslint --ignore-path .gitignore .
+
+      - name: Stylelint
+        run: npx stylelint '**/*.css'

.prettierignore

@@ -1 +1,3 @@
+TODO.md
 src/privacy.html
+src/App.css

src/App.css

@@ -1,6 +1,7 @@
 html {
   height: 100%;
   background-color: var(--dark-color);
+
   --default-font-size: min(4vmax, 7vmin, 40px);
   --dark-color: rgb(55 54 71);
   --light-color: rgb(239 239 239);
@@ -315,11 +316,8 @@ input[type="checkbox" i]:checked {
 /* Landscape */
 @media (orientation: landscape) {
   #gribbles {
-      grid-template-areas: 
-      "stats currentWord controls"
-      "foundWords board controls";
-      grid-template-rows: auto 1fr;
-      grid-template-columns: 1fr auto auto;
+    grid-template:
+      "stats currentWord controls" auto "foundWords board controls" 1fr / 1fr auto auto;
   }
 
   #controls {
@@ -338,7 +336,7 @@ input[type="checkbox" i]:checked {
 }
 
 /* Large screen */
-@media (min-height: 600px) and (min-width: 600px) {
+@media (height >= 600px) and (width >= 600px) {
   #board {
     align-items: center;
     align-self: center;
@@ -363,4 +361,4 @@ input[type="checkbox" i]:checked {
   #setting-buttons {
     width: fit-content;
   }
-}
+}

src/components/Rules.js

@@ -6,9 +6,7 @@ export default function Rules({setDisplay, timerDispatch}) {
     <div className="App info">
       <h1>Gribbles: How to play</h1>
       <p className="infoText">
-        {
-          `Swipe to connect letters into words.\n\nCan you find all the words before time is up?\n\nChange the settings to control how much time you start with and how much time you get for each word that you find.\n\nIn easy mode, get a bonus point for less common words.`
-        }
+        {`Swipe to connect letters into words.\n\nCan you find all the words before time is up?\n\nChange the settings to control how much time you start with and how much time you get for each word that you find.\n\nIn easy mode, get a bonus point for less common words.`}
       </p>
       <button
         onClick={() => {

src/logic/gameReducer.js

@@ -59,7 +59,7 @@ export function gameReducer(currentGameState, payload) {
 
     newPlayedIndexes = currentGameState.playedIndexes.slice(
       0,
-      newPlayedIndexes.length - 1
+      newPlayedIndexes.length - 1,
     );
 
     return {