-
Notifications
You must be signed in to change notification settings - Fork 822
/
ContextMenu.vue
146 lines (132 loc) · 3.08 KB
/
ContextMenu.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
<template>
<div @click.right="contextClick" id="context-menu" v-bind:style="style">
<ul
v-if="viewMenu"
ref="right"
@blur="closeMenu"
id="right-click-menu"
tabindex="-1">
<li v-for="(item, index) in items" :key="index" @click="selectAction($event, item)">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
import bus from '../../core/utilities/bus';
import Actions from '../../core/engine/actions';
export default {
props: ['game'],
created() {
bus.$on('PLAYER:MENU', this.openMenu);
this.$forceUpdate();
},
data() {
return {
actions: {},
viewMenu: false,
tile: {
x: null,
y: null,
},
style: {
top: '0px',
left: '0px',
},
};
},
methods: {
/**
* Tell the game to do the selected action
*
* @param {event} event The mouse-click event
* @param {string} item The menu item selected
*/
selectAction(event, item) {
const data = {
item,
tile: this.tile,
actions: this.actions,
};
bus.$emit('ITEM:DO', data);
this.closeMenu();
},
/**
* Sets the context-menu where mouse was clicked upon
*
* @param {integer} x The x-axis of where the mouse was clicked
* @param {integer} y The y-axis of where the mouse was clicked
*/
setMenu(x, y) {
this.style.left = `${x}px`;
this.style.top = `${y}px`;
},
/**
* Closes the context-menu
*/
closeMenu() {
this.viewMenu = false;
},
/**
* Generates the list of selectable items on context-menu
*
* @param {object} data The coordinates clicked on
*/
async openMenu(data) {
this.tile.x = data.coordinates.x;
this.tile.y = data.coordinates.y;
this.actions = new Actions(this.game);
this.items = await Actions.build();
this.viewMenu = true;
this.$nextTick(
() => {
this.$refs.right.focus();
this.setMenu(data.event.x, data.event.y);
},
);
},
/**
* Incase we click on the context menu with anything but a left-click
*
* @param {event} event The non-left mouse-click on the context-menu
*/
contextClick(event) {
event.preventDefault();
},
},
};
</script>
<style lang="scss" scoped>
$menu_bg_color: #8d8d8d;
$menu_font_color: #fff;
@font-face {
font-family: "GameFont";
src: url("../../assets/fonts/pixelmix.ttf") format("truetype"),
url("../../assets/fonts/pixelmix_bold.ttf") format("truetype");
}
#right-click-menu {
font-family: "GameFont", sans-serif;
box-shadow: 2.5px 2.5px 0px 0px rgba(0, 0, 0, 0.75);
outline: none;
background: $menu_bg_color;
display: block;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 120px;
font-size: 12px;
z-index: 999999;
li {
cursor: pointer;
color: $menu_font_color;
text-align: left;
padding: 2px 5px;
text-shadow: 1px 1px 0px #000;
margin: 0;
}
}
#right-click-menu li:hover {
color: #ffd829;
}
</style>