<!DOCTYPE html>
<html>
<head>
<title>個人星取表</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
rel="stylesheet"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
</head>
<body>
<h1>きふわらべ</h1>
<div id="app">
<v-app>
<v-main>
<template>
<v-data-table
:headers="headers"
:items="gameResult"
:sort-by="['round']"
:sort-desc="[false]"
fixed-header
height="600"
class="elevation-1"
:footer-props="{
'items-per-page-options': [10, 20, 50, 100, 200, -1]
}"
:items-per-page="100"
>
<!-- 回戦 -->
<template v-slot:item.round="{ item }">
<span style="font-size: x-large"> {{ item.round }} </span>
</template>
<!-- 表勝敗 -->
<template v-slot:item.result1="{ item }">
<v-chip :color="getColorByResult(item.result1)" dark>
<span style="font-size: x-large">{{ item.result1 }}</span>
</v-chip>
</template>
<!-- 裏勝敗 -->
<template v-slot:item.result2="{ item }">
<v-chip :color="getColorByResult(item.result2)" dark>
<span style="font-size: x-large">{{ item.result2 }}</span>
</v-chip>
</template>
<!-- 対戦相手名 -->
<template v-slot:item.name="{ item }">
<span style="font-size: large">VS</span> <span style="font-size: x-large"> {{ item.name }} </span>
</template>
<!-- 表リンク -->
<template v-slot:item.link1="{ item }">
<a :href="item.link1"> {{ item.link1 }} </a>
</template>
<!-- 裏リンク -->
<template v-slot:item.link2="{ item }">
<a :href="item.link2"> {{ item.link2 }} </a>
</template>
</v-data-table>
</template>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
headers: [
{ text: "回戦", value: "round", width: 80 },
{ text: "表", value: "result1", width: 40 },
{ text: "裏", value: "result2", width: 40 },
{
text: "対戦相手",
align: "start",
value: "name",
},
{ text: "表URL", value: "link1" },
{ text: "裏URL", value: "link2" },
],
gameResult: [
{
round: "01",
name: "きふわらね",
result1: "勝",
link1: "http://example.com/",
result2: "勝",
link2: "http://example.com/",
},
{
round: "02",
name: "きふわらずさ",
result1: "勝",
link1: "http://example.com/",
result2: "勝",
link2: "http://example.com/",
},
{
round: "03",
name: "きふわらかく",
result1: "勝",
link1: "http://example.com/",
result2: "勝",
link2: "http://example.com/",
},
{
round: "04",
name: "きふわるべ",
result1: "負",
link1: "http://example.com/",
result2: "負",
link2: "http://example.com/",
},
{
round: "05",
name: "きふわらぎょく",
result1: "勝",
link1: "http://example.com/",
result2: "勝",
link2: "http://example.com/",
},
{
round: "06",
name: "きふわらけい",
result1: "異常勝",
link1: "http://example.com/",
result2: "異常勝",
link2: "http://example.com/",
},
{
round: "07",
name: "きふわらび",
result1: "先手引",
link1: "http://example.com/",
result2: "後手引",
link2: "http://example.com/",
},
{
round: "08",
name: "きふわらすと",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "09",
name: "カツ丼",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "10",
name: "いろは",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "11",
name: "なのは",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "12",
name: "うさぴょん",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "13",
name: "すいしょう",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "14",
name: "AWAKE",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "15",
name: "BURNING BRIDGE",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "16",
name: "どうたぬき 極",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "17",
name: "GCT電竜",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "18",
name: "dlshogi",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "19",
name: "サンドリヨン",
result1: "",
link1: "",
result2: "",
link2: "",
},
{
round: "20",
name: "井上将棋",
result1: "",
link1: "",
result2: "",
link2: "",
},
],
},
methods: {
getColorByResult(result) {
switch (result) {
// 勝ち。
case "勝":
case "不戦勝":
case "異常勝":
return "#00cc66";
// 負け。
case "負":
case "不戦負":
case "異常負":
return "#990033";
// 透明。
case "":
return "#ffffff";
// 引き分け。
default:
return "#cccc33";
}
},
},
});
</script>
</body>
</html>
Crieitは個人で開発中です。
興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!