Adds functionality for drag and dropping from previous record.

This commit is contained in:
2023-12-02 14:50:48 -05:00
parent 4c98cb7219
commit 06b29a52e6
3 changed files with 253 additions and 211 deletions

View File

@@ -1,137 +1,62 @@
<template>
<v-container>
<v-sheet max-width="600px" height="800px">
<v-row no-gutters>
<v-col>East</v-col>
<v-col>Rank</v-col>
<v-col>West</v-col>
<v-row>
<v-col cols="4">
<v-row>
<v-col><h3>East</h3></v-col>
<v-col><h3>Rank</h3></v-col>
<v-col><h3>West</h3></v-col>
</v-row>
<v-row v-for="rank in ranks" :key="rank.name">
<v-col>
<v-chip :color="rank.east.record.wins > rank.east.record.losses + rank.east.record.withdrawls ? 'green' : 'red'" v-if="rank.east" draggable>{{ rank.east.name }}: {{ rank.east.record.wins }}-{{ rank.east.record.losses }}-{{ rank.east.record.withdrawls }}</v-chip>
<v-chip
:color="rank.east.record.wins > rank.east.record.losses + rank.east.record.withdrawls ? 'green' : 'red'"
v-if="rank.east" draggable @dragstart="dragStart" @dragend="dragEnd">
{{ rank.east.name }}: {{ rank.east.record.wins }}-{{
rank.east.record.losses }}-{{ rank.east.record.withdrawls }}
</v-chip>
</v-col>
<v-col>{{ rank.name }}</v-col>
<v-col>
<v-chip :color="rank.west.record.wins > rank.west.record.losses + rank.west.record.withdrawls ? 'green' : 'red'" v-if="rank.west" draggable>{{ rank.west.name }}: {{ rank.west.record.wins }}-{{ rank.west.record.losses }}-{{ rank.west.record.withdrawls }}</v-chip>
<v-chip
:color="rank.west.record.wins > rank.west.record.losses + rank.west.record.withdrawls ? 'green' : 'red'"
v-if="rank.west" draggable @dragstart="dragStart" @dragend="dragEnd">
{{ rank.west.name }}: {{ rank.west.record.wins }}-{{
rank.west.record.losses }}-{{ rank.west.record.withdrawls }}
</v-chip>
</v-col>
</v-row>
</v-col>
<v-col cols="4"></v-col>
<v-col cols="4">
<v-row>
<v-col><h3>East</h3></v-col>
<v-col><h3>Rank</h3></v-col>
<v-col><h3>West</h3></v-col>
</v-row>
<v-row v-for="rank in ranks" :key="rank.name">
<v-col><v-chip></v-chip></v-col>
<v-col>{{ rank.name }}</v-col>
<v-col><v-chip></v-chip></v-col>
</v-row>
</v-col>
</v-row>
</v-sheet>
</v-container>
</template>
<script setup>
import rikishi from '@/components/rikishi.js';
const ranks = [
{
name: 'Yokozuna',
east: rikishi.find(x => x.name === 'Terunofuji')
},
{
name: 'Ozeki',
east: rikishi.find(x => x.name === 'Takakeisho'),
west: rikishi.find(x => x.name === 'Kirishima')
},
{
name: 'Ozeki',
west: rikishi.find(x => x.name === 'Hoshoryu'),
},
{
name: 'Sekiwake',
east: rikishi.find(x => x.name === 'Daieisho'),
west: rikishi.find(x => x.name === 'Wakamotoharu')
},
{
name: 'Sekiwake',
east: rikishi.find(x => x.name === 'Kotonowaka'),
},
{
name: 'Komosubi',
east: rikishi.find(x => x.name === 'Abi'),
west: rikishi.find(x => x.name === 'Hokutofuji')
},
{
name: 'Maegashira 1',
east: rikishi.find(x => x.name === 'Asanoyama'),
west: rikishi.find(x => x.name === 'Ura')
},
{
name: 'Maegashira 2',
east: rikishi.find(x => x.name === 'Shodai'),
west: rikishi.find(x => x.name === 'Meisei')
},
{
name: 'Maegashira 3',
east: rikishi.find(x => x.name === 'Takayasu'),
west: rikishi.find(x => x.name === 'Tobizaru')
},
{
name: 'Maegashira 4',
east: rikishi.find(x => x.name === 'Gonoyama'),
west: rikishi.find(x => x.name === 'Nishikigi')
},
{
name: 'Maegashira 5',
east: rikishi.find(x => x.name === 'Onosho'),
west: rikishi.find(x => x.name === 'Midorifuji')
},
{
name: 'Maegashira 6',
east: rikishi.find(x => x.name === 'Shonannoumi'),
west: rikishi.find(x => x.name === 'Takanosho')
},
{
name: 'Maegashira 7',
east: rikishi.find(x => x.name === 'Hokuseiho'),
west: rikishi.find(x => x.name === 'Kinbozan')
},
{
name: 'Maegashira 8',
east: rikishi.find(x => x.name === 'Endo'),
west: rikishi.find(x => x.name === 'Atamifuji')
},
{
name: 'Maegashira 9',
east: rikishi.find(x => x.name === 'Myogiryu'),
west: rikishi.find(x => x.name === 'Mitakeumi')
},
{
name: 'Maegashira 10',
east: rikishi.find(x => x.name === 'Ryuden'),
west: rikishi.find(x => x.name === 'Kotoeko')
},
{
name: 'Maegashira 11',
east: rikishi.find(x => x.name === 'Sadanoumi'),
west: rikishi.find(x => x.name === 'Hiradoumi')
},
{
name: 'Maegashira 12',
east: rikishi.find(x => x.name === 'Oho'),
west: rikishi.find(x => x.name === 'Tamawashi')
},
{
name: 'Maegashira 13',
east: rikishi.find(x => x.name === 'Takarafuji'),
west: rikishi.find(x => x.name === 'Tsurugisho')
},
{
name: 'Maegashira 14',
east: rikishi.find(x => x.name === 'Tomokaze'),
west: rikishi.find(x => x.name === 'Ichiyamamoto')
},
{
name: 'Maegashira 15',
east: rikishi.find(x => x.name === 'Tohakuryu'),
west: rikishi.find(x => x.name === 'Churanoumi')
},
{
name: 'Maegashira 16',
east: rikishi.find(x => x.name === 'Roga'),
west: rikishi.find(x => x.name === 'Nishikifuji')
},
{
name: 'Maegashira 17',
east: rikishi.find(x => x.name === 'Kitanowaka')
}
];
import ranks from '@/components/ranks.js';
let currentRikishi;
function dragStart(event) {
currentRikishi = event.originalTarget.innerText;
}
function dragEnd(event) {
let newElement = document.elementFromPoint(event.x, event.y);
console.log(newElement);
let rikishiName = currentRikishi.split(':')[0];
newElement.children[1].innerText = rikishiName;
}
</script>

117
src/components/ranks.js Normal file
View File

@@ -0,0 +1,117 @@
import rikishi from "./rikishi";
const ranks = [
{
name: 'Yokozuna',
east: rikishi.find(x => x.name === 'Terunofuji')
},
{
name: 'Ozeki',
east: rikishi.find(x => x.name === 'Takakeisho'),
west: rikishi.find(x => x.name === 'Kirishima')
},
{
name: 'Ozeki',
west: rikishi.find(x => x.name === 'Hoshoryu'),
},
{
name: 'Sekiwake',
east: rikishi.find(x => x.name === 'Daieisho'),
west: rikishi.find(x => x.name === 'Wakamotoharu')
},
{
name: 'Sekiwake',
east: rikishi.find(x => x.name === 'Kotonowaka'),
},
{
name: 'Komusubi',
east: rikishi.find(x => x.name === 'Abi'),
west: rikishi.find(x => x.name === 'Hokutofuji')
},
{
name: 'Maegashira 1',
east: rikishi.find(x => x.name === 'Asanoyama'),
west: rikishi.find(x => x.name === 'Ura')
},
{
name: 'Maegashira 2',
east: rikishi.find(x => x.name === 'Shodai'),
west: rikishi.find(x => x.name === 'Meisei')
},
{
name: 'Maegashira 3',
east: rikishi.find(x => x.name === 'Takayasu'),
west: rikishi.find(x => x.name === 'Tobizaru')
},
{
name: 'Maegashira 4',
east: rikishi.find(x => x.name === 'Gonoyama'),
west: rikishi.find(x => x.name === 'Nishikigi')
},
{
name: 'Maegashira 5',
east: rikishi.find(x => x.name === 'Onosho'),
west: rikishi.find(x => x.name === 'Midorifuji')
},
{
name: 'Maegashira 6',
east: rikishi.find(x => x.name === 'Shonannoumi'),
west: rikishi.find(x => x.name === 'Takanosho')
},
{
name: 'Maegashira 7',
east: rikishi.find(x => x.name === 'Hokuseiho'),
west: rikishi.find(x => x.name === 'Kinbozan')
},
{
name: 'Maegashira 8',
east: rikishi.find(x => x.name === 'Endo'),
west: rikishi.find(x => x.name === 'Atamifuji')
},
{
name: 'Maegashira 9',
east: rikishi.find(x => x.name === 'Myogiryu'),
west: rikishi.find(x => x.name === 'Mitakeumi')
},
{
name: 'Maegashira 10',
east: rikishi.find(x => x.name === 'Ryuden'),
west: rikishi.find(x => x.name === 'Kotoeko')
},
{
name: 'Maegashira 11',
east: rikishi.find(x => x.name === 'Sadanoumi'),
west: rikishi.find(x => x.name === 'Hiradoumi')
},
{
name: 'Maegashira 12',
east: rikishi.find(x => x.name === 'Oho'),
west: rikishi.find(x => x.name === 'Tamawashi')
},
{
name: 'Maegashira 13',
east: rikishi.find(x => x.name === 'Takarafuji'),
west: rikishi.find(x => x.name === 'Tsurugisho')
},
{
name: 'Maegashira 14',
east: rikishi.find(x => x.name === 'Tomokaze'),
west: rikishi.find(x => x.name === 'Ichiyamamoto')
},
{
name: 'Maegashira 15',
east: rikishi.find(x => x.name === 'Tohakuryu'),
west: rikishi.find(x => x.name === 'Churanoumi')
},
{
name: 'Maegashira 16',
east: rikishi.find(x => x.name === 'Roga'),
west: rikishi.find(x => x.name === 'Nishikifuji')
},
{
name: 'Maegashira 17',
east: rikishi.find(x => x.name === 'Kitanowaka')
}
];
export default ranks;

View File

@@ -26,312 +26,312 @@ const rikishi = [
{
name: 'Hoshoryu',
record: {
wins: 0,
losses: 0,
wins: 10,
losses: 5,
withdrawls: 0
}
},
{
name: 'Daieisho',
record: {
wins: 0,
losses: 0,
wins: 9,
losses: 6,
withdrawls: 0
}
},
{
name: 'Wakamotoharu',
record: {
wins: 0,
losses: 0,
wins: 6,
losses: 9,
withdrawls: 0
}
},
{
name: 'Kotonowaka',
record: {
wins: 0,
losses: 0,
wins: 11,
losses: 4,
withdrawls: 0
}
},
{
name: 'Abi',
record: {
wins: 0,
losses: 0,
wins: 6,
losses: 9,
withdrawls: 0
}
},
{
name: 'Hokutofuji',
record: {
wins: 0,
losses: 0,
wins: 5,
losses: 10,
withdrawls: 0
}
},
{
name: 'Asanoyama',
record: {
wins: 0,
losses: 0,
withdrawls: 0
wins: 4,
losses: 4,
withdrawls: 7
}
},
{
name: 'Ura',
record: {
wins: 0,
losses: 0,
wins: 8,
losses: 7,
withdrawls: 0
}
},
{
name: 'Shodai',
record: {
wins: 0,
losses: 0,
wins: 6,
losses: 9,
withdrawls: 0
}
},
{
name: 'Meisei',
record: {
wins: 0,
losses: 0,
wins: 4,
losses: 11,
withdrawls: 0
}
},
{
name: 'Takayasu',
record: {
wins: 0,
losses: 0,
wins: 10,
losses: 5,
withdrawls: 0
}
},
{
name: 'Tobizaru',
record: {
wins: 0,
losses: 0,
wins: 7,
losses: 8,
withdrawls: 0
}
},
{
name: 'Gonoyama',
record: {
wins: 0,
losses: 0,
wins: 8,
losses: 7,
withdrawls: 0
}
},
{
name: 'Nishikigi',
record: {
wins: 0,
losses: 0,
wins: 7,
losses: 8,
withdrawls: 0
}
},
{
name: 'Onosho',
record: {
wins: 0,
losses: 0,
wins: 3,
losses: 12,
withdrawls: 0
}
},
{
name: 'Midorifuji',
record: {
wins: 0,
losses: 0,
wins: 9,
losses: 6,
withdrawls: 0
}
},
{
name: 'Shonannoumi',
record: {
wins: 0,
losses: 0,
wins: 7,
losses: 8,
withdrawls: 0
}
},
{
name: 'Takanosho',
record: {
wins: 0,
losses: 0,
withdrawls: 0
wins: 5,
losses: 6,
withdrawls: 4
}
},
{
name: 'Hokuseiho',
record: {
wins: 0,
losses: 0,
wins: 7,
losses: 8,
withdrawls: 0
}
},
{
name: 'Kinbozan',
record: {
wins: 0,
losses: 0,
wins: 8,
losses: 7,
withdrawls: 0
}
},
{
name: 'Endo',
record: {
wins: 0,
losses: 0,
wins: 5,
losses: 10,
withdrawls: 0
}
},
{
name: 'Atamifuji',
record: {
wins: 0,
losses: 0,
wins: 11,
losses: 4,
withdrawls: 0
}
},
{
name: 'Myogiryu',
record: {
wins: 0,
losses: 0,
wins: 6,
losses: 9,
withdrawls: 0
}
},
{
name: 'Mitakeumi',
record: {
wins: 0,
losses: 0,
wins: 8,
losses: 7,
withdrawls: 0
}
},
{
name: 'Ryuden',
record: {
wins: 0,
losses: 0,
wins: 10,
losses: 5,
withdrawls: 0
}
},
{
name: 'Kotoeko',
record: {
wins: 0,
losses: 0,
withdrawls: 0
wins: 2,
losses: 8,
withdrawls: 5
}
},
{
name: 'Sadanoumi',
record: {
wins: 0,
losses: 0,
wins: 8,
losses: 7,
withdrawls: 0
}
},
{
name: 'Hiradoumi',
record: {
wins: 0,
losses: 0,
wins: 9,
losses: 6,
withdrawls: 0
}
},
{
name: 'Oho',
record: {
wins: 0,
losses: 0,
wins: 8,
losses: 7,
withdrawls: 0
}
},
{
name: 'Tamawashi',
record: {
wins: 0,
losses: 0,
wins: 9,
losses: 6,
withdrawls: 0
}
},
{
name: 'Takarafuji',
record: {
wins: 0,
losses: 0,
wins: 6,
losses: 9,
withdrawls: 0
}
},
{
name: 'Tsurugisho',
record: {
wins: 0,
losses: 0,
wins: 9,
losses: 6,
withdrawls: 0
}
},
{
name: 'Tomokaze',
record: {
wins: 0,
losses: 0,
wins: 7,
losses: 8,
withdrawls: 0
}
},
{
name: 'Ichiyamamoto',
record: {
wins: 0,
losses: 0,
wins: 11,
losses: 4,
withdrawls: 0
}
},
{
name: 'Tohakuryu',
record: {
wins: 0,
losses: 0,
wins: 5,
losses: 10,
withdrawls: 0
}
},
{
name: 'Churanoumi',
record: {
wins: 0,
losses: 0,
wins: 9,
losses: 6,
withdrawls: 0
}
},
{
name: 'Roga',
record: {
wins: 0,
losses: 0,
wins: 5,
losses: 10,
withdrawls: 0
}
},
{
name: 'Nishikifuji',
record: {
wins: 0,
losses: 0,
wins: 6,
losses: 9,
withdrawls: 0
}
},
{
name: 'Kitanowaka',
record: {
wins: 0,
losses: 0,
wins: 5,
losses: 10,
withdrawls: 0
}
}