Adds functionality for drag and dropping from previous record.
This commit is contained in:
@@ -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
117
src/components/ranks.js
Normal 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;
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user