Compare commits
3 Commits
v2.2
...
97f01f924a
| Author | SHA1 | Date | |
|---|---|---|---|
|
97f01f924a | ||
|
|
102f589869 | ||
|
|
7f5978b226 |
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.
|
||||||
|
|||||||
15
angular.json
15
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,11 +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",
|
||||||
"src/styles.less"
|
"src/styles.less"
|
||||||
],
|
],
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
@@ -58,8 +56,7 @@
|
|||||||
"maximumError": "8kB"
|
"maximumError": "8kB"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"outputHashing": "all",
|
"outputHashing": "all"
|
||||||
"serviceWorker": "ngsw-config.json"
|
|
||||||
},
|
},
|
||||||
"development": {
|
"development": {
|
||||||
"optimization": false,
|
"optimization": false,
|
||||||
@@ -89,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",
|
||||||
@@ -101,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)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
3188
package-lock.json
generated
3188
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@@ -7,36 +7,31 @@
|
|||||||
"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.0.5",
|
"@angular/animations": "^19.0.0",
|
||||||
"@angular/cdk": "~19.0.1",
|
"@angular/cdk": "~19.0.1",
|
||||||
"@angular/common": "^19.0.5",
|
"@angular/common": "^19.0.0",
|
||||||
"@angular/compiler": "^19.0.5",
|
"@angular/compiler": "^19.0.0",
|
||||||
"@angular/core": "^19.0.5",
|
"@angular/core": "^19.0.0",
|
||||||
"@angular/forms": "^19.0.5",
|
"@angular/forms": "^19.0.0",
|
||||||
"@angular/platform-browser": "^19.0.5",
|
"@angular/material": "~19.0.1",
|
||||||
"@angular/platform-browser-dynamic": "^19.0.5",
|
"@angular/platform-browser": "^19.0.0",
|
||||||
"@angular/platform-server": "^19.0.5",
|
"@angular/platform-browser-dynamic": "^19.0.0",
|
||||||
"@angular/router": "^19.0.5",
|
"@angular/platform-server": "^19.0.0",
|
||||||
"@angular/service-worker": "^19.0.5",
|
"@angular/router": "^19.0.0",
|
||||||
"@angular/ssr": "^19.0.6",
|
"@angular/ssr": "^19.0.2",
|
||||||
"@ng-bootstrap/ng-bootstrap": "^18.0.0",
|
|
||||||
"@popperjs/core": "^2.11.8",
|
|
||||||
"bootstrap": "^5.3.3",
|
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.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.0.6",
|
"@angular-devkit/build-angular": "^19.0.2",
|
||||||
"@angular/cli": "^19.0.6",
|
"@angular/cli": "^19.0.2",
|
||||||
"@angular/compiler-cli": "^19.0.5",
|
"@angular/compiler-cli": "^19.0.0",
|
||||||
"@angular/localize": "^19.0.5",
|
|
||||||
"@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",
|
||||||
@@ -48,4 +43,4 @@
|
|||||||
"karma-jasmine-html-reporter": "~2.1.0",
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
"typescript": "~5.6.2"
|
"typescript": "~5.6.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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));
|
||||||
|
});
|
||||||
@@ -2,62 +2,30 @@
|
|||||||
*{
|
*{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.main{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div class="row justify-content-md-center">
|
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
|
||||||
<h1>Please select the number of teams:</h1>
|
<mat-button-toggle value="2">Two</mat-button-toggle>
|
||||||
<div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
|
<mat-button-toggle value="3">Three</mat-button-toggle>
|
||||||
<div class="btn-group me-2" id="numTeamsSelector" role="group"
|
<mat-button-toggle value="n">n</mat-button-toggle>
|
||||||
value="2">
|
</mat-button-toggle-group>
|
||||||
<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">
|
<mat-form-field>
|
||||||
<label class="btn btn-outline-primary" for="btnradio2">Three</label>
|
<mat-label>Names</mat-label>
|
||||||
|
<textarea matInput></textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
<input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
<button mat-flat-button>Generate</button>
|
||||||
<label class="btn btn-outline-primary" for="btnradio3">n</label>
|
|
||||||
</div>
|
<!--TODO replace with ngFor? extract list items as component?-->
|
||||||
<div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" class="col-md-auto">
|
<mat-list>
|
||||||
<label for="nTeamsField">n Teams</label>
|
<mat-list-item>Team1</mat-list-item>
|
||||||
<input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
|
<mat-list-item>Team2</mat-list-item>
|
||||||
</div>
|
<mat-list-item>Team3</mat-list-item>
|
||||||
</div>
|
</mat-list>
|
||||||
|
|
||||||
<form>
|
|
||||||
<div class="container">
|
|
||||||
<label for="playerNames">Names</label>
|
|
||||||
<textarea [(ngModel)]="playerNamesValue"
|
|
||||||
class="form-control mb-3"
|
|
||||||
rows="18"
|
|
||||||
cols="30"
|
|
||||||
style="text-align: left;"
|
|
||||||
name="playerNames"
|
|
||||||
#playerNames
|
|
||||||
id="playerNames"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<table class="table table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Size</th>
|
|
||||||
<th scope="col">Names</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@for (team of teamsArray; track $index) {
|
|
||||||
<tr>
|
|
||||||
<td>{{ team.length | number }}</td>
|
|
||||||
<td>{{ team }}</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<router-outlet />
|
<router-outlet />
|
||||||
|
|||||||
@@ -1,69 +1,17 @@
|
|||||||
import { AfterViewInit, Component, OnInit} from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { RouterOutlet } from '@angular/router';
|
||||||
import { RouterOutlet, ActivatedRoute } 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 {MatListModule} from '@angular/material/list';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
|
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';
|
||||||
playerNamesValue = "";
|
|
||||||
numTeamsSelectorValue = "2";
|
|
||||||
numTeamsSelected = 2;
|
|
||||||
nTeamsValue = "4";
|
|
||||||
teamsArray: string[][] = [];
|
|
||||||
displayedColumns = ["teamCount", "teamNames"];
|
|
||||||
|
|
||||||
constructor(private activatedRoute: ActivatedRoute){}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
//consiedr using Angular's ActivatedRoute here instead
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
|
||||||
const names = params.get('names')?.replaceAll(',', '\n');
|
|
||||||
if (names) this.playerNamesValue = names;
|
|
||||||
}
|
|
||||||
|
|
||||||
onButtonGenerate(textinput: string): void{
|
|
||||||
if(this.numTeamsSelectorValue === 'n'){
|
|
||||||
this.numTeamsSelected = Number(this.nTeamsValue);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
this.numTeamsSelected = Number(this.numTeamsSelectorValue);
|
|
||||||
}
|
|
||||||
let names = this.playerNamesValue
|
|
||||||
.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)];
|
|
||||||
|
|
||||||
var teams = Array.from({ length: this.numTeamsSelected }, () => []);
|
|
||||||
var playersPerTeam = Math.floor(names.length / this.numTeamsSelected);
|
|
||||||
|
|
||||||
let nameslen = names.length;
|
|
||||||
function* iter(list: any[]){
|
|
||||||
let index = 0;
|
|
||||||
while(true){
|
|
||||||
yield list[index % list.length];
|
|
||||||
index++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var iterator = iter(teams);
|
|
||||||
for(let i =0; i < nameslen; i++){
|
|
||||||
var index = Math.floor(Math.random()* names.length);
|
|
||||||
var n = names[index];
|
|
||||||
names.splice(index,1);
|
|
||||||
var team = iterator.next().value;
|
|
||||||
team.push(n);
|
|
||||||
|
|
||||||
}
|
|
||||||
this.teamsArray = teams;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +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 { 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), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'), provideServiceWorker('./sw.js', {
|
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop')]
|
||||||
enabled: !isDevMode(),
|
|
||||||
registrationStrategy: 'registerWhenStable:30000'
|
|
||||||
})]
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|||||||
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