Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f32b59fef3 |
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
|
||||||
|
charset = utf-8
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
end_of_line = lf
|
||||||
|
max_line_length = 100
|
||||||
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
* text=auto eol=lf
|
||||||
33
.gitignore
vendored
Normal file
33
.gitignore
vendored
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# 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?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
test-results/
|
||||||
|
playwright-report/
|
||||||
6
.prettierrc.json
Normal file
6
.prettierrc.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
||||||
11
.vscode/extensions.json
vendored
Normal file
11
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"vitest.explorer",
|
||||||
|
"ms-playwright.playwright",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"EditorConfig.EditorConfig",
|
||||||
|
"oxc.oxc-vscode",
|
||||||
|
"esbenp.prettier-vscode"
|
||||||
|
]
|
||||||
|
}
|
||||||
64
README.md
Normal file
64
README.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
# cypher-player-assistant
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn test:unit
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run End-to-End Tests with [Playwright](https://playwright.dev)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Install browsers for the first run
|
||||||
|
npx playwright install
|
||||||
|
|
||||||
|
# When testing on CI, must build the project first
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# Runs the end-to-end tests
|
||||||
|
yarn test:e2e
|
||||||
|
# Runs the tests only on Chromium
|
||||||
|
yarn test:e2e --project=chromium
|
||||||
|
# Runs the tests of a specific file
|
||||||
|
yarn test:e2e tests/example.spec.ts
|
||||||
|
# Runs the tests in debug mode
|
||||||
|
yarn test:e2e --debug
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn lint
|
||||||
|
```
|
||||||
4
e2e/tsconfig.json
Normal file
4
e2e/tsconfig.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/node22/tsconfig.json",
|
||||||
|
"include": ["./**/*"]
|
||||||
|
}
|
||||||
8
e2e/vue.spec.ts
Normal file
8
e2e/vue.spec.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
// See here how to get started:
|
||||||
|
// https://playwright.dev/docs/intro
|
||||||
|
test('visits the app root url', async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
await expect(page.locator('h1')).toHaveText('You did it!');
|
||||||
|
})
|
||||||
36
eslint.config.ts
Normal file
36
eslint.config.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { globalIgnores } from 'eslint/config'
|
||||||
|
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
|
||||||
|
import pluginVue from 'eslint-plugin-vue'
|
||||||
|
import pluginVitest from '@vitest/eslint-plugin'
|
||||||
|
import pluginPlaywright from 'eslint-plugin-playwright'
|
||||||
|
import pluginOxlint from 'eslint-plugin-oxlint'
|
||||||
|
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
|
||||||
|
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
|
||||||
|
// import { configureVueProject } from '@vue/eslint-config-typescript'
|
||||||
|
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
|
||||||
|
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
|
||||||
|
|
||||||
|
export default defineConfigWithVueTs(
|
||||||
|
{
|
||||||
|
name: 'app/files-to-lint',
|
||||||
|
files: ['**/*.{ts,mts,tsx,vue}'],
|
||||||
|
},
|
||||||
|
|
||||||
|
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
|
||||||
|
|
||||||
|
pluginVue.configs['flat/essential'],
|
||||||
|
vueTsConfigs.recommended,
|
||||||
|
|
||||||
|
{
|
||||||
|
...pluginVitest.configs.recommended,
|
||||||
|
files: ['src/**/__tests__/*'],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
...pluginPlaywright.configs['flat/recommended'],
|
||||||
|
files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
|
||||||
|
},
|
||||||
|
...pluginOxlint.configs['flat/recommended'],
|
||||||
|
skipFormatting,
|
||||||
|
)
|
||||||
796
index.html
796
index.html
@@ -1,785 +1,13 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale: 1">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<title>Cypher Player Assistant</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" type="text/css" href="static/reset.css">
|
<title>Vite App</title>
|
||||||
<style>
|
</head>
|
||||||
/* Themes and theme switcher */
|
<body>
|
||||||
:root {
|
<div id="app"></div>
|
||||||
/* Dark Color Scheme */
|
<script type="module" src="/src/main.ts"></script>
|
||||||
--dark-bg: #111111;
|
</body>
|
||||||
--dark-text: #eeeeee;
|
|
||||||
--dark-box-border: #333333;
|
|
||||||
--dark-hl-box-border: #cccccc;
|
|
||||||
|
|
||||||
/* Light Color Scheme */
|
|
||||||
--light-bg: #eeeeee;
|
|
||||||
--light-text: #111111;
|
|
||||||
--light-box-border: #cccccc;
|
|
||||||
--light-hl-box-border: #333333;
|
|
||||||
|
|
||||||
/* Defaults */
|
|
||||||
--bg: var(--light-bg);
|
|
||||||
--text: var(--light-text);
|
|
||||||
--box-border: var(--light-box-border);
|
|
||||||
--hl-box-border: var(--light-hl-box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper {
|
|
||||||
--bg: var(--dark-bg);
|
|
||||||
--text: var(--dark-text);
|
|
||||||
--box-border: var(--dark-box-border);
|
|
||||||
--hl-box-border: var(--dark-hl-box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode-hide {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light-mode-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--bg: var(--dark-bg);
|
|
||||||
--text: var(--dark-text);
|
|
||||||
--box-border: var(--dark-box-border);
|
|
||||||
--hl-box-border: var(--dark-hl-box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper {
|
|
||||||
--bg: var(--light-bg);
|
|
||||||
--text: var(--light-text);
|
|
||||||
--box-border: var(--light-box-border);
|
|
||||||
--hl-box-border: var(--light-hl-box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light-mode-hide {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-scheme-wrapper {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
#color-scheme-changer {
|
|
||||||
position: fixed;
|
|
||||||
text-align: center;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
font-size: 150%;
|
|
||||||
width: 1.5em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-scheme-toggle {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-scheme-toggle span {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode-hide, .light-mode-hide {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode-hide {
|
|
||||||
background-color: var(--dark-bg);
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.light-mode-hide {
|
|
||||||
background-color: var(--light-bg);
|
|
||||||
color: var(--light-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Outline and generic styles */
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
width: 100%;
|
|
||||||
font-family: serif;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#warn-no-local-storage {
|
|
||||||
display: none;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
width: 80%;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: var(--box-border);
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 0 auto 1em auto;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box h2 {
|
|
||||||
display: initial;
|
|
||||||
position: relative;
|
|
||||||
top: -1.8em;
|
|
||||||
padding: 0 .5em;
|
|
||||||
color: var(--hl-box-border);
|
|
||||||
background-color: var(--bg);
|
|
||||||
font-size: 100%;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box h2::after {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
margin-bottom: -1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
border: 1px solid var(--hl-box-border);
|
|
||||||
background-color: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=number] {
|
|
||||||
width: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[disabled] {
|
|
||||||
border-color: var(--box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.warn {
|
|
||||||
color: red;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Character roster box */
|
|
||||||
|
|
||||||
#cont-character-roster {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btn-create-character {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* No character loaded box (AKA the welcome screen) */
|
|
||||||
|
|
||||||
#cont-no-loaded {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.or {
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin: .5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Character sheet */
|
|
||||||
|
|
||||||
#cont-character-sheet {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cont-character-id {
|
|
||||||
margin: -2em 0 .5em 0;
|
|
||||||
color: var(--box-border);
|
|
||||||
font-size: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cont-character-id::before {
|
|
||||||
content: "ID: ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container {
|
|
||||||
display: inline-block;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: var(--box-border);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 32%;
|
|
||||||
padding: .6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container:has(> h3 > input[name=pool-selector]:checked) {
|
|
||||||
border-color: var(--hl-box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[name=pool-selector] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container h4 {
|
|
||||||
color: var(--hl-box-border);
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input unlockers */
|
|
||||||
|
|
||||||
.input-unlocker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-unlocker + label > .input-locked {
|
|
||||||
display: initial;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-unlocker + label > .input-unlocked {
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-unlocker:checked + label > .input-locked {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-unlocker:checked + label .input-unlocked {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ability use box */
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<input id="color-scheme" type="checkbox">
|
|
||||||
<div class="color-scheme-wrapper">
|
|
||||||
<div id="color-scheme-changer">
|
|
||||||
<label for="color-scheme" id="color-scheme-toggle">
|
|
||||||
<span class="dark-mode-hide">☽</span>
|
|
||||||
<span class="light-mode-hide">☼</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<h1>
|
|
||||||
Cypher Player Assistant
|
|
||||||
<span id="warn-no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
|
|
||||||
</h1>
|
|
||||||
<div id="cont-character-roster" class="box">
|
|
||||||
<select id="inp-character-roster"><option value="">Choose a character to load</option></select>
|
|
||||||
<button id="btn-load-character">Load Character</button>
|
|
||||||
<button id="btn-create-character">Create Character</button>
|
|
||||||
</div>
|
|
||||||
<div id="cont-no-loaded" class="box">
|
|
||||||
No character is loaded. Load one from the menu above
|
|
||||||
<div class="or">— or —</div>
|
|
||||||
<button id="btn-no-char-create-character">Create one</button>
|
|
||||||
</div>
|
|
||||||
<div id="cont-character-sheet">
|
|
||||||
<div class="box">
|
|
||||||
<h2>Character data</h2>
|
|
||||||
<div id="cont-character-id"></div>
|
|
||||||
<strong>Campaign</strong> <input type="text" id="inp-campaign-name">
|
|
||||||
<strong>Name</strong> <input type="text" id="inp-character-name">
|
|
||||||
<strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="max-effort-unlocker">
|
|
||||||
<label for="max-effort-unlocker">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
<strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="armor-unlocker">
|
|
||||||
<label for="armor-unlocker">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
<button id="btn-save-character">Save</button>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Pools</h2>
|
|
||||||
<div class="pool-container">
|
|
||||||
<h3>
|
|
||||||
<input id="pool-selector-might" type="radio" name="pool-selector" value="might">
|
|
||||||
<label for="pool-selector-might">Might</label>
|
|
||||||
</h3>
|
|
||||||
<h4>Pool</h4>
|
|
||||||
<input type="number" id="inp-pool-value-might" min="0" value="0">
|
|
||||||
/
|
|
||||||
<input type="number" id="inp-pool-max-might" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-might">
|
|
||||||
<label for="pool-max-unlocker-might">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
<h4>Edge</h4>
|
|
||||||
<input type="number" id="inp-pool-edge-might" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-might">
|
|
||||||
<label id="pool-edge-unlocker-label-might" for="pool-edge-unlocker-might">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="pool-container">
|
|
||||||
<h3>
|
|
||||||
<input id="pool-selector-speed" type="radio" name="pool-selector" value="speed">
|
|
||||||
<label for="pool-selector-speed">Speed</label>
|
|
||||||
</h3>
|
|
||||||
<h4>Pool</h4>
|
|
||||||
<input type="number" id="inp-pool-value-speed" min="0" value="0">
|
|
||||||
/
|
|
||||||
<input type="number" id="inp-pool-max-speed" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-speed">
|
|
||||||
<label for="pool-max-unlocker-speed">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
<h4>Edge</h4>
|
|
||||||
<input type="number" id="inp-pool-edge-speed" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-speed">
|
|
||||||
<label id="pool-edge-unlocker-label-speed" for="pool-edge-unlocker-speed">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="pool-container">
|
|
||||||
<h3>
|
|
||||||
<input id="pool-selector-intellect" type="radio" name="pool-selector" value="intellect">
|
|
||||||
<label for="pool-selector-intellect">Intellect</label>
|
|
||||||
</h3>
|
|
||||||
<h4>Pool</h4>
|
|
||||||
<input type="number" id="inp-pool-value-intellect" min="0" value="0">
|
|
||||||
/
|
|
||||||
<input type="number" id="inp-pool-max-intellect" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-intellect">
|
|
||||||
<label for="pool-max-unlocker-intellect">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
<h4>Edge</h4>
|
|
||||||
<input type="number" id="inp-pool-edge-intellect" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-intellect">
|
|
||||||
<label for="pool-edge-unlocker-intellect">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Use Ability</h2>
|
|
||||||
<span id="dsp-ability-pool" class="warn">No pool selected!</span>
|
|
||||||
<strong>Initial cost</strong> <input type="number" id="inp-ability-cost" min-value="0" value="0">
|
|
||||||
<strong>Effort used</strong> <input type="number" id="inp-ability-effort" min-value="0" value="0">
|
|
||||||
<span id="dsp-ability-cost"></span>
|
|
||||||
<button id="btn-ability-do">Do it!</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
const poolTypes = ["might", "speed", "intellect"];
|
|
||||||
const characterIDChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
||||||
|
|
||||||
const containerNoCharacter = document.getElementById("cont-no-loaded");
|
|
||||||
const containerCharacter = document.getElementById("cont-character-sheet");
|
|
||||||
const containerCharacterID = document.getElementById("cont-character-id");
|
|
||||||
|
|
||||||
const btnLoadCharacter = document.getElementById("btn-load-character");
|
|
||||||
const btnCreateCharacter = document.getElementById("btn-create-character");
|
|
||||||
const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
|
|
||||||
const btnSaveCharacter = document.getElementById("btn-save-character");
|
|
||||||
const btnAbilityDo = document.getElementById("btn-ability-do");
|
|
||||||
|
|
||||||
const inpCharacterRoster = document.getElementById("inp-character-roster");
|
|
||||||
const inpCampaignName = document.getElementById("inp-campaign-name");
|
|
||||||
const inpCharacterName = document.getElementById("inp-character-name");
|
|
||||||
const inpMaxEffort = document.getElementById("inp-max-effort");
|
|
||||||
const inpArmor = document.getElementById("inp-armor");
|
|
||||||
const inpPoolValue = {
|
|
||||||
might: document.getElementById("inp-pool-value-might"),
|
|
||||||
speed: document.getElementById("inp-pool-value-speed"),
|
|
||||||
intellect: document.getElementById("inp-pool-value-intellect"),
|
|
||||||
};
|
|
||||||
const inpPoolMax = {
|
|
||||||
might: document.getElementById("inp-pool-max-might"),
|
|
||||||
speed: document.getElementById("inp-pool-max-speed"),
|
|
||||||
intellect: document.getElementById("inp-pool-max-intellect"),
|
|
||||||
};
|
|
||||||
const inpPoolEdge = {
|
|
||||||
might: document.getElementById("inp-pool-edge-might"),
|
|
||||||
speed: document.getElementById("inp-pool-edge-speed"),
|
|
||||||
intellect: document.getElementById("inp-pool-edge-intellect"),
|
|
||||||
};
|
|
||||||
const inpAbilityCost = document.getElementById("inp-ability-cost");
|
|
||||||
const inpAbilityEffort = document.getElementById("inp-ability-effort");
|
|
||||||
|
|
||||||
const dspAbilityPool = document.getElementById("dsp-ability-pool");
|
|
||||||
const dspAbilityCost = document.getElementById("dsp-ability-cost");
|
|
||||||
|
|
||||||
var characterRoster = {};
|
|
||||||
var currentCharacter = null;
|
|
||||||
|
|
||||||
const checkLocalStorage = () => {
|
|
||||||
let storage;
|
|
||||||
try {
|
|
||||||
storage = window.localStorage;
|
|
||||||
const x = "__storage_test__";
|
|
||||||
storage.setItem(x, x);
|
|
||||||
storage.removeItem(x);
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (e) {
|
|
||||||
return (
|
|
||||||
e instanceof DOMException &&
|
|
||||||
e.name === "QuotaExceededError" &&
|
|
||||||
// acknowledge QuotaExceededError only if there's something already stored
|
|
||||||
storage &&
|
|
||||||
storage.length !== 0
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleInputLockedHandler = (evt) => {
|
|
||||||
let cb = evt.target;
|
|
||||||
let pool = cb.id.slice(cb.id.lastIndexOf("-") + 1);
|
|
||||||
let input = cb.previousElementSibling;
|
|
||||||
let toUnlock = cb.checked;
|
|
||||||
|
|
||||||
input.disabled = !toUnlock;
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadCharacter = (characterID) => {
|
|
||||||
containerNoCharacter.style.display = "none";
|
|
||||||
containerCharacter.style.display = "initial";
|
|
||||||
btnCreateCharacter.style.display = "initial";
|
|
||||||
|
|
||||||
clearSheet();
|
|
||||||
|
|
||||||
characterData = characterRoster[characterID] || {};
|
|
||||||
|
|
||||||
containerCharacterID.textContent = characterID;
|
|
||||||
inpCharacterName.value = characterData.name || "";
|
|
||||||
inpCampaignName.value = characterData.campaign || "";
|
|
||||||
inpMaxEffort.value = characterData.max_effort || 1;
|
|
||||||
inpArmor.value = characterData.armor || 0;
|
|
||||||
|
|
||||||
for (var poolType of poolTypes) {
|
|
||||||
var poolData = characterData[poolType] || {};
|
|
||||||
|
|
||||||
inpPoolValue[poolType].value = poolData.pool || 8;
|
|
||||||
inpPoolMax[poolType].value = poolData.max || 8;
|
|
||||||
inpPoolEdge[poolType].value = poolData.edge || 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentCharacter = characterID;
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
const createCharacter = () => {
|
|
||||||
let newID = generateID();
|
|
||||||
|
|
||||||
characterRoster[newID] = {};
|
|
||||||
currentCharacter = newID;
|
|
||||||
|
|
||||||
loadCharacter(newID);
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearSheet = () => {
|
|
||||||
inpCampaignName.value = "";
|
|
||||||
inpCharacterName.value = "";
|
|
||||||
inpMaxEffort.value = 1;
|
|
||||||
inpArmor.value = 0;
|
|
||||||
|
|
||||||
for (var poolType of poolTypes) {
|
|
||||||
inpPoolValue[poolType].value = 0;
|
|
||||||
inpPoolMax[poolType].value = 0;
|
|
||||||
inpPoolEdge[poolType].value = 0;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateID = () => {
|
|
||||||
var result = "";
|
|
||||||
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
result += characterIDChars.charAt(Math.floor(Math.random() * characterIDChars.length));
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const sheetToObject = () => {
|
|
||||||
return {
|
|
||||||
name: inpCharacterName.value,
|
|
||||||
campaign: inpCampaignName.value,
|
|
||||||
max_effort: Number(inpMaxEffort.value),
|
|
||||||
armor: Number(inpArmor.value),
|
|
||||||
might: {
|
|
||||||
pool: Number(inpPoolValue.might.value),
|
|
||||||
max: Number(inpPoolMax.might.value),
|
|
||||||
edge: Number(inpPoolEdge.might.value),
|
|
||||||
},
|
|
||||||
speed: {
|
|
||||||
pool: Number(inpPoolValue.speed.value),
|
|
||||||
max: Number(inpPoolMax.speed.value),
|
|
||||||
edge: Number(inpPoolEdge.speed.value),
|
|
||||||
},
|
|
||||||
intellect: {
|
|
||||||
pool: Number(inpPoolValue.intellect.value),
|
|
||||||
max: Number(inpPoolMax.intellect.value),
|
|
||||||
edge: Number(inpPoolEdge.intellect.value),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveCharacterRoster = () => {
|
|
||||||
if (!checkLocalStorage()) {
|
|
||||||
alert("Local Storage is not available, cannot save roster.");
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem("character-roster", JSON.stringify(characterRoster));
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveCurrentCharacter = () => {
|
|
||||||
characterRoster[currentCharacter] = sheetToObject();
|
|
||||||
|
|
||||||
saveCharacterRoster();
|
|
||||||
fillCharacterRoster();
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearContainer = (cont) => {
|
|
||||||
while (cont.firstChild) {
|
|
||||||
cont.removeChild(cont.lastChild);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fillCharacterRoster = () => {
|
|
||||||
var characterIDs = Object.keys(characterRoster).toSorted((idA, idB) => {
|
|
||||||
// Sort by campaign name first
|
|
||||||
if (characterRoster[idA].campaign < characterRoster[idB].campaign) return -1;
|
|
||||||
if (characterRoster[idA].campaign > characterRoster[idB].campaign) return 1;
|
|
||||||
|
|
||||||
// Sort by character name within the same campaign
|
|
||||||
if (characterRoster[idA].name < characterRoster[idB].name) return -1;
|
|
||||||
if (characterRoster[idA].name > characterRoster[idB].name) return 1;
|
|
||||||
|
|
||||||
// If all else fails, sort by the character ID
|
|
||||||
return (idA < idB) ? -1 : (idA > idB) ? 1: 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
var placeHolder = inpCharacterRoster.options[0];
|
|
||||||
|
|
||||||
clearContainer(inpCharacterRoster);
|
|
||||||
|
|
||||||
inpCharacterRoster.appendChild(placeHolder);
|
|
||||||
|
|
||||||
var currentGroup = null;
|
|
||||||
var previousCampaign = null;
|
|
||||||
|
|
||||||
for (var characterID of characterIDs) {
|
|
||||||
if ((previousCampaign !== null) && (previousCampaign != characterRoster[characterID].campaign)) {
|
|
||||||
inpCharacterRoster.appendChild(currentGroup);
|
|
||||||
currentGroup = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentGroup === null) {
|
|
||||||
currentGroup = document.createElement("optgroup");
|
|
||||||
currentGroup.label = characterRoster[characterID].campaign;
|
|
||||||
}
|
|
||||||
|
|
||||||
var newOption = document.createElement("option");
|
|
||||||
newOption.value = characterID;
|
|
||||||
newOption.appendChild(document.createTextNode(characterRoster[characterID].name));
|
|
||||||
currentGroup.appendChild(newOption);
|
|
||||||
previousCampaign = characterRoster[characterID].campaign;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentGroup !== null) {
|
|
||||||
inpCharacterRoster.appendChild(currentGroup);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadCharacterRoster = (doLocalStorageCheck) => {
|
|
||||||
if (doLocalStorageCheck && !checkLocalStorage()) {
|
|
||||||
alert("Local Storage is not available, cannot load roster.");
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var newRoster = localStorage.getItem("character-roster");
|
|
||||||
characterRoster = (newRoster === null) ? {} : JSON.parse(newRoster);
|
|
||||||
fillCharacterRoster();
|
|
||||||
};
|
|
||||||
|
|
||||||
const capitalize = (str) => {
|
|
||||||
return String(str).charAt(0).toUpperCase() + String(str).slice(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getSelectedPool = () => {
|
|
||||||
var currentPoolSelector = document.querySelector("input[name=pool-selector]:checked");
|
|
||||||
|
|
||||||
return (currentPoolSelector === null) ? null : currentPoolSelector.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const poolSelectionChanged = () => {
|
|
||||||
var currentPool = getSelectedPool();
|
|
||||||
|
|
||||||
clearContainer(dspAbilityPool);
|
|
||||||
|
|
||||||
if (currentPool === null) {
|
|
||||||
dspAbilityPool.appendChild(document.createTextNode("No pool selected!"));
|
|
||||||
dspAbilityPool.classList.add("warn");
|
|
||||||
} else {
|
|
||||||
dspAbilityPool.appendChild(document.createTextNode(capitalize(currentPool)));
|
|
||||||
dspAbilityPool.classList.remove("warn");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const abilityEffortChanged = () => {
|
|
||||||
var maxEffort = Number(inpMaxEffort.value);
|
|
||||||
var abilityEffort = Number(inpAbilityEffort.value);
|
|
||||||
|
|
||||||
if (abilityEffort > maxEffort) {
|
|
||||||
inpAbilityEffort.value = maxEffort;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateAbilityCost = () => {
|
|
||||||
var currentPool = getSelectedPool();
|
|
||||||
|
|
||||||
if (currentPool === null) return null;
|
|
||||||
|
|
||||||
var cost = Number(inpAbilityCost.value);
|
|
||||||
var effort = Number(inpAbilityEffort.value);
|
|
||||||
var effortCost = (effort) ? 3 + (effort - 1) * 2 : 0;
|
|
||||||
var poolEdge = Number(inpPoolEdge[currentPool].value);
|
|
||||||
|
|
||||||
return Math.max(0, cost + effortCost - poolEdge);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateAbilityCostDisplay = () => {
|
|
||||||
var currentPool = getSelectedPool();
|
|
||||||
var cost = calculateAbilityCost();
|
|
||||||
|
|
||||||
clearContainer(dspAbilityCost);
|
|
||||||
|
|
||||||
if ((currentPool === null) || (cost === null)) return;
|
|
||||||
|
|
||||||
var currentPoolValue = Number(inpPoolValue[currentPool].value);
|
|
||||||
|
|
||||||
if (cost > currentPoolValue) {
|
|
||||||
dspAbilityCost.classList.add("warn");
|
|
||||||
} else {
|
|
||||||
dspAbilityCost.classList.remove("warn");
|
|
||||||
}
|
|
||||||
|
|
||||||
dspAbilityCost.appendChild(document.createTextNode(cost));
|
|
||||||
};
|
|
||||||
|
|
||||||
const poolValueChanged = () => {
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
const poolEdgeChanged = () => {
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
const abilityCostChanged = () => {
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
const subtractPoolPoints = () => {
|
|
||||||
var currentPool = getSelectedPool();
|
|
||||||
var abilityCost = calculateAbilityCost();
|
|
||||||
var poolValue = Number(inpPoolValue[currentPool].value);
|
|
||||||
|
|
||||||
if (abilityCost === null) return;
|
|
||||||
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
|
|
||||||
if (poolValue < abilityCost) {
|
|
||||||
alert("You cannot affort to use this ability now.");
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
inpPoolValue[currentPool].value = poolValue - abilityCost;
|
|
||||||
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener(
|
|
||||||
"DOMContentLoaded",
|
|
||||||
() => {
|
|
||||||
if (!checkLocalStorage()) {
|
|
||||||
document.getElementById("warn-no-local-storage").style.display = "initial";
|
|
||||||
alert("Local Storage is not available, saving and loading data will be unavailable.");
|
|
||||||
}
|
|
||||||
|
|
||||||
document
|
|
||||||
.querySelectorAll(".input-unlocker")
|
|
||||||
.forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
|
|
||||||
|
|
||||||
document
|
|
||||||
.querySelectorAll("input[name=pool-selector]")
|
|
||||||
.forEach((elem) => {elem.addEventListener("change", poolSelectionChanged)});
|
|
||||||
|
|
||||||
for (var poolValueInput of Object.values(inpPoolValue)) {
|
|
||||||
poolValueInput.addEventListener("input", poolValueChanged);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var poolEdgeInput of Object.values(inpPoolEdge)) {
|
|
||||||
poolEdgeInput.addEventListener("input", poolEdgeChanged);
|
|
||||||
}
|
|
||||||
|
|
||||||
inpAbilityCost.addEventListener("input", abilityCostChanged);
|
|
||||||
inpAbilityEffort.addEventListener("input", abilityEffortChanged);
|
|
||||||
|
|
||||||
btnNoCharCreateCharacter.addEventListener("click", createCharacter);
|
|
||||||
btnCreateCharacter.addEventListener("click", createCharacter);
|
|
||||||
btnSaveCharacter.addEventListener("click", saveCurrentCharacter);
|
|
||||||
btnLoadCharacter.addEventListener("click", () => {
|
|
||||||
var selectedID = inpCharacterRoster.selectedOptions[0].value;
|
|
||||||
|
|
||||||
if (!selectedID) return;
|
|
||||||
|
|
||||||
loadCharacter(selectedID);
|
|
||||||
});
|
|
||||||
btnAbilityDo.addEventListener("click", subtractPoolPoints);
|
|
||||||
|
|
||||||
clearSheet();
|
|
||||||
loadCharacterRoster(true);
|
|
||||||
poolSelectionChanged();
|
|
||||||
updateAbilityCostDisplay();
|
|
||||||
},
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
785
old-index.html
Normal file
785
old-index.html
Normal file
@@ -0,0 +1,785 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale: 1">
|
||||||
|
<title>Cypher Player Assistant</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="static/reset.css">
|
||||||
|
<style>
|
||||||
|
/* Themes and theme switcher */
|
||||||
|
:root {
|
||||||
|
/* Dark Color Scheme */
|
||||||
|
--dark-bg: #111111;
|
||||||
|
--dark-text: #eeeeee;
|
||||||
|
--dark-box-border: #333333;
|
||||||
|
--dark-hl-box-border: #cccccc;
|
||||||
|
|
||||||
|
/* Light Color Scheme */
|
||||||
|
--light-bg: #eeeeee;
|
||||||
|
--light-text: #111111;
|
||||||
|
--light-box-border: #cccccc;
|
||||||
|
--light-hl-box-border: #333333;
|
||||||
|
|
||||||
|
/* Defaults */
|
||||||
|
--bg: var(--light-bg);
|
||||||
|
--text: var(--light-text);
|
||||||
|
--box-border: var(--light-box-border);
|
||||||
|
--hl-box-border: var(--light-hl-box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme:checked ~ .color-scheme-wrapper {
|
||||||
|
--bg: var(--dark-bg);
|
||||||
|
--text: var(--dark-text);
|
||||||
|
--box-border: var(--dark-box-border);
|
||||||
|
--hl-box-border: var(--dark-hl-box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-hide {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: var(--dark-bg);
|
||||||
|
--text: var(--dark-text);
|
||||||
|
--box-border: var(--dark-box-border);
|
||||||
|
--hl-box-border: var(--dark-hl-box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme:checked ~ .color-scheme-wrapper {
|
||||||
|
--bg: var(--light-bg);
|
||||||
|
--text: var(--light-text);
|
||||||
|
--box-border: var(--light-box-border);
|
||||||
|
--hl-box-border: var(--light-hl-box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode-hide {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-scheme-wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-scheme-changer {
|
||||||
|
position: fixed;
|
||||||
|
text-align: center;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
font-size: 150%;
|
||||||
|
width: 1.5em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-scheme-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-scheme-toggle span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-hide, .light-mode-hide {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-hide {
|
||||||
|
background-color: var(--dark-bg);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode-hide {
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
color: var(--light-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outline and generic styles */
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
width: 100%;
|
||||||
|
font-family: serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#warn-no-local-storage {
|
||||||
|
display: none;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 80%;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--box-border);
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0 auto 1em auto;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box h2 {
|
||||||
|
display: initial;
|
||||||
|
position: relative;
|
||||||
|
top: -1.8em;
|
||||||
|
padding: 0 .5em;
|
||||||
|
color: var(--hl-box-border);
|
||||||
|
background-color: var(--bg);
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box h2::after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
margin-bottom: -1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 1px solid var(--hl-box-border);
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number] {
|
||||||
|
width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[disabled] {
|
||||||
|
border-color: var(--box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warn {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Character roster box */
|
||||||
|
|
||||||
|
#cont-character-roster {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-create-character {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* No character loaded box (AKA the welcome screen) */
|
||||||
|
|
||||||
|
#cont-no-loaded {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.or {
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: .5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Character sheet */
|
||||||
|
|
||||||
|
#cont-character-sheet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cont-character-id {
|
||||||
|
margin: -2em 0 .5em 0;
|
||||||
|
color: var(--box-border);
|
||||||
|
font-size: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cont-character-id::before {
|
||||||
|
content: "ID: ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pool-container {
|
||||||
|
display: inline-block;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--box-border);
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 32%;
|
||||||
|
padding: .6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pool-container:has(> h3 > input[name=pool-selector]:checked) {
|
||||||
|
border-color: var(--hl-box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[name=pool-selector] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pool-container h4 {
|
||||||
|
color: var(--hl-box-border);
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input unlockers */
|
||||||
|
|
||||||
|
.input-unlocker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-unlocker + label > .input-locked {
|
||||||
|
display: initial;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-unlocker + label > .input-unlocked {
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-unlocker:checked + label > .input-locked {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-unlocker:checked + label .input-unlocked {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ability use box */
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input id="color-scheme" type="checkbox">
|
||||||
|
<div class="color-scheme-wrapper">
|
||||||
|
<div id="color-scheme-changer">
|
||||||
|
<label for="color-scheme" id="color-scheme-toggle">
|
||||||
|
<span class="dark-mode-hide">☽</span>
|
||||||
|
<span class="light-mode-hide">☼</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<h1>
|
||||||
|
Cypher Player Assistant
|
||||||
|
<span id="warn-no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
|
||||||
|
</h1>
|
||||||
|
<div id="cont-character-roster" class="box">
|
||||||
|
<select id="inp-character-roster"><option value="">Choose a character to load</option></select>
|
||||||
|
<button id="btn-load-character">Load Character</button>
|
||||||
|
<button id="btn-create-character">Create Character</button>
|
||||||
|
</div>
|
||||||
|
<div id="cont-no-loaded" class="box">
|
||||||
|
No character is loaded. Load one from the menu above
|
||||||
|
<div class="or">— or —</div>
|
||||||
|
<button id="btn-no-char-create-character">Create one</button>
|
||||||
|
</div>
|
||||||
|
<div id="cont-character-sheet">
|
||||||
|
<div class="box">
|
||||||
|
<h2>Character data</h2>
|
||||||
|
<div id="cont-character-id"></div>
|
||||||
|
<strong>Campaign</strong> <input type="text" id="inp-campaign-name">
|
||||||
|
<strong>Name</strong> <input type="text" id="inp-character-name">
|
||||||
|
<strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="max-effort-unlocker">
|
||||||
|
<label for="max-effort-unlocker">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
<strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="armor-unlocker">
|
||||||
|
<label for="armor-unlocker">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
<button id="btn-save-character">Save</button>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Pools</h2>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>
|
||||||
|
<input id="pool-selector-might" type="radio" name="pool-selector" value="might">
|
||||||
|
<label for="pool-selector-might">Might</label>
|
||||||
|
</h3>
|
||||||
|
<h4>Pool</h4>
|
||||||
|
<input type="number" id="inp-pool-value-might" min="0" value="0">
|
||||||
|
/
|
||||||
|
<input type="number" id="inp-pool-max-might" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-might">
|
||||||
|
<label for="pool-max-unlocker-might">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
<h4>Edge</h4>
|
||||||
|
<input type="number" id="inp-pool-edge-might" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-might">
|
||||||
|
<label id="pool-edge-unlocker-label-might" for="pool-edge-unlocker-might">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>
|
||||||
|
<input id="pool-selector-speed" type="radio" name="pool-selector" value="speed">
|
||||||
|
<label for="pool-selector-speed">Speed</label>
|
||||||
|
</h3>
|
||||||
|
<h4>Pool</h4>
|
||||||
|
<input type="number" id="inp-pool-value-speed" min="0" value="0">
|
||||||
|
/
|
||||||
|
<input type="number" id="inp-pool-max-speed" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-speed">
|
||||||
|
<label for="pool-max-unlocker-speed">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
<h4>Edge</h4>
|
||||||
|
<input type="number" id="inp-pool-edge-speed" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-speed">
|
||||||
|
<label id="pool-edge-unlocker-label-speed" for="pool-edge-unlocker-speed">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>
|
||||||
|
<input id="pool-selector-intellect" type="radio" name="pool-selector" value="intellect">
|
||||||
|
<label for="pool-selector-intellect">Intellect</label>
|
||||||
|
</h3>
|
||||||
|
<h4>Pool</h4>
|
||||||
|
<input type="number" id="inp-pool-value-intellect" min="0" value="0">
|
||||||
|
/
|
||||||
|
<input type="number" id="inp-pool-max-intellect" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-intellect">
|
||||||
|
<label for="pool-max-unlocker-intellect">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
<h4>Edge</h4>
|
||||||
|
<input type="number" id="inp-pool-edge-intellect" min="0" value="0" disabled>
|
||||||
|
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-intellect">
|
||||||
|
<label for="pool-edge-unlocker-intellect">
|
||||||
|
<span class="input-locked">🔒</span>
|
||||||
|
<span class="input-unlocked">🔓</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Use Ability</h2>
|
||||||
|
<span id="dsp-ability-pool" class="warn">No pool selected!</span>
|
||||||
|
<strong>Initial cost</strong> <input type="number" id="inp-ability-cost" min-value="0" value="0">
|
||||||
|
<strong>Effort used</strong> <input type="number" id="inp-ability-effort" min-value="0" value="0">
|
||||||
|
<span id="dsp-ability-cost"></span>
|
||||||
|
<button id="btn-ability-do">Do it!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
const poolTypes = ["might", "speed", "intellect"];
|
||||||
|
const characterIDChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||||
|
|
||||||
|
const containerNoCharacter = document.getElementById("cont-no-loaded");
|
||||||
|
const containerCharacter = document.getElementById("cont-character-sheet");
|
||||||
|
const containerCharacterID = document.getElementById("cont-character-id");
|
||||||
|
|
||||||
|
const btnLoadCharacter = document.getElementById("btn-load-character");
|
||||||
|
const btnCreateCharacter = document.getElementById("btn-create-character");
|
||||||
|
const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
|
||||||
|
const btnSaveCharacter = document.getElementById("btn-save-character");
|
||||||
|
const btnAbilityDo = document.getElementById("btn-ability-do");
|
||||||
|
|
||||||
|
const inpCharacterRoster = document.getElementById("inp-character-roster");
|
||||||
|
const inpCampaignName = document.getElementById("inp-campaign-name");
|
||||||
|
const inpCharacterName = document.getElementById("inp-character-name");
|
||||||
|
const inpMaxEffort = document.getElementById("inp-max-effort");
|
||||||
|
const inpArmor = document.getElementById("inp-armor");
|
||||||
|
const inpPoolValue = {
|
||||||
|
might: document.getElementById("inp-pool-value-might"),
|
||||||
|
speed: document.getElementById("inp-pool-value-speed"),
|
||||||
|
intellect: document.getElementById("inp-pool-value-intellect"),
|
||||||
|
};
|
||||||
|
const inpPoolMax = {
|
||||||
|
might: document.getElementById("inp-pool-max-might"),
|
||||||
|
speed: document.getElementById("inp-pool-max-speed"),
|
||||||
|
intellect: document.getElementById("inp-pool-max-intellect"),
|
||||||
|
};
|
||||||
|
const inpPoolEdge = {
|
||||||
|
might: document.getElementById("inp-pool-edge-might"),
|
||||||
|
speed: document.getElementById("inp-pool-edge-speed"),
|
||||||
|
intellect: document.getElementById("inp-pool-edge-intellect"),
|
||||||
|
};
|
||||||
|
const inpAbilityCost = document.getElementById("inp-ability-cost");
|
||||||
|
const inpAbilityEffort = document.getElementById("inp-ability-effort");
|
||||||
|
|
||||||
|
const dspAbilityPool = document.getElementById("dsp-ability-pool");
|
||||||
|
const dspAbilityCost = document.getElementById("dsp-ability-cost");
|
||||||
|
|
||||||
|
var characterRoster = {};
|
||||||
|
var currentCharacter = null;
|
||||||
|
|
||||||
|
const checkLocalStorage = () => {
|
||||||
|
let storage;
|
||||||
|
try {
|
||||||
|
storage = window.localStorage;
|
||||||
|
const x = "__storage_test__";
|
||||||
|
storage.setItem(x, x);
|
||||||
|
storage.removeItem(x);
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
return (
|
||||||
|
e instanceof DOMException &&
|
||||||
|
e.name === "QuotaExceededError" &&
|
||||||
|
// acknowledge QuotaExceededError only if there's something already stored
|
||||||
|
storage &&
|
||||||
|
storage.length !== 0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleInputLockedHandler = (evt) => {
|
||||||
|
let cb = evt.target;
|
||||||
|
let pool = cb.id.slice(cb.id.lastIndexOf("-") + 1);
|
||||||
|
let input = cb.previousElementSibling;
|
||||||
|
let toUnlock = cb.checked;
|
||||||
|
|
||||||
|
input.disabled = !toUnlock;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadCharacter = (characterID) => {
|
||||||
|
containerNoCharacter.style.display = "none";
|
||||||
|
containerCharacter.style.display = "initial";
|
||||||
|
btnCreateCharacter.style.display = "initial";
|
||||||
|
|
||||||
|
clearSheet();
|
||||||
|
|
||||||
|
characterData = characterRoster[characterID] || {};
|
||||||
|
|
||||||
|
containerCharacterID.textContent = characterID;
|
||||||
|
inpCharacterName.value = characterData.name || "";
|
||||||
|
inpCampaignName.value = characterData.campaign || "";
|
||||||
|
inpMaxEffort.value = characterData.max_effort || 1;
|
||||||
|
inpArmor.value = characterData.armor || 0;
|
||||||
|
|
||||||
|
for (var poolType of poolTypes) {
|
||||||
|
var poolData = characterData[poolType] || {};
|
||||||
|
|
||||||
|
inpPoolValue[poolType].value = poolData.pool || 8;
|
||||||
|
inpPoolMax[poolType].value = poolData.max || 8;
|
||||||
|
inpPoolEdge[poolType].value = poolData.edge || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentCharacter = characterID;
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
};
|
||||||
|
|
||||||
|
const createCharacter = () => {
|
||||||
|
let newID = generateID();
|
||||||
|
|
||||||
|
characterRoster[newID] = {};
|
||||||
|
currentCharacter = newID;
|
||||||
|
|
||||||
|
loadCharacter(newID);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearSheet = () => {
|
||||||
|
inpCampaignName.value = "";
|
||||||
|
inpCharacterName.value = "";
|
||||||
|
inpMaxEffort.value = 1;
|
||||||
|
inpArmor.value = 0;
|
||||||
|
|
||||||
|
for (var poolType of poolTypes) {
|
||||||
|
inpPoolValue[poolType].value = 0;
|
||||||
|
inpPoolMax[poolType].value = 0;
|
||||||
|
inpPoolEdge[poolType].value = 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateID = () => {
|
||||||
|
var result = "";
|
||||||
|
|
||||||
|
for (var i = 0; i < 16; i++) {
|
||||||
|
result += characterIDChars.charAt(Math.floor(Math.random() * characterIDChars.length));
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const sheetToObject = () => {
|
||||||
|
return {
|
||||||
|
name: inpCharacterName.value,
|
||||||
|
campaign: inpCampaignName.value,
|
||||||
|
max_effort: Number(inpMaxEffort.value),
|
||||||
|
armor: Number(inpArmor.value),
|
||||||
|
might: {
|
||||||
|
pool: Number(inpPoolValue.might.value),
|
||||||
|
max: Number(inpPoolMax.might.value),
|
||||||
|
edge: Number(inpPoolEdge.might.value),
|
||||||
|
},
|
||||||
|
speed: {
|
||||||
|
pool: Number(inpPoolValue.speed.value),
|
||||||
|
max: Number(inpPoolMax.speed.value),
|
||||||
|
edge: Number(inpPoolEdge.speed.value),
|
||||||
|
},
|
||||||
|
intellect: {
|
||||||
|
pool: Number(inpPoolValue.intellect.value),
|
||||||
|
max: Number(inpPoolMax.intellect.value),
|
||||||
|
edge: Number(inpPoolEdge.intellect.value),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveCharacterRoster = () => {
|
||||||
|
if (!checkLocalStorage()) {
|
||||||
|
alert("Local Storage is not available, cannot save roster.");
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem("character-roster", JSON.stringify(characterRoster));
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveCurrentCharacter = () => {
|
||||||
|
characterRoster[currentCharacter] = sheetToObject();
|
||||||
|
|
||||||
|
saveCharacterRoster();
|
||||||
|
fillCharacterRoster();
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearContainer = (cont) => {
|
||||||
|
while (cont.firstChild) {
|
||||||
|
cont.removeChild(cont.lastChild);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fillCharacterRoster = () => {
|
||||||
|
var characterIDs = Object.keys(characterRoster).toSorted((idA, idB) => {
|
||||||
|
// Sort by campaign name first
|
||||||
|
if (characterRoster[idA].campaign < characterRoster[idB].campaign) return -1;
|
||||||
|
if (characterRoster[idA].campaign > characterRoster[idB].campaign) return 1;
|
||||||
|
|
||||||
|
// Sort by character name within the same campaign
|
||||||
|
if (characterRoster[idA].name < characterRoster[idB].name) return -1;
|
||||||
|
if (characterRoster[idA].name > characterRoster[idB].name) return 1;
|
||||||
|
|
||||||
|
// If all else fails, sort by the character ID
|
||||||
|
return (idA < idB) ? -1 : (idA > idB) ? 1: 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
var placeHolder = inpCharacterRoster.options[0];
|
||||||
|
|
||||||
|
clearContainer(inpCharacterRoster);
|
||||||
|
|
||||||
|
inpCharacterRoster.appendChild(placeHolder);
|
||||||
|
|
||||||
|
var currentGroup = null;
|
||||||
|
var previousCampaign = null;
|
||||||
|
|
||||||
|
for (var characterID of characterIDs) {
|
||||||
|
if ((previousCampaign !== null) && (previousCampaign != characterRoster[characterID].campaign)) {
|
||||||
|
inpCharacterRoster.appendChild(currentGroup);
|
||||||
|
currentGroup = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentGroup === null) {
|
||||||
|
currentGroup = document.createElement("optgroup");
|
||||||
|
currentGroup.label = characterRoster[characterID].campaign;
|
||||||
|
}
|
||||||
|
|
||||||
|
var newOption = document.createElement("option");
|
||||||
|
newOption.value = characterID;
|
||||||
|
newOption.appendChild(document.createTextNode(characterRoster[characterID].name));
|
||||||
|
currentGroup.appendChild(newOption);
|
||||||
|
previousCampaign = characterRoster[characterID].campaign;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentGroup !== null) {
|
||||||
|
inpCharacterRoster.appendChild(currentGroup);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadCharacterRoster = (doLocalStorageCheck) => {
|
||||||
|
if (doLocalStorageCheck && !checkLocalStorage()) {
|
||||||
|
alert("Local Storage is not available, cannot load roster.");
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var newRoster = localStorage.getItem("character-roster");
|
||||||
|
characterRoster = (newRoster === null) ? {} : JSON.parse(newRoster);
|
||||||
|
fillCharacterRoster();
|
||||||
|
};
|
||||||
|
|
||||||
|
const capitalize = (str) => {
|
||||||
|
return String(str).charAt(0).toUpperCase() + String(str).slice(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedPool = () => {
|
||||||
|
var currentPoolSelector = document.querySelector("input[name=pool-selector]:checked");
|
||||||
|
|
||||||
|
return (currentPoolSelector === null) ? null : currentPoolSelector.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const poolSelectionChanged = () => {
|
||||||
|
var currentPool = getSelectedPool();
|
||||||
|
|
||||||
|
clearContainer(dspAbilityPool);
|
||||||
|
|
||||||
|
if (currentPool === null) {
|
||||||
|
dspAbilityPool.appendChild(document.createTextNode("No pool selected!"));
|
||||||
|
dspAbilityPool.classList.add("warn");
|
||||||
|
} else {
|
||||||
|
dspAbilityPool.appendChild(document.createTextNode(capitalize(currentPool)));
|
||||||
|
dspAbilityPool.classList.remove("warn");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const abilityEffortChanged = () => {
|
||||||
|
var maxEffort = Number(inpMaxEffort.value);
|
||||||
|
var abilityEffort = Number(inpAbilityEffort.value);
|
||||||
|
|
||||||
|
if (abilityEffort > maxEffort) {
|
||||||
|
inpAbilityEffort.value = maxEffort;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateAbilityCost = () => {
|
||||||
|
var currentPool = getSelectedPool();
|
||||||
|
|
||||||
|
if (currentPool === null) return null;
|
||||||
|
|
||||||
|
var cost = Number(inpAbilityCost.value);
|
||||||
|
var effort = Number(inpAbilityEffort.value);
|
||||||
|
var effortCost = (effort) ? 3 + (effort - 1) * 2 : 0;
|
||||||
|
var poolEdge = Number(inpPoolEdge[currentPool].value);
|
||||||
|
|
||||||
|
return Math.max(0, cost + effortCost - poolEdge);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateAbilityCostDisplay = () => {
|
||||||
|
var currentPool = getSelectedPool();
|
||||||
|
var cost = calculateAbilityCost();
|
||||||
|
|
||||||
|
clearContainer(dspAbilityCost);
|
||||||
|
|
||||||
|
if ((currentPool === null) || (cost === null)) return;
|
||||||
|
|
||||||
|
var currentPoolValue = Number(inpPoolValue[currentPool].value);
|
||||||
|
|
||||||
|
if (cost > currentPoolValue) {
|
||||||
|
dspAbilityCost.classList.add("warn");
|
||||||
|
} else {
|
||||||
|
dspAbilityCost.classList.remove("warn");
|
||||||
|
}
|
||||||
|
|
||||||
|
dspAbilityCost.appendChild(document.createTextNode(cost));
|
||||||
|
};
|
||||||
|
|
||||||
|
const poolValueChanged = () => {
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
};
|
||||||
|
|
||||||
|
const poolEdgeChanged = () => {
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
};
|
||||||
|
|
||||||
|
const abilityCostChanged = () => {
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
};
|
||||||
|
|
||||||
|
const subtractPoolPoints = () => {
|
||||||
|
var currentPool = getSelectedPool();
|
||||||
|
var abilityCost = calculateAbilityCost();
|
||||||
|
var poolValue = Number(inpPoolValue[currentPool].value);
|
||||||
|
|
||||||
|
if (abilityCost === null) return;
|
||||||
|
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
|
||||||
|
if (poolValue < abilityCost) {
|
||||||
|
alert("You cannot affort to use this ability now.");
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
inpPoolValue[currentPool].value = poolValue - abilityCost;
|
||||||
|
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
"DOMContentLoaded",
|
||||||
|
() => {
|
||||||
|
if (!checkLocalStorage()) {
|
||||||
|
document.getElementById("warn-no-local-storage").style.display = "initial";
|
||||||
|
alert("Local Storage is not available, saving and loading data will be unavailable.");
|
||||||
|
}
|
||||||
|
|
||||||
|
document
|
||||||
|
.querySelectorAll(".input-unlocker")
|
||||||
|
.forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
|
||||||
|
|
||||||
|
document
|
||||||
|
.querySelectorAll("input[name=pool-selector]")
|
||||||
|
.forEach((elem) => {elem.addEventListener("change", poolSelectionChanged)});
|
||||||
|
|
||||||
|
for (var poolValueInput of Object.values(inpPoolValue)) {
|
||||||
|
poolValueInput.addEventListener("input", poolValueChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var poolEdgeInput of Object.values(inpPoolEdge)) {
|
||||||
|
poolEdgeInput.addEventListener("input", poolEdgeChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
inpAbilityCost.addEventListener("input", abilityCostChanged);
|
||||||
|
inpAbilityEffort.addEventListener("input", abilityEffortChanged);
|
||||||
|
|
||||||
|
btnNoCharCreateCharacter.addEventListener("click", createCharacter);
|
||||||
|
btnCreateCharacter.addEventListener("click", createCharacter);
|
||||||
|
btnSaveCharacter.addEventListener("click", saveCurrentCharacter);
|
||||||
|
btnLoadCharacter.addEventListener("click", () => {
|
||||||
|
var selectedID = inpCharacterRoster.selectedOptions[0].value;
|
||||||
|
|
||||||
|
if (!selectedID) return;
|
||||||
|
|
||||||
|
loadCharacter(selectedID);
|
||||||
|
});
|
||||||
|
btnAbilityDo.addEventListener("click", subtractPoolPoints);
|
||||||
|
|
||||||
|
clearSheet();
|
||||||
|
loadCharacterRoster(true);
|
||||||
|
poolSelectionChanged();
|
||||||
|
updateAbilityCostDisplay();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
package.json
Normal file
50
package.json
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "cypher-player-assistant",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test:unit": "vitest",
|
||||||
|
"test:e2e": "playwright test",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --build",
|
||||||
|
"lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
|
||||||
|
"lint:eslint": "eslint . --fix",
|
||||||
|
"lint": "run-s lint:*",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"pinia": "^3.0.1",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@playwright/test": "^1.51.1",
|
||||||
|
"@tsconfig/node22": "^22.0.1",
|
||||||
|
"@types/jsdom": "^21.1.7",
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.3",
|
||||||
|
"@vitest/eslint-plugin": "^1.1.39",
|
||||||
|
"@vue/eslint-config-prettier": "^10.2.0",
|
||||||
|
"@vue/eslint-config-typescript": "^14.5.0",
|
||||||
|
"@vue/test-utils": "^2.4.6",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"eslint": "^9.22.0",
|
||||||
|
"eslint-plugin-oxlint": "^0.16.0",
|
||||||
|
"eslint-plugin-playwright": "^2.2.0",
|
||||||
|
"eslint-plugin-vue": "~10.0.0",
|
||||||
|
"jiti": "^2.4.2",
|
||||||
|
"jsdom": "^26.0.0",
|
||||||
|
"npm-run-all2": "^7.0.2",
|
||||||
|
"oxlint": "^0.16.0",
|
||||||
|
"prettier": "3.5.3",
|
||||||
|
"typescript": "~5.8.0",
|
||||||
|
"vite": "^6.2.4",
|
||||||
|
"vite-plugin-vue-devtools": "^7.7.2",
|
||||||
|
"vitest": "^3.1.1",
|
||||||
|
"vue-tsc": "^2.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
110
playwright.config.ts
Normal file
110
playwright.config.ts
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import process from 'node:process'
|
||||||
|
import { defineConfig, devices } from '@playwright/test'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read environment variables from file.
|
||||||
|
* https://github.com/motdotla/dotenv
|
||||||
|
*/
|
||||||
|
// require('dotenv').config();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* See https://playwright.dev/docs/test-configuration.
|
||||||
|
*/
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './e2e',
|
||||||
|
/* Maximum time one test can run for. */
|
||||||
|
timeout: 30 * 1000,
|
||||||
|
expect: {
|
||||||
|
/**
|
||||||
|
* Maximum time expect() should wait for the condition to be met.
|
||||||
|
* For example in `await expect(locator).toHaveText();`
|
||||||
|
*/
|
||||||
|
timeout: 5000,
|
||||||
|
},
|
||||||
|
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||||
|
forbidOnly: !!process.env.CI,
|
||||||
|
/* Retry on CI only */
|
||||||
|
retries: process.env.CI ? 2 : 0,
|
||||||
|
/* Opt out of parallel tests on CI. */
|
||||||
|
workers: process.env.CI ? 1 : undefined,
|
||||||
|
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||||
|
reporter: 'html',
|
||||||
|
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||||
|
use: {
|
||||||
|
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
||||||
|
actionTimeout: 0,
|
||||||
|
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||||
|
baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
|
||||||
|
|
||||||
|
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
|
||||||
|
/* Only on CI systems run the tests headless */
|
||||||
|
headless: !!process.env.CI,
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Configure projects for major browsers */
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: 'chromium',
|
||||||
|
use: {
|
||||||
|
...devices['Desktop Chrome'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'firefox',
|
||||||
|
use: {
|
||||||
|
...devices['Desktop Firefox'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'webkit',
|
||||||
|
use: {
|
||||||
|
...devices['Desktop Safari'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Test against mobile viewports. */
|
||||||
|
// {
|
||||||
|
// name: 'Mobile Chrome',
|
||||||
|
// use: {
|
||||||
|
// ...devices['Pixel 5'],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Mobile Safari',
|
||||||
|
// use: {
|
||||||
|
// ...devices['iPhone 12'],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
/* Test against branded browsers. */
|
||||||
|
// {
|
||||||
|
// name: 'Microsoft Edge',
|
||||||
|
// use: {
|
||||||
|
// channel: 'msedge',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Google Chrome',
|
||||||
|
// use: {
|
||||||
|
// channel: 'chrome',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
|
||||||
|
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
|
||||||
|
// outputDir: 'test-results/',
|
||||||
|
|
||||||
|
/* Run your local dev server before starting the tests */
|
||||||
|
webServer: {
|
||||||
|
/**
|
||||||
|
* Use the dev server by default for faster feedback loop.
|
||||||
|
* Use the preview server on CI for more realistic testing.
|
||||||
|
* Playwright will re-use the local server if there is already a dev-server running.
|
||||||
|
*/
|
||||||
|
command: process.env.CI ? 'npm run preview' : 'npm run dev',
|
||||||
|
port: process.env.CI ? 4173 : 5173,
|
||||||
|
reuseExistingServer: !process.env.CI,
|
||||||
|
},
|
||||||
|
})
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
87
src/App.vue
Normal file
87
src/App.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterLink, RouterView } from 'vue-router'
|
||||||
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
import CharacterSheet from './components/CharacterSheet.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<CharacterSheet />
|
||||||
|
<HelloWorld msg="You did it!" />
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<RouterLink to="/">Home</RouterLink>
|
||||||
|
<RouterLink to="/about">About</RouterLink>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header {
|
||||||
|
line-height: 1.5;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-exact-active {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-exact-active:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 1rem;
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:first-of-type {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
padding-right: calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin: 0 2rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .wrapper {
|
||||||
|
display: flex;
|
||||||
|
place-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
text-align: left;
|
||||||
|
margin-left: -1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
86
src/assets/base.css
Normal file
86
src/assets/base.css
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
35
src/assets/main.css
Normal file
35
src/assets/main.css
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
@import './base.css';
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/components/CharacterSheet.vue
Normal file
20
src/components/CharacterSheet.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Pool } from "./Pool.vue"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="character-sheet">
|
||||||
|
<div class="box">
|
||||||
|
<h2>Character Data</h2>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Pools</h2>
|
||||||
|
<Pool />
|
||||||
|
<Pool />
|
||||||
|
<Pool />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
41
src/components/HelloWorld.vue
Normal file
41
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
msg: string
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="greetings">
|
||||||
|
<h1 class="green">{{ msg }}</h1>
|
||||||
|
<h3>
|
||||||
|
You’ve successfully created a project with
|
||||||
|
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2.6rem;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
src/components/Pool.vue
Normal file
11
src/components/Pool.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>Pool Type</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
95
src/components/TheWelcome.vue
Normal file
95
src/components/TheWelcome.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import WelcomeItem from './WelcomeItem.vue'
|
||||||
|
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||||
|
import ToolingIcon from './icons/IconTooling.vue'
|
||||||
|
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||||
|
import CommunityIcon from './icons/IconCommunity.vue'
|
||||||
|
import SupportIcon from './icons/IconSupport.vue'
|
||||||
|
|
||||||
|
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<DocumentationIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
|
Vue’s
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||||
|
provides you with all information you need to get started.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<ToolingIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Tooling</template>
|
||||||
|
|
||||||
|
This project is served and bundled with
|
||||||
|
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||||
|
recommended IDE setup is
|
||||||
|
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||||
|
+
|
||||||
|
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||||
|
>Vue - Official</a
|
||||||
|
>. If you need to test your components and web pages, check out
|
||||||
|
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||||
|
and
|
||||||
|
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||||
|
/
|
||||||
|
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
More instructions are available in
|
||||||
|
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||||
|
>.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<EcosystemIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Ecosystem</template>
|
||||||
|
|
||||||
|
Get official tools and libraries for your project:
|
||||||
|
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||||
|
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||||
|
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||||
|
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||||
|
you need more resources, we suggest paying
|
||||||
|
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||||
|
a visit.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<CommunityIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Community</template>
|
||||||
|
|
||||||
|
Got stuck? Ask your question on
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||||
|
(our official Discord server), or
|
||||||
|
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||||
|
>StackOverflow</a
|
||||||
|
>. You should also follow the official
|
||||||
|
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||||
|
Bluesky account or the
|
||||||
|
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||||
|
X account for latest news in the Vue world.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<SupportIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Support Vue</template>
|
||||||
|
|
||||||
|
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||||
|
us by
|
||||||
|
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||||
|
</WelcomeItem>
|
||||||
|
</template>
|
||||||
87
src/components/WelcomeItem.vue
Normal file
87
src/components/WelcomeItem.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item">
|
||||||
|
<i>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</i>
|
||||||
|
<div class="details">
|
||||||
|
<h3>
|
||||||
|
<slot name="heading"></slot>
|
||||||
|
</h3>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
place-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
color: var(--color-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.item {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
top: calc(50% - 25px);
|
||||||
|
left: -26px;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:before {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:first-of-type:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-of-type:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
src/components/__tests__/HelloWorld.spec.ts
Normal file
11
src/components/__tests__/HelloWorld.spec.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import HelloWorld from '../HelloWorld.vue'
|
||||||
|
|
||||||
|
describe('HelloWorld', () => {
|
||||||
|
it('renders properly', () => {
|
||||||
|
const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
|
||||||
|
expect(wrapper.text()).toContain('Hello Vitest')
|
||||||
|
})
|
||||||
|
})
|
||||||
7
src/components/icons/IconCommunity.vue
Normal file
7
src/components/icons/IconCommunity.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconDocumentation.vue
Normal file
7
src/components/icons/IconDocumentation.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconEcosystem.vue
Normal file
7
src/components/icons/IconEcosystem.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconSupport.vue
Normal file
7
src/components/icons/IconSupport.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
19
src/components/icons/IconTooling.vue
Normal file
19
src/components/icons/IconTooling.vue
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
class="iconify iconify--mdi"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
14
src/main.ts
Normal file
14
src/main.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
23
src/router/index.ts
Normal file
23
src/router/index.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: HomeView,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'about',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (About.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import('../views/AboutView.vue'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
12
src/stores/counter.ts
Normal file
12
src/stores/counter.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCounterStore = defineStore('counter', () => {
|
||||||
|
const count = ref(0)
|
||||||
|
const doubleCount = computed(() => count.value * 2)
|
||||||
|
function increment() {
|
||||||
|
count.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
return { count, doubleCount, increment }
|
||||||
|
})
|
||||||
15
src/views/AboutView.vue
Normal file
15
src/views/AboutView.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.about {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
src/views/HomeView.vue
Normal file
9
src/views/HomeView.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import TheWelcome from '../components/TheWelcome.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<TheWelcome />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
12
tsconfig.app.json
Normal file
12
tsconfig.app.json
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.vitest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
19
tsconfig.node.json
Normal file
19
tsconfig.node.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/node22/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*",
|
||||||
|
"eslint.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"noEmit": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
11
tsconfig.vitest.json
Normal file
11
tsconfig.vitest.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.app.json",
|
||||||
|
"include": ["src/**/__tests__/*", "env.d.ts"],
|
||||||
|
"exclude": [],
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
|
||||||
|
|
||||||
|
"lib": [],
|
||||||
|
"types": ["node", "jsdom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
18
vite.config.ts
Normal file
18
vite.config.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueDevTools(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
14
vitest.config.ts
Normal file
14
vitest.config.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
|
||||||
|
import viteConfig from './vite.config'
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
viteConfig,
|
||||||
|
defineConfig({
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||||
|
root: fileURLToPath(new URL('./', import.meta.url)),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
)
|
||||||
Reference in New Issue
Block a user