Add editorconfig

.editorconfig

@@ -0,0 +1,10 @@
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+indent_size = unset

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+name: Test
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout commit
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+        env:
+          NODE_ENV: development
+          CI: true
+
+      - name: Run linting
+        run: npm run lint
+
+      - name: Build extension
+        run: npm run build

.nvmrc

@@ -0,0 +1 @@
+v18.13.0

.vscode/settings.json

@@ -1,21 +1,21 @@
 {
-	"files.exclude": {
-		"**/.git": true,
-		"**/.svn": true,
-		"**/.hg": true,
-		"**/CVS": true,
-		"**/.DS_Store": true,
-		"**/Thumbs.db": true,
-		"**/.classpath": true,
-		"**/.project": true,
-		"**/.settings": true,
-		"**/.factorypath": true,
-		"**/*.css": true
-	},
-	"hide-files.files": [],
-	"workbench.colorCustomizations": {
-		"activityBar.background": "#3A254A",
-		"titleBar.activeBackground": "#513368",
-		"titleBar.activeForeground": "#FCFBFD"
-	}
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/.classpath": true,
+    "**/.project": true,
+    "**/.settings": true,
+    "**/.factorypath": true,
+    "**/*.css": true
+  },
+  "hide-files.files": [],
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#3A254A",
+    "titleBar.activeBackground": "#513368",
+    "titleBar.activeForeground": "#FCFBFD"
+  }
 }

Alveus Ambassadors.json

@@ -84,4 +84,4 @@
   "name": "Alveus Animals",
   "usingRandomFrontendHostingPort": false,
   "version": 3
-}
+}

package.json

@@ -32,11 +32,14 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "npm-run-all --parallel watch serve",
+    "start": "npm-run-all --parallel sass:watch serve",
     "serve": "env-cmd -f .env react-app-rewired start",
-    "watch": "sass  --no-source-map --watch src:src",
-    "build": "react-app-rewired build",
+    "sass:build": "sass --no-source-map src:src",
+    "sass:watch": "npm run sass:build -- --watch",
+    "build": "npm run sass:build && react-app-rewired build",
     "test": "react-app-rewired test",
+    "lint": "npm run lint:editorconfig",
+    "lint:editorconfig": "editorconfig-checker",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -60,6 +63,7 @@
   "devDependencies": {
     "@types/cors": "^2.8.12",
     "@types/tmi.js": "^1.8.2",
+    "editorconfig-checker": "^5.0.1",
     "react-app-rewire-multiple-entry": "^2.2.2",
     "react-app-rewired": "^2.2.1"
   }

src/index.scss

@@ -1,15 +1,15 @@
 //Global styles
 @import './variables.scss';
 
-*{
-    margin: 0;
-    padding: 0;
+* {
+  margin: 0;
+  padding: 0;
 }
+
 body {
   font-family: $font-family;
   color: $primary-text;
-
   display: flex;
   justify-content: center;
   overflow-x: hidden; // no horizontal scrollbar
-}
+}

src/pages/overlay/App.tsx

@@ -9,101 +9,99 @@ import OverlaySettings from "./components/overlaySettings/OverlaySettings"
 import styles from "./App.module.css"
 
 interface Settings {
-    disableChatPopup: boolean
+  disableChatPopup: boolean
 }
 
-export default function App(){
-    const [overlaySettings, setOverlaySettings] = useState<Settings>(() => {
-        // Load settings from local storage, merging with defaults
-        const settings = JSON.parse(localStorage.getItem("settings") || "{}")
-        return {
-            disableChatPopup: false,
-            ...settings
-        }
-    })
+export default function App() {
+  const [overlaySettings, setOverlaySettings] = useState<Settings>(() => {
+    // Load settings from local storage, merging with defaults
+    const settings = JSON.parse(localStorage.getItem("settings") || "{}")
+    return {
+      disableChatPopup: false,
+      ...settings
+    }
+  })
 
-    useEffect(() => {
-        // save settings to local storage
-        localStorage.setItem("settings", JSON.stringify(overlaySettings))
-    }, [overlaySettings])
+  useEffect(() => {
+    // save settings to local storage
+    localStorage.setItem("settings", JSON.stringify(overlaySettings))
+  }, [overlaySettings])
 
-    const toggleDisableChatPopup = useCallback(() => {
-        setOverlaySettings((current: Settings) => ({
-            ...current,
-            disableChatPopup: !current.disableChatPopup
-        }))
-    }, [])
+  const toggleDisableChatPopup = useCallback(() => {
+    setOverlaySettings((current: Settings) => ({
+      ...current,
+      disableChatPopup: !current.disableChatPopup
+    }))
+  }, [])
 
-    // Show/hide the overlay based on mouse movement
-    const appRef = useRef<HTMLDivElement>(null)
-    const sleepTimer = useRef<NodeJS.Timeout | undefined>(undefined)
-    const [sleeping, setSleeping] = useState(false)
+  // Show/hide the overlay based on mouse movement
+  const appRef = useRef<HTMLDivElement>(null)
+  const sleepTimer = useRef<NodeJS.Timeout | undefined>(undefined)
+  const [sleeping, setSleeping] = useState(false)
 
-    // Allow children to know when we have been woken up
-    const [awoken, setAwoken] = useState<(() => void)[]>([])
-    const addAwoken = useCallback((callback: () => void) => {
-        setAwoken(current => [...current, callback])
-    }, [])
-    const removeAwoken = useCallback((callback: () => void) => {
-        setAwoken(current => current.filter(c => c !== callback))
-    }, [])
-    const awokenObj = useMemo(() => ({ add: addAwoken, remove: removeAwoken }), [addAwoken, removeAwoken])
+  // Allow children to know when we have been woken up
+  const [awoken, setAwoken] = useState<(() => void)[]>([])
+  const addAwoken = useCallback((callback: () => void) => {
+    setAwoken(current => [...current, callback])
+  }, [])
+  const removeAwoken = useCallback((callback: () => void) => {
+    setAwoken(current => current.filter(c => c !== callback))
+  }, [])
+  const awokenObj = useMemo(() => ({ add: addAwoken, remove: removeAwoken }), [addAwoken, removeAwoken])
 
-    // Wake the overlay for x milliseconds
-    const wake = useCallback((time: number) => {
-        setSleeping(false)
-        awoken.forEach(fn => fn())
-        if (sleepTimer.current) clearTimeout(sleepTimer.current)
-        sleepTimer.current = setTimeout(() => {
-            setSleeping(true)
-        }, time)
-    }, [awoken])
+  // Wake the overlay for x milliseconds
+  const wake = useCallback((time: number) => {
+    setSleeping(false)
+    awoken.forEach(fn => fn())
+    if (sleepTimer.current) clearTimeout(sleepTimer.current)
+    sleepTimer.current = setTimeout(() => {
+      setSleeping(true)
+    }, time)
+  }, [awoken])
 
-    // When the user interacts, have a 5s timeout before hiding the overlay
-    const interacted = useCallback(() => {
-        wake(5000)
-    }, [wake])
+  // When the user interacts, have a 5s timeout before hiding the overlay
+  const interacted = useCallback(() => {
+    wake(5000)
+  }, [wake])
 
-    // Bind a capturing event listener for scrolling (so we can see scrolling for children)
-    useEffect(() => {
-        appRef.current?.addEventListener("scroll", interacted, true)
-        return () => appRef.current?.removeEventListener("scroll", interacted, true)
-    }, [interacted])
+  // Bind a capturing event listener for scrolling (so we can see scrolling for children)
+  useEffect(() => {
+    if (!appRef.current) return
+    const node = appRef.current
+    node.addEventListener("scroll", interacted, true)
+    return () => node.removeEventListener("scroll", interacted, true)
+  }, [interacted])
 
-    // Immediately sleep the overlay
-    const sleep = useCallback(() => {
-        setSleeping(true)
-        if (sleepTimer.current) clearTimeout(sleepTimer.current)
-    }, [])
+  // Immediately sleep the overlay
+  const sleep = useCallback(() => {
+    setSleeping(true)
+    if (sleepTimer.current) clearTimeout(sleepTimer.current)
+  }, [])
 
-    // When we unmount, clear the sleep timer
-    useEffect(() => () => {
-        if (sleepTimer.current) clearTimeout(sleepTimer.current)
-    }, [])
+  // When we unmount, clear the sleep timer
+  useEffect(() => () => {
+    if (sleepTimer.current) clearTimeout(sleepTimer.current)
+  }, [])
 
-    return (
-        <div
-            ref={appRef}
-            className={`${styles.app} ${sleeping ? styles.hidden : styles.visible}`}
-            onMouseEnter={interacted}
-            onMouseMove={interacted}
-            onMouseLeave={sleep}
-        >
-            <Overlay
-                sleeping={sleeping}
-                awoken={awokenObj}
-                wake={wake}
-                settings={{
-                    disableChatPopup: overlaySettings.disableChatPopup
-                }}
-            />
-            <OverlaySettings
-                sleeping={sleeping}
-                settings={{
-                    disableChatPopup: overlaySettings.disableChatPopup
-                }}
-                toggleDisableChatPopup={toggleDisableChatPopup}
-            />
-        </div>
-    )
+  return (
+    <div
+      ref={appRef}
+      className={`${styles.app} ${sleeping ? styles.hidden : styles.visible}`}
+      onMouseEnter={interacted}
+      onMouseMove={interacted}
+      onMouseLeave={sleep}
+    >
+      <Overlay
+        sleeping={sleeping}
+        awoken={awokenObj}
+        wake={wake}
+        settings={overlaySettings}
+      />
+      <OverlaySettings
+        sleeping={sleeping}
+        settings={overlaySettings}
+        toggleDisableChatPopup={toggleDisableChatPopup}
+      />
+    </div>
+  )
 }