160 lines
9.2 KiB
Vue
160 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
import {defineComponent, ref} from "vue";
|
|
import {
|
|
IonContent,
|
|
IonHeader,
|
|
IonFooter,
|
|
IonToolbar,
|
|
IonTitle,
|
|
IonPage,
|
|
IonCard,
|
|
IonCardContent,
|
|
IonCardHeader,
|
|
IonCardTitle, IonButton,
|
|
IonGrid, IonRow, IonCol
|
|
} from "@ionic/vue";
|
|
import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const router = useRouter();
|
|
const bps = ref<BullpenSessionService>(bullpenSessionService);
|
|
|
|
const finalizeAndNextPitch = () => {
|
|
bullpenSessionService.nextPitch();
|
|
router.push({ name: 'PreparePitch' });
|
|
}
|
|
|
|
const finalizeAndEndBullpen = () => {
|
|
bullpenSessionService.nextPitch();
|
|
bullpenSessionService.finishSession();
|
|
router.push({ name: 'BullpenStats' });
|
|
}
|
|
|
|
const setRealPitchArea = (hitArea: number) => {
|
|
bps.value.currentBullpenPitch().realPitchArea = hitArea;
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header :translucent="true">
|
|
<ion-toolbar>
|
|
<ion-title>Finalize Pitch for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content>
|
|
<ion-card>
|
|
<ion-card-header>
|
|
<ion-card-title>Select Real Pitch Hit Area</ion-card-title>
|
|
</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().realPitchArea === 21}" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setRealPitchArea(21)" />
|
|
<rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 22}" class="wasted" x="105" y="0" width="150" height="60" @click="setRealPitchArea(22)" />
|
|
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 23}" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setRealPitchArea(23)" />
|
|
<rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 24}" class="wasted" x="0" y="105" width="60" height="150" @click="setRealPitchArea(24)" />
|
|
<rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 25}" class="wasted" x="300" y="105" width="60" height="150" @click="setRealPitchArea(25)" />
|
|
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 26}" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setRealPitchArea(26)" />
|
|
<rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 27}" class="wasted" x="105" y="300" width="150" height="60" @click="setRealPitchArea(27)" />
|
|
<polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 28}" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setRealPitchArea(28)" />
|
|
|
|
<text x="30" y="40" class="number" @click="setRealPitchArea(21)" >21</text>
|
|
<text x="180" y="40" class="number" @click="setRealPitchArea(22)" >22</text>
|
|
<text x="330" y="40" class="number" @click="setRealPitchArea(23)" >23</text>
|
|
<text x="30" y="190" class="number" @click="setRealPitchArea(24)" >24</text>
|
|
<text x="330" y="190" class="number" @click="setRealPitchArea(25)" >25</text>
|
|
<text x="30" y="330" class="number" @click="setRealPitchArea(26)" >26</text>
|
|
<text x="180" y="330" class="number" @click="setRealPitchArea(27)" >27</text>
|
|
<text x="330" y="330" class="number" @click="setRealPitchArea(28)" >28</text>
|
|
|
|
<polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 11}" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setRealPitchArea(11)" />
|
|
<rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 12}" class="edge" x="155" y="60" width="50" height="45" @click="setRealPitchArea(12)" />
|
|
<polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 13}" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setRealPitchArea(13)" />
|
|
<rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 14}" class="edge" x="60" y="155" width="45" height="50" @click="setRealPitchArea(14)" />
|
|
<rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 15}" class="edge" x="255" y="155" width="45" height="50" @click="setRealPitchArea(15)" />
|
|
<polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 16}" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setRealPitchArea(16)" />
|
|
<rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 17}" class="edge" x="155" y="255" width="50" height="45" @click="setRealPitchArea(17)" />
|
|
<polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 18}" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setRealPitchArea(18)" />
|
|
|
|
<text x="80" y="90" class="number" @click="setRealPitchArea(11)">11</text>
|
|
<text x="180" y="90" class="number" @click="setRealPitchArea(12)">12</text>
|
|
<text x="275" y="90" class="number" @click="setRealPitchArea(13)">13</text>
|
|
<text x="80" y="190" class="number" @click="setRealPitchArea(14)">14</text>
|
|
<text x="275" y="190" class="number" @click="setRealPitchArea(15)">15</text>
|
|
<text x="80" y="285" class="number" @click="setRealPitchArea(16)">16</text>
|
|
<text x="180" y="285" class="number" @click="setRealPitchArea(17)">17</text>
|
|
<text x="275" y="285" class="number" @click="setRealPitchArea(18)">18</text>
|
|
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 1}" class="inside" x="105" y="105" width="50" height="50" @click="setRealPitchArea(1)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 2}" class="inside" x="155" y="105" width="50" height="50" @click="setRealPitchArea(2)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 3}" class="inside" x="205" y="105" width="50" height="50" @click="setRealPitchArea(3)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 4}" class="inside" x="105" y="155" width="50" height="50" @click="setRealPitchArea(4)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 5}" class="inside" x="155" y="155" width="50" height="50" @click="setRealPitchArea(5)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 6}" class="inside" x="205" y="155" width="50" height="50" @click="setRealPitchArea(6)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 7}" class="inside" x="105" y="205" width="50" height="50" @click="setRealPitchArea(7)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 8}" class="inside" x="155" y="205" width="50" height="50" @click="setRealPitchArea(8)"/>
|
|
<rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 9}" class="inside" x="205" y="205" width="50" height="50" @click="setRealPitchArea(9)"/>
|
|
|
|
<text x="130" y="140" class="number" @click="setRealPitchArea(1)">1</text>
|
|
<text x="180" y="140" class="number" @click="setRealPitchArea(2)">2</text>
|
|
<text x="230" y="140" class="number" @click="setRealPitchArea(3)">3</text>
|
|
<text x="130" y="190" class="number" @click="setRealPitchArea(4)">4</text>
|
|
<text x="180" y="190" class="number" @click="setRealPitchArea(5)">5</text>
|
|
<text x="230" y="190" class="number" @click="setRealPitchArea(6)">6</text>
|
|
<text x="130" y="240" class="number" @click="setRealPitchArea(7)">7</text>
|
|
<text x="180" y="240" class="number" @click="setRealPitchArea(8)">8</text>
|
|
<text x="230" y="240" class="number" @click="setRealPitchArea(9)">9</text>
|
|
</svg>
|
|
</ion-card-content>
|
|
</ion-card>
|
|
</ion-content>
|
|
<ion-footer>
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col><ion-button color="success" expand="full" @click="finalizeAndNextPitch" :disabled="bps.currentBullpenPitch().realPitchArea === 0">Save Pitch<br/>&<br/>Next Pitch</ion-button></ion-col>
|
|
<ion-col><ion-button color="success" expand="full" @click="finalizeAndEndBullpen" :disabled="bps.currentBullpenPitch().realPitchArea === 0">Save Pitch<br/>&<br/>End Session</ion-button></ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ion-footer>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wasted {
|
|
fill: firebrick;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.wasted-selected {
|
|
fill: orangered;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.edge {
|
|
fill: lightgreen;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.edge-selected {
|
|
fill: aquamarine;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.inside {
|
|
fill: green;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.inside-selected {
|
|
fill: darkolivegreen;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.number {
|
|
text-anchor: middle;
|
|
fill: white;
|
|
font-size: 30px;
|
|
}
|
|
</style>
|