Link support 1/2

Dice rollers!
Yes
2026-05-03 01:02:13 +02:00 · 2026-05-02 23:37:17 +02:00 · 2026-05-02 18:41:57 +02:00 · 2026-05-02 18:39:23 +02:00 · 2026-05-02 18:34:05 +02:00 · 2026-05-02 18:30:44 +02:00
184 changed files with 8160 additions and 281 deletions
--- a/.codex
+++ b/.codex
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -0,0 +1,62 @@
+name: Build and Deploy Nuxt
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: docker
+  
+    steps:
+    
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: |
+          apt-get update -y && apt-get install -y openssh-client
+          apt-get install -y git
+
+      - name: Setup SSH inside container
+        run: |
+          rm -rf ~/.ssh
+          mkdir -p ~/.ssh
+          echo "${{ secrets.DEPLOY_KEY }}" | tr -d '\r' > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+
+          # Add the container host to known_hosts
+          ssh-keyscan -H ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts
+
+      - name: Log in to registry
+        run: |
+          echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login git.aranroig.com -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+
+      - name: Build frontend
+        run: |
+          docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest \
+          --build-arg NUXT_PUBLIC_GIT_COMMIT=$(git rev-parse --short HEAD) \
+          --build-arg NUXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
+          --build-arg NUXT_PUBLIC_GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD) \
+          ./frontend
+          docker push git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest
+
+      - name: Build backend
+        run: |
+          docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-backend:latest ./backend
+          docker push git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-backend:latest
+
+      - name: Copy files
+        run: |
+          scp docker-compose.yml deploy@${{ secrets.DEPLOY_HOST}}:/var/www/app/
+          scp nginx.conf deploy@${{ secrets.DEPLOY_HOST }}:/var/www/app/nginx.conf
+
+      - name: Deploy
+        run: |
+          ssh deploy@${{ secrets.DEPLOY_HOST }} << 'EOF'
+            echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login git.aranroig.com -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+            cd /var/www/app/
+            docker compose pull
+            docker compose up -d
+          EOF
+
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 <picture align="center">
  <source media="(prefers-color-scheme: dark)" srcset="static/media/logo-splash.png">
-  <source media="(prefers-color-scheme: light)" srcset="static/media/logo-splash-light.png">
-  <img alt="Shows a black logo in light color mode and a white one in dark color mode." src="static/media/logo-splash.png">
+  <img alt="Shows a black logo in light color mode and a white one in dark color mode." src="static/media/logo-splash-light.png">
 </picture>
 <hr>

--- a/backend/.env.production
+++ b/backend/.env.production
@@ -1,3 +1,3 @@
 PORT=5000
-DB_URI=mongodb://10.1.1.7:27017/
+DB_URI=mongodb://10.1.1.7:27017/dragonroll
 NODE_ENV=production
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -14,3 +14,5 @@ logs
 .env
 .env.*
 !.env.production
+
+uploads/
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -9,11 +9,18 @@
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
+        "bcryptjs": "^3.0.3",
+        "cookie-parser": "^1.4.7",
        "cors": "^2.8.6",
        "dotenv": "^17.3.1",
        "express": "^5.2.1",
+        "express-rate-limit": "^8.4.1",
+        "jsonwebtoken": "^9.0.3",
        "mongoose": "^9.3.0",
-        "nodemon": "^3.1.14"
+        "multer": "^2.1.1",
+        "nodemon": "^3.1.14",
+        "passport": "^0.7.0",
+        "passport-jwt": "^4.0.1"
      }
    },
    "node_modules/@mongodb-js/saslprep": {
@@ -66,6 +73,12 @@
        "node": ">= 8"
      }
    },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
+      "license": "MIT"
+    },
    "node_modules/balanced-match": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@@ -75,6 +88,15 @@
        "node": "18 || 20 || >=22"
      }
    },
+    "node_modules/bcryptjs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
+      "integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
    "node_modules/binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -144,6 +166,29 @@
        "node": ">=20.19.0"
      }
    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
    "node_modules/bytes": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -206,6 +251,21 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
    "node_modules/content-disposition": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -237,6 +297,25 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/cookie-parser": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
+      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-parser/node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
    "node_modules/cookie-signature": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
@@ -315,6 +394,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -418,6 +506,24 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/express-rate-limit": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.4.1.tgz",
+      "integrity": "sha512-NGVYwQSAyEQgzxX1iCM978PP9AdO/hW93gMcF6ZwQCm+rFvLsBH6w4xcXWTcliS8La5EPRN3p9wzItqBwJrfNw==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
    "node_modules/fill-range": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -634,6 +740,15 @@
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
      "license": "ISC"
    },
+    "node_modules/ip-address": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
    "node_modules/ipaddr.js": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -691,6 +806,49 @@
      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
      "license": "MIT"
    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "node_modules/kareem": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/kareem/-/kareem-3.2.0.tgz",
@@ -700,6 +858,48 @@
        "node": ">=18.0.0"
      }
    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -880,6 +1080,68 @@
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
      "license": "MIT"
    },
+    "node_modules/multer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-2.1.1.tgz",
+      "integrity": "sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==",
+      "license": "MIT",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.6.0",
+        "concat-stream": "^2.0.0",
+        "type-is": "^1.6.18"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/multer/node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/multer/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/multer/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/multer/node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/negotiator": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
@@ -977,6 +1239,42 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/passport": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/passport/-/passport-0.7.0.tgz",
+      "integrity": "sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "passport-strategy": "1.x.x",
+        "pause": "0.0.1",
+        "utils-merge": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jaredhanson"
+      }
+    },
+    "node_modules/passport-jwt": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/passport-jwt/-/passport-jwt-4.0.1.tgz",
+      "integrity": "sha512-UCKMDYhNuGOBE9/9Ycuoyh7vP6jpeTp/+sfMJl7nLff/t6dps+iaeE0hhNkKN8/HZHcJ7lCdOyDxHdDoxoSvdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jsonwebtoken": "^9.0.0",
+        "passport-strategy": "^1.0.0"
+      }
+    },
+    "node_modules/passport-strategy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
+      "integrity": "sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/path-to-regexp": {
      "version": "8.4.2",
      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
@@ -987,6 +1285,11 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/pause": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
+      "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
+    },
    "node_modules/picomatch": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
@@ -1066,6 +1369,20 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1094,6 +1411,26 @@
        "node": ">= 18"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -1271,6 +1608,23 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -1339,6 +1693,12 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
    "node_modules/undefsafe": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -1354,6 +1714,21 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -10,10 +10,17 @@
    "dev": "nodemon src/index.js"
  },
  "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "cookie-parser": "^1.4.7",
    "cors": "^2.8.6",
    "dotenv": "^17.3.1",
    "express": "^5.2.1",
+    "express-rate-limit": "^8.4.1",
+    "jsonwebtoken": "^9.0.3",
    "mongoose": "^9.3.0",
-    "nodemon": "^3.1.14"
+    "multer": "^2.1.1",
+    "nodemon": "^3.1.14",
+    "passport": "^0.7.0",
+    "passport-jwt": "^4.0.1"
  }
 }
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -1,9 +1,13 @@
 const express = require("express");
 const cors = require('cors');
+const cookieParser = require('cookie-parser');
+const passport = require('passport');
+const path = require('path');

 const dotenv = require('dotenv');

 if(process.env.NODE_ENV) {
+  console.log(`.env.${process.env.NODE_ENV}`);
  dotenv.config({
    path: `.env.${process.env.NODE_ENV}`
  });
@@ -14,14 +18,50 @@ if(process.env.NODE_ENV) {
 const app = express();
 const connectDB = require("./db");

+
+// PUBLIC
+const uploadDir = path.join(__dirname, 'uploads');
+app.use('/api/public', express.static(uploadDir));
+
+// JSON LIMIT EXPRESS
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({
+  extended: true,
+  limit: '50mb'
+}));
+
 // connect database
 connectDB();

+// MIDDLEWARE
+app.use(passport.initialize());
+require('./services/passport')(passport);
+
+// CORS
+app.use(cookieParser());
+
 app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true, // if using cookies/auth
 }));

+// ROUTES (NO AUTH)
+app.use('/api/user', require('./routes/user'));
+
+// AUTH
+checkAuth = passport.authenticate('jwt', { session: false });
+app.use(checkAuth);
+
+// ROUTES WITH AUTH
+app.use('/api/campaign', require('./routes/campaign'));
+app.use('/api/note', require('./routes/note'));
+/*
+app.use('/campaign', require('./routes/campaign'));
+app.use('/maps', require('./routes/map'));
+app.use('/datagen', require('./routes/datagen'));
+app.use('/admin', require('./routes/admin'));
+*/
+
 app.get("/api/test", (req, res) => {
  console.log("Hey");
  res.json({"message": "Hello from backend!"});
--- a/backend/src/models/Campaign.js
+++ b/backend/src/models/Campaign.js
@@ -0,0 +1,17 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const CampaignSchema = new Schema({
+    name: {type: String, required: true},
+    description: {type: String},
+    color: {type: String},
+    createdBy: {
+        type: Schema.Types.ObjectId,
+        ref: 'User',
+        required: true
+    },
+    date: { type: Date, default: Date.now},
+    settings: { type: Object }
+});
+
+module.exports = mongoose.model('Campaign', CampaignSchema);
--- a/backend/src/models/Note.js
+++ b/backend/src/models/Note.js
@@ -0,0 +1,15 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const NoteSchema = new Schema({
+    title: { type: String },
+    content: { type: String },
+    campaign: {
+        type: Schema.Types.ObjectId,
+        ref: 'Campaign',
+        required: true
+    },
+    date: { type: Date, default: Date.now }
+});
+
+module.exports = mongoose.model('Note', NoteSchema);
--- a/backend/src/models/User.js
+++ b/backend/src/models/User.js
@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const UserSchema = new Schema({
+    name: {type: String, required: true},
+    username: { type: String, required: true, unique: true },
+    email: { type: String, required: true, unique: true },
+    password: { type: String },
+    date: { type: Date, default: Date.now},
+    admin: {type: Boolean, default: false},
+    image: { type: String },
+    setupCode: { type: String },
+    settings: { type: Object }
+});
+
+module.exports = mongoose.model('User', UserSchema);
--- a/backend/src/routes/campaign.js
+++ b/backend/src/routes/campaign.js
@@ -0,0 +1,46 @@
+const express = require('express')
+const router = express.Router();
+
+const Campaign = require("../models/Campaign");
+
+router.post('/create', async (req, res) => {
+    try {
+        const { name, description, color, settings } = req.body;
+        const newCampaign = new Campaign({
+            name,
+            description,
+            color,
+            settings,
+            createdBy: req.user.id
+        });
+        await newCampaign.save();
+        res.json({ status: "ok", campaign: newCampaign });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.get('/list', async (req, res) => {
+    try {
+        const campaigns = await Campaign.find({ createdBy: req.user.id });
+        res.json({ status: "ok", campaigns });
+    } catch (err) {
+        res.json({ status: "error", msg: "errors.internal", err });
+    }
+});
+
+router.get('/retrieve/:id', async (req, res) => {
+    try {
+        if (!req.user?.id) return res.status(401).json({ status: "error", msg: "errors.unauthorized" });
+
+        const campaign = await Campaign.findOne({ _id: req.params.id, createdBy: req.user.id });
+        if (!campaign) return res.json({ status: "error", msg: "errors.not-found" });
+
+        res.json({ status: "ok", campaign });
+    } catch (err) {
+        res.json({ status: "error", msg: "errors.internal", err });
+    }
+});
+
+module.exports = router;
--- a/backend/src/routes/note.js
+++ b/backend/src/routes/note.js
@@ -0,0 +1,86 @@
+const express = require('express');
+const router = express.Router();
+
+const Campaign = require("../models/Campaign");
+const Note = require("../models/Note");
+
+async function userOwnsCampaign(campaignId, userId) {
+    const campaign = await Campaign.findOne({ _id: campaignId, createdBy: userId }).lean();
+    return Boolean(campaign);
+}
+
+router.get('/list', async (req, res) => {
+    try {
+        const { campaign } = req.query;
+        if (!campaign) return res.json({ status: "error", msg: "errors.missing-data" });
+
+        const hasAccess = await userOwnsCampaign(campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        const notes = await Note.find({ campaign })
+            .select('_id title content date campaign')
+            .sort({ date: -1 })
+            .lean();
+
+        res.json({ status: "ok", notes });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.post('/create', async (req, res) => {
+    try {
+        const { title, content, campaign } = req.body;
+        const hasAccess = await userOwnsCampaign(campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        const newNote = new Note({
+            title,
+            content,
+            campaign
+        });
+        await newNote.save();
+        res.json({ status: "ok", note: newNote });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.post('/update', async (req, res) => {
+    try {
+        const { id, title, content } = req.body;
+        const note = await Note.findById(id);
+        if (!note) return res.json({ status: "error", msg: "errors.notfound" });
+        const hasAccess = await userOwnsCampaign(note.campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        if(title) note.title = title;
+        note.content = content;
+        note.date = Date.now();
+        await note.save();
+        res.json({ status: "ok", note });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.post('/delete', async (req, res) => {
+    try {
+        const { id } = req.body;
+        const note = await Note.findById(id);
+        if (!note) return res.json({ status: "error", msg: "errors.notfound" });
+        const hasAccess = await userOwnsCampaign(note.campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        await note.remove();
+        res.json({ status: "ok" });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+module.exports = router;
--- a/backend/src/routes/user.js
+++ b/backend/src/routes/user.js
@@ -0,0 +1,195 @@
+const express = require('express')
+const router = express.Router();
+
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const passport = require('passport');
+const secret = require('../services/keys').secret;
+const rateLimitMiddleware = require("../services/rate-limiter");
+const crypto = require("crypto");
+
+const { isAdmin } = require('../services/middleware');
+
+const User = require("../models/User");
+
+const upload = require("../services/storage");
+
+
+router.post('/register', async (req, res) => {
+    try {
+        const existsAdmin = !!(await User.findOne({ admin: true }));
+        const {
+            username,
+            email,
+            name,
+            password
+        } = req.body;
+
+        // Check if email or username already exists
+        const existingUser = await User.findOne({
+            $or: [
+                { email: email },
+                { username: username }
+            ]
+        });
+
+        if (existingUser) {
+            return res.json({
+                status: "error",
+                msg: "register.errors.email-username-exists"
+            });
+        }
+
+        const salt = await bcrypt.genSalt(10);
+        let user = new User({
+            admin: !existsAdmin,
+            name: name,
+            username: username,
+            email: email,
+            password: await bcrypt.hash(password, salt)
+        });
+
+        await user.save();
+        res.json({ status: "ok", code: setupCode });
+    } catch (err) {
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+// User gets if setup account exists given the query code
+router.get('/verify-setup', async (req, res) => {
+    try {
+        const user = await User.findOne({ setupCode: req.query.code });
+        if (user) {
+            res.json({ status: "ok", code: req.query.code });
+        } else {
+            res.json({ status: "error", msg: "not-exists" });
+        }
+    } catch (err) {
+        res.json({ status: "error", msg: "internal" });
+    }
+});
+
+// User posts the parameters of his new account given by admin
+router.post('/setup', rateLimitMiddleware, async (req, res) => {
+    const { name, username, email, password } = req.body;
+    const setupCode = req.query.code;
+
+    if (!(name && username && email && password && setupCode)) {
+        return res.json({ status: "error", msg: "params" });
+    }
+
+    try {
+        const user = await User.findOne({ setupCode });
+        if (!user) {
+            return res.json({ status: "error", msg: "not-found" });
+        }
+
+        const sameUser = await User.findOne({ email });
+        if (sameUser) {
+            return res.json({ status: "error", msg: "already-email" });
+        }
+
+        const salt = await bcrypt.genSalt(10);
+        user.password = await bcrypt.hash(password, salt);
+        user.username = username;
+        user.email = email;
+        user.setupCode = undefined;
+
+        await user.save();
+        res.json({ status: "ok" });
+    } catch (err) {
+        res.json({ status: "error", msg: "internal" });
+    }
+});
+
+// Login post
+router.post('/login', rateLimitMiddleware, async (req, res) => {
+    const { usermail, password } = req.body;
+
+    if (!(usermail && password)) {
+        return res.json({ status: "error", msg: "login.errors.params" });
+    }
+
+    try {
+        const user = await User.findOne({ $or: [{ username: usermail }, { email: usermail }] });
+        if (!user) {
+            return res.json({ status: "error", msg: "login.errors.invalid-credentials" });
+        }
+
+        const isMatch = await bcrypt.compare(password, user.password);
+        if (!isMatch) {
+            return res.json({ status: "error", msg: "login.errors.invalid-credentials" });
+        }
+
+        const payload = {
+            _id: user._id,
+            username: user.username,
+            name: user.name,
+            email: user.email,
+            admin: user.admin,
+            settings: user.settings
+        };
+
+        const token = await new Promise((resolve, reject) => {
+            jwt.sign(payload, secret, { expiresIn: 172800 }, (err, token) => {
+                if (err) reject(err);
+                else resolve(token);
+            });
+        });
+
+        res.json({ status: "ok", token, msg: "success" });
+    } catch (err) {
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+// Upload avatar post
+router.post("/upload-avatar", upload.single("image"), passport.authenticate('jwt', {session: false}), async (req, res) => {
+    try {
+        const imageName = req.file.filename;
+        await User.updateOne(req.user, { image: imageName });
+        res.json({ status: "ok", msg: "uploaded" });
+    } catch (err) {
+        res.json({ status: "error", msg: "internal" });
+    }
+});
+
+router.get("/retrieve-avatar", async (req, res) => {
+    try {
+        const data = await User.findOne({ username: req.query.username });
+        res.json({ status: "ok", image: `${data.image}` });
+    } catch (err) {
+        res.json({ status: "error" });
+    }
+});
+
+router.get("/has-admin", async (req, res) => {
+    try {
+        const data = await User.findOne({ admin: true });
+        if (data) res.json({ status: "ok" });
+        else res.json({ status: "init" });
+    } catch (err) {
+        res.json({ status: "error" });
+    }
+});
+
+router.post("/update-settings", passport.authenticate('jwt', {session: false}), async (req, res) => {
+    try {
+        await User.updateOne(req.user, { settings: req.body.settings });
+        res.json({ status: "ok", settings: req.body.settings });
+    } catch (err) {
+        res.json({ status: "error", msg: "internal" });
+    }
+});
+
+router.get('/get-settings', passport.authenticate('jwt', {session: false}), async (req, res) => {
+    try {
+        const data = await User.findOne(req.user);
+        res.json({ status: "ok", settings: data.settings });
+    } catch (err) {
+        res.json({ status: "error", msg: "internal" });
+    }
+});
+
+module.exports = router;
--- a/backend/src/services/keys.js
+++ b/backend/src/services/keys.js
@@ -0,0 +1,5 @@
+const fs = require('fs');
+
+module.exports = {
+    secret: "putyoursecrethere"
+}
--- a/backend/src/services/middleware.js
+++ b/backend/src/services/middleware.js
@@ -0,0 +1,17 @@
+const User = require("../models/User");
+
+async function isAdmin(req, res, next) {
+    try {
+        const user = await User.findOne(req.user).lean();
+        if (user && user.admin) {
+            return next();
+        }
+        res.json({ status: "error", msg: "unauthorized" });
+    } catch (err) {
+        res.json({ status: "error", msg: err.message });
+    }
+}
+
+module.exports = {
+    isAdmin
+}
--- a/backend/src/services/passport.js
+++ b/backend/src/services/passport.js
@@ -0,0 +1,25 @@
+const JwtStrategy = require('passport-jwt').Strategy;
+const ExtractJwt = require('passport-jwt').ExtractJwt;
+
+const User = require('../models/User');
+const key = require('./keys').secret;
+
+const opts = {
+    jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+    secretOrKey: key
+};
+
+module.exports = passport => {
+    passport.use(
+        new JwtStrategy(opts, async (jwt_payload, done) => {
+            try {
+                const user = await User.findById(jwt_payload._id);
+                if (user) return done(null, user);
+                return done(null, false);
+            } catch (err) {
+                console.log(err);
+                return done(err, false);
+            }
+        })
+    )
+}
--- a/backend/src/services/rate-limiter.js
+++ b/backend/src/services/rate-limiter.js
@@ -0,0 +1,11 @@
+const setRateLimit = require("express-rate-limit");
+
+// Rate limit middleware
+const rateLimitMiddleware = setRateLimit({
+  windowMs: 60 * 60 * 1000,
+  max: 150,
+  message: "Has fet masses peticions de login en una hora (ets un robot???)",
+  headers: true,
+});
+
+module.exports = rateLimitMiddleware;
--- a/backend/src/services/storage.js
+++ b/backend/src/services/storage.js
@@ -0,0 +1,22 @@
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+
+const uploadDir = path.join(__dirname, '..', 'uploads'); // adjust if needed
+
+if (!fs.existsSync(uploadDir)) {
+    fs.mkdirSync(uploadDir, { recursive: true });
+}
+
+var storage = multer.diskStorage({
+    destination: function (req, file, cb) {
+        cb(null, uploadDir);
+    },
+    filename: function (req, file, cb) {
+        const ext = path.extname(file.originalname);
+        cb(null, file.fieldname + '-' + Date.now() + ext);
+    }
+});
+
+var upload = multer({storage: storage});
+module.exports = upload;
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,21 @@
+version: "3.9"
+
+services:
+  nginx:
+    image: nginx:latest
+    ports:
+      - "3000:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    depends_on:
+      - frontend
+      - backend
+    restart: always
+
+  frontend:
+    image: git.aranroig.com/syndria98/dragonroll-frontend:latest
+    restart: always
+
+  backend:
+    image: git.aranroig.com/syndria98/dragonroll-backend:latest
+    restart: always
--- a/frontend/.env.production
+++ b/frontend/.env.production
@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE_URL=https://dragonroll.aranroig.com/api
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -21,4 +21,4 @@ logs
 # Local env files
 .env
 .env.*
-!.env.example
+!.env.production
--- a/frontend/18n.config.ts
+++ b/frontend/18n.config.ts
@@ -0,0 +1,6 @@
+// i18n.config.ts
+export default defineI18nConfig(() => ({
+  fallbackLocale: 'en',
+  missingWarn: true,
+  fallbackWarn: true
+}))
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,6 +1,14 @@
 # ---------- Build Stage ----------
 FROM node:20-alpine AS builder

+ARG NUXT_PUBLIC_GIT_COMMIT
+ARG NUXT_PUBLIC_GIT_TAG
+ARG NUXT_PUBLIC_GIT_BRANCH
+
+ENV NUXT_PUBLIC_GIT_COMMIT=$NUXT_PUBLIC_GIT_COMMIT
+ENV NUXT_PUBLIC_GIT_TAG=$NUXT_PUBLIC_GIT_TAG
+ENV NUXT_PUBLIC_GIT_BRANCH=$NUXT_PUBLIC_GIT_BRANCH
+
 WORKDIR /app

 # Copy package files
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,75 +1,19 @@
-# Nuxt Minimal Starter
+# Frontend

-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+This folder contains the React frontend for Dragonroll, an open-source role-playing game helper.

-## Setup
+## Features

-Make sure to install dependencies:
+- Campaign management with character tracking
+- Player note sharing (markdown)
+- Audio for in-person campaigns
+- Encounter planning
+- Item and spell management

-```bash
-# npm
-npm install
+## Files

-# pnpm
-pnpm install
+- `app/` - Application components and services
+- `app/services/` - Frontend services (Campaign, User, Window, etc.)
+- Styling and React components

-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+See the main README for complete information.
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -1,32 +1,56 @@
 <script setup lang="ts">
+import ContentManager from './components/managers/ContentManager.vue';
+import ToastManager from './components/managers/ToastManager.vue';
 import WindowManager from './components/managers/WindowManager.vue';
-import Content from './components/viewer/content/Content.vue';
-import StatusBar from './components/viewer/statusbar/StatusBar.vue';
-import TopBar from './components/viewer/TopBar.vue';
-

 import { CreateWindow } from '@/services/Windows'
+import { GetUser, HasAdmin } from './services/User';
+import TooltipManager from './components/managers/TooltipManager.vue';
+import ContextMenuManager from './components/managers/ContextMenuManager.vue';
+import { useCampaignService } from './services/Campaign';
+
+const { RestoreCampaign } = useCampaignService();

 async function start(){
-  CreateWindow('login');
+  if(GetUser()){
+    const restoredCampaign = await RestoreCampaign();
+    if (!restoredCampaign) {
+      CreateWindow('main_menu');
+    }
+    return;
+  }

+  if(await HasAdmin()){
+    CreateWindow('login');
+  } else {
+    CreateWindow('register', {firstTime: true});
+  }
  // DisplayToast('aqua', 'All plugins loaded successfully');
 }

+useHead({
+  title: 'Dragonroll',
+  meta: [
+    { name: 'description', content: 'Dragonroll is a free and open-source tabletop RPG virtual tabletop. It allows you to play your favorite pen-and-paper RPGs online with your friends, with features like character sheets, dice rolling, maps, tokens, and more.' },
+    { name: 'keywords', content: 'virtual tabletop, vtt, online rpg, pen-and-paper rpg, dungeons and dragons, pathfinder, roll20 alternative' },
+    { name: 'author', content: 'Aran Roig' },
+  ],
+})
+
 onMounted(() => {
+  setupTheme();
+  setTheme('dark');
  start();
 })
 </script>

 <template>
  <div class="viewer">
+    <ToastManager></ToastManager>
+    <TooltipManager></TooltipManager>
+    <ContextMenuManager></ContextMenuManager>
    <WindowManager></WindowManager>
-
-    
-    <TopBar></TopBar>
-    <Content></Content>
-    <StatusBar></StatusBar>
-
+    <ContentManager></ContentManager>
    <!-- Managers -->
  </div>
 </template>
@@ -38,4 +62,4 @@ onMounted(() => {
  width: 100%;
  height: 100vh;
 }
-</style>
+</style>
--- a/frontend/app/assets/css/colors.scss
+++ b/frontend/app/assets/css/colors.scss
@@ -3,27 +3,70 @@
 $themes: (
    dark: (
        background: #141414,
+        background-light: #202020,
        background-line: #202324,
        background-fore: #10141f,
+        background-soft: #20202077,
+
+        window-handle-background: #191919,
+        window-background: #141414,
+        window-border: #202324,
+        window-shadow: #00000077,
+
+        button-background: #20202077,
+        button-hover: #202020aa,
+        button-active: #202020cc,
+
+        toast-background: #202020,
+
+        note-border: #202324,
+
        hover: #21262d,
        selected: #4a4a4b,
        border-color: #819796,
        border: #202324,
        text: #ebede9,
        container-shadow: #151d28,
-        sticky-header-bg: #20202077
+        sticky-header-bg: #20202077,
+
+        red: #e06c75,
+        green: #98c379,
+        gray: #cccccc,
+
+        icon-invert: 100%
    ),
    light: (
        background: #ffffff,
+        background-light: #f9f9f9,
        background-line: #f0f0f0,
        background-fore: #ffffff,
+
+        window-handle-background: #f0f0f0,
+        window-background: #ffffff,
+        window-border: #e0e0e0,
+        window-shadow: #d4d4d4,
+
+        button-background: #f0f0f0,
+        button-hover: #e9e9e9,
+        button-active: #d4d4d4,
+
+        toast-background: #f0f0f0,
+
+        note-border: #e0e0e0,
+
        border-color: #e0e0e0,
        border: #f0f0f0,
        hover: #e9e9e9,
        selected: #d4d4d4,
        text: #1e1e1e,
        container-shadow: #5f6774,
-        sticky-header-bg: #fff
+        sticky-header-bg: #fff,
+
+        red: #e06c75,
+        green: #98c379,
+        gray: #cccccc,
+
+        icon-invert: 0%
    )
 );

--- a/frontend/app/assets/css/main.scss
+++ b/frontend/app/assets/css/main.scss
@@ -1,25 +1,31 @@
 body {
-  color: var(--text-color);
+    color: var(--color-text);
  font-family: "BookInsanityRemake", Arial, Helvetica, sans-serif;
 }

 body {
-  background-color: var(--background-color);
+  background-color: var(--color-background);
  margin: 0;
 }

 * {
-  color: var(--text-color);
+  color: var(--color-text);
 }

 a {
-  color: var(--link-color);
+  color: var(--color-link);
 }

 .icon {
  height: 12px;
+  filter: invert(var(--color-icon-invert));
 }

+* {
+  font-family: BookInsanityRemake;
+}
+
+
 *::-webkit-scrollbar
 {
 	width: 6px;
@@ -39,6 +45,142 @@ a {
  color: var(--error-link);
 }

+.buttons-row {
+  width: 100%;
+  padding-right: 10px;
+  padding-left: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.button-row {
+  margin-left: 5px;
+  margin-right: 5px;
+  flex-grow: 1;
+}
+
+.form-field {
+  padding-bottom: 10px;
+  display: flex;
+  align-items: left;
+  flex-direction: column;
+  justify-content: left;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  width: 30%;
+  overflow: visible;
+  position: relative;
+  margin: 16px auto 16px auto;
+  background-color: var(--separator);
+}
+
+hr:before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: var(--separator);
+  position: absolute;
+  transform: rotate(45deg);
+  top: -2.5px;
+  left: 50%;
+  margin: -1px 0 0 -1px;
+}
+
+input[type=text], input[type=password], input[type=email] {
+  background-color: var(--color-background-softer);
+  border: none;
+  padding: 8px;
+  border-radius: 6px;
+  color: var(--color-text);
+  transition: 300ms background-color;
+  border: solid 1px var(--color-border);
+}
+
+
+textarea {
+  background-color: var(--color-background-softer);
+  padding: 12px;
+  color: var(--color-text);
+  border-radius: 6px;
+  border: solid 1px var(--color-border);;
+}
+
+input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
+  outline: none;
+  background-color: var(--color-background-softest);
+}
+
+textarea:focus {
+  outline: none;
+}
+
+button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  
+  padding: 14px;
+  font-size: 15px;
+  border-radius: 6px;
+  outline: none;
+  
+  border: solid 1px var(--color-border);
+  -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
+  -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
+  box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
+
+  transition: 300ms background-color;
+  background-color: var(--color-button-background);
+  color: var(--color-text);
+}
+
+button:hover {
+  background-color: var(--color-button-hover);
+}
+
+button:active {
+  background-color: var(--color-button-active);
+}
+
+.render-image {
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.confirm-form-button {
+  margin-top: 15px;
+}
+
+.parameters {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 10px;
+}
+
+.param-element {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.param-text {
+  margin-right: auto;
+}
+
+.param-value {
+  margin-left: auto;
+}
+
+.centered {
+  text-align: center;
+}

 .window-wrapper {
  display: flex;
@@ -51,4 +193,174 @@ a {
  -webkit-box-shadow: 0px 0px 10px -2px var(--shadow-color);
  -moz-box-shadow: 0px 0px 10px -2px var(--shadow-color);
  box-shadow: 0px 0px 10px -2px var(--shadow-color);
+}
+
+.document {
+  text-align: left;
+  width: 100%;
+}
+
+.document.centered {
+  text-align: center;
+  justify-content: center;
+}
+
+.document.item {
+  text-align: center;
+  width: 220px;
+}
+
+.document.item img {
+  width: 64px;
+  height: 64px;
+}
+
+
+.document h1 {
+  font-weight: normal;
+  font-size: 32px;
+}
+
+.document b {
+  font-weight: bold;
+}
+
+.text-icon {
+  height: 18px;
+  width: 18px;
+  margin-bottom: -4px;
+}
+
+.invert {
+  filter: invert(0.9);
+}
+
+.main-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  width: 100%;
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+
+span.important {
+  font-family: NodestoCapsCondensed;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+span.common {
+  color: var(--color-common);
+}
+span.uncommon {
+  color: var(--color-uncommon);
+}
+span.rare {
+  color: var(--color-rare);
+}
+span.very-rare {
+  color: var(--color-very-rare);
+}
+span.legendary {
+  color: var(--color-legendary);
+}
+span.artifact {
+  color: var(--color-artifact);
+}
+
+.form-container {
+  width: 100%;
+}
+
+.form-element {
+  padding: 10px 0 10px 0;
+  margin: 0 10px 0 10px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px dashed var(--color-border);
+}
+
+.form-element label {
+  flex-grow: 0;
+  margin-right: 6px;
+  margin-left: 6px;
+}
+
+.form-element.centered {
+  justify-content: center;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+
+.subsection.border:first-child {
+  border-left: none;
+}
+
+.subsection.border {
+  border-left: 1px solid var(--color-border);
+}
+
+.subsection {
+  margin-left: 5px;
+  margin-right: 5px;
+  height: 32px;
+  display: flex;
+  align-items: left;
+  justify-content: left;
+}
+
+.subsection.left {
+  align-items: left;
+  justify-content: left;
+
+}
+
+.subsection.right {
+  align-items: right;
+  justify-content: right;
+
+}
+
+.subsection.center {
+  align-items: center;
+  justify-content: center; 
+}
+
+.window-enter-active,
+.window-leave-active {
+  transition: all 0.15s ease;
+}
+.window-enter-from,
+.window-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.window-wrapper {
+    background-color: var(--window-background);
+
+    /* backdrop-filter: blur(10px); */
+    position: fixed;
+
+
+    display: flex;
+    flex-direction: column;
+}
+
+.red {
+  color: var(--color-red);
+}
+
+.green {
+  color: var(--color-green);
 }
--- a/frontend/app/components/layouts/ColorPicker.vue
+++ b/frontend/app/components/layouts/ColorPicker.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const color = ref("");
+const colorValue = ref(null);
+const colorPicker = ref(null);
+
+const selectedColorCode = ref(null);
+
+onMounted(() => {
+    colorValue.value.addEventListener('click', () => {
+        colorPicker.value.click();
+    })
+    
+    colorPicker.value.addEventListener('input', (event) => {
+        let newColor = event.target.value;
+        colorValue.value.classList.remove('unselected');
+        colorValue.value.style.backgroundColor = newColor;
+        color.value = newColor;
+        selectedColorCode.value.textContent = color.value.toUpperCase();
+    });
+});
+
+let GetColor = () => color.value;
+
+defineExpose({ GetColor });
+</script>
+
+<template>
+    <input type="color" id="colorPicker" ref="colorPicker">
+    <div class="color-value unselected" ref="colorValue">
+        <span class="selected-color-code" ref="selectedColorCode"></span>
+    </div>
+</template>
+
+<style lang="scss">
+#colorPicker {
+    display: none;
+}
+
+.color-value {
+    width: 100px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    height: 20px;
+    border-radius: 10px;
+
+    &.unselected {
+        background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
+        background-size: 10px 10px;
+        background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+    }
+    
+}
+
+.selected-color-code {
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+}
+</style>
--- a/frontend/app/components/layouts/Dropdown.vue
+++ b/frontend/app/components/layouts/Dropdown.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { AddContextMenu, HideContextMenu } from '@/services/ContextMenu';
+const props = defineProps(['options', 'onselect', 'selected', 'keyFunc']);
+const options = props.options;
+const selectCallback = props.onselect;
+
+const initialSelect = props.selected;
+const dropdown = ref(null);
+const selected = ref(null);
+
+onMounted(() => {
+    if(props.keyFunc == undefined) props.keyFunc = (option) => option;
+    selected.value = props.keyFunc(initialSelect);
+    
+    let context = [];
+    watch(() => props.selected, () => {
+        selected.value = props.keyFunc(props.selected);
+    });
+    options.forEach(obj => {
+        const name = props.keyFunc(obj);
+        context.push({
+            icon: selected.value == name ? 'icons/iconoir/regular/check.svg' : false,
+            name,
+            action: () => {
+                HideContextMenu();
+                selected.value = name;
+                if(selectCallback) selectCallback(obj);
+            }
+        });
+    });
+
+    AddContextMenu(dropdown.value, context, {dropdown: true});
+});
+</script>
+
+
+<template>
+    <div class="dropdown" ref="dropdown">
+        <span>{{ selected }}</span>
+        <img class="icon" src="/icons/iconoir/regular/nav-arrow-down.svg" draggable="false" ref="closeButton">
+    </div>
+</template>
+
+<style scoped lang="scss">
+.dropdown {
+    flex-grow: 1;
+    display: flex;
+
+    background-color: var(--color-background-softer);
+    border: none;
+    padding: 4px 8px 4px 8px;
+    margin: 0 6px 0px 6px;
+    border-radius: 6px;
+    color: var(--color-text);
+    transition: 300ms background-color;
+    border: solid 1px var(--color-border);
+
+    .icon {
+        margin-left: auto;
+        justify-content: right;
+    }
+}
+</style>
--- a/frontend/app/components/layouts/IconButton.vue
+++ b/frontend/app/components/layouts/IconButton.vue
@@ -0,0 +1,84 @@
+<script setup>
+
+import { onMounted, ref } from 'vue';
+import { AddTooltip } from '~/services/Tooltip';
+const props = defineProps(['icon', 'action', 'size', 'toggled', 'tooltip']);
+let icon = props.icon;
+let action = props.action;
+
+let size = props.size;
+let toggled = props.toggled;
+let tooltip = props.tooltip;
+
+const button = ref(null);
+
+onMounted(() => {
+    if(tooltip){
+        AddTooltip(button.value, tooltip);
+    }
+})
+</script>
+
+
+
+<template>
+    <div class="icon-button sound-click" :class="size + ' ' + toggled" v-on:click.prevent="action" ref="button">
+        <img class="icon" draggable="false" :src="icon" :class="size">
+    </div>
+</template>
+
+
+<style scoped lang="scss">
+.icon-button {
+    height: 32px;
+    width: 32px;
+
+    &.big {
+        height: 42px;
+        width: 42px;
+    }
+
+    &.small {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.toggled {
+        filter: invert(0.9);
+    }
+
+    background-color: var(--color-background-soft);
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2px;
+
+    transition: .3s background-color;
+    border: 1px solid var(--color-border);
+}
+
+.icon-button:hover {
+    background-color: var(--color-background-softer);
+}
+
+.icon {
+    height: 24px;
+    width: 24px;
+    pointer-events: none;
+
+    &.big {
+        height: 38px;
+        width: 38px;
+    }
+
+    &.small {
+        height: 18px;
+        width: 18px;
+    }
+}
+
+
+
+
+</style>
--- a/frontend/app/components/layouts/Tabs.vue
+++ b/frontend/app/components/layouts/Tabs.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps(['rows']);
+
+const rowDict = {}
+for(let i = 0; i < props.rows.length; i++) rowDict[props.rows[i].id] = i;
+let selectedTab = ref(props.rows[0].id);
+
+function SelectTab(row){
+    selectedTab.value = row;
+}
+</script>
+
+
+<template>
+    <div class="tab-container">
+        <div class="row">
+            <div class="toggler" :class="{ selected: row.id == selectedTab }" v-for="row in rows" v-on:click.prevent="SelectTab(row.id)">
+                {{ $t(row.value) }}
+            </div>
+        </div>
+        <div class="tab-container-outer">
+            <div v-for="row in rows" class="tab-content">
+                <TransitionGroup name="tab">
+                    <div class="tab-content-inner" v-show="row.id == selectedTab" :key="row.id">
+                        <slot :name="row.id" />
+                    </div>
+                </TransitionGroup>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.toggler.selected {
+    color: var(--color-text);
+    background-color: var(--color-background-softer);
+}
+</style>
+
+<style scoped lang="scss">
+.tab-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.tab-container-outer {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    pointer-events: none;
+}
+
+.tab-enter-active,
+.tab-leave-active {
+  transition: all 0.15s ease;
+}
+.tab-enter-from,
+.tab-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.tab-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow-y: auto;
+}
+
+.tab-content-inner {
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
+}
+
+.toggler {
+    flex-grow: 1;
+    flex-basis: 0;
+    font-weight: bold;
+    padding: 3px 12px 3px 12px;
+    font-size: 16px;
+
+    color: #9c9c9c;
+    border-left: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
+    transition: color 0.2s, background-color 0.2s;
+    
+    &:first-child {
+        border-left: none;
+    }
+
+    &.active {
+        color: var(--color-text);
+    }
+}
+</style>
--- a/frontend/app/components/managers/ContentManager.vue
+++ b/frontend/app/components/managers/ContentManager.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { watch } from 'vue';
+import Content from '../viewer/content/Content.vue';
+import StatusBar from '../viewer/statusbar/StatusBar.vue';
+import TopBar from '../viewer/TopBar.vue';
+
+import { ShowContent } from '../../services/Content.js';
+import { useCampaignService } from '~/services/Campaign.js';
+import ContentSidebar from '../partials/ContentSidebar.vue';
+
+const { Campaign } = useCampaignService();
+
+watch(Campaign, () => {
+    if(Campaign.value) ShowContent.value = true;
+}, { immediate: true });
+</script>
+
+<template>
+    <div v-show="ShowContent" class="content-manager">
+        <TopBar></TopBar>
+        <div class="content-layout">
+            <ContentSidebar></ContentSidebar>
+            <Content></Content>
+        </div>
+        <StatusBar></StatusBar>
+    </div>
+</template>
+
+<style scoped>
+.content-manager {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.content-layout {
+    min-height: 0;
+    flex: 1;
+    display: flex;
+}
+</style>
--- a/frontend/app/components/managers/ContextMenuManager.vue
+++ b/frontend/app/components/managers/ContextMenuManager.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { onMounted, watch, ref } from 'vue';
+import { SetupContextMenu } from '../../services/ContextMenu';
+
+
+onMounted(() => {
+    SetupContextMenu();
+});
+
+</script>
+
+<template>
+<div id="context-menu" class="context-menu">
+    <!--
+    <div class="context-menu-element">
+        <span>Hola</span> <img src="/icons/iconoir/regular/nav-arrow-right.svg">
+    </div>
+    <div class="context-menu-element">
+        <span>Holaa</span>
+    </div>
+    <div class="context-menu-element">
+        <span>Holaa</span>
+    </div>
+    <div class="context-menu-element">
+        <span>Holaaaaaaa</span>
+    </div>
+    -->
+</div>
+</template>
+
+<style lang="scss">
+.context-menu {
+    position: absolute;
+    z-index: 214748363;
+
+    flex-direction: column;
+
+    
+    .context-menu-element {
+
+        &:last-child {
+            border-width: 1px 1px 1px 1px;
+        }
+        border: solid 1px var(--color-border);
+        border-width: 1px 1px 0px 1px;
+        padding: 3px 5px 3px 5px;
+        cursor: default;
+        user-select: none;
+        background-color: var(--tooltip-background);
+        transition: background-color 100ms;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        span {
+            flex-grow: 1;
+            padding-right: 20px;
+            white-space: nowrap;
+        }
+
+        img {
+            filter: invert(1);
+            width: 18px;
+            height: 18px;
+        }
+
+        &:hover {
+            background-color: var(--color-background-softest);
+        }
+    }
+}
+</style>
--- a/frontend/app/components/managers/ToastManager.vue
+++ b/frontend/app/components/managers/ToastManager.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { ref } from 'vue';
+
+import { emitter } from '@/services/Emitter';
+
+const text = ref("");
+const toast = ref(null);
+
+let toastQueue = [];
+let displayingToast = false;
+
+function DisplayToast(){
+    if(displayingToast) return;
+    if(toastQueue.length == 0) return;
+
+    displayingToast = true;
+    let data = toastQueue.pop();
+
+    text.value = data.text;
+
+    toast.value.classList.add(data.color);
+    toast.value.classList.add("show");
+    setTimeout(() => {
+        toast.value.classList.add("sliding");
+        setTimeout(() => {
+            toast.value.style = {};
+            toast.value.classList.remove("show");
+            toast.value.classList.remove("sliding");
+            toast.value.classList.remove(data.color);
+            displayingToast = false;
+            DisplayToast();
+        }, 400);
+    }, data.duration);
+}
+
+emitter.on('toast', data => {
+    toastQueue.push(data);
+    DisplayToast();
+});
+
+</script>
+
+
+<template>
+    <div class="toast" ref="toast">
+        <div class="toast-container">{{ text }}</div>
+    </div>
+</template>
+
+
+<style scoped lang="scss">
+.toast-container {
+    height: 100%;
+    background-color: var(--color-toast-background);
+    padding: 10px;
+    margin-left: 5px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    flex-grow: 1;
+}
+
+.toast {
+    position: absolute;
+    display: none;
+
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    min-width: 400px;
+    min-height: 40px;
+    border-radius: 6px;
+    text-align: center;
+
+    flex-direction: column;
+    z-index: 9999999;
+
+
+    animation: slide-in 0.4s ease-in-out;
+    @keyframes slide-in {
+        0% {
+            transform: translate(-50%,-50px);
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    &.sliding {
+        @keyframes slide-out {
+            0% {
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-50%,-50px);
+                opacity: 0;
+            }
+        }
+        animation: slide-out .4s ease-in-out forwards;
+    }
+    
+    &.show {
+        display: flex;
+    }
+
+    /* Colors!!!! */
+
+    &.red {
+        background-color: rgb(243, 68, 68);
+    }
+
+    &.green {
+        background-color: rgb(92, 199, 92);
+    }
+
+    &.aqua {
+        background-color: rgb(113, 250, 250);
+    }
+}
+</style>
--- a/frontend/app/components/managers/TooltipManager.vue
+++ b/frontend/app/components/managers/TooltipManager.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, watch, ref } from 'vue';
+import { GetContentRef, SetupTooltip } from '../../services/Tooltip';
+
+let contentRef = ref("");
+
+onMounted(() => {
+    SetupTooltip();
+    let content = GetContentRef();
+
+    watch(GetContentRef(), () => {
+        contentRef.value = GetContentRef().value;
+    })
+});
+
+</script>
+
+<template>
+<div id="mouse-tooltip" class="mouse-tooltip">
+    <div class="document">
+        <span v-html="contentRef"></span>
+    </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.mouse-tooltip {
+    display: none;
+    position: absolute;
+    z-index: 214748364;
+
+    background-color: var(--tooltip-background);
+    padding: 3px 6px 3px 6px;
+
+  -webkit-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
+
+    border: solid 1px var(--color-border);
+}
+</style>
--- a/frontend/app/components/managers/WindowManager.vue
+++ b/frontend/app/components/managers/WindowManager.vue
@@ -1,19 +1,12 @@
 <script setup>
 import { TransitionGroup } from 'vue'
-import { Windows, ReloadRef, WindowMap } from '@/services/Windows';
-
-// Gestionem ventanas
-const reload = ReloadRef();
-const windows = Windows();
-
+import { windows, getComponent } from '@/services/Windows';
 </script>

 <template>
-  <div class="window-container" :key="reload">
-    <TransitionGroup name="window">
-      <component v-for="win in windows" :is="WindowMap()[win.type]" :key="win.id" :data="win"></component>
-    </TransitionGroup>
-  </div>
+  <TransitionGroup name="window" tag="div">
+    <component v-for="win in windows" :key="win.id" :is="getComponent(win.type)" :data="win" />
+  </TransitionGroup>
 </template>


@@ -24,19 +17,30 @@ const windows = Windows();
 }
 .window-enter-from,
 .window-leave-to {
+  transition: all 0.15s ease;
  opacity: 0;
  transform: translateY(15px);
 }
+.window-move {
+  transition: transform 0.15s ease;
+}

 .window-wrapper {
-    background-color: var(--window-background);
+    background-color: var(--color-window-background);

    /* backdrop-filter: blur(10px); */
-    position: fixed;
-

    display: flex;
    flex-direction: column;
-}
+    align-items: center;
+
+    border: solid 1px var(--color-window-border);
+    
+    /* opacity: 0; */
+    user-select: none;
+    -webkit-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
+    -moz-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
+    box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
+  }

 </style>
--- a/frontend/app/components/partials/CampaignEntry.vue
+++ b/frontend/app/components/partials/CampaignEntry.vue
@@ -0,0 +1,86 @@
+<script setup>
+
+import { onMounted, ref } from 'vue';
+
+import { AddSound } from '../../services/Sound';
+import { useCampaignService } from '~/services/Campaign';
+import { ClearWindow } from '~/services/Windows';
+const { SetCampaign } = useCampaignService();
+
+const props = defineProps(['data']);
+const data = props.data;
+
+const title = ref("");
+
+const container = ref(null);
+
+onMounted(() => {
+    title.value = data.name;
+    if (data.color && container.value) {
+        container.value.style.background = `linear-gradient(90deg, ${data.color}, ${data.color}44)`;
+    }
+
+    AddSound(container.value)
+});
+
+function ViewCampaign(){
+    SetCampaign(data);
+    ClearWindow({type: "main_menu"});
+}
+</script>
+
+
+<template>
+    <div class="campaign-entry-container" ref="container">
+        <div class="main-campaign-entry-container-inner">
+            <img class="campaign-icon" src="/img/def-avatar.jpg" draggable="false">
+            <div class="campaign-info">
+                <b>{{ title }}</b>
+            </div>
+
+            <div class="campaign-user-actions">
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.open')}}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.button-small {
+    height: 32px;
+    padding: 10px;
+}
+
+.campaign-entry-container {
+    background-color: var(--color-background-softer);
+    width: 100%;
+    user-select: none;
+
+    border-bottom: 1px solid var(--color-border);
+    &:first-child {
+        border-top: 1px solid var(--color-border);
+    }
+}
+
+.main-campaign-entry-container-inner {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    justify-content: center;
+}
+
+.campaign-info {
+    text-align: left;
+    margin-left: 10px;
+}
+
+.campaign-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.campaign-user-actions {
+    margin-left: auto;
+}
+</style>
--- a/frontend/app/components/partials/ContentSidebar.vue
+++ b/frontend/app/components/partials/ContentSidebar.vue
@@ -0,0 +1,370 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useCampaignService } from '~/services/Campaign.js';
+import { emitter } from '~/services/Emitter';
+import Server from '~/services/Server';
+
+const { Campaign } = useCampaignService();
+const notes = ref([]);
+const loadingNotes = ref(false);
+const notesError = ref('');
+const sidebarCollapsed = ref(false);
+
+const campaignId = computed(() => {
+    return Campaign.value?._id ?? Campaign.value?.id ?? null;
+});
+
+const notesMeta = computed(() => {
+    const count = notes.value.length;
+    return `${count} ${count === 1 ? 'note' : 'notes'}`;
+});
+
+async function fetchCampaignNotes() {
+    if (!campaignId.value) {
+        notes.value = [];
+        notesError.value = '';
+        return;
+    }
+
+    loadingNotes.value = true;
+    notesError.value = '';
+
+    try {
+        const response = await Server().get('/note/list', {
+            params: {
+                campaign: campaignId.value
+            }
+        });
+
+        if (response.data.status !== 'ok') {
+            notes.value = [];
+            notesError.value = response.data.msg ?? 'Unable to load notes.';
+            return;
+        }
+
+        notes.value = response.data.notes.map((note) => {
+            return {
+                key: note._id,
+                title: note.title,
+                text: note.content ?? '',
+                date: note.date
+            };
+        });
+    } catch (error) {
+        notes.value = [];
+        notesError.value = 'Unable to load notes.';
+    } finally {
+        loadingNotes.value = false;
+    }
+}
+
+function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+
+async function createNote() {
+    if (!Campaign.value) {
+        return;
+    }
+
+    const campaignId = Campaign.value?._id 
+
+    try {
+        const response = await Server().post('/note/create', {
+            title: 'New note',
+            content: "",
+            campaign: campaignId
+        });
+
+        if (response.data.status !== 'ok') {
+            return;
+        }
+
+        emitter.emit('note-created', response.data.note);
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+
+function openNote(note) {
+    emitter.emit('push-note', note);
+}
+
+function handleNoteCreated(note) {
+    if (!note) {
+        return;
+    }
+
+    const noteCampaignId = note.campaign?._id ?? note.campaign ?? null;
+    if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) {
+        return;
+    }
+
+    const createdNote = {
+        key: note._id,
+        title: note.title,
+        text: note.content ?? '',
+        date: note.date
+    };
+
+    notes.value = notes.value.filter((currentNote) => {
+        return currentNote.key !== createdNote.key;
+    });
+    notes.value.unshift(createdNote);
+    openNote(createdNote);
+}
+
+onMounted(() => {
+    emitter.on('note-created', handleNoteCreated);
+});
+
+onUnmounted(() => {
+    emitter.off('note-created', handleNoteCreated);
+});
+
+watch(Campaign, () => {
+    fetchCampaignNotes();
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="sidebar-shell">
+        <nav class="sidebar-actions" aria-label="Campaign tools">
+            <button
+                class="sidebar-action"
+                type="button"
+                @click="toggleSidebar"
+                :aria-expanded="(!sidebarCollapsed).toString()"
+                aria-controls="campaign-notes-list"
+                :title="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
+                :aria-label="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
+            >
+                <img
+                    class="sidebar-action-icon"
+                    :src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
+                    alt=""
+                    aria-hidden="true"
+                >
+            </button>
+
+            <button
+                class="sidebar-action"
+                type="button"
+                @click="createNote"
+                :disabled="!Campaign"
+                title="New note"
+                aria-label="New note"
+            >
+                <img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
+            </button>
+
+            <button
+                class="sidebar-action"
+                type="button"
+                @click="fetchCampaignNotes"
+                :disabled="!Campaign || loadingNotes"
+                title="Refresh notes"
+                aria-label="Refresh notes"
+            >
+                <img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
+            </button>
+        </nav>
+
+        <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
+            <div class="sidebar-header">
+                <div class="sidebar-copy">
+                    <span class="sidebar-eyebrow">Campaign</span>
+                    <strong class="sidebar-title">Notes</strong>
+                    <span class="sidebar-meta">{{ notesMeta }}</span>
+                </div>
+            </div>
+
+            <div id="campaign-notes-list" class="sidebar-list">
+                <div v-if="loadingNotes" class="sidebar-state">
+                    Loading notes...
+                </div>
+
+                <div v-else-if="notesError" class="sidebar-state error">
+                    {{ notesError }}
+                </div>
+
+                <div v-else-if="notes.length === 0" class="sidebar-state">
+                    No notes in this campaign yet.
+                </div>
+
+                <template v-else>
+                    <button
+                        v-for="note in notes"
+                        :key="note.key"
+                        type="button"
+                        class="note-link"
+                        @click="openNote(note)"
+                    >
+                        <span class="note-link-title">{{ note.title }}</span>
+                    </button>
+                </template>
+            </div>
+        </aside>
+    </div>
+</template>
+
+<style scoped>
+.sidebar-shell {
+    min-height: 0;
+    flex-shrink: 0;
+    display: flex;
+}
+
+.sidebar-actions {
+    width: 32px;
+    min-width: 32px;
+    padding: 8px 6px;
+    border-right: 1px solid var(--color-border);
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+
+.sidebar-action {
+    width: 34px;
+    height: 34px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background: var(--color-background-soft);
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.sidebar-action:hover {
+    background: var(--color-button-hover);
+}
+
+.sidebar-action:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.sidebar-action-icon {
+    width: 18px;
+    height: 18px;
+    filter: invert(var(--color-icon-invert));
+}
+
+.notes-sidebar {
+    width: 280px;
+    min-width: 280px;
+    border-right: 1px solid var(--color-border);
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: width 0.2s ease, min-width 0.2s ease, border-color 0.2s ease;
+}
+
+.notes-sidebar.collapsed {
+    width: 0;
+    min-width: 0;
+    border-right-color: transparent;
+}
+
+.sidebar-header {
+    width: 280px;
+    min-width: 280px;
+    box-sizing: border-box;
+    padding: 12px;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.sidebar-eyebrow,
+.sidebar-meta {
+    font-size: 12px;
+    opacity: 0.7;
+}
+
+.sidebar-title {
+    line-height: 1.2;
+    word-break: break-word;
+}
+
+.sidebar-list {
+    width: 280px;
+    min-width: 280px;
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.sidebar-state {
+    padding: 12px;
+    border-radius: 10px;
+    background: var(--color-background-soft);
+    font-size: 14px;
+}
+
+.sidebar-state.error {
+    color: #9e2a2b;
+}
+
+.note-link {
+    width: 100%;
+    padding: 6px;
+    margin: 0;
+    box-shadow: none;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    cursor: pointer;
+    transition: transform 0.15s ease, background-color 0.15s ease;
+}
+
+.note-link:hover {
+    transform: translateX(2px);
+    background: var(--color-background-light);
+}
+
+.note-link-title {
+    font-weight: 600;
+    word-break: break-word;
+}
+
+.note-link-date {
+    font-size: 12px;
+    opacity: 0.7;
+}
+
+@media (max-width: 900px) {
+    .notes-sidebar {
+        width: 220px;
+        min-width: 220px;
+    }
+
+    .sidebar-header,
+    .sidebar-list {
+        width: 220px;
+        min-width: 220px;
+    }
+}
+</style>
--- a/frontend/app/components/partials/EditUserPartial.vue
+++ b/frontend/app/components/partials/EditUserPartial.vue
@@ -0,0 +1,153 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { GetUser, LogoutUser } from '@/services/User'
+
+import Server, { getBaseUrl } from '@/services/Server'
+
+import { CreateWindow, CreateChildWindow, ClearWindow, GetFirstWindowId } from '../../services/Windows';
+import Spinner from './Spinner.vue';
+const loadedIcon = ref(false);
+
+const username = ref("");
+username.value = GetUser().username;
+
+function retrieveAvatar(){
+    let userAvatarDisplay = document.getElementById("upload-image");
+
+    // Hide image + show spinner while loading
+    loadedIcon.value = false;
+
+    Server().get('/user/retrieve-avatar?username=' + GetUser().username)
+    .then((response) => {
+        if(response.data.image){
+            const imgUrl = getBaseUrl() + "/public/" + response.data.image;
+
+            // Wait for the image to fully load
+            const img = new Image();
+            img.src = imgUrl;
+
+            img.onload = () => {
+                userAvatarDisplay.src = imgUrl;
+                loadedIcon.value = true;
+            };
+
+            img.onerror = () => {
+                console.log("Image failed to load");
+                loadedIcon.value = true; // fallback to avoid infinite spinner
+            };
+        }
+    })
+    .catch(() => console.log("Internal error"));
+}
+
+function LogOut(){
+    LogoutUser();
+
+    ClearWindow({type: "main_menu"});
+    CreateWindow('login');
+}
+
+function EditSettings(){
+    CreateChildWindow(GetFirstWindowId('main_menu'), 'settings', {
+        user: GetUser()
+    });
+}
+
+onMounted(() => {
+    let userAvatarDisplay = document.getElementById("upload-image");
+    let sendAvatarFileUploader = document.getElementById("send-avatar-file-uploader");
+    
+    sendAvatarFileUploader.addEventListener("change", (event) => {
+        const formData = new FormData();
+        const image = event.target.files[0];
+
+        formData.append("image", image);
+
+        Server().post('/user/upload-avatar', formData, {
+            headers: { "Content-Type": "multipart/form-data" }
+        }).then((response) => {
+            retrieveAvatar();
+        }).catch((err) => console.log("Internal error"));
+    });
+
+    userAvatarDisplay.addEventListener("click", (event) => {
+        sendAvatarFileUploader.click();
+    });
+
+    retrieveAvatar();
+});
+</script>
+
+
+<template>
+    <form id="send-avatar-form" enctype="multipart/form-data">
+        <input name="file" type="file" accept="image/*" id="send-avatar-file-uploader">
+    </form>
+
+    <div class="main-user-container">
+        <div class="main-user-container-inner">
+            <div class="user-icon-container">
+                <img class="user-icon" src="/img/def-avatar.jpg" id="upload-image" draggable="false" v-show="loadedIcon">
+                <Spinner v-show="!loadedIcon" :size="30"></Spinner>
+            </div>
+            <div class="main-user-info">
+                <b>{{ username }}</b><br>
+            </div>
+
+            <div class="main-user-actions">
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="EditSettings">{{ $t("main-menu.settings") }}</button>
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="LogOut">{{ $t("main-menu.log-out") }}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+#send-avatar-form {
+    display: none;
+}
+
+.button-small {
+    height: 32px;
+    padding: 10px;
+}
+
+.main-user-container {
+    background-color: var(--color-background-softer);
+    width: 100%;
+    user-select: none;
+}
+
+.main-user-container-inner {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    justify-content: center;
+}
+
+.main-user-info {
+    text-align: left;
+    margin-left: 10px;
+}
+
+.user-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.user-icon-container {
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+}
+
+.main-user-actions {
+    margin-left: auto;
+
+    button {
+        margin-left: 10px;
+    }
+}
+</style>
--- a/frontend/app/components/partials/Spinner.vue
+++ b/frontend/app/components/partials/Spinner.vue
@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 10
+  }
+})
+</script>
+
+<template>
+  <div class="spinner">
+    <span
+      class="spinner-inner"
+      :style="{ width: size + 'px', height: size + 'px' }"
+    ></span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.spinner-inner {
+  border: 2px solid white;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  display: inline-block;
+  animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
--- a/frontend/app/components/partials/VersionRender.vue
+++ b/frontend/app/components/partials/VersionRender.vue
@@ -0,0 +1,25 @@
+<script setup>
+const config = useRuntimeConfig()
+</script>
+
+
+<template>
+    <div class="version-render">
+        <span>Dragonroll {{ config.public.gitTag }}-{{ config.public.gitCommit }}@{{ config.public.gitBranch }}</span>
+            <br><span>{{ config.public.buildDate }}</span>
+    </div>
+</template>
+
+
+<style scoped>
+.version-render {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    user-select: none;
+    font-size: 14px;
+}
+span{
+    color: rgb(59, 59, 59);
+}
+</style>
--- a/frontend/app/components/viewer/TopBar.vue
+++ b/frontend/app/components/viewer/TopBar.vue
@@ -1,17 +1,70 @@
 <script setup>
 import TopSearchBar from './topbar/TopSearchBar.vue';
+import { useCampaignService } from '~/services/Campaign';
+import { CreateWindow } from '~/services/Windows';
+import { SetShowContent } from '~/services/Content';
+
+const { Campaign, SetCampaign } = useCampaignService();
+
+const campaignName = computed(() => {
+    return Campaign.value?.name ?? 'Campaign';
+});
+
+async function createNote() {
+    if (!Campaign.value) {
+        return;
+    }
+
+    const campaignId = Campaign.value?._id 
+
+    try {
+        const response = await Server().post('/note/create', {
+            title: 'New note',
+            content: content.value,
+            campaign: campaignId
+        });
+
+        if (response.data.status !== 'ok') {
+            return;
+        }
+
+        emitter.emit('note-created', response.data.note);
+    } catch (err) {
+        error.value = 'Unable to create note.';
+    } finally {
+        isSaving.value = false;
+    }
+}
+
+function exitToMainMenu() {
+    SetCampaign(null);
+    SetShowContent(false);
+    CreateWindow('main_menu');
+}

 </script>

 <template>
    <div class="top-bar">
        <div class="left">
-            <span class="top-bar-title"></span>
+            <span class="top-bar-title">
+                <img src="/img/logo.png" alt="Dragonroll Logo" class="logo">
+                <span>{{ campaignName }}</span>
+            </span>
        </div>
        <div class="center">
            <TopSearchBar></TopSearchBar>
        </div>
-        <div class="right"></div>
+        <div class="right">
+            <button class="top-bar-button sound-click" type="button" @click="exitToMainMenu">
+                <img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
+                <span>Main Menu</span>
+            </button>
+            <button class="note-button sound-click" type="button" @click="createNote" :disabled="!Campaign">
+                <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
+                <span>New Note</span>
+            </button>
+        </div>
    </div>
 </template>

@@ -21,21 +74,58 @@ import TopSearchBar from './topbar/TopSearchBar.vue';
    flex-shrink: 0;
    min-height: 40px;
    width: 100%;
-    background-color: var(--top-bar-background-color);
+    background-color: var(--color-background-light);
    display: flex;
 }

+.logo {
+    height: 32px;
+    width: 32px;
+    position: absolute;
+    top: 0px;
+    left: 6px;
+}
+
 .left, .right {
    flex: 1;
 }

 .right {
-    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    padding-right: 10px;
 }

 .top-bar-title {
    padding: 10px;
    display: flex;
+    margin-left: 48px;
    font-weight: bold;
 }
-</style>
+
+.top-bar-button,
+.note-button {
+    height: 30px;
+    padding: 0 12px;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background: var(--color-background-soft);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.note-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.top-bar-button-icon,
+.note-button-icon {
+    width: 16px;
+    height: 16px;
+}
+</style>
--- a/frontend/app/components/viewer/content/Content.vue
+++ b/frontend/app/components/viewer/content/Content.vue
@@ -1,16 +1,13 @@
 <script setup>
 import NoteContainer from './NoteContainer.vue';

-const emitter = useEmitter();
-
-function hideSearch(){
-  emitter.emit("hide-search-container");
-}
 </script>

 <template>
-<div class="content" v-on:click="hideSearch">
-  <NoteContainer></NoteContainer>  
+<div class="content">
+  <NoteContainer>
+
+  </NoteContainer>  
  <!-- PowerMod -->
 </div>
 </template>
@@ -18,6 +15,7 @@ function hideSearch(){
 <style scoped>
 .content {
  flex-grow: 1;
+  min-width: 0; /* 👈 important */
  display: flex;
  justify-content: center;
  align-items: center;
--- a/frontend/app/components/viewer/content/Note.vue
+++ b/frontend/app/components/viewer/content/Note.vue
@@ -1,56 +1,104 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, createApp } from 'vue';
+import ToastManager from '~/components/managers/ToastManager.vue';
+import { emitter } from '~/services/Emitter';
+import { GetWidget, ParseMarkdown } from '~/services/Marker';
+import Server from '~/services/Server';
+import { DisplayToast } from '~/services/Toaster';
+import TestWidget from '../widgets/TestWidget.vue';

 // import { GetNote, GetContent } from '@/services/Content';
 const props = defineProps(['text', 'title', 'noteKey']);
+const noteContent = ref(null); // Markdown text

-const noteContent = ref(null);
+const sourceText = ref(''); // Original markdown source, used for editing
+const displayText = ref(''); // Compiled HTML from markdown

-const emitter = useEmitter();
-
-function gotoNote(){
-    // emitter.emit('goto-note', props.noteKey);
-}
-
-function closeNote(){
-    // emitter.emit('delete-note', props.noteKey);
-}
-
-
-/*
-onMounted(() => {
-    let content = GetContent();
-    let elements = noteContent.value.getElementsByTagName('a');
-    for(let i = 0, len = elements.length; i < len; i++) {
-        let link = elements[i].pathname.split('/').slice(1).join('');
-        link = decodeURIComponent(link);
-        if(content[link] !== undefined){
-            elements[i].onclick = function (event) {
-                event.preventDefault();
-                
-                GetNote(link, (result) => {
-                    emitter.emit("push-note", {key: link, text: "<h1>" + result.title + "</h1>" + result.html, title: result.title});
-                });
-                return false;
-            }
-        } else {
-            elements[i].classList.add("error-link");
-            elements[i].onclick = function (event) {
-                event.preventDefault();
-                return false;
-            }
-        }
-    }
-
-    setTimeout(() => setupCallout(), 0);
-});
+const editingMode = ref(false);
+const editableTitle = ref(null);
+const title = ref(props.title);
+const displayTitle = ref('');

 function closeNote(){
    emitter.emit('delete-note', props.noteKey);
 }

-function gotoNote(){
-    // emitter.emit('goto-note', props.noteKey);
+const compiledMarkdown = computed(() => {
+    return ParseMarkdown(sourceText.value);
+});
+
+function mountComponents() {
+  // Should no need more
+  const widget_types = ['display', 'inline'];
+  widget_types.forEach((widget_type) => {
+    const nodes = document.querySelectorAll('.vue-component-' + widget_type);
+    nodes.forEach(el => {
+      const app = createApp(GetWidget(widget_type, el.dataset.component), { content: el.dataset.content });
+      app.mount(el);
+    });
+  });
+}
+/// 
+
+function update(){
+    displayText.value = compiledMarkdown.value;
+    setTimeout(() => {
+      setupCallout()
+      mountComponents();
+    }, 0);
+}
+
+watch(sourceText, (newText) => {
+    // update();
+});
+
+onMounted(() => {
+    sourceText.value = props.text;
+    title.value = props.title;
+    displayTitle.value = props.title;
+    // window.addEventListener('keydown', handleKeydown);
+    setTimeout(() => setupCallout(), 0);
+    update();
+});
+
+onUnmounted(() => {
+  // window.removeEventListener('keydown', handleKeydown);
+});
+
+function handleKeydown(e) {
+  // Check for Ctrl + E (or Cmd + E on Mac)
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'e') {
+    e.preventDefault(); // prevent browser default behavior
+    editingMode.value = !editingMode.value;
+    if(!editingMode.value){
+       update();
+       SaveNote(); // Save when switching to display mode
+    }
+    return;
+  }
+
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+    e.preventDefault(); // prevent browser default behavior
+    // Save the note (you can emit an event or call a method here)
+    SaveNote();
+    return;
+  }
+}
+
+function SaveNote(){
+    Server().post('/note/update', {
+        id: props.noteKey,
+        content: sourceText.value,
+        title: title.value,
+    }).then((response) => {
+        if(response.data.status !== 'ok'){
+            // Handle error (e.g., show a notification)
+            return;
+        }
+        // DisplayToast('green', "Note saved successfully.", 500);
+    }).catch((error) => {
+        // Handle error (e.g., show a notification)
+    });
 }

 function toggleCallout() {
@@ -78,6 +126,10 @@ function toggleCallout() {
 }

 function setupCallout() {
+  if (!noteContent.value) {
+    return;
+  }
+
  const collapsible = noteContent.value.getElementsByClassName(
    `callout is-collapsible`,
  );
@@ -93,21 +145,29 @@ function setupCallout() {
    }
  }
 }
-*/


+const editTitle = (e) => {
+  title.value = e.target.innerText;
+}
+
 </script>

 <template>
-<div class="note">
-    <div class="note-stunt" v-on:click="gotoNote">
+<div class="note" @keydown="handleKeydown" tabindex="0">
+    <div class="note-stunt">
        <div class="close-button" v-on:click="closeNote">
            <img class="icon" src="/icons/Pixelarticons/white/close.svg" alt="My Happy SVG"/>
        </div>
        <span>{{ title }}</span>
    </div>
    <div class="note-content-container">
-        <div class="note-content" ref="noteContent" v-html="text"></div>
+        <textarea v-model="sourceText" class="full-editor" v-if="editingMode"></textarea>
+        <div v-else class="note-content" ref="noteContent">
+          <h1 contenteditable="true" ref="editableTitle" @input="editTitle">{{ displayTitle }}</h1>
+          <div ref="noteContent" v-html="displayText"></div>
+        </div>
+        
    </div>
 </div>
 </template>
@@ -124,6 +184,22 @@ function setupCallout() {
    user-select: none;
 }

+.full-editor {
+width: 100%;    
+  height: 100%;
+  box-sizing: border-box;
+
+  border: none;
+  outline: none;
+  resize: none;
+
+  padding: 20px;
+  font-size: 16px;
+  font-family: monospace; /* optional, gives document/editor feel */
+
+    padding-bottom: 400px; /* Small bottom margin */
+}
+
 .close-button {
    height: 20px;
    width: 20px;
@@ -131,6 +207,7 @@ function setupCallout() {
    display: flex;
    justify-content: center;
    cursor: pointer;
+    filter: invert(var(--color-icon-invert));
 }

 .note {
@@ -138,34 +215,32 @@ function setupCallout() {
    max-width: 700px;
    overflow-y: auto;

-    border-color: var(--note-border-color);
+    border-color: var(--color-note-border);
    border-width: 0px;
    border-right-width: 1px;
    border-style: solid;
    display: flex;

-    background-color: var(--background-color);
+    background-color: var(--color-background);
    position: sticky;
    top: 0px;
 }

 /* Contingut de cada nota */
 .note-content {
-    padding-bottom: 60px;
+    padding-bottom: 400px;
    overflow-y: auto;
+    max-width: 600px;
+    padding: 20px;
 }

 .note-content-container {
-    margin: 20px;
+    width: 100%;
+}
+
+.note-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+  display: block; /* optional: avoids inline spacing issues */
 }
 </style>
-
-<style>
-.note-content > h1 {
-    text-align: center;
-}
-
-.note-content  .katex-display {
-    max-width: 600px;
-}
-</style>
--- a/frontend/app/components/viewer/content/NoteContainer.vue
+++ b/frontend/app/components/viewer/content/NoteContainer.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import Note from './Note.vue';
-
-const emitter = useEmitter();
+import { emitter } from '~/services/Emitter';

 let noteData = ref([]);

@@ -10,6 +9,10 @@ const noteContainer = ref(null);

 function calculateContainerWidth(){
    let dom = noteContainer.value;
+    if (!dom) {
+        return;
+    }
+
    dom.style.width = noteData.value.length * 701 + "px";
    
    setTimeout(() => {
@@ -23,19 +26,33 @@ function calculateContainerWidth(){
 }

 function pushNote(note){
+    noteData.value = noteData.value.filter((currentNote) => {
+        return currentNote.key !== note.key;
+    });
    noteData.value.push(note);
    calculateContainerWidth();
 }

-emitter.on("push-note", (note) => {
+function handlePushNote(note) {
    pushNote(note);
-})
+}

-emitter.on("delete-note", (key) => {
+function handleDeleteNote(key) {
    noteData.value = noteData.value.filter((note) => {
        return note.key !== key;
    });
    calculateContainerWidth();
+}
+
+// Moure aixo
+onMounted(() => {
+    emitter.on("push-note", handlePushNote);
+    emitter.on("delete-note", handleDeleteNote);
+});
+
+onUnmounted(() => {
+    emitter.off("push-note", handlePushNote);
+    emitter.off("delete-note", handleDeleteNote);
 });

 </script>
@@ -60,9 +77,9 @@ emitter.on("delete-note", (key) => {
    display: flex;
    height: 100%;
    margin: 0;
-    height: 100%;
+    background-color: var(--color-background);
 }
 </style>

 <style>
-</style>
+</style>
--- a/frontend/app/components/viewer/statusbar/FetchStatus.vue
+++ b/frontend/app/components/viewer/statusbar/FetchStatus.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref,onMounted } from 'vue';
-const emitter = useEmitter();
+import { emitter } from '~/services/Emitter';
+

 const statusIcon = ref(null);
 const statusMessage = ref(null);
--- a/frontend/app/components/viewer/statusbar/StatusBar.vue
+++ b/frontend/app/components/viewer/statusbar/StatusBar.vue
@@ -22,7 +22,7 @@ import FetchStatus from './FetchStatus.vue';
    min-height: 24px;
    max-height: 24px;
    width: 100%;
-    background-color: var(--top-bar-background-color);
+    background-color: var(--color-background-light);
    display: flex;
    font-size: 14px;
 }
--- a/frontend/app/components/viewer/widgets/TableWidget.vue
+++ b/frontend/app/components/viewer/widgets/TableWidget.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
--- a/frontend/app/components/viewer/widgets/TestWidget.vue
+++ b/frontend/app/components/viewer/widgets/TestWidget.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps(['content']);
+
+const name = ref('');
+
+onMounted(() => {
+    name.value = props.content || 'No content';
+});
+</script>
+
+<template>
+<h2>This is a {{name}} widget</h2>
+</template>
--- a/frontend/app/components/viewer/widgets/display/RollWidgetDisplay.vue
+++ b/frontend/app/components/viewer/widgets/display/RollWidgetDisplay.vue
@@ -0,0 +1,177 @@
+<script setup>
+const props = defineProps(['content']);
+
+import { parse } from '~/services/widgets/DiceParser';
+import { AddSound } from '~/services/Sound';
+
+const container = ref(null);
+const resultText = ref("");
+const steps = ref(null);
+const stepsHtml = ref("");
+
+const rollDice = () => {
+    const result = parse(props.content);
+    resultText.value = result.total;
+    stepsHtml.value = result.steps.map(renderStep).join('');
+};
+
+const renderStep = (s) => {
+    if (s.type === 'op') {
+        const label = s.op === '*' ? '×' : s.op === '/' ? '÷' : s.op;
+        return `<span class="step-op">${label}</span>`;
+    }
+
+    if (s.type === 'const') {
+        return `<span class="step-const">${s.value}</span>`;
+    }
+
+    if (s.type === 'dice') {
+        const { entry } = s;
+        const { rawRolls, kept, sides, mod, value } = entry;
+
+        const keptCopy = [...kept];
+        const tagged = rawRolls.map(v => {
+            const i = keptCopy.indexOf(v);
+            if (i !== -1) { keptCopy.splice(i, 1); return { v, kept: true }; }
+            return { v, kept: false };
+        });
+
+        let html = '';
+
+        tagged.forEach(({ v, kept }) => {
+            const isMax = v === sides, isMin = v === 1;
+            const cls = !kept    ? 'roll-val dropped'
+                      : isMax    ? 'roll-val max-val'
+                      : isMin    ? 'roll-val min-val'
+                      :            'roll-val kept';
+            html += `<span class="${cls}">${v}</span>`;
+        });
+
+        if (kept.length < rawRolls.length || kept.length > 1) {
+            html += `<span class="step-sum">=${value}</span>`;
+        }
+
+        return html;
+    }
+
+    return '';
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <span class="result-text">{{ resultText || '-' }}</span>
+            <button class="btn-primary roll-btn sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+                </span>
+            </button>
+        </div>
+        <div class="roll-widget-results">
+            <span class="formula">{{ "[" + props.content + "]" }}</span>
+            <div class="steps" v-html="stepsHtml"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.steps {
+    margin-left: 8px;
+    height: 22px;
+    > {
+        font-size: 12px;
+    }
+}
+.steps :deep(.roll-val){
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    padding: 1px 2px;
+    border-radius: 3px;
+    margin: 2px;
+    font-size: 12px;
+    border: 1px solid; 
+}
+.steps :deep(.roll-val.kept){
+    background: rgba(93,184,122,0.12);
+    border-color: #4a8c5c;
+    color: #a8d4b4;
+}
+
+.steps :deep(.roll-val.dropped) {
+    background: transparent;
+    border-color: var(--color-border);
+    color: var(--color-text-tertiary);
+    text-decoration: line-through;
+}
+
+.steps :deep(.roll-val.max-val) {
+    background: rgba(93,184,122,0.2);
+    border-color: #5db87a;
+    color: #5db87a;
+}
+
+.steps :deep(.roll-val.min-val) {
+    background: rgba(201,95,95,0.12);
+    border-color: #c95f5f;
+    color: #c95f5f;
+}
+
+.steps :deep(.step-op)         { color: var(--color-text-secondary); padding: 0 4px; font-size: 13px; }
+.steps :deep(.step-const)      { font-size: 13px; color: var(--color-text-primary); padding: 0 2px; }
+.steps :deep(.step-dice-label) { font-size: 11px; color: var(--color-text-tertiary); margin-right: 2px; }
+.steps :deep(.step-sum)        { font-size: 11px; color: var(--color-text-tertiary); margin-left: 2px; }
+.steps :deep(.dice-mod)        { font-style: normal; margin-left: 2px; }
+
+.result-text {
+    font-size: 24px;
+    vertical-align: center;
+}
+
+.roll-widget-body {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.result-text {
+    margin-left: 12px;
+}
+
+.formula {
+    margin-left: 12px;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--color-gray);
+}
+
+.roll-widget-results {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+}
+
+.roll-widget {
+    width: 100%;
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 8px;
+    border-radius: 6px;
+}
+
+.roll-btn {
+    padding: 8px;
+    margin-right: 8px;
+}
+
+</style>
--- a/frontend/app/components/viewer/widgets/inline/RollWidgetInline.vue
+++ b/frontend/app/components/viewer/widgets/inline/RollWidgetInline.vue
@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps(['content']);
+
+import { parse } from '~/services/widgets/DiceParser';
+import { AddSound } from '~/services/Sound';
+
+const container = ref(null);
+const resultText = ref("");
+
+const rollDice = () => {
+    console.log(props.content);
+    const result = parse(props.content);
+    console.log(result);
+    resultText.value = result.total;
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <button class="btn-primary btn-inline sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+
+                    <!-- Result text -->
+                    <span class="result-text">
+                        {{ resultText || props.content }}
+                    </span>
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.roll-widget {
+    display: inline-flex; /* or inline-block */
+    vertical-align: middle; /* keeps it aligned nicely with text */
+}
+
+.btn-inline {
+    padding: 2px 6px;
+}
+
+.dice-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.result-text {
+    font-weight: 500;
+}
+</style>
--- a/frontend/app/components/windows/CreateCampaignWindow.vue
+++ b/frontend/app/components/windows/CreateCampaignWindow.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import ColorPicker from '../layouts/ColorPicker.vue';
+import Server from '~/services/Server';
+import { DisplayToast } from '~/services/Toaster';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+const loading = ref(false);
+
+let id = data.id;
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500, height: 400});
+    ResetPosition(id, "center");
+});
+
+const campaignName = ref("");
+const campaignDescription = ref("");
+const colorPicker = ref(null);
+
+function NewCampaign(){
+    const color = colorPicker.value.GetColor();
+    console.log(color);
+    loading.value = true;
+    Server().post('/campaign/create', {
+        name: campaignName.value,
+        description: campaignDescription.value,
+        color: colorPicker.value.GetColor(),
+    }).then((response) => {
+        loading.value = false;
+        console.log(response.data);
+        DisplayToast('green', $t('campaigns.create.success'), 3000);
+        ClearWindow({id});
+    });
+}
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <div class="body">
+            <!-- Body -->
+            <form v-on:submit.prevent="NewCampaign">
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.name') }}</label>
+                    <input type="text" :placeholder="$t('campaigns.create.enter')" name="campaignName" v-model="campaignName" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.description') }}</label>
+                    <textarea type="text" :placeholder="$t('campaigns.create.description-placeholder')" name="campaignDescription" v-model="campaignDescription" autocomplete="off" ></textarea>
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.color') }}</label>
+                    <ColorPicker ref="colorPicker"></ColorPicker>
+                </div>
+                <div class="form-actions">
+                    <button class="btn-primary sound-click">
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{ $t("general.create") }}
+                        </span>
+                    </button>
+                </div>
+            </form>
+        </div>
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.body {
+    width: 100%;
+}
+
+.window-second-header {
+    width: 100%;
+    h2 {
+        font-family: MrEavesRemake;
+    }
+}
+
+form {
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.form-field {
+    padding: 2px;
+    display: flex;
+    align-items: left;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+label {
+    text-align: left;
+}
+
+textarea {
+    resize: none;
+    height: 200px;
+    font-size: 14px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center; /* centers horizontally */
+    margin-top: 10px;
+}
+
+.form-actions button {
+    width: 100%;        /* makes it expand */
+    max-width: 300px;   /* optional: prevents it from being too wide */
+}
+
+</style>
+
+
--- a/frontend/app/components/windows/ExampleWindow.vue
+++ b/frontend/app/components/windows/ExampleWindow.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
+
+import WindowHandle from './partials/WindowHandle.vue';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500, height: 380});
+    ResetPosition(id, "center");
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+        <div ref="test"></div>
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    display: flex;
+    align-items: center;
+}
+</style>
+
+
--- a/frontend/app/components/windows/LoginWindow.vue
+++ b/frontend/app/components/windows/LoginWindow.vue
@@ -1,33 +1,109 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+import { 
+    SetupHandle,
+    SetSize,
+    ResetPosition,
+    SetResizable,
+    ClearWindow,
+    CreateWindow,
+    Top,
+} from '@/services/Windows';

 import WindowHandle from './partials/WindowHandle.vue';
+import { DisplayToast } from '~/services/Toaster';
+import Server from '~/services/Server';
+import { SetUser } from '~/services/User';
+import Spinner from '../partials/Spinner.vue';

 const handle = ref(null);
+const wrapper = ref(null);

 const props = defineProps(['data']);
 const data = props.data;

 let id = data.id;

-const test = ref(null)
+const username = ref("");
+const password = ref("");
+
+const loading = ref(false);

 onMounted(() => {
+    Top(wrapper);
    SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 380});
+    SetSize(id, {width: 450, height: 480});
+    SetResizable(id, false);
    ResetPosition(id, "center");
 });
+
+function ShowMainMenu(){
+    CreateWindow('main_menu');
+    ClearWindow({type: 'login'});
+}
+
+function login() {
+    loading.value = true;
+    Server().post('/user/login', { usermail: username.value, password: password.value }).then((response) => {
+        loading.value = false;
+        const data = response.data;
+
+        if(data.status == "error"){
+            DisplayToast('red', $t(data.msg), 3000)
+        } else {
+            SetUser(data.token);
+            DisplayToast('green', $t('login.success'), 3000);
+            ShowMainMenu();
+        }
+    }).catch((error) => {
+        loading.value = false;
+        DisplayToast('red', $t("errors.internal"), 3000);
+    });
+}
+
+function toRegister(){
+    CreateWindow('register');
+    ClearWindow({type: 'login'});
+}
 </script>


 <template>
-    <div class="window-wrapper" :id="'window-wrapper-' + id">
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
        <WindowHandle :window="id" ref="handle"></WindowHandle>

        <!-- Body -->
-        <div ref="test">
-            <p>Hola</p>
+        <div class="vert-expand">
+            <picture align="center">
+            <source media="(prefers-color-scheme: dark)" srcset="/img/logo-splash.png">
+            <source media="(prefers-color-scheme: light)" srcset="/img/logo-splash-light.png">
+            <img alt="Dragonroll logo" src="/img/logo-splash.png" class="splash-image" draggable="false">
+            </picture>
+
+            <form v-on:submit.prevent="login">
+                <div class="form-field">
+                    <label for="username">{{$t('login.username')}}</label>
+                    <input id="username-field" type="text" :placeholder="$t('login.username-placeholder')" name="username" v-model="username" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="password">{{$t('login.password')}}</label>
+                    <input id="password-field" type="password" :placeholder="$t('login.password-placeholder')" name="password" v-model="password" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <button class="btn-primary sound-click">
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{$t('login.log-in')}}
+                        </span>
+                    </button>
+                </div>
+                <div class="form-field center">
+                    <p>{{$t('login.no-account')}} <a href="#" @click.prevent="toRegister">{{$t('login.register')}}</a></p>
+                </div>
+            </form>
+            
        </div>

    </div>
@@ -35,10 +111,41 @@ onMounted(() => {


 <style scoped>
+p {
+  user-select: none;
+}
+
+.vert-expand {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
 .window-wrapper {
+    user-select: none;
+
    display: flex;
    align-items: center;
 }
+
+.splash-image {
+    width: 450px;
+}
+
+form {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+label {
+    text-align: left;
+}
+
+.center {
+    text-align: center;
+}
+
 </style>


--- a/frontend/app/components/windows/MainMenuWindow.vue
+++ b/frontend/app/components/windows/MainMenuWindow.vue
@@ -0,0 +1,165 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, Top, CreateChildWindow, GetFirstWindowId } from '@/services/Windows';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import VersionRender from '../partials/VersionRender.vue';
+import EditUserPartial from '../partials/EditUserPartial.vue';
+import CampaignEntry from '../partials/CampaignEntry.vue';
+import Server from '~/services/Server';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+const campaings = ref([]);
+
+let id = data.id;
+
+function CreateCampaignWindow(){
+    CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign');
+}
+
+function RefreshCampaigns(){
+    Server().get('/campaign/list').then((response) => {
+        if(response.data.status !== "ok") return;
+        response.data.campaigns.forEach((camp) => {
+            campaings.value.push(camp);
+        });
+    });
+}
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 880, height: 760});
+    ResetPosition(id, "center");
+
+    RefreshCampaigns();
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <div class="two-column">
+            <div class="vert-expand secondary">
+                <div class="image-container">
+                    <img alt="Dragonroll logo" src="/img/logo-splash.png" draggable="false" width="100%">
+                </div>
+                <div class="patch-notes-container">
+                    <h1>Welcome to dragonroll!</h1>
+                    <h2>Version 0.1</h2>
+                    <p>This is totally under construction. This is a review of how the patch notes will be displayed.</p>
+                    <p>There is also a lot of heavy development here.</p>
+                </div>
+                <VersionRender></VersionRender>
+            </div>
+
+            <div class="vert-expand" style="max-width: 450px;">
+                <EditUserPartial></EditUserPartial>
+                <!-- Body -->
+                <div class="vert-expand">
+                    <div class="vert top">
+                        <h1>{{ $t("main-menu.main-menu")}}</h1>
+
+                        <!-- HERE -->
+                        <div class="campaign-list">
+                            <CampaignEntry v-for="camp in campaings" :key="camp._id" :data="camp"></CampaignEntry>
+                        </div>
+                    </div>
+                    
+                    <div class="vert bot">
+                        <div class="button-container">
+                            <button class="btn-primary button-expand sound-click" v-on:click="CreateCampaignWindow" ref="campaignButton">{{ $t("main-menu.create-campaign") }}</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+h1 {
+    margin-top: 20px;
+    font-family: MrEavesRemake;
+    text-align: center;
+}
+
+h2, h3 {
+    font-family: MrEavesRemake;
+}
+
+.patch-notes-container {
+    margin: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    flex-grow: 1;
+}
+
+.two-column {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+
+.secondary {
+    background-color: var(--color-background-soft);
+}
+
+.expand {
+    width: 100%;
+    
+    display: flex;
+    flex-direction: row;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+.vert-expand {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-grow: 1;
+    width: 100%;
+}
+
+
+.button-expand {
+    width: 100%;
+}
+
+.button-container {
+    display: flex;
+    margin: 20px;
+
+    flex-direction: column;
+}
+
+p {
+  user-select: none;
+}
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.splash-image {
+    width: 600px;
+    height: 250px;
+    user-select: none;
+}
+</style>
+
+
--- a/frontend/app/components/windows/RegisterWindow.vue
+++ b/frontend/app/components/windows/RegisterWindow.vue
@@ -0,0 +1,232 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, CreateWindow, ClearWindow, Top } from '@/services/Windows';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import Spinner from '../partials/Spinner.vue';
+import { DisplayToast } from '~/services/Toaster';
+import Server from '~/services/Server';
+import { errorMessages } from 'vue/compiler-sfc';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+
+const username = ref("");
+const password = ref("");
+const passwordConfirm = ref("");
+const email = ref("");
+const name = ref("");
+
+const firstTime = ref(false);
+const loading = ref(false);
+
+const images = [
+    "https://cdn.aranroig.com/art/miirym/miirym.jpg",
+    "https://cdn.aranroig.com/art/nozt/nozt.jpg",
+    "https://cdn.aranroig.com/art/knocking/knocking.jpg",
+    "https://cdn.aranroig.com/art/valentin/valentin.jpg",
+]
+
+const splashSource = ref("");
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500});
+    ResetPosition(id, "center");
+
+    // Pick random image
+    const randomIndex = Math.floor(Math.random() * images.length);
+    splashSource.value = images[randomIndex];
+    firstTime.value = data.firstTime;
+});
+
+function toLogin(){
+    CreateWindow('login');
+    ClearWindow({type: 'register'});
+}
+
+function register(){
+    if(username.value.length < 3){
+        DisplayToast('red', $t('register.errors.username-empty'), 3000);
+        return;
+    }
+
+    if(email.value.length < 5 || !email.value.includes('@')){
+        DisplayToast('red', $t('register.errors.email-empty'), 3000);
+        return;
+    }
+
+    if(name.value.length == 0){
+        DisplayToast('red', $t('register.errors.name-empty'), 3000);
+        return;
+    }
+
+    if(password.value !== passwordConfirm.value){
+        DisplayToast('red', $t('register.errors.passwords-no-match'), 3000);
+        return;
+    }
+
+    loading.value = true;
+    Server().post('/user/register', {
+        username: username.value,
+        email: email.value,
+        name: name.value,
+        password: password.value
+    }).then((response) => {
+        DisplayToast('green', $t('register.success'), 3000);
+        toLogin();
+    }).catch((error) => {
+        if(error.response && error.response.data && error.response.data.message){
+            DisplayToast('red', $t(register.error.response.data.message), 3000);
+        } else {
+            DisplayToast('red', $t("errors.internal"), 3000);
+        }
+    }).finally(() => {
+        loading.value = false;
+    });
+}
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+        <div class="vert-expand">
+            <div class="image-container">
+                <div class="image-crop">
+                    <img :src="splashSource" class="main-image">
+                </div>
+                <picture class="overlay-image">
+                    <source media="(prefers-color-scheme: dark)" srcset="/img/logo-splash.png">
+                    <source media="(prefers-color-scheme: light)" srcset="/img/logo-splash-light.png">
+                    <img alt="Dragonroll logo" src="/img/logo-splash.png" draggable="false" width="250px">
+                </picture>
+            </div>
+            <form v-on:submit.prevent="register">
+                <p class="green" v-if="firstTime">{{ $t('register.first-register-message') }}</p>
+                <h2>{{ $t('register.welcome') }}</h2>
+                <p>{{ $t('register.message') }}</p>
+                <div class="form-field">
+                    <label for="username">{{$t('register.username')}}</label>
+                    <input id="username-field" type="text" :placeholder="$t('register.username-placeholder')" name="username" v-model="username" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="email">{{$t('register.email')}}</label>
+                    <input id="email-field" type="text" :placeholder="$t('register.email-placeholder')" name="email" v-model="email" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="name">{{$t('register.name')}}</label>
+                    <input id="name-field" type="text" :placeholder="$t('register.name-placeholder')" name="name" v-model="name" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="password">{{$t('register.password')}}</label>
+                    <div class="two-rows expand">
+                        <input id="password-field" type="password" :placeholder="$t('register.password-placeholder')" name="password" v-model="password" autocomplete="off" >
+                        <input id="password-field" type="password" :placeholder="$t('register.password-confirm-placeholder')" name="password" v-model="passwordConfirm" autocomplete="off" >
+                    </div>
+                </div>
+                <div class="form-field">
+                    <button class="btn-primary sound-click">
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{$t('register.register')}}
+                        </span>
+                    </button>
+                </div>
+                <div class="form-field center" v-if="!firstTime">
+                    <p>{{$t('register.have-account')}} <a href="#" @click.prevent="toLogin">{{$t('register.login')}}</a></p>
+                </div>
+            </form>
+            
+        </div>
+
+    </div>
+</template>
+
+
+<style scoped>
+p {
+  user-select: none;
+}
+
+.expand {
+    width: 100%;
+    
+    display: flex;
+    flex-direction: row;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+.vert-expand {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.window-wrapper {
+    user-select: none;
+
+    display: flex;
+    align-items: center;
+}
+
+.splash-image {
+    width: 450px;
+}
+
+form {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+label {
+    text-align: left;
+}
+
+.center {
+    text-align: center;
+}
+
+.image-container {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 10px;
+    pointer-events: none;
+}
+
+.image-crop {
+    height: 200px;       /* adjust as needed */
+    width: 500px;        /* adjust as needed */
+    overflow: hidden;
+    position: relative;
+}
+
+.main-image {
+    position: absolute;
+    width: 500px;        /* adjust as needed */
+    top: 0px;          /* adjust as needed */
+}
+.overlay-image {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 250px; /* adjust as needed */
+}
+
+</style>
+
+
--- a/frontend/app/components/windows/SettingsWindow.vue
+++ b/frontend/app/components/windows/SettingsWindow.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import Tabs from '../layouts/Tabs.vue';
+import Dropdown from '../layouts/Dropdown.vue';
+import { GetUser, GetUserSetting, SetUserSetting } from '@/services/User';
+import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow, CreateWindow, SetMinSize, SetResizable } from '@/services/Windows';
+import { locales } from '~~/i18n/locales';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+const { locale } = useI18n();
+
+
+const changeLocale = (lang) => {
+    console.log(lang);
+    locale.value = lang.code;
+    SetUserSetting('lang', lang.code);
+}
+
+const id = data.id;
+
+const rows = ref([{id: "account-settings", value: "settings.tabs.account-settings"}]);
+
+/* TODO
+const languageOptions = ref(["English", "Spanish", "Catalan"])
+const langSelector = ref(null);
+*/
+function getLocaleFromCode(code){
+    for(let i = 0; i < locales.length; i++){
+        if(locales[i].code == code) return locales[i];
+    }
+}
+
+const selectedLocale = ref("");
+onBeforeMount(() => {
+    GetUserSetting('lang').then(value => {
+        locale.value = value;
+        selectedLocale.value = getLocaleFromCode(value); // Set selected in dropdown
+    });
+    if(GetUser().admin) rows.value.push({
+        id: "site-administration",
+        value: "settings.tabs.site-administration"
+    });
+});
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 600, height: 480});
+    ResetPosition(id, "center");
+
+    SetResizable(id, true);
+    SetMinSize(id, {width: 450, height: 280});
+});
+
+function OpenManageAccounts(){
+    ClearWindow('settings');
+    CreateWindow('account_management', {
+        type: 'account_management',
+        title: 'settings.site-administration.manage-accounts.title',
+        id: 'account-management',
+        back: () => {
+            ClearWindow('account-management')
+            CreateWindow('settings', {
+                id: 'settings',
+                type: 'settings',
+                title: 'settings.title',
+                back: () => { ClearWindow('settings'); CreateWindow('main_menu');  }
+            });
+        }
+    })
+}
+
+const getLocaleName = (locale) => {
+    return locale.name;
+}
+
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+        <Tabs :rows="rows">
+            <template #account-settings>
+                <div class="form-container">
+                    <div class="form-element">
+                        <label>{{ $t('settings.account-settings.language') }}</label>
+                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="selectedLocale"></Dropdown>
+                    </div>
+                </div>
+            </template>
+            <template #site-administration>
+                <div class="form-element centered">
+                    <button v-on:click.prevent="OpenManageAccounts">{{ $t('settings.site-administration.manage-accounts') }}</button>
+                </div>
+            </template>
+        </Tabs>
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.splash-image {
+    width: 600px;
+    height: 250px;
+}
+
+.form-field {
+    padding: 10px;
+    display: flex;
+    align-items: left;
+    flex-direction: column;
+    justify-content: left;
+    width: 600px;
+}
+
+label {
+    text-align: left;
+}
+
+</style>
--- a/frontend/app/components/windows/partials/BigIconTemplate.vue
+++ b/frontend/app/components/windows/partials/BigIconTemplate.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+const props = defineProps(['title', 'img']);
+
+const imgSrc = ref("");
+
+onMounted(() => {
+    imgSrc.value = props.img;
+    watch(() => props.img, () => {
+        imgSrc.value = props.img;
+    });
+})
+</script>
+
+<template>
+<div class="document centered">
+    <h1>{{props.title}}</h1>
+    <img :src="imgSrc" class="big-icon">
+    <br>
+    <slot></slot>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.big-icon {
+    height: 80px;
+    width: 80px;
+    border: 1px solid var(--color-border);
+    margin:auto;
+}
+</style>
--- a/frontend/app/components/windows/partials/FixedBottomButtons.vue
+++ b/frontend/app/components/windows/partials/FixedBottomButtons.vue
@@ -0,0 +1,29 @@
+<script setup>
+import IconButton from '~/components/layouts/IconButton.vue';
+
+const props = defineProps(['plus', 'edit', 'view', 'remove']);
+
+let plus = props.plus;
+let edit = props.edit;
+let view = props.view;
+let remove = props.remove;
+</script>
+
+<template>
+<div class="fixed-bottom-buttons">
+    <IconButton v-show="plus" icon="/icons/iconoir/regular/plus.svg" :action="plus"></IconButton>
+    <IconButton v-show="edit" icon="/icons/iconoir/regular/edit-pencil.svg" :action="edit"></IconButton>
+    <IconButton v-show="view" icon="/icons/iconoir/solid/eye.svg" :action="view"></IconButton>
+    <IconButton v-show="remove" icon="/icons/iconoir/solid/trash.svg" :action="remove"></IconButton>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.fixed-bottom-buttons {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    z-index: 2;
+    display: flex;
+}
+</style>
--- a/frontend/app/components/windows/partials/WindowHandle.vue
+++ b/frontend/app/components/windows/partials/WindowHandle.vue
@@ -1,10 +1,11 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
-import { GetWindowWithId, ClearWindow, Windows } from '@/services/Windows';
+import { GetWindowWithId } from '@/services/Windows';

 import ArrowLeftIcon from '/icons/iconoir/regular/arrow-left.svg';
 import XMarkIcon from '/icons/iconoir/regular/xmark.svg';
 import ResizeHandleIcon from '/icons/ui/resize-handle.svg';
+import { AddSound } from '~/services/Sound';

 const props = defineProps(['window', 'handleHeight', 'custom', 'color']);
 const id = props.window;
@@ -25,7 +26,7 @@ let backFunction;

 function setupHandle() {
    let win = GetWindowWithId(id);
-    if(win.title) title.value = win.title;
+    if(win.title) title.value = $t(win.title);
    if(win.close){
        close.value = true;
        closeAction = win.close;
@@ -43,6 +44,8 @@ function setupHandle() {
    // Setup sounds
    let currentWindowId = "window-wrapper-" + id;
    let currentWindow = document.getElementById(currentWindowId);
+
+    AddSound(currentWindow);
 }

 function CloseButton(){
@@ -71,13 +74,13 @@ defineExpose({
    <div class="window-handle" :id="'window-handle-' + id">

        <div class="left" v-if="def">
-            <img class="icon icon-add-margin" :src="ArrowLeftIcon" draggable="false" ref="backButton" v-if="hasBack" v-on:click="backFunction">
+            <img class="icon-handle icon-add-margin" :src="ArrowLeftIcon" draggable="false" ref="backButton" v-if="hasBack" v-on:click="backFunction">
        </div>
        <div class="center" v-if="def">
            <span>{{ title }}</span>
        </div>
        <div class="right">
-            <img class="icon" :src="XMarkIcon" draggable="false" ref="closeButton" v-if="close" v-on:click="CloseButton">
+            <img class="icon-handle" :src="XMarkIcon" draggable="false" ref="closeButton" v-if="close" v-on:click="CloseButton">
        </div>
        <!-- span>{{ title }}</span>
            
@@ -123,6 +126,11 @@ defineExpose({
        justify-content: right;
    }

+    .center {
+        display: flex;
+        align-items: center;
+    }
+
    span {
        font-family: MrEavesRemake;
    }
@@ -133,7 +141,13 @@ defineExpose({

    display: flex;
    
-    background-color: var(--color-handler);
+    background-color: var(--color-window-handle-background);
+}
+
+.icon-handle {
+    width: 24px;
+    height: 24px;
+    filter: invert(var(--color-icon-invert));
 }

 </style>
--- a/frontend/app/composables/useTheme.ts
+++ b/frontend/app/composables/useTheme.ts
@@ -0,0 +1,47 @@
+import { ref, onMounted, watch } from 'vue'
+
+type Theme = 'light' | 'dark'
+type Accent = 'katlum'
+
+const theme = ref<Theme>('light')
+const accent = ref<Accent>('katlum')
+
+const applyTheme = () => {
+  document.documentElement.setAttribute('data-theme', theme.value)
+  document.documentElement.setAttribute('data-accent', accent.value)
+}
+
+const setTheme = (value: Theme) => {
+  theme.value = value
+  localStorage.setItem('theme', value)
+  applyTheme();
+}
+
+const setAccent = (value: Accent) => {
+  accent.value = value
+  localStorage.setItem('accent', value)
+  applyTheme();
+}
+
+const setupTheme = () => {
+  const savedTheme = localStorage.getItem('theme') as Theme | null
+  const savedAccent = localStorage.getItem('accent') as Accent | null
+
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+
+  theme.value = savedTheme || (media.matches ? 'dark' : 'light')
+  accent.value = savedAccent || 'katlum'
+
+  applyTheme()
+
+  media.addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+      theme.value = e.matches ? 'dark' : 'light'
+      applyTheme()
+    }
+  })
+};
+
+watch([theme, accent], applyTheme)
+
+export { theme, accent, setTheme, setAccent, setupTheme}
--- a/frontend/app/plugins/api.ts
+++ b/frontend/app/plugins/api.ts
@@ -0,0 +1,6 @@
+import { initApi } from '../services/Server';
+
+export default defineNuxtPlugin(() => {
+    const config = useRuntimeConfig();
+    initApi(config.public.apiBaseUrl);
+});
--- a/frontend/app/plugins/emitter.ts
+++ b/frontend/app/plugins/emitter.ts
@@ -1,11 +0,0 @@
-import mitt from 'mitt'
-
-export default defineNuxtPlugin(() => {
-  const emitter = mitt()
-
-  return {
-    provide: {
-      emitter
-    }
-  }
-})
--- a/frontend/app/plugins/i18n.ts
+++ b/frontend/app/plugins/i18n.ts
@@ -0,0 +1,31 @@
+import { createI18n } from 'vue-i18n'
+
+function loadLocaleMessages() {
+  const locales = import.meta.glob('../../i18n/locales/**/*.json', { eager: true })
+  const messages: Record<string, any> = {}
+
+  for (const path in locales) {
+    const matched = path.match(/i18n\/locales\/(\w+)\/(.*)\.json$/)
+    if (!matched) continue
+
+    const [, locale, file] = matched
+
+    if (!messages[locale]) {
+      messages[locale] = {}
+    }
+
+    messages[locale][file] = (locales[path] as any).default
+  }
+
+  return messages
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: loadLocaleMessages()
+  })
+
+  nuxtApp.vueApp.use(i18n)
+})
--- a/frontend/app/services/Campaign.js
+++ b/frontend/app/services/Campaign.js
@@ -0,0 +1,41 @@
+import Server from './Server';
+
+const SELECTED_CAMPAIGN_KEY = 'selectedCampaignId';
+
+export const useCampaignService = () => {
+  const Campaign = useState('campaign', () => null)
+
+  const SetCampaign = (data) => {
+    Campaign.value = data;
+    if (data?._id) {
+      localStorage.setItem(SELECTED_CAMPAIGN_KEY, data._id);
+    } else {
+      localStorage.removeItem(SELECTED_CAMPAIGN_KEY);
+    }
+  }
+
+  const RestoreCampaign = async () => {
+    const campaignId = localStorage.getItem(SELECTED_CAMPAIGN_KEY);
+    if (!campaignId) return false;
+
+    try {
+      const response = await Server().get(`/campaign/retrieve/${campaignId}`);
+      if (response.data.status !== 'ok') {
+        SetCampaign(null);
+        return false;
+      }
+
+      SetCampaign(response.data.campaign);
+      return true;
+    } catch (error) {
+      SetCampaign(null);
+      return false;
+    }
+  }
+
+  return {
+    Campaign,
+    SetCampaign,
+    RestoreCampaign
+  }
+}
--- a/frontend/app/services/Content.js
+++ b/frontend/app/services/Content.js
@@ -0,0 +1,12 @@
+import { ref } from 'vue';
+
+const ShowContent = ref(false);
+
+function SetShowContent(value) {
+    ShowContent.value = value;
+}
+
+export {
+    ShowContent,
+    SetShowContent
+}
--- a/frontend/app/services/ContextMenu.js
+++ b/frontend/app/services/ContextMenu.js
@@ -0,0 +1,148 @@
+// You should hide the context menu when the element that has the
+// event gets removed
+
+let margin = -3;
+
+let cursorX = 0;
+let cursorY = 0;
+
+let arrowIcon = "icons/iconoir/regular/nav-arrow-right.svg";
+
+import { animate } from 'motion'
+
+function Show(){
+    let contextMenu = document.getElementById('context-menu');
+    contextMenu.style.display = "flex";
+    contextMenu.style.top = (cursorY + margin) + "px";
+    contextMenu.style.left = (cursorX + margin) + "px";
+}
+
+function HideContextMenu(){
+    let contextMenu = document.getElementById('context-menu');
+    contextMenu.style.display = "none";
+}
+
+function PopulateContext(val){
+    let children = [];
+
+    let elementNum = 0;
+    val.forEach(element => {
+        let contextMenuElement = document.createElement('div');
+        contextMenuElement.classList.add("context-menu-element");
+        if(element.action)
+            contextMenuElement.addEventListener("click", element.action);
+        
+        let spanInfo = document.createElement('span');
+        spanInfo.innerHTML = element.name;
+        contextMenuElement.appendChild(spanInfo);
+
+        if(element.icon){
+            let iconContextElement = document.createElement('img');
+            iconContextElement.src = element.icon;
+            contextMenuElement.appendChild(iconContextElement);
+        }
+
+        if(element.context){
+            let iconContextElement = document.createElement('img');
+            iconContextElement.src = arrowIcon;
+            contextMenuElement.appendChild(iconContextElement);
+
+            let childContextMenuElement = document.createElement('div');
+            childContextMenuElement.classList.add("context-menu");
+            childContextMenuElement.style.left = "100%";
+            childContextMenuElement.style.top = "0";
+            childContextMenuElement.style.display = "none";
+    
+            let childChildren = PopulateContext(element.context);
+            childChildren.forEach((child) => childContextMenuElement.appendChild(child));
+    
+            contextMenuElement.addEventListener("mouseenter", () => {
+                childContextMenuElement.style.display = "flex";
+            });
+
+            contextMenuElement.addEventListener("mouseleave", () => {
+                childContextMenuElement.style.display = "none";
+            })
+
+            contextMenuElement.appendChild(childContextMenuElement);
+        }
+
+        children.push(contextMenuElement);
+
+        animate(contextMenuElement, {
+            opacity: [0, 1],
+            translateY: [-20, -2]
+        }, {duration: 0.15}).finished.then(() => {
+
+        });
+        elementNum++;
+    });
+
+    return children;
+}
+
+function PopulateContextMenu(val){
+    let contextMenu = document.getElementById('context-menu');
+    let children = PopulateContext(val);
+
+    contextMenu.replaceChildren();
+    children.forEach((el) => contextMenu.appendChild(el));
+}
+
+function AddContextMenu(element, val, options = {}){
+    element._dr_context = val;
+
+    function show(e){
+        e.preventDefault();
+        PopulateContextMenu(val);
+        Show();
+        if(options.dropdown){
+            let rect = element.getBoundingClientRect();
+            let contextMenu = document.getElementById('context-menu');
+            contextMenu.style.top = rect.bottom + "px";
+            contextMenu.style.left = rect.left + "px";
+        }
+    }
+
+    element.addEventListener('contextmenu', show);
+    if(options.dropdown) element.addEventListener('click', show);
+}
+
+
+
+function UpdateVisibility(){
+    let contextMenu = document.getElementById('context-menu');
+    let element = document.elementFromPoint(cursorX, cursorY);
+    let mustHide = true;
+    while(element){
+        if(element == contextMenu){
+            mustHide = false;
+            break;
+        }
+        element = element.parentElement;
+    }
+    if(mustHide) HideContextMenu();
+}
+
+function SetupContextMenu(){
+    HideContextMenu();
+
+    document.addEventListener('mousemove', (e) => {
+        cursorX = e.clientX;
+        cursorY = e.clientY;
+    });
+
+    document.addEventListener('mousedown', UpdateVisibility);
+}
+
+function ShowContextMenu(val){
+    PopulateContextMenu(val);
+    Show();
+}
+
+export {
+    SetupContextMenu,
+    AddContextMenu,
+    ShowContextMenu,
+    HideContextMenu
+};
--- a/frontend/app/services/Emitter.js
+++ b/frontend/app/services/Emitter.js
@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+
+export const emitter = mitt();
--- a/frontend/app/services/Marker.js
+++ b/frontend/app/services/Marker.js
@@ -0,0 +1,109 @@
+import { Marked } from "marked";
+const widget_map = {
+  inline: {
+    roll: () => import("~/components/viewer/widgets/inline/RollWidgetInline.vue"),
+  },
+  display: {
+    roll: () => import("~/components/viewer/widgets/display/RollWidgetDisplay.vue"),
+  } 
+};
+
+const componentCache = {
+  inline: {},
+  display: {}
+}
+
+const GetWidget = (type, name) => {
+  if (!componentCache[type][name]) {
+    componentCache[type][name] = defineAsyncComponent(
+      widget_map[type][name]
+    )
+  }
+
+  return componentCache[type][name]
+}
+
+
+const marker = new Marked();
+
+const extension = {
+  name: "widget",
+  level: "block",
+
+  tokenizer(src) {
+    const rule = /^@(\w+)\n([\s\S]+?)\n@end/;
+    const match = rule.exec(src);
+
+    if (!match) return;
+
+    return {
+      type: "widget",
+      raw: match[0],
+      name: match[1],
+      text: match[2],
+    };
+  },
+
+  renderer(token) {
+    return `<div class="vue-component-display" data-component="${token.name}" data-content="${token.text}"></div>`;
+  },
+};
+
+const inlineExtension = {
+  name: "widget_inline",
+  level: "inline",
+  start(src) {
+    return src.indexOf("@");
+  },
+
+  tokenizer(src) {
+    const rule = /^@(\w+)\s*\[([^\]]*)\]/;
+    const match = rule.exec(src);
+    if (!match) return;
+
+    return {
+      type: "widget_inline",
+      raw: match[0],
+      name: match[1],
+      text: match[2],
+    };
+  },
+
+  renderer(token) {
+    return `<span class="vue-component-inline" data-component="${token.name}" data-content="${token.text}"></span>`;
+  },
+};
+
+const linkExtension = {
+  name: "link_to",
+  level: "inline",
+  start(src) {
+    return src.indexOf("[[");
+  },
+
+  tokenizer(src) {
+    const rule = /^\[\[([^\n]*)\]\]/;
+    const match = rule.exec(src);
+    if (!match) return;
+
+    return {
+      type: "link_to",
+      raw: match[0],
+      link: match[1],
+    };
+  },
+
+  renderer(token) {
+    return `<span class="vue-link" data-href="${token.link}"></span>`;
+  },
+};
+
+marker.use({
+  extensions: [extension, inlineExtension, linkExtension],
+});
+
+function ParseMarkdown(source) {
+  return marker.parse(source || "");
+}
+
+export { ParseMarkdown, GetWidget };
--- a/frontend/app/services/Server.js
+++ b/frontend/app/services/Server.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+const server = axios.create({
+    baseURL: 'http://localhost:5000/api', // fallback only
+    headers: {
+        "Access-Control-Allow-Origin": "*",
+    }
+});
+
+export const initApi = (baseURL) => {
+    server.defaults.baseURL = baseURL;
+};
+
+server.interceptors.request.use((config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+});
+
+export default () => server;
+
+export const getBaseUrl = () => server.defaults.baseURL;
--- a/frontend/app/services/Sound.js
+++ b/frontend/app/services/Sound.js
@@ -0,0 +1,15 @@
+function AddSound(element){
+    let soundClicks = element.getElementsByClassName("sound-click");
+    
+    for (let i = 0; i < soundClicks.length; i++) {
+       soundClicks[i].addEventListener("click", async (event) => {
+            const audio = new Audio('/sounds/snap.wav');
+            audio.type = "audio/wav"
+            audio.play().catch((e)=>{});
+       })
+    }
+}
+
+export {
+    AddSound
+};
--- a/frontend/app/services/Toaster.js
+++ b/frontend/app/services/Toaster.js
@@ -0,0 +1,9 @@
+import { emitter } from './Emitter';
+
+function DisplayToast(color, text, duration = 1000){
+    emitter.emit("toast", {color, text, duration});
+}
+
+export {
+    DisplayToast,
+}
--- a/frontend/app/services/Tooltip.js
+++ b/frontend/app/services/Tooltip.js
@@ -0,0 +1,87 @@
+import { ref } from 'vue';
+import { animate } from 'motion';
+
+let content = ref("");
+let margin = 14;
+
+let cursorX = 0;
+let cursorY = 0;
+
+let showed = false;
+let hided = false;
+
+function ShowTooltip(){
+    let tooltip = document.getElementById('mouse-tooltip');
+
+    tooltip.style.display = "block";
+
+    if(!showed){
+        animate(tooltip, {
+            opacity: [0, 1],
+            translateY: [20, 0]
+        }, {duration: 0.1, ease: 'ease-out'});
+        showed = true;
+        hided = false;
+    }
+}
+
+function HideTooltip(){
+    let tooltip = document.getElementById('mouse-tooltip');
+    
+    
+    if(!hided){
+        animate(tooltip, {
+            opacity: [1, 0],
+            translateY: [0, 20]
+       }, {duration: 0.1, ease: 'ease-in'}).finished.then(() => tooltip.style.display = "none")
+       hided = true;
+       showed = false;
+    }
+}
+
+function AddTooltip(element, val, data = {}){
+    element._dr_tooltip = {value: val, ...data};
+}
+
+function UpdateVisibilityThread(){
+    let tooltip = document.getElementById('mouse-tooltip');
+    let elements = document.elementsFromPoint(cursorX, cursorY);
+
+    let visible = false;
+    for(let i = 0; i < elements.length; i++){
+        let element = elements[i];
+        if(element._dr_tooltip){
+            ShowTooltip();
+            content.value = element._dr_tooltip.value;
+            if(element._dr_tooltip.max_width) tooltip.style.maxWidth = element._dr_tooltip.max_width + "px";
+            else tooltip.style.maxWidth = "none";
+            visible = true;
+            break;
+        }
+    }
+    if(!visible) HideTooltip();
+
+    setTimeout(UpdateVisibilityThread, 0);
+}
+
+function SetupTooltip(){
+    let tooltip = document.getElementById('mouse-tooltip');
+
+    document.addEventListener("mousemove", (event) => {
+        cursorX = event.clientX;
+        cursorY = event.clientY;
+
+        tooltip.style.top = (cursorY + margin) + "px";
+        tooltip.style.left = (cursorX + margin) + "px";
+    });
+
+    UpdateVisibilityThread();
+}
+
+let GetContentRef = () => content;
+
+export {
+    SetupTooltip,
+    GetContentRef,
+    AddTooltip,
+};
--- a/frontend/app/services/User.js
+++ b/frontend/app/services/User.js
@@ -0,0 +1,81 @@
+import { ref } from 'vue';
+import Server from './Server';
+
+const UserStatus = ref(0);
+
+function parseJwt(token) {
+    return JSON.parse(atob(token.split('.')[1]));
+}
+
+function SetUser(token){
+    localStorage.setItem('token', token);
+    UserStatus.value = 1;
+}
+
+async function HasAdmin(){
+    let response = await Server().get('/user/has-admin');
+    return response.data.status != "init";
+}
+
+async function SetUserSetting(key, value){
+    let user = GetUser();
+    if(!user.settings) user.settings = {};
+    user.settings[key] = value;
+    const response = await Server().post('/user/update-settings', { settings: user.settings });
+    return response.data.settings;
+}
+
+async function GetUserSetting(key){
+    const response = await Server().get('/user/get-settings');
+    if (response.data.settings)
+        return response.data.settings[key];
+    return undefined;
+}
+
+function GetUser(){
+    const token = localStorage.getItem('token');
+
+    if(token){
+        const data = parseJwt(token);
+
+        // Check if token is expired
+        const now = Date.now() / 1000;
+        if(now > data.exp){
+            LogoutUser();
+            return undefined;
+        }
+
+        return data;
+    }
+    return undefined;
+}
+
+function IsAdmin(){
+    const user = GetUser();
+    if(user){
+        return user.admin;
+    }
+}
+
+function LoadUser(){
+    const token = localStorage.getItem('token');
+    if(token) UserStatus.value = 1;
+}
+
+function LogoutUser(){
+    localStorage.removeItem("token");
+    localStorage.removeItem("selectedCampaignId");
+    UserStatus.value = 0;
+}
+
+export {
+    UserStatus,
+    GetUser,
+    SetUser,
+    LoadUser,
+    IsAdmin,
+    LogoutUser,
+    HasAdmin,
+    GetUserSetting,
+    SetUserSetting
+}
--- a/frontend/app/services/WindowDefinitions.js
+++ b/frontend/app/services/WindowDefinitions.js
@@ -0,0 +1,42 @@
+import { ClearWindow, GetFirstWindowId } from './Windows'
+
+/*
+Put here all dragonroll windows
+*/
+const defWindows = {
+  example: {
+    title: 'windows.example',
+    component: () => import('~/components/windows/ExampleWindow.vue'),
+  },
+  login: {
+    title: 'windows.login',
+    movable: false,
+    component: () => import('~/components/windows/LoginWindow.vue'),
+  },
+  register: {
+    title: 'windows.register',
+    movable: false,
+    component: () => import('~/components/windows/RegisterWindow.vue'),
+  },
+  main_menu: {
+    title: 'windows.main-menu',
+    component: () => import('~/components/windows/MainMenuWindow.vue'),
+    movable: true
+  },
+  settings: {
+    title: "windows.settings",
+    component: () => import('~/components/windows/SettingsWindow.vue'),
+    close: () => ClearWindow({type: 'settings'}),
+    movable: true
+  },
+  create_campaign: {
+    title: "windows.create-campaign",
+    component: () => import('~/components/windows/CreateCampaignWindow.vue'),
+    close: () => ClearWindow({type: 'create_campaign'}),
+    movable: true
+  }
+}
+
+export {
+    defWindows
+}
--- a/frontend/app/services/Windows.js
+++ b/frontend/app/services/Windows.js
@@ -1,39 +1,28 @@
 import { ref } from 'vue'
+import { defWindows } from './WindowDefinitions';
+import { defineAsyncComponent } from 'vue'
+
+const componentCache = {}
+
+const getComponent = (type) => {
+  if (!componentCache[type]) {
+    componentCache[type] = defineAsyncComponent(
+      defWindows[type].component
+    )
+  }
+
+  return componentCache[type]
+}

 const windows = ref([]);
-
-import LoginWindow from '~/components/windows/LoginWindow.vue';
-
-let windowMap = {
-    login: LoginWindow
-};
-
-async function InjectWindow(window_type, plugin, window_component) {
-    let systemWidows = {};
-    systemWidows[window_type] = (await import(`../../plugins/${plugin}/views/${window_component}.vue`)).default;
-    windowMap = { ...windowMap, ...systemWidows };
-}
-
-// Presets
-const defValues = {
-    'login': {
-        id: 'login',
-        title: 'Login',
-    }
-}
-
-const reload = ref(0);
-
-let ReloadRef = () => { return reload };
-let Windows = () => { return windows };
 let WindowMap = () => { return windowMap };

 let currentIndex = 10;
+let currentId = 0;

 function SetupHandle(id, handle) {

    // Update window info with handle info
-
    let win = GetWindowWithId(id);

    let currentWindowId = "window-wrapper-" + id;
@@ -59,7 +48,9 @@ function SetupHandle(id, handle) {
        SetOnTop(id);
    });

+    // Move window listeners
    handler.addEventListener("mousedown", (event) => {
+        if(!win.movable) return;
        draggingWindow = true;

        let windowRect = currentWindow.getBoundingClientRect();
@@ -67,8 +58,8 @@ function SetupHandle(id, handle) {
        offsetY = windowRect.top - event.clientY;
    })

-    // Move window listeners
    document.addEventListener("mousemove", (event) => {
+        if(!win.movable) return;
        if (!draggingWindow) return;

        if (event.clientX + offsetX < -currentWindow.getBoundingClientRect().width + 20) currentWindow.style.left = (-currentWindow.getBoundingClientRect().width + 20) + "px";
@@ -81,6 +72,7 @@ function SetupHandle(id, handle) {
    })

    document.addEventListener("mouseup", (event) => {
+        if(!win.movable) return;
        draggingWindow = false;
        // ummm suposo que no pots tancar mentres mous?
        SaveWindowPos({ id, x: parseInt(currentWindow.style.left, 10), y: parseInt(currentWindow.style.top, 10) });
@@ -118,6 +110,14 @@ function SetupHandle(id, handle) {
        win.height = parseInt(currentWindow.style.height, 10);
    });

+    // Should move eventually?
+    window.addEventListener('resize', (event) => {
+        for(const w of windows.value){
+            if(w.movable) continue;
+            ResetPosition(w.id, "center");
+        }
+    })
+
    handle.value.setupHandle();
 }

@@ -126,6 +126,11 @@ function SetResizable(id, resizable) {
    win.resizable = resizable;
 }

+function SetMovable(id, movable) {
+    let win = GetWindowWithId(id);
+    win.movable = movable;
+}
+
 function SetSize(id, size) {
    let currentWindowId = "window-wrapper-" + id;
    let currentWindow = document.getElementById(currentWindowId);
@@ -195,66 +200,73 @@ function ResetPosition(id, pos) {


 function CreateWindow(type, data = {}) {
-
-    let finalData = { ...{ type }, ...defValues[type], ...data }
-    console.log(finalData);
-
+    let finalData = { ...{ type, id: currentId }, ...defWindows[type], ...data }
+    currentId++;
+    
    let contains = false;
    for (let i = 0; i < windows.value.length; i++) {
-        if (windows.value[i].id == finalData.id) {
+        if (windows.value[i].type == finalData.type) {
            contains = true;
            break;
        }
    }
    if (!contains) {
        windows.value.push(finalData);
-        console.log("Pushed ", finalData.id);
-        // reload.value += 1;
-
-        console.log(windows.value);
        setTimeout(() => {
-            SetOnTop(finalData.id);
            if (finalData.create) finalData.create();
        }, 0);
    }
 }

 function CreateChildWindow(parentId, type, data = {}) {
-    let finalData = { ...{ type }, ...defValues[type], ...data }
-
+    const newId = currentId;
    let parent = GetWindowWithId(parentId);
-    if (parent.children) parent.children.push(finalData.id);
-    else parent.children = [finalData.id];
+    if (parent.children) parent.children.push(newId); // We will create the child window right now
+    else parent.children = [newId];
    CreateWindow(type, data);
 }

+function GetFirstWindowId(type) {
+    for (let i = 0; i < windows.value.length; i++) {
+        if (windows.value[i].type == type) return windows.value[i].id;
+    }
+}
+
 function ClearAll() {
    Object.keys(windows).forEach((key) => {
        windows.value = [];
    });
 }

-function ClearWindows(data) {
-    for (let i = 0; i < windows.value.length; i++) {
-        ClearWindow(windows.value[i].id);
-    }
-    // reload.value += 1;
-}
-
-function ClearWindow(id) {
+function clearWindowById(id){
    let win = GetWindowWithId(id);
    if (!win) return;
-    if (win.children) for (let i = 0; i < win.children.length; i++) ClearWindow(win.children[i]);
-    windows.value = windows.value.filter((e) => { return e.id !== id });
+    if (win.children) for (let i = 0; i < win.children.length; i++) clearWindowById(win.children[i]);
+    const index = windows.value.findIndex(w => w.id === id)
+    if (index !== -1) windows.value.splice(index, 1)
+}
+
+function ClearWindow(selector) {
+    if(selector.type !== undefined) {
+        const type = selector.type;
+        for(let i = 0; i < windows.value.length; i++) {
+            if(windows.value[i].type == type) {
+                clearWindowById(windows.value[i].id);
+                break;
+            }
+        }
+    }
+    if(selector.id !== undefined) {
+        const id = selector.id;
+        clearWindowById(id);
+    }
+    
    // reload.value += 1;
 }

 function GetWindowWithId(id) {
-    for (let i = 0; i < windows.value.length; i++) {
-        if (windows.value[i].id == id) {
-            return windows.value[i];
-        }
-    }
+    const index = windows.value.findIndex(w => w.id === id);
+    if (index !== -1) return windows.value[index];
 }

 function CallWindow(id, callableName, arg) {
@@ -273,29 +285,39 @@ function SetOnTop(id) {
    let currentWindowId = "window-wrapper-" + id;
    let currentWindow = document.getElementById(currentWindowId);

-    currentIndex += 1;
-    currentWindow.style.zIndex = currentIndex;
+    try {
+        currentIndex += 1;
+        currentWindow.style.zIndex = currentIndex;
+    } catch(e) {}
+}
+
+function Top(element) {
+    try {
+        currentIndex += 1;
+        element.value.style.zIndex = currentIndex;
+    } catch(e) {}
 }

 export {
+    windows,
    SetupHandle,
    SetSize,
    SetResizable,
    SetMaxSize,
    SetMinSize,
    SetPosition,
+    SetMovable,
    ResetPosition,
-    Windows,
    WindowMap,
-    InjectWindow,
-    ReloadRef,
-    ClearWindows,
    CreateWindow,
    CreateChildWindow,
+    GetFirstWindowId,
    CallWindow,
    GetWindowWithId,
    SaveWindowPos,
    GetPosition,
    ClearWindow,
-    ClearAll
+    ClearAll,
+    Top,
+    getComponent
 }
--- a/frontend/app/services/widgets/DiceParser.js
+++ b/frontend/app/services/widgets/DiceParser.js
@@ -0,0 +1,134 @@
+// DiceParser.js
+
+function roll(sides) {
+  return Math.floor(Math.random() * sides) + 1;
+}
+
+function tokenize(expr) {
+  const re = /(\d*d\d+(?:adv|dis|kh\d+|kl\d+)?|\d+|[+\-*\/()])/gi;
+  const tokens = [];
+  let m;
+  while ((m = re.exec(expr)) !== null) tokens.push(m[0].toLowerCase());
+  return tokens;
+}
+
+function parseDiceToken(tok) {
+  const m = tok.match(/^(\d*)d(\d+)(adv|dis|kh(\d+)|kl(\d+))?$/i);
+  if (!m) return null;
+  const count = parseInt(m[1] || '1');
+  const sides = parseInt(m[2]);
+  const mod = (m[3] || '').toLowerCase();
+  if (count < 1 || count > 1000 || sides < 2 || sides > 10000)
+    throw new Error(`Invalid dice: ${tok}`);
+  return { count, sides, mod };
+}
+
+export function parse(expr) {
+  const tokens = tokenize(expr);
+  if (!tokens.length) throw new Error('Empty expression');
+  let pos = 0;
+
+  const peek = () => tokens[pos];
+  const consume = () => tokens[pos++];
+
+  function parseExpr() { return parseAddSub(); }
+
+  function parseAddSub() {
+    let left = parseMulDiv();
+    while (peek() === '+' || peek() === '-') {
+      const op = consume();
+      const right = parseMulDiv();
+      left = {
+        value: op === '+' ? left.value + right.value : left.value - right.value,
+        steps: [...left.steps, { type: 'op', op }, ...right.steps],
+      };
+    }
+    return left;
+  }
+
+  function parseMulDiv() {
+    let left = parseUnary();
+    while (peek() === '*' || peek() === '/') {
+      const op = consume();
+      const right = parseUnary();
+      if (op === '/' && right.value === 0) throw new Error('Division by zero');
+      left = {
+        value: op === '*' ? left.value * right.value : Math.floor(left.value / right.value),
+        steps: [...left.steps, { type: 'op', op }, ...right.steps],
+      };
+    }
+    return left;
+  }
+
+  function parseUnary() {
+    if (peek() === '-') {
+      consume();
+      const r = parsePrimary();
+      return { value: -r.value, steps: [{ type: 'op', op: '-' }, ...r.steps] };
+    }
+    return parsePrimary();
+  }
+
+  function parsePrimary() {
+    const tok = peek();
+    if (!tok) throw new Error('Unexpected end of expression');
+
+    if (tok === '(') {
+      consume();
+      const inner = parseExpr();
+      if (peek() !== ')') throw new Error('Missing closing )');
+      consume();
+      return {
+        value: inner.value,
+        steps: [{ type: 'op', op: '(' }, ...inner.steps, { type: 'op', op: ')' }],
+      };
+    }
+
+    const diceInfo = parseDiceToken(tok);
+    if (diceInfo) {
+      consume();
+      return rollDice(diceInfo);
+    }
+
+    if (/^\d+$/.test(tok)) {
+      consume();
+      const v = parseInt(tok);
+      return { value: v, steps: [{ type: 'const', value: v }] };
+    }
+
+    throw new Error(`Unexpected token: ${tok}`);
+  }
+
+  function rollDice({ count, sides, mod }) {
+    let rawRolls, kept;
+
+    if (mod === 'adv') {
+      rawRolls = [roll(sides), roll(sides)];
+      kept = [Math.max(...rawRolls)];
+    } else if (mod === 'dis') {
+      rawRolls = [roll(sides), roll(sides)];
+      kept = [Math.min(...rawRolls)];
+    } else if (mod.startsWith('kh')) {
+      const k = parseInt(mod.slice(2));
+      rawRolls = Array.from({ length: count }, () => roll(sides));
+      kept = [...rawRolls].sort((a, b) => b - a).slice(0, k);
+    } else if (mod.startsWith('kl')) {
+      const k = parseInt(mod.slice(2));
+      rawRolls = Array.from({ length: count }, () => roll(sides));
+      kept = [...rawRolls].sort((a, b) => a - b).slice(0, k);
+    } else {
+      rawRolls = Array.from({ length: count }, () => roll(sides));
+      kept = rawRolls.slice();
+    }
+
+    const entry = { sides, rawRolls, kept, mod, value: kept.reduce((a, b) => a + b, 0) };
+    return {
+      value: entry.value,
+      steps: [{ type: 'dice', entry }],
+    };
+  }
+
+  const result = parseExpr();
+  if (pos < tokens.length) throw new Error(`Unexpected token: ${tokens[pos]}`);
+  return { total: result.value, steps: result.steps };
+}
--- a/frontend/i18n/locales.ts
+++ b/frontend/i18n/locales.ts
@@ -0,0 +1,17 @@
+export const locales = [
+  {
+    code: 'en',
+    name: 'English',
+    flag: '🇬🇧'
+  },
+  {
+    code: 'es',
+    name: 'Español',
+    flag: '🇪🇸'
+  },
+  {
+    code: 'ca',
+    name: 'Català',
+    flag: '<27>🇸'
+  }
+]
--- a/frontend/i18n/locales/ca.json
+++ b/frontend/i18n/locales/ca.json
@@ -0,0 +1 @@
+{}
--- a/frontend/i18n/locales/ca/general.json
+++ b/frontend/i18n/locales/ca/general.json
@@ -0,0 +1 @@
+{}
--- a/frontend/i18n/locales/ca/login.json
+++ b/frontend/i18n/locales/ca/login.json
@@ -0,0 +1,14 @@
+{
+    "username": "Usuari o correu electrònic",
+    "username-placeholder": "Introdueix el teu usuari o correu electrònic...",
+    "password": "Contrasenya",
+    "password-placeholder": "Introdueix la teva contrasenya...",
+    "log-in": "Inicia sessió",
+    "no-account": "No tens un compte?",
+    "register": "Registra't",
+    "errors": {
+        "invalid-credentials": "Usuari/correu o contrasenya incorrectes.",
+        "params": "Si us plau, introdueix usuari/correu i contrasenya."
+    },
+    "success": "Inici de sessió correcte!"
+}
--- a/frontend/i18n/locales/ca/main-menu.json
+++ b/frontend/i18n/locales/ca/main-menu.json
@@ -0,0 +1,7 @@
+{
+    "main-menu": "Menú principal",
+    "edit-profile": "Editar perfil",
+    "create-campaign": "Crear campanya",
+    "log-out": "Tanca la sessió",
+    "settings": "Configuració"
+}
--- a/frontend/i18n/locales/ca/register.json
+++ b/frontend/i18n/locales/ca/register.json
@@ -0,0 +1,27 @@
+{
+    "name": "Nom",
+    "name-placeholder": "Introdueix el teu nom...",
+    "email": "Correu electrònic",
+    "email-placeholder": "Introdueix el teu correu electrònic...",
+    "username": "Usuari",
+    "username-placeholder": "Introdueix el teu nom d'usuari...",
+    "password": "Contrasenya",
+    "password-placeholder": "Introdueix la teva contrasenya...",
+    "confirm-password": "Confirma la contrasenya",
+    "confirm-password-placeholder": "Torna a introduir la contrasenya...",
+    "register": "Registra't",
+    "have-account": "Ja tens un compte?",
+    "login": "Inicia sessió",
+    "password-confirm-placeholder": "Confirma la teva contrasenya...",
+    "welcome": "Benvingut a DragonRoll!",
+    "message": "Si us plau, introdueix el nom d'usuari i la contrasenya que desitges per crear un compte.",
+    "first-register-message": "Estàs a punt de crear el primer compte en aquesta instància de DragonRoll. Aquest compte tindrà privilegis d'administrador.",
+    "errors": {
+        "name-empty": "Si us plau, introdueix el teu nom.",
+        "email-empty": "Si us plau, introdueix un correu electrònic vàlid.",
+        "username-empty": "Si us plau, introdueix un nom d'usuari.",
+        "passwords-no-match": "Les contrasenyes no coincideixen.",
+        "email-username-exists": "Ja existeix un compte amb aquest correu electrònic o nom d'usuari."
+    },
+    "success": "Registre correcte! Ara pots iniciar sessió."
+}
--- a/frontend/i18n/locales/ca/settings.json
+++ b/frontend/i18n/locales/ca/settings.json
@@ -0,0 +1,13 @@
+{
+    "tabs": {
+        "account-settings": "Configuració del compte",
+        "site-administration": "Administració del lloc"
+    },
+    "account-settings": {
+        "appearance": "Aparença",
+        "language": "Idioma"
+    },
+    "site-administration": {
+        "manage-accounts": "Gestiona els comptes"
+    }
+}
--- a/frontend/i18n/locales/ca/windows.json
+++ b/frontend/i18n/locales/ca/windows.json
@@ -0,0 +1,9 @@
+{
+    "login": "Inicia sessió",
+    "register": "Registra't",
+    "main-menu": "Dragonroll",
+    "example": "Finestra d'exemple",
+    "edit-profile": "Editar perfil",
+    "settings": "Configuració",
+    "create-campaign": "Crear campanya"
+}
--- a/frontend/i18n/locales/en.json
+++ b/frontend/i18n/locales/en.json
@@ -0,0 +1 @@
+{}
--- a/frontend/i18n/locales/en/campaigns.json
+++ b/frontend/i18n/locales/en/campaigns.json
@@ -0,0 +1,10 @@
+{
+    "create": {
+        "name": "Name",
+        "description": "Description",
+        "description-placeholder": "Enter a brief description for your campaign...",
+        "enter": "Enter campaign name here...",
+        "color": "Accent color",
+        "success": "Campaign created successfully!"
+    }
+}
--- a/frontend/i18n/locales/en/general.json
+++ b/frontend/i18n/locales/en/general.json
@@ -0,0 +1,10 @@
+{
+    "errors": {
+        "internal": "An internal error occurred."
+    },
+    "create": "Create",
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "open": "Open"
+}
--- a/frontend/i18n/locales/en/login.json
+++ b/frontend/i18n/locales/en/login.json
@@ -0,0 +1,15 @@
+
+{
+    "username": "Username or email",
+    "username-placeholder": "Enter your username or email here...",
+    "password": "Password",
+    "password-placeholder": "Enter your password...",
+    "log-in": "Log in",
+    "no-account": "You don't have an account?",
+    "register": "Register",
+    "errors": {
+        "invalid-credentials": "Invalid username/email or password.",
+        "params": "Please enter both username/email and password."
+    },
+    "success": "Login successful!"
+}
--- a/frontend/i18n/locales/en/main-menu.json
+++ b/frontend/i18n/locales/en/main-menu.json
@@ -0,0 +1,7 @@
+{
+    "main-menu": "Main menu",
+    "edit-profile": "Edit profile",
+    "create-campaign": "Create Campaign",
+    "log-out": "Log out",
+    "settings": "Settings"
+}
--- a/frontend/i18n/locales/en/register.json
+++ b/frontend/i18n/locales/en/register.json
@@ -0,0 +1,27 @@
+{
+    "name": "Name",
+    "name-placeholder": "Enter your name here...",
+    "email": "Email",
+    "email-placeholder": "Enter your email here...",
+    "username": "Username",
+    "username-placeholder": "Enter your username here...",
+    "password": "Password",
+    "password-placeholder": "Enter your password...",
+    "confirm-password": "Confirm Password",
+    "confirm-password-placeholder": "Re-enter your password...",
+    "register": "Register",
+    "have-account": "Already have an account?",
+    "login": "Login",
+    "password-confirm-placeholder": "Confirm your password...",
+    "welcome": "Welcome to DragonRoll!",
+    "message": "Please enter your desired username and password to create an account.",
+    "first-register-message": "You are about to create the first account on this DragonRoll instance. This account will be granted administrator privileges.",
+    "errors": {
+        "name-empty": "Please enter your name.",
+        "email-empty": "Please enter a valid email address.",
+        "username-empty": "Please enter a username.",
+        "passwords-no-match": "The passwords you entered do not match.",
+        "email-username-exists": "An account with this email or username already exists."
+    },
+    "success": "Registration successful! You can now log in."
+}
--- a/frontend/i18n/locales/en/settings.json
+++ b/frontend/i18n/locales/en/settings.json
@@ -0,0 +1,13 @@
+{
+    "tabs": {
+        "account-settings": "Account settings",
+        "site-administration": "Site administration"
+    },
+    "account-settings": {
+        "appearance": "Appearance",
+        "language": "Language"
+    },
+    "site-administration": {
+        "manage-accounts": "Manage accounts"
+    }
+}
--- a/frontend/i18n/locales/en/windows.json
+++ b/frontend/i18n/locales/en/windows.json
@@ -0,0 +1,9 @@
+{
+    "login": "Login",
+    "register": "Register",
+    "main-menu": "Dragonroll",
+    "example": "Example Window",
+    "edit-profile": "Edit Profile",
+    "settings": "Settings",
+    "create-campaign": "Create Campaign"
+}
--- a/frontend/i18n/locales/es.json
+++ b/frontend/i18n/locales/es.json
@@ -0,0 +1 @@
+{}
--- a/frontend/i18n/locales/es/general.json
+++ b/frontend/i18n/locales/es/general.json
@@ -0,0 +1 @@
+{}
--- a/frontend/i18n/locales/es/login.json
+++ b/frontend/i18n/locales/es/login.json
@@ -0,0 +1,14 @@
+{
+    "username": "Usuario o correo electrónico",
+    "username-placeholder": "Introduce tu usuario o correo electrónico...",
+    "password": "Contraseña",
+    "password-placeholder": "Introduce tu contraseña...",
+    "log-in": "Iniciar sesión",
+    "no-account": "¿No tienes una cuenta?",
+    "register": "Registrarse",
+    "errors": {
+        "invalid-credentials": "Usuario/correo o contraseña incorrectos.",
+        "params": "Por favor, introduce usuario/correo y contraseña."
+    },
+    "success": "¡Inicio de sesión exitoso!"
+}
--- a/frontend/i18n/locales/es/main-menu.json
+++ b/frontend/i18n/locales/es/main-menu.json
@@ -0,0 +1,7 @@
+{
+    "main-menu": "Menú principal",
+    "edit-profile": "Editar perfil",
+    "create-campaign": "Crear campanya",
+    "log-out": "Cerrar sesión",
+    "settings": "Configuración"
+}
--- a/frontend/i18n/locales/es/register.json
+++ b/frontend/i18n/locales/es/register.json
@@ -0,0 +1,27 @@
+{
+    "name": "Nombre",
+    "name-placeholder": "Introduce tu nombre...",
+    "email": "Correo electrónico",
+    "email-placeholder": "Introduce tu correo electrónico...",
+    "username": "Usuario",
+    "username-placeholder": "Introduce tu nombre de usuario...",
+    "password": "Contraseña",
+    "password-placeholder": "Introduce tu contraseña...",
+    "confirm-password": "Confirmar contraseña",
+    "confirm-password-placeholder": "Vuelve a introducir tu contraseña...",
+    "register": "Registrarse",
+    "have-account": "¿Ya tienes una cuenta?",
+    "login": "Iniciar sesión",
+    "password-confirm-placeholder": "Confirma tu contraseña...",
+    "welcome": "¡Bienvenido a DragonRoll!",
+    "message": "Por favor, introduce el usuario y la contraseña que deseas para crear una cuenta.",
+    "first-register-message": "Estás a punto de crear la primera cuenta en esta instancia de DragonRoll. Esta cuenta tendrá privilegios de administrador.",
+    "errors": {
+        "name-empty": "Por favor, introduce tu nombre.",
+        "email-empty": "Por favor, introduce un correo electrónico válido.",
+        "username-empty": "Por favor, introduce un nombre de usuario.",
+        "passwords-no-match": "Las contraseñas no coinciden.",
+        "email-username-exists": "Ya existe una cuenta con este correo electrónico o nombre de usuario."
+    },
+    "success": "¡Registro exitoso! Ahora puedes iniciar sesión."
+}
--- a/frontend/i18n/locales/es/settings.json
+++ b/frontend/i18n/locales/es/settings.json
@@ -0,0 +1,13 @@
+{
+    "tabs": {
+        "account-settings": "Configuración de la cuenta",
+        "site-administration": "Administración del sitio"
+    },
+    "account-settings": {
+        "appearance": "Apariencia",
+        "language": "Idioma"
+    },
+    "site-administration": {
+        "manage-accounts": "Gestionar cuentas"
+    }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aran Roig	94e2b8bd47	Link support 1/2 All checks were successful Build and Deploy Nuxt / build (push) Successful in 59s Details	2026-05-03 01:02:13 +02:00
Aran Roig	030060286f	Dice rollers! All checks were successful Build and Deploy Nuxt / build (push) Successful in 58s Details	2026-05-02 23:37:17 +02:00
Aran Roig	b7ad2dc406	Yes All checks were successful Build and Deploy Nuxt / build (push) Successful in 1m1s Details	2026-05-02 18:41:57 +02:00
Aran Roig	2023542229	Now yes All checks were successful Build and Deploy Nuxt / build (push) Successful in 15s Details	2026-05-02 18:39:23 +02:00
Aran Roig	eaac266ebb	2 All checks were successful Build and Deploy Nuxt / build (push) Successful in 55s Details	2026-05-02 18:34:05 +02:00
Aran Roig	ed782f2fc6	Git fix All checks were successful Build and Deploy Nuxt / build (push) Successful in 11s Details	2026-05-02 18:30:44 +02:00
Aran Roig	f2fd36664c	XD All checks were successful Build and Deploy Nuxt / build (push) Successful in 53s Details	2026-05-02 17:25:41 +02:00
Aran Roig	456a0490a7	si All checks were successful Build and Deploy Nuxt / build (push) Successful in 40s Details	2026-05-02 17:18:14 +02:00
Aran Roig	306dd8cabc	Second test Some checks failed Build and Deploy Nuxt / build (push) Failing after 9s Details	2026-05-02 17:17:21 +02:00
Aran Roig	50b3e421df	Test2 All checks were successful Build and Deploy Nuxt / build (push) Successful in 41s Details	2026-05-02 17:12:32 +02:00
Aran Roig	963295e76b	sisi All checks were successful Build and Deploy Nuxt / build (push) Successful in 41s Details	2026-05-02 17:05:20 +02:00
Aran Roig	e12b48b3e1	si	2026-05-02 17:04:37 +02:00
Aran Roig	b0509818b2	Fixed api endpoints All checks were successful Build and Deploy Nuxt / build (push) Successful in 54s Details	2026-05-02 16:53:15 +02:00
Aran Roig	ee553eae82	Solved backend problem All checks were successful Build and Deploy Nuxt / build (push) Successful in 40s Details	2026-05-02 16:44:24 +02:00
Aran Roig	8c230d3596	Ahora si All checks were successful Build and Deploy Nuxt / build (push) Successful in 42s Details	2026-05-02 16:40:00 +02:00
Aran Roig	da3e015631	CI/CD should work All checks were successful Build and Deploy Nuxt / build (push) Successful in 30s Details	2026-05-02 16:36:46 +02:00
Aran Roig	f532152d57	jdsjkdj Some checks failed Build and Deploy Nuxt / build (push) Failing after 10s Details	2026-05-02 16:29:48 +02:00
Aran Roig	818ae39e34	jkdsjkjd Some checks failed Build and Deploy Nuxt / build (push) Has been cancelled Details	2026-05-02 16:28:26 +02:00
Aran Roig	836f42be4d	Test2 Some checks failed Build and Deploy Nuxt / build (push) Has been cancelled Details	2026-05-02 16:17:52 +02:00
Aran Roig	3fdced84bf	CI/CD test Some checks failed Build and Deploy Nuxt / build (push) Has been cancelled Details	2026-05-02 16:15:36 +02:00
BinarySandia04	139e7d0ef5	Widgets work All checks were successful Build and Deploy Nuxt / build (push) Successful in 35s Details	2026-04-30 19:39:53 +02:00
BinarySandia04	ffb23b08eb	Started widgets All checks were successful Build and Deploy Nuxt / build (push) Successful in 32s Details	2026-04-29 21:22:25 +02:00
BinarySandia04	e6d66529e3	ye All checks were successful Build and Deploy Nuxt / build (push) Successful in 52s Details	2026-04-29 01:32:09 +02:00
BinarySandia04	76bb9fbb30	A lot of progress All checks were successful Build and Deploy Nuxt / build (push) Successful in 36s Details	2026-04-28 00:20:15 +02:00
BinarySandia04	b928212608	Whatever	2026-04-27 20:29:21 +02:00
BinarySandia04	329ed5adb0	Good	2026-04-27 18:48:17 +02:00
Aran Roig	7f48a725d8	Something All checks were successful Build and Deploy Nuxt / build (push) Successful in 32s Details	2026-04-27 11:00:31 +02:00
Aran Roig	c7aac117c7	More things work now All checks were successful Build and Deploy Nuxt / build (push) Successful in 34s Details	2026-04-27 00:42:14 +02:00
Aran Roig	2b07cc98a6	Whatever ClearWindow needs to be in json All checks were successful Build and Deploy Nuxt / build (push) Successful in 42s Details	2026-04-26 22:57:29 +02:00
Aran Roig	475887420c	Added icon change All checks were successful Build and Deploy Nuxt / build (push) Successful in 39s Details	2026-04-26 21:12:08 +02:00
Aran Roig	9048bb0f11	Added things	2026-04-26 18:14:29 +02:00
Aran Roig	2ec52a78cf	Dark mode All checks were successful Build and Deploy Nuxt / build (push) Successful in 8s Details	2026-04-26 01:00:14 +02:00
Aran Roig	b69e571202	Enough for today All checks were successful Build and Deploy Nuxt / build (push) Successful in 49s Details	2026-04-26 00:52:59 +02:00
Aran Roig	c3e5448597	backup	2026-04-26 00:08:27 +02:00
				`@@ -0,0 +1 @@`
				`NUXT_PUBLIC_API_BASE_URL=https://dragonroll.aranroig.com/api`