gergely/cypher-player-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vue version

Browse Source
This commit is contained in:
Gergely Polonkai
2025-06-12 13:15:24 +02:00
parent 0a948d23d3
commit f32b59fef3
42 changed files with 5085 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.editorconfig Normal file
View 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
View File

@@ -0,0 +1 @@
* text=auto eol=lf

33
.gitignore vendored Normal file
View 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
View File

@@ -0,0 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

11
.vscode/extensions.json vendored Normal file
View 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
View 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
View File

@@ -0,0 +1,4 @@
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": ["./**/*"]
}

8
e2e/vue.spec.ts Normal file
View 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!');
})

1
env.d.ts vendored Normal file
View File

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

36
eslint.config.ts Normal file
View 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
View File

@@ -1,785 +1,13 @@
<!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>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

785
old-index.html Normal file
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

87
src/App.vue Normal file
View 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
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

35
src/assets/main.css Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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)),
},
}),
)

3273
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff