Sheet/New/ageofficial (#23)

## Submission Checklist
- [x] The Pull Request title contains the **short name** of the sheet
being submitted.
- [x] The Pull Request title states the **type of change** being
submitted (New/Update/Bugfix/etc.).
- [x] I have authorization from the game's publisher to make this an
official sheet on Roll20 with their name attached.
- [x] This game is not a traditionally published game, but a copy of the
game rules can be purchased/downloaded/found at: < >
- [x] This sheet is for an unofficial fan game, modification to an
existing game, or a homebrew system.

## New Sheet Checklist
If you are submitting a new sheet to the repository, please fill in any
empty spaces indicated by `< >`.

- The full name of the game associated with the sheet is: `<AGE System>`
  - _(i.e. Dungeons & Dragons 5th Edition, The Dresden Files RPG)_
- The name of this game system/family associated with the sheet is:
`<Fantasy AGE, Modern AGE, Blue Rose>`
  - _(i.e. Dungeons & Dragons, FATE)_
- The publisher of the game associated with the sheet is: `<Green Ronin
Publishing>`
  - _(i.e. Wizards of the Coast, Evil Hat)_

The information that is provided here will be used to help users find
the sheet in Roll20 Tabletop and Roll20 Characters. Please make sure
that all names that you provide read exactly how you'd like them to be
displayed. To see example of where this information will show up, create
a new game on Roll20. The Name and the publisher will show up in the
dropdown menu and as the title of the sheet that is selected.

Please check any that apply:

# Changes / Description (optional)

Provide any notes relevant to this pull request here. This can include a
description of the code changes, references to related pull requests,
etc.

## More Help

Additional information for the beacon sdk can be found at the
[Beacon SDK Documentation
Site](https://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/).
You can also post additional questions using the
[Beacon Community GitHub Issues
Tab](https://github.com/Roll20/roll20-beacon-sheets/issues).

ageofficial/.eslintrc.cjs

@@ -0,0 +1,28 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/no-mutating-props': 'off'
+  }
+}

ageofficial/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+public/*

ageofficial/.prettierignore

@@ -0,0 +1,2 @@
+*.handlebars
+*.hbs

ageofficial/README.md

@@ -0,0 +1,118 @@
+# Advanced Beacon Example Sheet
+
+This is an advanced sheet example, it is setup as with:
+* Vue framework
+* Vue Routing
+* Multiple Data stores
+* Complex Roll Templates
+* Rich Sheet Actions
+* Typescript
+* Vite
+* SCSS
+* Ability to run Unit Tests
+* Ability to run End to End Tests
+
+Comments have been added to the files in this project to better explain their intent and suggested implementation.
+
+![an example of the default sheet homepage](preview.png)
+
+## Getting Started
+
+### Accessing the Beacon SDK
+
+Add `@roll20-official/beacon-sdk` to your `package.json`.
+
+```sh
+npm i @roll20-official/beacon-sdk
+```
+
+
+### Install Dependencies
+
+Before doing anything else you have to install the packages this project depends on. 
+
+```sh
+npm install
+```
+
+Now that you have the project's dependencies installed you can run the vite server, to start testing changes to the project. To do so there are two ways you can boot up the server:
+
+### Offline development
+```sh
+npm run dev
+```
+
+This will run the vite server, with the default port and environment set to development. What this means is that the project will read a mock Relay that allows you to open your project in any web browser by going to `http://localhost:5173`.
+
+This is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connect to the VTT or Roll20 Characters. Such as when working on stying, mocking up environment, building Vue components, testing functionality, etc..
+
+While in development mode, you will not be able to save or access existing character data, or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality such as dice rolling and token manipulation.
+
+### Sandbox development
+```sh
+npm run sandbox
+```
+
+This command will firstly build the SCSS files and then run the vite server with the port set to 7620 and environment set to staging mode. This sets the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.
+
+In order to test your changes in the VTT custom sheet sandbox, you will need to add the follwoing to the sheet.json editor in the games settings:
+```
+{
+  "advanced": true,
+  "advancedPort": 7620
+}
+```
+
+### Ci Check
+```sh
+npm run ci-check
+```
+
+This command will run a number of things to make sure your code is as optimal as possible including formatting, linting, type checking, unit tests, and end to end tests.
+Think of this as a sanity check that you can leverage when pushing a big release for your sheet!
+
+
+## Below is a list of other available commands for this project  
+### Hot reload and build css for roll templates
+```sh
+npm run watch-scss
+```
+
+### Eslint Files
+```sh
+npm run lint
+```
+
+### Format with prettier
+```sh
+npm run format
+```
+
+### Type Check with typescript
+```sh
+npm run type-check
+```
+
+### Unit Test with Vitest
+```sh
+npm run test:unit
+```
+
+### Open up and develop local End To End Tests with Cypress
+```sh
+npm run test:e2e:open:local
+```
+
+### Run local End To End Tests with Cypress
+```sh
+npm run test:e2e:local
+```
+
+### Run CDN Hosted End To End Tests with Cypress
+```sh
+npm run test:e2e
+```
+
+## Deploying your sheet
+
+Details for this coming soon!

ageofficial/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AGE System Beacon Sheet</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>