main
HeNine 1 year ago
commit ed61e856ea

@ -0,0 +1,15 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

29
.gitignore vendored

@ -0,0 +1,29 @@
# 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
.vscode
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

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

@ -0,0 +1,2 @@
FROM nginx
COPY dist /usr/share/nginx/html

@ -0,0 +1,46 @@
# kartsroller
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) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## 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 [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

1
env.d.ts vendored

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

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

4891
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,36 @@
{
"name": "kartsroller",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"bootstrap": "^5.2.3",
"vue": "^3.3.2"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@tsconfig/node18": "^2.0.1",
"@types/node": "^18.16.8",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.39.0",
"eslint-plugin-vue": "^9.11.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"sass": "^1.62.1",
"typescript": "~5.0.4",
"vite": "^4.3.5",
"vue-tsc": "^1.6.4"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,13 @@
<script setup lang="ts">
import Roller from './components/Roller.vue';
</script>
<template>
<Roller />
</template>
<style scoped>
</style>

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M450.169 181.354L379.685 84.29 265.629 47.325v92.652l96.384 70.031zm-91.46-28.416a19.735 19.735 0 0 1-3.004 6.606 16.563 16.563 0 0 1-11.924 6.857q-7.548.918-15.729-5.056-8.18-5.974-9.599-13.439a16.563 16.563 0 0 1 2.922-13.414 19.747 19.747 0 0 1 5.378-4.866q3.422-2.206 9.026-1.574a18.757 18.757 0 0 1-1.717-10.421 21.082 21.082 0 0 1 4.03-9.802 19.246 19.246 0 0 1 13.666-7.99q8.633-1.108 17.779 5.57 9.146 6.677 10.326 14.952a20.033 20.033 0 0 1-3.827 15.204 20.772 20.772 0 0 1-8.145 6.797 16.312 16.312 0 0 1-10.17 1.192q2.038 5.461.989 9.384zm-10.731-8.287a8.252 8.252 0 0 1-1.717 6.189 8.907 8.907 0 0 1-15.669-3.685 8.562 8.562 0 0 1 1.908-6.367 8.347 8.347 0 0 1 5.33-3.578 8.252 8.252 0 0 1 6.451 1.825 8.347 8.347 0 0 1 3.757 5.628zm9.54-11.77a10.732 10.732 0 0 1-11.472-8.346q-.548-3.709 2.504-7.894a10.851 10.851 0 0 1 6.654-4.77 10.732 10.732 0 0 1 11.543 8.43 10.851 10.851 0 0 1-2.469 7.775q-2.945 4.198-6.653 4.806zm-110.968 7.096V47.325L132.494 84.29 62.01 181.354l88.156 28.618zm-112.66-21.798l37.895-26.52a31.73 31.73 0 0 1 5.056 12.664q1.55 7.155-2.79 19.413a98.304 98.304 0 0 0-4.341 14.524 13.904 13.904 0 0 0 2.158 10.314 10.732 10.732 0 0 0 6.034 4.472 8.347 8.347 0 0 0 7.154-1.574q4.961-3.47 4.162-8.43a22.418 22.418 0 0 0-3.577-7.644l10.577-7.393q4.674 7.25 5.425 13.2 1.443 11.328-9.682 19.079-8.789 6.153-17.386 4.913-8.597-1.24-14.214-9.242a21.237 21.237 0 0 1-3.97-13.486 44.513 44.513 0 0 1 3.112-12.568l2.194-6.141q2.063-5.76 2.659-8.12a15.025 15.025 0 0 0 .43-4.77l-24.16 16.908zm64.7 215.412h114.998l35.51-109.37-93.009-67.598-93.009 67.599zm89.266-95.072a8.347 8.347 0 0 0-6.797-2.838q-6.058 0-8.24 4.52a22.382 22.382 0 0 0-1.49 8.346h-12.855q.322-8.62 3.124-13.927 5.319-10.112 18.889-10.112 10.731 0 17.063 5.962 6.332 5.962 6.237 15.633a21.25 21.25 0 0 1-4.484 13.32 44.585 44.585 0 0 1-9.659 8.62l-5.318 3.769q-4.996 3.577-6.832 5.127a15 15 0 0 0-3.1 3.685h29.488v11.685h-46.207a31.73 31.73 0 0 1 3.125-13.271q2.838-6.75 13.414-14.31a98.602 98.602 0 0 0 11.925-9.408 13.916 13.916 0 0 0 4.15-9.682 10.732 10.732 0 0 0-2.433-7.13zm-79.607-1.812a58.536 58.536 0 0 0 8.776-.835 12.377 12.377 0 0 0 6.511-3.577 11.686 11.686 0 0 0 2.6-4.842 11.125 11.125 0 0 0 .512-2.707h11.09v67.54h-13.606v-46.553H208.25v-9.038zM196.468 352.67l-54.434 75.04 114.055 36.965 114.056-36.965-54.434-75.04H196.468zm77.27 83.792q-5.64 7.226-17.517 7.214-12.76 0-18.817-10.672-4.71-8.347-4.71-21.464a97.78 97.78 0 0 1 .656-12.58 38.444 38.444 0 0 1 4.52-14.309 23.121 23.121 0 0 1 7.571-7.87 20.414 20.414 0 0 1 11.197-2.981q9.408 0 15 4.77a18.328 18.328 0 0 1 6.285 12.83h-13.165a6.773 6.773 0 0 0-1.252-3.577 7.286 7.286 0 0 0-6.475-3.172q-6.474 0-9.217 7.262a45.062 45.062 0 0 0-2.051 11.829 14.905 14.905 0 0 1 5.724-4.281 20.975 20.975 0 0 1 22.19 4.77 21.833 21.833 0 0 1 5.748 15.609 26.34 26.34 0 0 1-5.64 16.61zm-10.732-24.612q2.885 3.148 2.885 9.063a13.868 13.868 0 0 1-2.54 8.645 8.275 8.275 0 0 1-6.963 3.327 9.36 9.36 0 0 1-7.453-3.446 13.248 13.248 0 0 1-2.862-8.884q0-6.75 3.911-9.778a9.456 9.456 0 0 1 5.962-2.05 9.241 9.241 0 0 1 7.131 3.111zm119.147-112.195l27.879 8.347-4.77 16.157zm-14.31-71.546l-36.81 113.28 54.483 74.993L456 319.366V199.503zm66.073 86.952l-13.927-4.162-7.656 25.614-11.113-3.315-32.196-35.523 4.27-14.309 40.434 12.08 2.183-7.322 9.956 2.97-2.182 7.32 13.928 4.162zm-289.76-86.952L56 199.491v119.934l70.484 97.016 54.482-74.992zM72.54 286.24l44.43-14-4.77-15.143 8.621-2.719a58.536 58.536 0 0 0 3.435 8.12 12.377 12.377 0 0 0 5.33 5.14 11.686 11.686 0 0 0 5.401 1.026 11.137 11.137 0 0 0 2.731-.322l3.327 10.576-64.391 20.272zm18.47 58.596l-4.09-12.974 44.43-13.999-4.77-15.144 8.622-2.718a58.68 58.68 0 0 0 3.434 8.12 12.365 12.365 0 0 0 5.33 5.14 11.65 11.65 0 0 0 5.402 1.025 11.102 11.102 0 0 0 2.73-.322l3.328 10.577z"/></svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 512 512"
version="1.1"
id="svg1422"
sodipodi:docname="d12blank.svg"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1426" />
<sodipodi:namedview
id="namedview1424"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
showgrid="false"
inkscape:zoom="3.609375"
inkscape:cx="256"
inkscape:cy="256"
inkscape:window-width="3840"
inkscape:window-height="2080"
inkscape:window-x="2869"
inkscape:window-y="-11"
inkscape:window-maximized="1"
inkscape:current-layer="svg1422" />
<path
fill="#000000"
d="M 450.169,181.354 379.685,84.29 265.629,47.325 v 92.652 l 96.384,70.031 z M 246.55,139.977 V 47.325 L 132.494,84.29 62.01,181.354 l 88.156,28.618 z m -47.96,193.614 h 114.998 l 35.51,-109.37 -93.009,-67.598 -93.009,67.599 z m -2.122,19.079 -54.434,75.04 114.055,36.965 114.056,-36.965 -54.434,-75.04 z m 171.375,-124.561 -36.81,113.28 54.483,74.993 L 456,319.366 V 199.503 Z m -223.687,0 L 56,199.491 v 119.934 l 70.484,97.016 54.482,-74.992 z"
id="path1420"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccc" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -0,0 +1,25 @@
@import url('https://fonts.cdnfonts.com/css/century-schoolbook');
#app {
max-width: 1024px;
margin: 0 auto;
padding: 1em;
display: flex;
flex-direction: column;
font-family: 'Century Schoolbook', 'Times New Roman', Times, serif;
}
$theme-colors: (
"primary": rgb(89, 25, 9)
);
$body-bg: hsl(34, 65%, 85%);
$accordion-button-color: white;
$accordion-button-bg: rgb(89, 25, 9);
$accordion-button-active-bg: white;
$accordion-button-active-color: rgb(89, 25, 9);
@import 'bootstrap/scss/bootstrap.scss'

@ -0,0 +1,46 @@
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{ roll: number, dt: number }>();
const rollProps = computed(() => ({
critical: props.roll == 12 || props.roll == 1,
success: props.roll > props.dt,
failure: props.roll <= props.dt
}));
</script>
<template>
<div class="die" :class="rollProps">
{{ props.roll }}
</div>
</template>
<style scoped>
* {
--die-size: 2.8cm;
}
div {
display: inline-block;
width: var(--die-size);
height: var(--die-size);
line-height: var(--die-size);
text-align: center;
color: white;
font-size: x-large;
mask-image: url('@/assets/d12blank.svg');
-webkit-mask-image: url('@/assets/d12blank.svg');
margin: 0.3em;
}
div.success {
background-color: green;
}
div.failure {
background-color: rgb(194, 54, 19);
}
</style>

@ -0,0 +1,85 @@
<script setup lang="ts">
import { Roll } from '@/kartsroller';
import Die from "@/components/Die.vue"
const props = defineProps<{ roll: Roll, i: number }>();
</script>
<template>
<div class="accordion-item">
<div class="summary accordion-header">
<button class="accordion-button" :class="i != 0 ? 'collapsed' : ''" type="button" data-bs-toggle="collapse"
:data-bs-target="'#collapse' + i" aria-expanded="true" :aria-controls="'collapse' + i">
{{ roll.margin }}
</button>
</div>
<div class="accordion-collapse collapse" :class="i == 0 ? 'show' : ''" :id="'collapse' + i">
<div class="accordion-body rollgrid">
<div class="critSuccesses">
<template v-for="r in roll.rolls.filter((x) => x == 12)">
<Die :roll=r :dt=roll.dt />
</template>
</div>
<div class="successes">
<template v-for="r in roll.rolls.filter((x) => x > roll.dt && x != 12)">
<Die :roll=r :dt=roll.dt />
</template>
</div>
<div class="critFailures">
<template v-for="r in roll.rolls.filter((x) => x == 1)">
<Die :roll=r :dt=roll.dt />
</template>
</div>
<div class="failures">
<template v-for="r in roll.rolls.filter((x) => x <= roll.dt && x != 1)">
<Die :roll=r :dt=props.roll.dt />
</template>
</div>
</div>
</div>
</div>
</template>
<style scoped>
div.rollgrid {
display: grid;
grid-template-columns: [crits] 1fr [norm] 1fr;
grid-template-rows: [successes] 1fr [failures] 1fr;
grid-template-areas:
"critSuccesses successes"
"critFailures failures";
gap: 0.3em;
}
div.rollgrid>div {
background-color: antiquewhite;
}
div.summary>button {
grid-area: summary;
padding: 0.3em 1em;
font-size: xx-large;
}
div.critSuccesses {
grid-area: critSuccesses;
}
div.successes {
grid-area: successes;
}
div.critFailures {
grid-area: critFailures;
}
div.failures {
grid-area: failures;
}
</style>

@ -0,0 +1,61 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { Roller } from '../kartsroller'
import Roll from '@/components/Roll.vue'
const state = reactive(new Roller());
</script>
<template>
<h1>Kingdoms and Rulers: Tides of Savits</h1>
<h2>Dice Roller</h2>
<div id="roller">
<div>
<label>CON</label>
<input type="number" id="con" :value="state.con"
@change="event => state.con = Number.parseFloat((<HTMLInputElement>event.target).value)" />
</div>
<div>
<label>Dice Pool</label>
<input type="number" id="dice_pool" :value="state.pool" min="0"
@change="event => state.pool = Number.parseFloat((<HTMLInputElement>event.target).value)" />
</div>
<div>
<label>DT</label>
<input type="number" id="dt" :value="state.dt" min="1" max="11"
@change="event => state.dt = Number.parseFloat((<HTMLInputElement>event.target).value)" />
</div>
<div>
<input type="button" value="Roll" @click="state.roll" class="btn btn-primary" />
</div>
</div>
<div id="history" class="accordion accordion-flush">
<Roll v-for="(roll, i) in state.history" :roll="roll" :i="i" />
</div>
</template>
<style scoped>
#roller {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
}
#roller>div {
display: flex;
flex-direction: column;
text-align: center;
font-size: large;
font-weight: bold;
font-variant: small-caps;
width: 4em;
margin: 0.3em
}
#roller input {
text-align: center;
}
</style>

@ -0,0 +1,56 @@
export class Roller {
history: Roll[];
pool: number;
dt: number;
con: number;
constructor() {
this.history = [];
this.pool = 7;
this.dt = 6;
this.con = 3;
}
public roll() {
this.history.unshift(new Roll(this.pool, this.dt));
// console.log(this.history[0]);
// console.log(this.history[0].failures)
this.pool = Math.max(this.pool - this.history[0].failures, 0) + this.con;
}
}
export class Roll {
readonly rolls: number[];
readonly dt: number;
constructor(d: number, dt: number) {
this.dt = dt;
const rolls = [];
for (let i = 0; i < d; i++) {
rolls[i] = Math.floor(Math.random() * 12 + 1);
}
this.rolls = rolls;
}
public get margin(): number {
const cf = this.rolls.filter((r) => r == 1).length;
const f = this.rolls.filter((r) => r > 1 && r <= this.dt).length;
const s = this.rolls.filter((r) => r < 12 && r > this.dt).length;
const cs = this.rolls.filter((r) => r == 12).length;
return 2 * cs + s - f - 2 * cf;
}
public get failures(): number {
const cf = this.rolls.filter((r) => r == 1).length;
const f = this.rolls.filter((r) => r > 1 && r <= this.dt).length;
return cf + f;
}
}

@ -0,0 +1,11 @@
import "bootstrap"
import './assets/main.scss'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app');

@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

@ -0,0 +1,9 @@
{
"extends": "@tsconfig/node18/tsconfig.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
"compilerOptions": {
"composite": true,
"module": "ESNext",
"types": ["node"]
}
}

@ -0,0 +1,15 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Loading…
Cancel
Save