Compare commits
3 Commits
feat/rotat
...
97f01f924a
| Author | SHA1 | Date | |
|---|---|---|---|
|
97f01f924a | ||
|
|
102f589869 | ||
|
|
7f5978b226 |
261
.gitignore
vendored
261
.gitignore
vendored
@@ -1,245 +1,42 @@
|
|||||||
# Created by https://www.toptal.com/developers/gitignore/api/angular,sonarqube,node,visualstudiocode,sass,yarn,bazel
|
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||||
# Edit at https://www.toptal.com/developers/gitignore?templates=angular,sonarqube,node,visualstudiocode,sass,yarn,bazel
|
|
||||||
|
|
||||||
### Angular ###
|
# Compiled output
|
||||||
## Angular ##
|
/dist
|
||||||
# compiled output
|
/tmp
|
||||||
dist/
|
/out-tsc
|
||||||
tmp/
|
/bazel-out
|
||||||
app/**/*.js
|
|
||||||
app/**/*.js.map
|
|
||||||
|
|
||||||
# dependencies
|
# Node
|
||||||
node_modules/
|
/node_modules
|
||||||
bower_components/
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
# IDEs and editors
|
# IDEs and editors
|
||||||
.idea/
|
.idea/
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
# misc
|
# Visual Studio Code
|
||||||
.sass-cache/
|
|
||||||
connect.lock/
|
|
||||||
coverage/
|
|
||||||
libpeerconnection.log/
|
|
||||||
npm-debug.log
|
|
||||||
testem.log
|
|
||||||
typings/
|
|
||||||
.angular/
|
|
||||||
|
|
||||||
# e2e
|
|
||||||
e2e/*.js
|
|
||||||
e2e/*.map
|
|
||||||
|
|
||||||
# System Files
|
|
||||||
.DS_Store/
|
|
||||||
|
|
||||||
### Bazel ###
|
|
||||||
# gitignore template for Bazel build system
|
|
||||||
# website: https://bazel.build/
|
|
||||||
|
|
||||||
# Ignore all bazel-* symlinks. There is no full list since this can change
|
|
||||||
# based on the name of the directory bazel is cloned into.
|
|
||||||
/bazel-*
|
|
||||||
|
|
||||||
# Directories for the Bazel IntelliJ plugin containing the generated
|
|
||||||
# IntelliJ project files and plugin configuration. Seperate directories are
|
|
||||||
# for the IntelliJ, Android Studio and CLion versions of the plugin.
|
|
||||||
/.ijwb/
|
|
||||||
/.aswb/
|
|
||||||
/.clwb/
|
|
||||||
|
|
||||||
### Node ###
|
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
.pnpm-debug.log*
|
|
||||||
|
|
||||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
|
||||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
*.lcov
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# Bower dependency directory (https://bower.io/)
|
|
||||||
bower_components
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
jspm_packages/
|
|
||||||
|
|
||||||
# Snowpack dependency directory (https://snowpack.dev/)
|
|
||||||
web_modules/
|
|
||||||
|
|
||||||
# TypeScript cache
|
|
||||||
*.tsbuildinfo
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Optional stylelint cache
|
|
||||||
.stylelintcache
|
|
||||||
|
|
||||||
# Microbundle cache
|
|
||||||
.rpt2_cache/
|
|
||||||
.rts2_cache_cjs/
|
|
||||||
.rts2_cache_es/
|
|
||||||
.rts2_cache_umd/
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
|
|
||||||
# Yarn Integrity file
|
|
||||||
.yarn-integrity
|
|
||||||
|
|
||||||
# dotenv environment variable files
|
|
||||||
.env
|
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
.env.local
|
|
||||||
|
|
||||||
# parcel-bundler cache (https://parceljs.org/)
|
|
||||||
.cache
|
|
||||||
.parcel-cache
|
|
||||||
|
|
||||||
# Next.js build output
|
|
||||||
.next
|
|
||||||
out
|
|
||||||
|
|
||||||
# Nuxt.js build / generate output
|
|
||||||
.nuxt
|
|
||||||
dist
|
|
||||||
|
|
||||||
# Gatsby files
|
|
||||||
.cache/
|
|
||||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
|
||||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
|
||||||
# public
|
|
||||||
|
|
||||||
# vuepress build output
|
|
||||||
.vuepress/dist
|
|
||||||
|
|
||||||
# vuepress v2.x temp and cache directory
|
|
||||||
.temp
|
|
||||||
|
|
||||||
# Docusaurus cache and generated files
|
|
||||||
.docusaurus
|
|
||||||
|
|
||||||
# Serverless directories
|
|
||||||
.serverless/
|
|
||||||
|
|
||||||
# FuseBox cache
|
|
||||||
.fusebox/
|
|
||||||
|
|
||||||
# DynamoDB Local files
|
|
||||||
.dynamodb/
|
|
||||||
|
|
||||||
# TernJS port file
|
|
||||||
.tern-port
|
|
||||||
|
|
||||||
# Stores VSCode versions used for testing VSCode extensions
|
|
||||||
.vscode-test
|
|
||||||
|
|
||||||
# yarn v2
|
|
||||||
.yarn/cache
|
|
||||||
.yarn/unplugged
|
|
||||||
.yarn/build-state.yml
|
|
||||||
.yarn/install-state.gz
|
|
||||||
.pnp.*
|
|
||||||
|
|
||||||
### Node Patch ###
|
|
||||||
# Serverless Webpack directories
|
|
||||||
.webpack/
|
|
||||||
|
|
||||||
# Optional stylelint cache
|
|
||||||
|
|
||||||
# SvelteKit build / generate output
|
|
||||||
.svelte-kit
|
|
||||||
|
|
||||||
### Sass ###
|
|
||||||
*.css.map
|
|
||||||
*.sass.map
|
|
||||||
*.scss.map
|
|
||||||
|
|
||||||
### SonarQube ###
|
|
||||||
# SonarQube ignore files.
|
|
||||||
#
|
|
||||||
# https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner
|
|
||||||
# Sonar Scanner working directories
|
|
||||||
.sonar/
|
|
||||||
.sonarqube/
|
|
||||||
.scannerwork/
|
|
||||||
|
|
||||||
# http://www.sonarlint.org/commandline/
|
|
||||||
# SonarLint working directories, configuration files (including credentials)
|
|
||||||
.sonarlint/
|
|
||||||
|
|
||||||
### VisualStudioCode ###
|
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/settings.json
|
!.vscode/settings.json
|
||||||
!.vscode/tasks.json
|
!.vscode/tasks.json
|
||||||
!.vscode/launch.json
|
!.vscode/launch.json
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
!.vscode/*.code-snippets
|
.history/*
|
||||||
|
|
||||||
# Local History for Visual Studio Code
|
# Miscellaneous
|
||||||
.history/
|
/.angular/cache
|
||||||
|
.sass-cache/
|
||||||
# Built Visual Studio Code Extensions
|
/connect.lock
|
||||||
*.vsix
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
### VisualStudioCode Patch ###
|
testem.log
|
||||||
# Ignore all local history of files
|
/typings
|
||||||
.history
|
|
||||||
.ionide
|
|
||||||
|
|
||||||
### yarn ###
|
|
||||||
# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
|
|
||||||
|
|
||||||
.yarn/*
|
|
||||||
!.yarn/releases
|
|
||||||
!.yarn/patches
|
|
||||||
!.yarn/plugins
|
|
||||||
!.yarn/sdks
|
|
||||||
!.yarn/versions
|
|
||||||
|
|
||||||
# if you are NOT using Zero-installs, then:
|
|
||||||
# comment the following lines
|
|
||||||
!.yarn/cache
|
|
||||||
|
|
||||||
# and uncomment the following lines
|
|
||||||
# .pnp.*
|
|
||||||
|
|
||||||
# End of https://www.toptal.com/developers/gitignore/api/angular,sonarqube,node,visualstudiocode,sass,yarn,bazel
|
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|||||||
46
README.md
46
README.md
@@ -1,11 +1,8 @@
|
|||||||
# Vb
|
# Vb
|
||||||
A Team Randomizer built using Angular and Bootstrap, installable as a progressive web app (PWA).
|
|
||||||
Supports setting names using URL query parameters:
|
|
||||||
```url
|
|
||||||
https://vb.example.org?names=Me,Myself,I
|
|
||||||
```
|
|
||||||
|
|
||||||
## Development
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.2.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
To start a local development server, run:
|
To start a local development server, run:
|
||||||
|
|
||||||
@@ -15,10 +12,18 @@ ng serve
|
|||||||
|
|
||||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||||
|
|
||||||
Alternatively, to open the server to the network instead of just localhost, use
|
## Code scaffolding
|
||||||
|
|
||||||
|
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run serve
|
ng generate component component-name
|
||||||
|
```
|
||||||
|
|
||||||
|
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate --help
|
||||||
```
|
```
|
||||||
|
|
||||||
## Building
|
## Building
|
||||||
@@ -29,5 +34,26 @@ To build the project run:
|
|||||||
ng build
|
ng build
|
||||||
```
|
```
|
||||||
|
|
||||||
This will compile your project and store the build artifacts in the `dist/` directory.
|
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||||
As this is a static site, simply move the contents of `dist/vb/browser/` to a directory that can be served by nginx or apache.
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng test
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
For end-to-end (e2e) testing, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||||
|
|
||||||
|
## Additional Resources
|
||||||
|
|
||||||
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||||
|
|||||||
16
angular.json
16
angular.json
@@ -21,8 +21,7 @@
|
|||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"browser": "src/main.ts",
|
"browser": "src/main.ts",
|
||||||
"polyfills": [
|
"polyfills": [
|
||||||
"zone.js",
|
"zone.js"
|
||||||
"@angular/localize/init"
|
|
||||||
],
|
],
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "less",
|
"inlineStyleLanguage": "less",
|
||||||
@@ -30,12 +29,10 @@
|
|||||||
{
|
{
|
||||||
"glob": "**/*",
|
"glob": "**/*",
|
||||||
"input": "public"
|
"input": "public"
|
||||||
},
|
}
|
||||||
"src/sw.js"
|
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
"@angular/material/prebuilt-themes/azure-blue.css",
|
||||||
"node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
|
|
||||||
"src/styles.less"
|
"src/styles.less"
|
||||||
],
|
],
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
@@ -59,8 +56,7 @@
|
|||||||
"maximumError": "8kB"
|
"maximumError": "8kB"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"outputHashing": "all",
|
"outputHashing": "all"
|
||||||
"serviceWorker": "ngsw-config.json"
|
|
||||||
},
|
},
|
||||||
"development": {
|
"development": {
|
||||||
"optimization": false,
|
"optimization": false,
|
||||||
@@ -90,8 +86,7 @@
|
|||||||
"options": {
|
"options": {
|
||||||
"polyfills": [
|
"polyfills": [
|
||||||
"zone.js",
|
"zone.js",
|
||||||
"zone.js/testing",
|
"zone.js/testing"
|
||||||
"@angular/localize/init"
|
|
||||||
],
|
],
|
||||||
"tsConfig": "tsconfig.spec.json",
|
"tsConfig": "tsconfig.spec.json",
|
||||||
"inlineStyleLanguage": "less",
|
"inlineStyleLanguage": "less",
|
||||||
@@ -102,6 +97,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
|
"@angular/material/prebuilt-themes/azure-blue.css",
|
||||||
"src/styles.less"
|
"src/styles.less"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": []
|
||||||
|
|||||||
52
index.html
Normal file
52
index.html
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
|
||||||
|
<title>Volleyball Team Randomizer</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Please select the number of teams:</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<label class="radioButtons" for="twoTeams">
|
||||||
|
<input class="radioButtons" type="radio" name="teams" id="twoTeams" checked="checked">
|
||||||
|
Two teams
|
||||||
|
</label>
|
||||||
|
|
||||||
|
|
||||||
|
<label class="radioButtons" for="threeTeams">
|
||||||
|
<input class="radioButtons" type="radio" name="teams" id="threeTeams">
|
||||||
|
Three teams
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="radioButtons" for="nTeams">
|
||||||
|
<input class="radioButtons" type="radio" name="teams" id="nTeams">
|
||||||
|
n Teams
|
||||||
|
|
||||||
|
</label>
|
||||||
|
<input id="nTeamsTextField" style="display: none;" type="number" value=4>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h1>Enter player names (each row represents one player)</h1>
|
||||||
|
|
||||||
|
<textarea rows="18" cols="30" name="playerNames" required="required" id="playerNames"></textarea>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<button id="generateTeams" onclick="randomizeTeams()">Generate Teams</button>
|
||||||
|
|
||||||
|
|
||||||
|
<p id="teamOutput"></p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
|
|
||||||
"index": "/index.html",
|
|
||||||
"assetGroups": [
|
|
||||||
{
|
|
||||||
"name": "app",
|
|
||||||
"installMode": "prefetch",
|
|
||||||
"resources": {
|
|
||||||
"files": [
|
|
||||||
"/favicon.ico",
|
|
||||||
"/index.csr.html",
|
|
||||||
"/index.html",
|
|
||||||
"/manifest.webmanifest",
|
|
||||||
"/*.css",
|
|
||||||
"/*.js"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "assets",
|
|
||||||
"installMode": "lazy",
|
|
||||||
"updateMode": "prefetch",
|
|
||||||
"resources": {
|
|
||||||
"files": [
|
|
||||||
"/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
5246
package-lock.json
generated
5246
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
40
package.json
40
package.json
@@ -1,45 +1,37 @@
|
|||||||
{
|
{
|
||||||
"name": "vb",
|
"name": "vb",
|
||||||
"version": "1.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"start": "ng serve",
|
"start": "ng serve",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"watch": "ng build --watch --configuration development",
|
"watch": "ng build --watch --configuration development",
|
||||||
"test": "ng test",
|
"test": "ng test",
|
||||||
"serve": "ng serve --host 0.0.0.0 --port 4200",
|
|
||||||
"serve:ssr:vb": "node dist/vb/server/server.mjs"
|
"serve:ssr:vb": "node dist/vb/server/server.mjs"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^19.2.7",
|
"@angular/animations": "^19.0.0",
|
||||||
"@angular/cdk": "~19.2.10",
|
"@angular/cdk": "~19.0.1",
|
||||||
"@angular/common": "^19.2.7",
|
"@angular/common": "^19.0.0",
|
||||||
"@angular/compiler": "^19.2.7",
|
"@angular/compiler": "^19.0.0",
|
||||||
"@angular/core": "^19.2.7",
|
"@angular/core": "^19.0.0",
|
||||||
"@angular/forms": "^19.2.7",
|
"@angular/forms": "^19.0.0",
|
||||||
"@angular/platform-browser": "^19.2.7",
|
"@angular/material": "~19.0.1",
|
||||||
"@angular/platform-browser-dynamic": "^19.2.7",
|
"@angular/platform-browser": "^19.0.0",
|
||||||
"@angular/platform-server": "^19.2.7",
|
"@angular/platform-browser-dynamic": "^19.0.0",
|
||||||
"@angular/router": "^19.2.7",
|
"@angular/platform-server": "^19.0.0",
|
||||||
"@angular/service-worker": "^19.2.7",
|
"@angular/router": "^19.0.0",
|
||||||
"@angular/ssr": "^19.2.9",
|
"@angular/ssr": "^19.0.2",
|
||||||
"@ng-bootstrap/ng-bootstrap": "^18.0.0",
|
|
||||||
"@popperjs/core": "^2.11.8",
|
|
||||||
"bootstrap": "^5.3.3",
|
|
||||||
"bootstrap-icons": "^1.13.1",
|
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"sonarqube-scanner": "^4.3.0",
|
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.15.0"
|
"zone.js": "~0.15.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^19.2.9",
|
"@angular-devkit/build-angular": "^19.0.2",
|
||||||
"@angular/cli": "^19.2.9",
|
"@angular/cli": "^19.0.2",
|
||||||
"@angular/compiler-cli": "^19.2.7",
|
"@angular/compiler-cli": "^19.0.0",
|
||||||
"@angular/localize": "^19.2.7",
|
|
||||||
"@sonar/scan": "^4.3.0",
|
|
||||||
"@types/express": "^4.17.17",
|
"@types/express": "^4.17.17",
|
||||||
"@types/jasmine": "~5.1.0",
|
"@types/jasmine": "~5.1.0",
|
||||||
"@types/node": "^18.18.0",
|
"@types/node": "^18.18.0",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
@@ -1,59 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "vb",
|
|
||||||
"short_name": "vb",
|
|
||||||
"theme_color": "#1976d2",
|
|
||||||
"background_color": "#fafafa",
|
|
||||||
"display": "standalone",
|
|
||||||
"scope": "./",
|
|
||||||
"start_url": "./",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "icons/icon-72x72.png",
|
|
||||||
"sizes": "72x72",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-96x96.png",
|
|
||||||
"sizes": "96x96",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-128x128.png",
|
|
||||||
"sizes": "128x128",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-144x144.png",
|
|
||||||
"sizes": "144x144",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-152x152.png",
|
|
||||||
"sizes": "152x152",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-192x192.png",
|
|
||||||
"sizes": "192x192",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-384x384.png",
|
|
||||||
"sizes": "384x384",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "icons/icon-512x512.png",
|
|
||||||
"sizes": "512x512",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
68
script.js
Normal file
68
script.js
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
|
||||||
|
|
||||||
|
function randomizeTeams() {
|
||||||
|
let teamCount = 2;
|
||||||
|
if(document.getElementById("threeTeams").checked){
|
||||||
|
teamCount = 3;
|
||||||
|
}
|
||||||
|
if(document.getElementById("nTeams").checked){
|
||||||
|
teamCount = document.getElementById("nTeamsTextField").value;
|
||||||
|
}
|
||||||
|
const outputField = document.getElementById("teamOutput");
|
||||||
|
let textinput = document.getElementById("playerNames").value;
|
||||||
|
let names = textinput
|
||||||
|
.split('\n')
|
||||||
|
.map(function(str){return str.trim();})
|
||||||
|
.filter(function(str){return str}); // boolean interpretation is same as non-empty
|
||||||
|
// remove duplicates by using a Set
|
||||||
|
names = [...new Set(names)];
|
||||||
|
|
||||||
|
teams = Array.from({ length: teamCount }, () => []);
|
||||||
|
playersPerTeam = Math.floor(names.length / teamCount);
|
||||||
|
|
||||||
|
let nameslen = names.length;
|
||||||
|
iterator = iter(teams);
|
||||||
|
for(let i =0; i < nameslen; i++){
|
||||||
|
index = Math.floor(Math.random()* names.length);
|
||||||
|
n = names[index];
|
||||||
|
names.splice(index,1);
|
||||||
|
team = iterator.next().value;
|
||||||
|
team.push(n);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
outputField.innerHTML = teamstotext(teams)
|
||||||
|
}
|
||||||
|
function teamstotext(teams){
|
||||||
|
textinput = "";
|
||||||
|
for(let i =0; i < teams.length; i++){
|
||||||
|
textinput += `Team${i+1}(${teams[i].length}) :${teamtotext(teams[i])} <br>`;
|
||||||
|
}
|
||||||
|
return textinput;
|
||||||
|
}
|
||||||
|
|
||||||
|
function teamtotext(team){
|
||||||
|
return team;
|
||||||
|
}
|
||||||
|
|
||||||
|
function* iter(list){
|
||||||
|
let index = 0;
|
||||||
|
while(true){
|
||||||
|
yield list[index % list.length];
|
||||||
|
index++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function textchangelistener(){
|
||||||
|
let elem = document.getElementById("nTeamsTextField");
|
||||||
|
if(this.checked && this.id == "nTeams"){
|
||||||
|
elem.style.display = "block";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
elem.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
buttons = document.querySelectorAll("input[type='radio']");
|
||||||
|
buttons.forEach((x) => x.addEventListener("change", textchangelistener));
|
||||||
|
});
|
||||||
@@ -1,10 +1,31 @@
|
|||||||
|
<style>
|
||||||
|
*{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<router-outlet></router-outlet>
|
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
|
||||||
|
<mat-button-toggle value="2">Two</mat-button-toggle>
|
||||||
|
<mat-button-toggle value="3">Three</mat-button-toggle>
|
||||||
|
<mat-button-toggle value="n">n</mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Names</mat-label>
|
||||||
|
<textarea matInput></textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<button mat-flat-button>Generate</button>
|
||||||
|
|
||||||
|
<!--TODO replace with ngFor? extract list items as component?-->
|
||||||
|
<mat-list>
|
||||||
|
<mat-list-item>Team1</mat-list-item>
|
||||||
|
<mat-list-item>Team2</mat-list-item>
|
||||||
|
<mat-list-item>Team3</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
</main>
|
</main>
|
||||||
<nav>
|
|
||||||
<ul ngbNav [activeId]="route.fragment | async" class="nav-tabs custom-navbar bg-body-secondary">
|
<router-outlet />
|
||||||
<li ngbNavItem="/edit" class="custom-navitem"><a ngbNavLink routerLink="/edit" routerLinkActive="active"><i class="bi bi-pencil-square"></i>{{ data.getPlayers().length }}</a></li>
|
|
||||||
<li ngbNavItem="/basic" class="custom-navitem"><a ngbNavLink routerLink="/basic" routerLinkActive="active"><i class="bi bi-shuffle"></i></a></li>
|
|
||||||
<li ngbNavItem="/rotations" class="custom-navitem"><a ngbNavLink routerLink="/rotations" routerLinkActive="active"><i class="bi bi-arrow-repeat"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
html, body{
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
*{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.custom-table {
|
|
||||||
//table-layout: fixed;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
tr{
|
|
||||||
padding-right: .2em;
|
|
||||||
}
|
|
||||||
.wrap-cell{
|
|
||||||
word-break: break-all;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.custom-navbar{
|
|
||||||
height: 3rem;
|
|
||||||
width: 100vw;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around; /* Distribute items evenly */
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
.custom-navitem{
|
|
||||||
text-align: center; /* Center the content of each item */
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.nav-link.active{
|
|
||||||
}
|
|
||||||
@@ -1,40 +1,17 @@
|
|||||||
import { Component, inject, OnInit} from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { RouterOutlet } from '@angular/router';
|
||||||
import { RouterOutlet, ActivatedRoute, RouterLink } from '@angular/router';
|
import {MatButtonToggleModule} from '@angular/material/button-toggle';
|
||||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
import {MatButtonModule} from '@angular/material/button';
|
||||||
|
import {MatInputModule} from '@angular/material/input';
|
||||||
import { CommonModule } from '@angular/common';
|
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||||
import { filter, take } from 'rxjs';
|
import {MatListModule} from '@angular/material/list';
|
||||||
import { ScreenBasicComponent } from "./screen-basic/screen-basic.component";
|
|
||||||
import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
|
|
||||||
import { Player } from './model';
|
|
||||||
import { ScreenEditComponent } from './screen-edit/screen-edit.component';
|
|
||||||
import { DataService } from './data.service';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent, ScreenRotationsComponent, ScreenEditComponent, RouterLink],
|
imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule],
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrl: './app.component.less'
|
styleUrl: './app.component.less'
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent {
|
||||||
title = 'vb';
|
title = 'vb';
|
||||||
data = inject(DataService);
|
|
||||||
|
|
||||||
constructor(public route: ActivatedRoute){}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.route.queryParams.pipe(
|
|
||||||
filter(params => Object.keys(params).length > 0), // Only proceed if params are not empty
|
|
||||||
take(1)
|
|
||||||
).subscribe(params => {
|
|
||||||
if (params['names']){
|
|
||||||
this.data.setPlayers(
|
|
||||||
params['names'].split(',').map((name: string) => new Player(name))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,10 @@
|
|||||||
import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';
|
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||||
import { provideRouter } from '@angular/router';
|
import { provideRouter } from '@angular/router';
|
||||||
|
|
||||||
import { routes } from './app.routes';
|
import { routes } from './app.routes';
|
||||||
|
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
|
||||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||||
import { provideServiceWorker } from '@angular/service-worker';
|
|
||||||
|
|
||||||
export const appConfig: ApplicationConfig = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync('noop'), provideServiceWorker('./sw.js', {
|
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop')]
|
||||||
enabled: !isDevMode(),
|
|
||||||
registrationStrategy: 'registerWhenStable:30000'
|
|
||||||
})]
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,17 +1,3 @@
|
|||||||
import { Routes } from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
import { ScreenBasicComponent } from './screen-basic/screen-basic.component';
|
|
||||||
import { ScreenEditComponent } from './screen-edit/screen-edit.component';
|
|
||||||
import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
|
|
||||||
import { AppComponent } from './app.component';
|
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [];
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
children: [
|
|
||||||
{ path: '', redirectTo: 'edit', pathMatch: 'full' },
|
|
||||||
{ path: 'edit', component: ScreenEditComponent },
|
|
||||||
{ path: 'basic', component: ScreenBasicComponent },
|
|
||||||
{ path: 'rotations', component: ScreenRotationsComponent }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|||||||
@@ -1,16 +0,0 @@
|
|||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { DataService } from './data.service';
|
|
||||||
|
|
||||||
describe('DataService', () => {
|
|
||||||
let service: DataService;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({});
|
|
||||||
service = TestBed.inject(DataService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { Player } from './model';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class DataService {
|
|
||||||
private players: Player[] = [];
|
|
||||||
|
|
||||||
setPlayers(players: Player[]){
|
|
||||||
for (let player of players){
|
|
||||||
this.addPlayer(player);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addPlayer(player: Player): boolean{
|
|
||||||
if (player.name.trim() && Player.isNew(player, this.players)){
|
|
||||||
this.players.push(player);
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
removePlayer(player: Player){
|
|
||||||
const index = this.players.indexOf(player);
|
|
||||||
if (index !== -1) {
|
|
||||||
this.players.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getPlayers(): Player[] {
|
|
||||||
let clone =Object.assign([],this.players);
|
|
||||||
return clone
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
<div class="modal-header">
|
|
||||||
<h4 class="modal-title">{{ player.name }}</h4>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-close"
|
|
||||||
(click)="activeModal.dismiss()"
|
|
||||||
aria-label="Close"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
[(ngModel)]="player.outside"
|
|
||||||
name="outside"
|
|
||||||
id="outside"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="outside">Outside</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
[(ngModel)]="player.middle"
|
|
||||||
name="middle"
|
|
||||||
id="middle"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="middle">Middle</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
[(ngModel)]="player.opposite"
|
|
||||||
name="opposite"
|
|
||||||
id="opposite"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="opposite">Opposite</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
[(ngModel)]="player.setter"
|
|
||||||
name="setter"
|
|
||||||
id="setter"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="setter">Setter</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
[(ngModel)]="player.libero"
|
|
||||||
name="libero"
|
|
||||||
id="libero"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="libero">Libero</label>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary"
|
|
||||||
(click)="savePlayer(); activeModal.close()"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { ModalRotationsComponent } from './modal-rotations.component';
|
|
||||||
|
|
||||||
describe('ModalRotationsComponent', () => {
|
|
||||||
let component: ModalRotationsComponent;
|
|
||||||
let fixture: ComponentFixture<ModalRotationsComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [ModalRotationsComponent]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(ModalRotationsComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import { Component, Input } from '@angular/core';
|
|
||||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
|
||||||
import { Player} from '../model';
|
|
||||||
import { FormsModule } from '@angular/forms';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-modal-rotations',
|
|
||||||
imports: [FormsModule],
|
|
||||||
templateUrl: './modal-rotations.component.html',
|
|
||||||
styleUrl: './modal-rotations.component.less'
|
|
||||||
})
|
|
||||||
export class ModalRotationsComponent {
|
|
||||||
@Input() player!: Player;
|
|
||||||
|
|
||||||
constructor(public activeModal: NgbActiveModal) {}
|
|
||||||
|
|
||||||
savePlayer() {
|
|
||||||
// You can emit an event or handle the save logic here
|
|
||||||
this.activeModal.close(this.player);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
export class Player{
|
|
||||||
name: string;
|
|
||||||
outside: boolean;
|
|
||||||
middle: boolean;
|
|
||||||
opposite: boolean; // dia
|
|
||||||
setter: boolean;
|
|
||||||
libero: boolean;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
name:string,
|
|
||||||
outside: boolean = false,
|
|
||||||
middle: boolean = false,
|
|
||||||
opposite: boolean = false, // dia
|
|
||||||
setter: boolean = false,
|
|
||||||
libero: boolean = false,
|
|
||||||
){
|
|
||||||
this.name = name;
|
|
||||||
this.outside = outside;
|
|
||||||
this.middle = middle;
|
|
||||||
this.opposite = opposite;
|
|
||||||
this.setter = setter;
|
|
||||||
this.libero = libero;
|
|
||||||
}
|
|
||||||
serialize(): string[] {
|
|
||||||
const values = 'OOOO'
|
|
||||||
return [this.name, values];
|
|
||||||
}
|
|
||||||
|
|
||||||
valueOf(): string{
|
|
||||||
return this.name;
|
|
||||||
}
|
|
||||||
static deSerialize(name: string, values: string): Player{
|
|
||||||
return new Player(name);
|
|
||||||
}
|
|
||||||
static isNew(newplayer:Player, players: Player[]): boolean {
|
|
||||||
const seen = new Set<string>(players.map(p => p.name));
|
|
||||||
if (seen.has(newplayer.name)){
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
<div class="justify-content-md-center">
|
|
||||||
<div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
|
|
||||||
<div class="btn-group me-2" id="numTeamsSelector" role="group"
|
|
||||||
value="2">
|
|
||||||
<input value="2" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
|
||||||
<label class="btn btn-outline-primary" for="btnradio1">Two</label>
|
|
||||||
|
|
||||||
<input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
|
||||||
<label class="btn btn-outline-primary" for="btnradio2">Three</label>
|
|
||||||
|
|
||||||
<input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
|
||||||
<label class="btn btn-outline-primary" for="btnradio3">n</label>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" class="col-md-auto">
|
|
||||||
<label for="nTeamsField">n Teams</label>
|
|
||||||
<input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>Random Teams</h1>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<button type="button" (click)="onButtonGenerate()" class="btn btn-primary">Generate</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<table class="table table-striped custom-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Size</th>
|
|
||||||
<th scope="col">Names</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@for (team of teamsArray; track $index) {
|
|
||||||
<tr>
|
|
||||||
<td style="text-wrap: wrap;">{{ team.length | number }}</td>
|
|
||||||
<td class="wrap-cell">{{ team }}</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { ScreenBasicComponent } from './screen-basic.component';
|
|
||||||
|
|
||||||
describe('ScreenBasicComponent', () => {
|
|
||||||
let component: ScreenBasicComponent;
|
|
||||||
let fixture: ComponentFixture<ScreenBasicComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [ScreenBasicComponent]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(ScreenBasicComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
// Original Team Generation Screen for arbitrary size and number of teams
|
|
||||||
import { Component, inject} from '@angular/core';
|
|
||||||
import { FormsModule } from '@angular/forms';
|
|
||||||
import { RouterOutlet, ActivatedRoute } from '@angular/router';
|
|
||||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { Player } from '../model';
|
|
||||||
import { iter } from '../util';
|
|
||||||
import { DataService } from '../data.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-screen-basic',
|
|
||||||
imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
|
|
||||||
templateUrl: './screen-basic.component.html',
|
|
||||||
styleUrl: './screen-basic.component.less'
|
|
||||||
})
|
|
||||||
export class ScreenBasicComponent {
|
|
||||||
data = inject(DataService);
|
|
||||||
numTeamsSelectorValue = "2";
|
|
||||||
numTeamsSelected = 2;
|
|
||||||
nTeamsValue = "4";
|
|
||||||
teamsArray: string[][] = [];
|
|
||||||
|
|
||||||
onButtonGenerate(): void{
|
|
||||||
if(this.numTeamsSelectorValue === 'n'){
|
|
||||||
this.numTeamsSelected = Number(this.nTeamsValue);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
this.numTeamsSelected = Number(this.numTeamsSelectorValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
let teams = Array.from({ length: this.numTeamsSelected }, () => []);
|
|
||||||
// clone array here
|
|
||||||
let localPlayers: Player[] = this.data.getPlayers();
|
|
||||||
|
|
||||||
let nameslen = localPlayers.length;
|
|
||||||
let iterator = iter(teams);
|
|
||||||
for(let i =0; i < nameslen; i++){
|
|
||||||
let index = Math.floor(Math.random()* localPlayers.length);
|
|
||||||
let n = localPlayers[index];
|
|
||||||
localPlayers.splice(index,1);
|
|
||||||
let team = iterator.next().value;
|
|
||||||
team.push(n.name);
|
|
||||||
|
|
||||||
}
|
|
||||||
this.teamsArray = teams;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
<div class="justify-content-md-center">
|
|
||||||
<h1>Players: {{ data.getPlayers().length }}</h1>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
[(ngModel)]="newItem"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Enter a name..."
|
|
||||||
(keyup.enter)="addItem()"
|
|
||||||
/>
|
|
||||||
<button class="btn btn-primary" type="button" (click)="addItem()" >
|
|
||||||
<i class="bi bi-plus-lg"></i> Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
@if (alertMessage) {
|
|
||||||
<ngb-alert #selfClosingAlert type="danger" (closed)="alertMessage = ''">{{ alertMessage }}</ngb-alert>
|
|
||||||
}
|
|
||||||
<div class="container mt-4">
|
|
||||||
<ul class="list-group mb-3">
|
|
||||||
@for (player of data.getPlayers(); track $index) {
|
|
||||||
<li class="list-group-item d-flex justify-content-between">
|
|
||||||
<a (click)="openPlayerModal(player)" style="display: block; cursor: pointer; flex-grow: 1; text-align: left;">{{ player.name }}</a>
|
|
||||||
<button (click)="removeItem(player)" class="btn btn-secondary btn-sm p-0 ms-2" style="width: 24px; height: 24px" >
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { ScreenEditComponent } from './screen-edit.component';
|
|
||||||
|
|
||||||
describe('ScreenEditComponent', () => {
|
|
||||||
let component: ScreenEditComponent;
|
|
||||||
let fixture: ComponentFixture<ScreenEditComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [ScreenEditComponent]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(ScreenEditComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import { Component, inject, Input, ViewChild } from '@angular/core';
|
|
||||||
import { NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
|
||||||
import { Player } from '../model';
|
|
||||||
import { ModalRotationsComponent } from '../modal-rotations/modal-rotations.component';
|
|
||||||
import { FormsModule } from '@angular/forms';
|
|
||||||
import { Subject } from 'rxjs/internal/Subject';
|
|
||||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
||||||
import { debounceTime, tap } from 'rxjs/operators';
|
|
||||||
import { DataService } from '../data.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-screen-edit',
|
|
||||||
imports: [FormsModule, NgbAlert],
|
|
||||||
templateUrl: './screen-edit.component.html',
|
|
||||||
styleUrl: './screen-edit.component.less'
|
|
||||||
})
|
|
||||||
export class ScreenEditComponent {
|
|
||||||
data = inject(DataService);
|
|
||||||
@ViewChild('selfClosingAlert', { static: false })selfClosingAlert!: NgbAlert;
|
|
||||||
private _message$ = new Subject<string>();
|
|
||||||
newItem: string = "";
|
|
||||||
alertMessage = '';
|
|
||||||
|
|
||||||
constructor(private modalService: NgbModal) {
|
|
||||||
this._message$
|
|
||||||
.pipe(
|
|
||||||
takeUntilDestroyed(),
|
|
||||||
tap((message) => (this.alertMessage = message)),
|
|
||||||
debounceTime(5000),
|
|
||||||
)
|
|
||||||
.subscribe(() => this.selfClosingAlert?.close());
|
|
||||||
}
|
|
||||||
|
|
||||||
addItem() {
|
|
||||||
const name = this.newItem.trim()
|
|
||||||
if (name) {
|
|
||||||
let newPlayer = new Player(name);
|
|
||||||
if(this.data.addPlayer(newPlayer)){
|
|
||||||
this.newItem = '';
|
|
||||||
return
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
this.setAlertMessage(newPlayer.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
removeItem(player: Player){
|
|
||||||
this.data.removePlayer(player);
|
|
||||||
}
|
|
||||||
|
|
||||||
openPlayerModal(player: Player){
|
|
||||||
const modalRef = this.modalService.open(ModalRotationsComponent);
|
|
||||||
modalRef.componentInstance.player = player;
|
|
||||||
/*
|
|
||||||
modalRef.result.then((updatedPlayer) => {
|
|
||||||
// Handle the updated player data if needed
|
|
||||||
console.log('Player updated:', updatedPlayer);
|
|
||||||
}).catch((error) => {
|
|
||||||
console.log('Modal dismissed');
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
public setAlertMessage(s: string) {
|
|
||||||
this._message$.next(`"${s}" already exists. Please choose a unique name.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
<div class="justify-content-md-center">
|
|
||||||
<h1>Rotations</h1>
|
|
||||||
<div ngbAccordion>
|
|
||||||
<div ngbAccordionItem [collapsed]="false">
|
|
||||||
<h2 ngbAccordionHeader>
|
|
||||||
<button ngbAccordionButton>Libero: {{ LiberoPlayers.length }}</button>
|
|
||||||
</h2>
|
|
||||||
<div ngbAccordionCollapse>
|
|
||||||
<div ngbAccordionBody>
|
|
||||||
<ng-template>
|
|
||||||
@for (player of LiberoPlayers; track $index) {
|
|
||||||
{{ player.name }}
|
|
||||||
}
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div ngbAccordionItem>
|
|
||||||
<h2 ngbAccordionHeader>
|
|
||||||
<button ngbAccordionButton>Setter: {{ SetterPlayers.length }}</button>
|
|
||||||
</h2>
|
|
||||||
<div ngbAccordionCollapse>
|
|
||||||
<div ngbAccordionBody>
|
|
||||||
<ng-template>
|
|
||||||
@for (player of SetterPlayers; track $index) {
|
|
||||||
{{ player.name }}
|
|
||||||
}
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div ngbAccordionItem>
|
|
||||||
<h2 ngbAccordionHeader>
|
|
||||||
<button ngbAccordionButton>Opposite: {{ OppositePlayers.length }}</button>
|
|
||||||
</h2>
|
|
||||||
<div ngbAccordionCollapse>
|
|
||||||
<div ngbAccordionBody>
|
|
||||||
<ng-template>
|
|
||||||
@for (player of OppositePlayers; track $index) {
|
|
||||||
{{ player.name }}
|
|
||||||
}
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div ngbAccordionItem>
|
|
||||||
<h2 ngbAccordionHeader>
|
|
||||||
<button ngbAccordionButton>Middle: {{ MiddlePlayers.length }}</button>
|
|
||||||
</h2>
|
|
||||||
<div ngbAccordionCollapse>
|
|
||||||
<div ngbAccordionBody>
|
|
||||||
<ng-template>
|
|
||||||
@for (player of MiddlePlayers; track $index) {
|
|
||||||
{{ player.name }}
|
|
||||||
}
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div ngbAccordionItem>
|
|
||||||
<h2 ngbAccordionHeader>
|
|
||||||
<button ngbAccordionButton>Outside: {{ OutsidePlayers.length}}</button>
|
|
||||||
</h2>
|
|
||||||
<div ngbAccordionCollapse>
|
|
||||||
<div ngbAccordionBody>
|
|
||||||
<ng-template>
|
|
||||||
@for (player of OutsidePlayers; track $index) {
|
|
||||||
{{ player.name }}
|
|
||||||
}
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { ScreenRotationsComponent } from './screen-rotations.component';
|
|
||||||
|
|
||||||
describe('ScreenRotationsComponent', () => {
|
|
||||||
let component: ScreenRotationsComponent;
|
|
||||||
let fixture: ComponentFixture<ScreenRotationsComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [ScreenRotationsComponent]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(ScreenRotationsComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
// Team Generation Screen respecting volleyball roles as defined by `../model/Player`
|
|
||||||
import { Component, inject, Input } from '@angular/core';
|
|
||||||
import { FormsModule } from '@angular/forms';
|
|
||||||
import { Player } from '../model';
|
|
||||||
import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordionItem, NgbAccordionButton, NgbAccordionDirective, NgbAccordionToggle } from '@ng-bootstrap/ng-bootstrap';
|
|
||||||
import { DataService } from '../data.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-screen-rotations',
|
|
||||||
imports: [FormsModule, NgbAccordionButton, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionBody, NgbAccordionCollapse,],
|
|
||||||
templateUrl: './screen-rotations.component.html',
|
|
||||||
styleUrl: './screen-rotations.component.less'
|
|
||||||
})
|
|
||||||
export class ScreenRotationsComponent {
|
|
||||||
data = inject(DataService);
|
|
||||||
|
|
||||||
get OutsidePlayers(): Player[] {
|
|
||||||
return this.data.getPlayers().filter(player => player.outside);
|
|
||||||
}
|
|
||||||
get MiddlePlayers(): Player[] {
|
|
||||||
return this.data.getPlayers().filter(player => player.middle);
|
|
||||||
}
|
|
||||||
get OppositePlayers(): Player[] {
|
|
||||||
return this.data.getPlayers().filter(player => player.opposite);
|
|
||||||
}
|
|
||||||
get SetterPlayers(): Player[] {
|
|
||||||
return this.data.getPlayers().filter(player => player.setter);
|
|
||||||
}
|
|
||||||
get LiberoPlayers(): Player[] {
|
|
||||||
return this.data.getPlayers().filter(player => player.libero);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
export function* iter(list: any[]){
|
|
||||||
let index = 0;
|
|
||||||
while(true){
|
|
||||||
yield list[index % list.length];
|
|
||||||
index++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -6,11 +6,10 @@
|
|||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
<link rel="manifest" href="manifest.webmanifest">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||||
<meta name="theme-color" content="#1976d2">
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
<noscript>Please enable JavaScript to continue using this application.</noscript>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
/// <reference types="@angular/localize" />
|
|
||||||
|
|
||||||
import { bootstrapApplication } from '@angular/platform-browser';
|
import { bootstrapApplication } from '@angular/platform-browser';
|
||||||
import { appConfig } from './app/app.config';
|
import { appConfig } from './app/app.config';
|
||||||
import { AppComponent } from './app/app.component';
|
import { AppComponent } from './app/app.component';
|
||||||
|
|||||||
@@ -1,17 +1,4 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
html, body {
|
html, body { height: 100%; }
|
||||||
height: 100%;
|
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin:3em auto;
|
|
||||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
|
||||||
padding:0 .5em;
|
|
||||||
}
|
|
||||||
h1,h2,h3{
|
|
||||||
line-height:1.2;
|
|
||||||
letter-spacing: -2%;
|
|
||||||
}
|
|
||||||
|
|||||||
12
src/sw.js
12
src/sw.js
@@ -1,12 +0,0 @@
|
|||||||
self.addEventListener('fetch', event => {
|
|
||||||
if (event &&
|
|
||||||
event.request &&
|
|
||||||
event.request.url &&
|
|
||||||
// check if basename includes a dot, i.e. if it is not a file
|
|
||||||
! event.request.url.split(/[\\/]/).pop().includes(".")
|
|
||||||
) {
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
self.importScripts('./ngsw-worker.js');
|
|
||||||
47
style.css
Normal file
47
style.css
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
*{
|
||||||
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||||
|
background-color: aquamarine;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea{
|
||||||
|
font-size: 1vh;
|
||||||
|
width: 100%;
|
||||||
|
height:50vh;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2vh;
|
||||||
|
}
|
||||||
|
.radioButtons, #nTeamsTextField{
|
||||||
|
height:2vh;
|
||||||
|
font-size: 2vh;
|
||||||
|
line-height: 2vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1em auto;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
#teamOutput{
|
||||||
|
|
||||||
|
margin-top:10vh;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2vh;
|
||||||
|
line-height: 4.5vh;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
position: absolute;
|
||||||
|
left:50%;
|
||||||
|
margin-top: 5vh;
|
||||||
|
-ms-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
height: 5vh;
|
||||||
|
font-size: 2vh;
|
||||||
|
padding-left: 10%;
|
||||||
|
padding-right: 10%;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -5,8 +5,7 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./out-tsc/app",
|
"outDir": "./out-tsc/app",
|
||||||
"types": [
|
"types": [
|
||||||
"node",
|
"node"
|
||||||
"@angular/localize"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
|
|||||||
@@ -5,8 +5,7 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./out-tsc/spec",
|
"outDir": "./out-tsc/spec",
|
||||||
"types": [
|
"types": [
|
||||||
"jasmine",
|
"jasmine"
|
||||||
"@angular/localize"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
|
|||||||
Reference in New Issue
Block a user