chore: project setup

.editorconfig

@@ -0,0 +1,12 @@
+; https://editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+[*.{scss,css,yml,yaml}]
+indent_size = 2

.gitattributes

@@ -0,0 +1 @@
+eslint.config.mjs linguist-generated

.github/workflows/pr-checks.yml

@@ -0,0 +1,34 @@
+name: Lint code using eslint and type check
+on:
+  pull_request:
+jobs:
+  run_eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.ref }}
+          persist-credentials: true
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Install packages
+        run: npm install
+      - name: Run eslint
+        run: npm run lint-fix
+      - name: Run type-check
+        run: npm run type-check
+      - name: Push changes back to repository
+        uses: stefanzweifel/git-auto-commit-action@v7
+        with:
+          commit_message: "ci: your code was formatted by Eslint :noproblem: [skip ci]"

.gitignore

@@ -147,3 +147,19 @@ vite.config.ts.timestamp-*
 
 # Turbo Repo
 .turbo
+
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+backend-data
+
+# Editor directories and files
+.vscode/*
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -615,47 +615,3 @@ reviewing courts shall apply local law that most closely approximates
 an absolute waiver of all civil liability in connection with the
 Program, unless a warranty or assumption of liability accompanies a
 copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source.  For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code.  There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for the
-specific requirements.
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.

README.md

@@ -1 +1,81 @@
-# frontend
+# frontend
+> [!NOTE]
+> This repo has strict code quality controls in place that will automatically block your PR if they don't pass.
+> What this means: You may need to fix some of the issues that the automatic code style review brings up (most are auto-fixed though).
+
+> [!WARNING]
+> Before you get started, I ***STRONGLY*** recommend you read through this readme carefully.
+
+Please note the starter code was "stolen" from https://github.com/janishutz/MusicPlayer (developed by one of the members of the group)
+
+## Development
+### Getting Started with WebDev
+Learning Vue:
+- [Official Docs](https://vuejs.org/guide/introduction.html)
+- Docs here
+- [MDN Docs](https://developer.mozilla.org/en-US/)
+- [MusicPlayer](https://github.com/janishutz/MusicPlayer/tree/dev/web) by @janishutz (as a reference for implementation)
+- [EYE-TAP frontend](https://github.com/eye-tap/frontend) (as a reference for implementation)
+- Any other docs online
+- [FontAwesome](https://fontawesome.com/search?ic=free-collection)
+
+
+### Linter and type checker runs on PRs
+To keep the code style consistent, on every pull request, a GitHub action will run formatting your code if you haven't done so already.
+It will also run a type check and ***NO PR WITH FAILING TESTS*** will be merged (into `main`).
+
+
+### Running linter and type checker
+You may run the linter and type-checker using the shipped `run-lint.sh` script.
+
+If you also occasionally use the `dev-container-node` image or have `node` and `npm` installed locally, you may run the following commands in the shell:
+```bash
+npm run type-check && npm run lint-fix
+```
+
+
+### Dev environment setup
+You may choose between using the prebuilt docker images I provide for everything (including a local backend that will be required in the future) via the commands below,
+or follow the instructions in the next section to develop using the `dev-container-node` or locally installed `node.js`.
+
+The recommended way of running the backend (you don't need to worry about deps or anything) is to run one of the following commands in the root directory of this repo:
+```bash
+docker compose -f compose.backendless.yml up -d # If you want to run without backend (that may at some point stop being viable)
+docker compose up -d # If you want to run with a backend
+```
+
+
+#### Running with locally installed tools
+***This section also applies if you use the `dev-container-node` instead of the `compose` file.***
+
+Install the dependencies using
+```bash
+npm i
+```
+then start the development server of `vite` using
+```bash
+npm run dev
+```
+For spinning up the backend without docker, see the backend repo.
+
+
+#### Running with `dev-container-node`
+Run the following command with docker installed to get a container with the same dependencies installed as runner, but with a shell instead:
+```bash
+docker run -it -p 8081:8081 --name prototype -v .:/mnt ghcr.io/janishutz/dev-container-node
+```
+To launch the container again later, you can use
+```bash
+docker start -i prototype
+```
+or to start the container and removing it whenever you exit it:
+```bash
+docker run -it -p 8081:8081 --rm -v .:/mnt ghcr.io/janishutz/dev-container-node
+```
+
+#### Details
+The following environment variables can be set during development:
+```env
+VITE_BACKENDLESS=true # (or false) to disable login checks
+VITE_BACKEND_URL=<url> # To set the backend URL to anything other than http://localhost:8080
+```

compose.backendless.yml

@@ -0,0 +1,11 @@
+services:
+  frontend:
+    image: ghcr.io/janishutz/vue-dev-runner
+    container_name: frontend-backendless
+    restart: on-failure
+    ports:
+      - 8081:8081
+    volumes:
+      - .:/mnt
+    environment:
+      VITE_BACKENDLESS: true

compose.yml

@@ -0,0 +1,17 @@
+services:
+  frontend:
+    image: ghcr.io/janishutz/vue-dev-runner
+    container_name: frontend
+    restart: on-failure
+    ports:
+      - 8081:8081
+    volumes:
+      - .:/mnt
+  backend:
+    image: ghcr.io/hci-group-15/backend
+    container_name: backend
+    restart: on-failure
+    ports:
+      - 8080:8080
+    volumes:
+      - ./backend-data:/data

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />