-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.vue
170 lines (153 loc) · 5.39 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<script>
import { getMovesFromPgn } from 'utils/utils';
export default defineNuxtComponent({
data() {
return {
//videoUrl: "https://www.youtube.com/embed/_12GLmqEvE0",
videoUrl: "",
//lichessUrl : "https://lichess.org/broadcast/superbet-chess-classic-romania/round-1/AbANFXsd"
//lichessUrl : "https://lichess.org/analysis/pgn/1. d4 c6 2. c4 d6 3. Nc3 Nf6 4. e4 Bd7 5. e5 dxe5 6. dxe5 Bg4 7. f3 Qxd1+ 8. Nxd1 Nfd7 9. fxg4 Nxe5 10. Nf3 Ned7 11. Bd2 e6 12. Bc3 Be7 13. Be2 Na6 14. O-O O-O 15. Nf2 Bf6 16. Bxf6 Nxf6 17. g5 Nd7 18. g6 Nac5 19. gxh7+ Kxh7 20. Nd3 Kg8 21. Nxc5 Nxc5 22. Rad1 Rac8 23. b4 Na6 24. c5 Nc7 25. a3 Nd5 26. Rb1 Ne3 27. Rfe1 Nd5 28. Bf1 Rfd8 29. Bc4 f6 30. Bxd5 cxd5 31. Nd4 e5 32. Nf5 d4 33. Nd6 Rd7 34. Rbd1 Rcd8 35. Nf5 b6 36. g4 bxc5 37. bxc5 Rd5 38. Rc1 Rc8 39. c6 Kf7 40. Nd6+ Rxd6 41. c7 Rxc7 42. g5 Rdd7 43. g6+ Ke6 44. Rcd1 d3 45. Rf1 d2 46. h4 Rc1 47. Rf2 Rxd1+ 48. Kg2 e4 49. h5 Re1 50. h6 d1=Q 51. h7 Rg1+ 52. Kh3 Rh1+ 53. Kg3 Qg1+ 54. Kf4 Qxf2+ 55. Kxe4 Qf3+"
//lichessUrl : "https://lichess.org/broadcast/2023-tepe-sigeman--co/round-5/GNxeGsCm",
// lichessUrl : "https://lichess.org/study/embed/GNxeGsCm/bfZ6IaPF"
lichessUrl: "",
videoId: "",
pgn: "",
copied: false
}
},
methods: {
getVideoUrl(videoId) {
this.videoUrl = "https://www.youtube.com/embed/" + videoId;
this.videoId = videoId;
},
getLichessUrl(gameDetails) {
if (gameDetails.fen) {
this.lichessUrl = "https://lichess.org/analysis/" + gameDetails.fen;
return;
}
this.lichessUrl = "https://lichess.org/analysis/pgn/" + gameDetails.pgn + "?color=" + gameDetails.color;
this.pgn = gameDetails.pgn;
},
loadSampleGameAndVideo() {
this.lichessUrl = `https://lichess.org/analysis/pgn/1. e4 c5 2. Nf3 Nc6 3. Bb5 g6 4. Nc3 Bg7 5. O-O Nf6 6. Re1 O-O 7. Bf1 d6 8. h3 a6 9. d3 b5 10. Be3 Bb7 11. Qd2 Re8 12. Ne2 d5 13. e5 Nd7 14. e6 fxe6 15. Ng5 d4 16. Bf4 Nf8 17. Bh2 e5 18. Ng3 Rc8 19. f4 exf4 20. Qxf4 Qd5 21. Re4 Bh6 22. h4 Ne6 23. Qg4 Nxg5 24. hxg5 Bxg5 25. Rae1 Be3+ 26. Kh1 Rf8 27. c4 bxc4 28. dxc4 Qf7 29. Bd3 Nb4 30. R4xe3 dxe3 31. Rxe3 Nxd3 32. Rxd3 Qf2 0-1`;
this.videoUrl = "https://www.youtube.com/embed/11hlPJYNX_s";
},
shareUrlToClipboard() {
const url = location.protocol + '//' + location.host + (this.videoId ?'/?videoId=' + this.videoId : '') + (this.pgn ? '&pgn=' + this.pgn : '')
this.copyURL(url);
},
async copyURL(mytext) {
try {
await navigator.clipboard.writeText(mytext);
this.copied = true;
setTimeout(() => {
this.copied = false
}, 1000)
} catch ($e) {
alert('Cannot copy');
}
}
},
mounted() {
if (this.$route.query.pgn) {
this.pgn = getMovesFromPgn(this.$route.query.pgn);
this.lichessUrl = "https://lichess.org/analysis/pgn/" + this.pgn;
}
if (this.$route.query.videoId) {
this.videoId = this.$route.query.videoId;
this.videoUrl = "https://www.youtube.com/embed/" + this.videoId;
}
},
})
</script>
<template >
<Title>
Analyze chess positions with video. Watch video and analyze side by side.
</Title>
<Meta>
Analyze chess positions with video. Watch video and analyze side by side.
</Meta>
<div class="h-screen">
<Header class="flex flex-row justify-center h-10 align-middle"
@load-sample-game-and-video="loadSampleGameAndVideo"
@share-url-to-clipboard="shareUrlToClipboard"></Header>
<div class="flex flex-row justify-between m-5">
<LichessSearch @game-updated="getLichessUrl"></LichessSearch>
<YoutubeSearch @video-id-updated="getVideoUrl"></YoutubeSearch>
</div>
<div class="flex h-5/6">
<Lichess :url="lichessUrl"
class="h-full w-1/2"></Lichess>
<Youtube :video-url="videoUrl"
class="h-full w-1/2 "></Youtube>
</div>
<!-- <div class="toast top-1" v-if="copied">
<div class="alert alert-info">
<div>
<span>New message arrived.</span>
</div>
</div>
</div> -->
<Transition>
<div class="flex align-middle justify-center" v-if="copied">
<div class="alert alert-success shadow-lg top-1 absolute w-96 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg"
class="stroke-current flex-shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Url copied to clipboard</span>
</div>
</div>
</div>
</Transition>
</div>
</template>
<style scoped>
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
/* background-color: #111; */
}
/* Control the right side */
.right {
right: 0;
/* background-color: #111; */
}
.lichess-board {
height: 100%;
width: 100%;
}
.youtube {
/* height: 500%;
width: 50%;
position: relative; */
/* z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px; */
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>