sascha
/
bullpen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bullpen pitch progress

This commit is contained in:
Sascha Kühl 2025-04-08 16:05:30 +02:00
parent ea885ae56f
commit da83b0b123
8 changed files with 161 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/router/index.ts
View File

@ -23,6 +23,10 @@ const routes: Array<RouteRecordRaw> = [
path: '/pitchers',
name: 'Pitchers',
component: PitcherList
}, {
path: '/bullpen',
name: 'PreparePitch',
component: PreparePitch
}, {
path: '/prepare',
name: 'PreparePitch',

83
app/src/services/BullpenSessionService.ts
View File

@ -1,89 +1,32 @@
import Pitch from "@/types/Pitch";
import User from "@/types/User";
import PitchType from "@/types/PitchType";
import Bullpen from '@/types/Bullpen';
import PitchTypeService from '@/services/PitchTypeService';
// import api from './Api';
export class BullpenSessionService {
private static nullPitcher: User = {
id: 0,
firstName: "",
lastName: "",
gender: "male",
handedness: "right",
height: 0.0,
weight: 0.0,
dateOfBirth: new Date(0),
createdAt: new Date(0),
updatedAt: new Date(0),
};
private static nullPitchType: PitchType = {
id: 0,
name: "",
abbreviation: ""
public create(user: User): Bullpen {
return {
id: null,
startedAt: new Date(),
finishedAt: null,
pitcherId: user.id,
pitches: []
}
}
public constructor() {
this.currentPitch = this.createPitch();
}
public finish(): void {}
public saveBullpen(): void {}
public startSession(pitcher: User): void {
this.pitcher = pitcher;
this.pitches = [];
this.currentPitch = this.createPitch();
}
public clear(): void {
this.pitcher = BullpenSessionService.nullPitcher;
this.pitches = [];
}
public finishSession(): void {
// Todo: save to backend
}
public cancelSession(): void {
this.pitches = [];
this.pitcher = BullpenSessionService.nullPitcher;
}
public addBullpenPitch( bullpenPitch: Pitch ): void {
this.pitches.push( bullpenPitch );
}
public getBullpenPitches(): Pitch[] {
return this.pitches;
}
public currentBullpenPitch(): Pitch {
return this.currentPitch;
}
public nextPitch(): void {
this.pitches.push(this.currentBullpenPitch());
this.currentPitch = this.createPitch();
}
public getPitcher(): User {
return this.pitcher;
}
public isSessionStarted(): boolean {
return this.pitcher.id === 0;
}
private createPitch(): Pitch {
public createPitch(): Pitch {
return {
id: 0,
date: new Date(),
pitchType: BullpenSessionService.nullPitchType,
pitchType: PitchTypeService.getLocalPitchTypes()[0],
plannedPitchArea: 0,
realPitchArea: 0,
realPitchSubArea: 0
}
}
private pitches: Pitch[] = [];
private pitcher: User = BullpenSessionService.nullPitcher;
private currentPitch: Pitch;
}
export default new BullpenSessionService();

3
app/src/store/auth.ts
View File

@ -84,6 +84,9 @@ const auth: Module<AuthState, RootState> = {
registerFailure(state) {
state.isAuthenticated = false;
}
},
getters: {
getUser: (state) => state.user
}
};

29
app/src/store/bullpen.ts Normal file
View File

@ -0,0 +1,29 @@
import { Module } from 'vuex';
import { RootState } from './index';
import Bullpen from '@/types/Bullpen';
import User from '@/types/User';
import BullpenSessionService from '@/services/BullpenSessionService';
import Pitch from '@/types/Pitch';
export interface BullpenState {
bullpen: Bullpen | null;
}
const bullpen: Module<BullpenState, RootState> = {
namespaced: true,
state: { bullpen: null },
mutations: {
start(state, user: User) {
state.bullpen = BullpenSessionService.create(user);
},
addPitch(state, pitch: Pitch) {
state.bullpen?.pitches.push({ ...pitch });
},
finish(state) {
state.bullpen = null;
}
}
};
export default bullpen;

3
app/src/store/index.ts
View File

@ -1,11 +1,13 @@
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex';
import auth, {AuthState} from './auth';
import bullpen, {BullpenState} from './bullpen';
import pitchTypes, {PitchTypeState} from './pitchType';
// Root state type
export interface RootState {
auth: AuthState;
bullpen: BullpenState;
pitchTypes: PitchTypeState;
}
@ -14,6 +16,7 @@ export const key: InjectionKey<Store<RootState>> = Symbol()
const store = createStore<RootState>({
modules: {
auth,
bullpen,
pitchTypes
}
});

4
app/src/types/Bullpen.ts
View File

@ -1,9 +1,9 @@
import Pitch from "@/types/Pitch";
export default interface Bullpen {
id: number,
id: number | null,
startedAt: Date,
finishedAt: Date,
finishedAt: Date | null,
pitcherId: number,
pitches: Pitch[]
}

4
app/src/types/BullpenStep.ts Normal file
View File

@ -0,0 +1,4 @@
export enum BullpenStep {
Prepare = 1,
Finish = 2
}

144
app/src/views/PreparePitch.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import {onMounted, ref} from "vue";
import PitchTypeService from "@/services/PitchTypeService";
import {computed, onMounted, ref} from "vue";
import {
IonContent,
IonHeader,
@ -13,39 +12,73 @@ import {
IonCard,
IonCardContent,
IonCardHeader,
IonCardTitle,
IonCardTitle, IonRow, IonGrid, IonCol,
} from "@ionic/vue";
import {BullpenStep} from "@/types/BullpenStep";
import PitchType from "@/types/PitchType";
import Pitch from "@/types/Pitch";
import BullpenSessionService from "@/services/BullpenSessionService";
import {useRouter} from "vue-router";
import {useStore} from 'vuex';
const router = useRouter();
const pitchTypes = ref<PitchType[]>([]);
const bps = ref(BullpenSessionService);
const store = useStore();
const pitch = ref<Pitch>(BullpenSessionService.createPitch());
const currentStep = ref<BullpenStep>(BullpenStep.Prepare);
const pitcher = computed(() => store.state.auth.user);
const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
onMounted(async () => {
pitchTypes.value = PitchTypeService.getLocalPitchTypes();
bps.value.currentBullpenPitch().pitchType = pitchTypes.value[0];
store.commit("bullpen/start", pitcher);
});
const setPitchType = (pitchType: PitchType) => {
bps.value.currentBullpenPitch().pitchType = pitchType;
pitch.value.pitchType = pitchType;
}
const gotoFinalizePitch = () => {
router.push({ name: 'FinalizePitch' });
currentStep.value = BullpenStep.Finish;
}
const finalizeAndNextPitch = () => {
store.commit("bullpen/addPitch", pitch.value);
currentStep.value = BullpenStep.Prepare;
}
const finalizeAndEndBullpen = () => {
store.commit("bullpen/addPitch", pitch.value);
router.push({ name: 'BullpenStats' });
}
const setPlannedPitchArea = (hitArea: number) => {
bps.value.currentBullpenPitch().plannedPitchArea = hitArea;
if (currentStep.value === BullpenStep.Prepare) {
pitch.value.plannedPitchArea = hitArea;
} else {
pitch.value.realPitchArea = hitArea;
}
};
const pitchAreaCssClasses = (area: number, name: string) => {
const classes = [];
if (pitch.value.plannedPitchArea === area) {
classes.push(name + '-aim-selected');
}
if (pitch.value.realPitchArea === area) {
classes.push(name + '-hit-selected');
}
return classes;
}
</script>
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Prepare Pitch for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
<ion-title>Prepare Pitch for {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@ -54,7 +87,7 @@ const setPlannedPitchArea = (hitArea: number) => {
<ion-card-title>Select Pitch type</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button v-for="(pitchType, index) in pitchTypes" :key="index" :color="pitchType.id !== bps.currentBullpenPitch().pitchType.id ? 'primary' : 'warning'" @click="setPitchType(pitchType)">
<ion-button v-for="(pitchType, index) in pitchTypes" :key="index" :color="pitchType.id !== pitch.pitchType.id ? 'primary' : 'warning'" @click="setPitchType(pitchType)">
<ion-label>{{pitchType.abbreviation}}</ion-label>
</ion-button>
</ion-card-content>
@ -65,14 +98,14 @@ const setPlannedPitchArea = (hitArea: number) => {
</ion-card-header>
<ion-card-content>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 21}" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setPlannedPitchArea(21)" />
<rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 22}" class="wasted" x="105" y="0" width="150" height="60" @click="setPlannedPitchArea(22)" />
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 23}" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setPlannedPitchArea(23)" />
<rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 24}" class="wasted" x="0" y="105" width="60" height="150" @click="setPlannedPitchArea(24)" />
<rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 25}" class="wasted" x="300" y="105" width="60" height="150" @click="setPlannedPitchArea(25)" />
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 26}" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setPlannedPitchArea(26)" />
<rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 27}" class="wasted" x="105" y="300" width="150" height="60" @click="setPlannedPitchArea(27)" />
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 28}" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setPlannedPitchArea(28)" />
<polygon :class="pitchAreaCssClasses(21, 'wasted')" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setPlannedPitchArea(21)" />
<rect :class="pitchAreaCssClasses(22, 'wasted')" class="wasted" x="105" y="0" width="150" height="60" @click="setPlannedPitchArea(22)" />
<polygon :class="pitchAreaCssClasses(23, 'wasted')" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setPlannedPitchArea(23)" />
<rect :class="pitchAreaCssClasses(24, 'wasted')" class="wasted" x="0" y="105" width="60" height="150" @click="setPlannedPitchArea(24)" />
<rect :class="pitchAreaCssClasses(25, 'wasted')" class="wasted" x="300" y="105" width="60" height="150" @click="setPlannedPitchArea(25)" />
<polygon :class="pitchAreaCssClasses(26, 'wasted')" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setPlannedPitchArea(26)" />
<rect :class="pitchAreaCssClasses(27, 'wasted')" class="wasted" x="105" y="300" width="150" height="60" @click="setPlannedPitchArea(27)" />
<polygon :class="pitchAreaCssClasses(28, 'wasted')" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setPlannedPitchArea(28)" />
<text x="30" y="40" class="number" @click="setPlannedPitchArea(21)" >21</text>
<text x="180" y="40" class="number" @click="setPlannedPitchArea(22)" >22</text>
@ -83,14 +116,14 @@ const setPlannedPitchArea = (hitArea: number) => {
<text x="180" y="330" class="number" @click="setPlannedPitchArea(27)" >27</text>
<text x="330" y="330" class="number" @click="setPlannedPitchArea(28)" >28</text>
<polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 11}" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setPlannedPitchArea(11)" />
<rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 12}" class="edge" x="155" y="60" width="50" height="45" @click="setPlannedPitchArea(12)" />
<polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 13}" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setPlannedPitchArea(13)" />
<rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 14}" class="edge" x="60" y="155" width="45" height="50" @click="setPlannedPitchArea(14)" />
<rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 15}" class="edge" x="255" y="155" width="45" height="50" @click="setPlannedPitchArea(15)" />
<polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 16}" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setPlannedPitchArea(16)" />
<rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 17}" class="edge" x="155" y="255" width="50" height="45" @click="setPlannedPitchArea(17)" />
<polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 18}" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setPlannedPitchArea(18)" />
<polygon :class="pitchAreaCssClasses(11, 'edge')" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setPlannedPitchArea(11)" />
<rect :class="pitchAreaCssClasses(12, 'edge')" class="edge" x="155" y="60" width="50" height="45" @click="setPlannedPitchArea(12)" />
<polygon :class="pitchAreaCssClasses(13, 'edge')" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setPlannedPitchArea(13)" />
<rect :class="pitchAreaCssClasses(14, 'edge')" class="edge" x="60" y="155" width="45" height="50" @click="setPlannedPitchArea(14)" />
<rect :class="pitchAreaCssClasses(15, 'edge')" class="edge" x="255" y="155" width="45" height="50" @click="setPlannedPitchArea(15)" />
<polygon :class="pitchAreaCssClasses(16, 'edge')" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setPlannedPitchArea(16)" />
<rect :class="pitchAreaCssClasses(17, 'edge')" class="edge" x="155" y="255" width="50" height="45" @click="setPlannedPitchArea(17)" />
<polygon :class="pitchAreaCssClasses(18, 'edge')" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setPlannedPitchArea(18)" />
<text x="80" y="90" class="number" @click="setPlannedPitchArea(11)">11</text>
<text x="180" y="90" class="number" @click="setPlannedPitchArea(12)">12</text>
@ -101,15 +134,15 @@ const setPlannedPitchArea = (hitArea: number) => {
<text x="180" y="285" class="number" @click="setPlannedPitchArea(17)">17</text>
<text x="275" y="285" class="number" @click="setPlannedPitchArea(18)">18</text>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 1}" class="inside" x="105" y="105" width="50" height="50" @click="setPlannedPitchArea(1)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 2}" class="inside" x="155" y="105" width="50" height="50" @click="setPlannedPitchArea(2)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 3}" class="inside" x="205" y="105" width="50" height="50" @click="setPlannedPitchArea(3)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 4}" class="inside" x="105" y="155" width="50" height="50" @click="setPlannedPitchArea(4)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 5}" class="inside" x="155" y="155" width="50" height="50" @click="setPlannedPitchArea(5)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 6}" class="inside" x="205" y="155" width="50" height="50" @click="setPlannedPitchArea(6)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 7}" class="inside" x="105" y="205" width="50" height="50" @click="setPlannedPitchArea(7)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 8}" class="inside" x="155" y="205" width="50" height="50" @click="setPlannedPitchArea(8)"/>
<rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 9}" class="inside" x="205" y="205" width="50" height="50" @click="setPlannedPitchArea(9)"/>
<rect :class="pitchAreaCssClasses(1, 'inside')" class="inside" x="105" y="105" width="50" height="50" @click="setPlannedPitchArea(1)"/>
<rect :class="pitchAreaCssClasses(2, 'inside')" class="inside" x="155" y="105" width="50" height="50" @click="setPlannedPitchArea(2)"/>
<rect :class="pitchAreaCssClasses(3, 'inside')" class="inside" x="205" y="105" width="50" height="50" @click="setPlannedPitchArea(3)"/>
<rect :class="pitchAreaCssClasses(4, 'inside')" class="inside" x="105" y="155" width="50" height="50" @click="setPlannedPitchArea(4)"/>
<rect :class="pitchAreaCssClasses(5, 'inside')" class="inside" x="155" y="155" width="50" height="50" @click="setPlannedPitchArea(5)"/>
<rect :class="pitchAreaCssClasses(6, 'inside')" class="inside" x="205" y="155" width="50" height="50" @click="setPlannedPitchArea(6)"/>
<rect :class="pitchAreaCssClasses(7, 'inside')" class="inside" x="105" y="205" width="50" height="50" @click="setPlannedPitchArea(7)"/>
<rect :class="pitchAreaCssClasses(8, 'inside')" class="inside" x="155" y="205" width="50" height="50" @click="setPlannedPitchArea(8)"/>
<rect :class="pitchAreaCssClasses(9, 'inside')" class="inside" x="205" y="205" width="50" height="50" @click="setPlannedPitchArea(9)"/>
<text x="130" y="140" class="number" @click="setPlannedPitchArea(1)">1</text>
<text x="180" y="140" class="number" @click="setPlannedPitchArea(2)">2</text>
@ -125,42 +158,71 @@ const setPlannedPitchArea = (hitArea: number) => {
</ion-card>
</ion-content>
<ion-footer>
<ion-button color="warning" expand="full" size="large" :disabled="bps.currentBullpenPitch().pitchType.id === 0 || bps.currentBullpenPitch().plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button>
<ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchType.id === 0 || pitch.plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button>
</ion-footer>
</ion-page>
</template>
<!--<ion-grid>-->
<!-- <div v-if="currentStep === BullpenStep.Prepare">-->
<!--<ion-row>-->
<!-- <ion-col><ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchType.id === 0 || pitch.plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button></ion-col>-->
<!--</ion-row>-->
<!-- </div>-->
<!-- <div v-if="currentStep === BullpenStep.Finish">-->
<!--<ion-row>-->
<!-- <ion-col><ion-button color="success" expand="full" @click="finalizeAndNextPitch" :disabled="pitch.realPitchArea === 0">Save Pitch<br/>&<br/>Next Pitch</ion-button></ion-col>-->
<!-- <ion-col><ion-button color="success" expand="full" @click="finalizeAndEndBullpen" :disabled="pitch.realPitchArea === 0">Save Pitch<br/>&<br/>End Session</ion-button></ion-col>-->
<!--</ion-row>-->
<!-- </div>-->
<!--</ion-grid>-->
<style scoped>
.wasted {
fill: firebrick;
stroke: black;
stroke-width: 1;
}
.wasted-selected {
.wasted-aim-selected {
fill: orangered;
stroke: black;
stroke-width: 1;
}
.wasted-hit-selected {
fill: orange;
stroke: black;
stroke-width: 1;
}
.edge {
fill: lightgreen;
stroke: black;
stroke-width: 1;
}
.edge-selected {
.edge-aim-selected {
fill: aquamarine;
stroke: black;
stroke-width: 1;
}
.edge-hit-selected {
fill: lightblue;
stroke: black;
stroke-width: 1;
}
.inside {
fill: green;
stroke: black;
stroke-width: 1;
}
.inside-selected {
.inside-aim-selected {
fill: darkolivegreen;
stroke: black;
stroke-width: 1;
}
.inside-hit-selected {
fill: darkseagreen;
stroke: black;
stroke-width: 1;
}
.number {
text-anchor: middle;
fill: white;