-
Notifications
You must be signed in to change notification settings - Fork 112
/
Arrow.ts
119 lines (109 loc) · 3.44 KB
/
Arrow.ts
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
// Imports
import Konva from 'konva';
// These are arrows used to show which cards that are touched by a clue
// (and for pointing to various things in a shared replay)
export default class Arrow extends Konva.Group {
pointingTo: any;
tween: Konva.Tween | null;
base: Konva.Arrow;
circle: Konva.Circle;
text: Konva.Text;
constructor(winW: number, winH: number) {
const x = 0.1 * winW;
const y = 0.1 * winH;
super({
x,
y,
offset: {
x,
y,
},
visible: false,
});
// Class variables
// (we can't initialize these above due to "super()" not being on the first line)
this.pointingTo = null;
this.tween = null;
const pointerLength = 0.006 * winW;
// We want there to be a black outline around the arrow,
// so we draw a second arrow that is slightly bigger than the first
const border = new Konva.Arrow({
points: [
x,
0,
x,
y * 0.8,
],
pointerLength,
pointerWidth: pointerLength,
fill: 'black',
stroke: 'black',
strokeWidth: pointerLength * 2,
shadowBlur: pointerLength * 4,
shadowOpacity: 1,
});
this.add(border);
// The border arrow will be missing a bottom edge,
// so draw that manually at the bottom of the arrow
const edge = new Konva.Line({
points: [
x - pointerLength,
0,
x + pointerLength,
0,
],
fill: 'black',
stroke: 'black',
strokeWidth: pointerLength * 0.75,
});
this.add(edge);
// The main (inside) arrow is exported so that we can change the color later
this.base = new Konva.Arrow({
points: [
x,
0,
x,
y * 0.8,
],
pointerLength,
pointerWidth: pointerLength,
fill: 'white',
stroke: 'white',
strokeWidth: pointerLength * 1.25,
});
this.add(this.base);
// A circle will appear on the body of the arrow to indicate the type of clue given
this.circle = new Konva.Circle({
x,
y: y * 0.3,
radius: pointerLength * 2.25,
fill: 'black',
stroke: 'white',
strokeWidth: pointerLength * 0.25,
visible: false,
listening: false,
});
this.add(this.circle);
// The circle will have text inside of it to indicate the number of the clue given
this.text = new Konva.Text({
x,
y: y * 0.3,
offset: {
x: this.circle.width() / 2,
y: this.circle.height() / 2,
},
width: this.circle.width(),
// For some reason the text is offset if we place it exactly in the middle of the
// circle, so nudge it downwards
height: this.circle.height() * 1.09,
fontSize: y * 0.38,
fontFamily: 'Verdana',
fill: 'white',
align: 'center',
verticalAlign: 'middle',
visible: false,
listening: false,
});
this.add(this.text);
}
}