-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
111 lines (94 loc) · 2.72 KB
/
main.js
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
/** An array of the mortal kombat 11 ultimate roster. */
const kombatants = [
"rambo",
"rain",
"mileena",
"robocop",
"sheeva",
"fujin",
"spawn",
"the-joker",
"jade",
"erron-black",
"kabal",
"kung-lao",
"sub-zero",
"scorpion",
"cetrion",
"frost",
"baraka",
"raiden",
"shao-kahn",
"d-vorah",
"jax-briggs",
"geras",
"kano",
"terminator",
"nightwolf",
"cassie-cage",
"kotal-kahn",
"skarlet",
"sonya-blade",
"shang-tsung",
"johnny-cage",
"noob-saibot",
"kollector",
"kitana",
"jacqui-briggs",
"liu-kang",
"sindel",
];
/**
* Generates a rosters worth of mortal kombat 11 character html images and injects them
* inside of the #character-pool div element.
* @param {string[]} kombatantsArr
*/
function generateKombatants(kombatantsArr) {
const characterPool = document.querySelector("#character-pool");
kombatantsArr.map((kombatant) => {
const kombatantImgWrapper = document.createElement("div");
const kombatantImg = document.createElement("img");
kombatantImgWrapper.setAttribute("class", "character-img-wrapper");
kombatantImgWrapper.setAttribute("id", kombatant);
kombatantImgWrapper.setAttribute("draggable", "true");
kombatantImg.setAttribute(
"src",
`https://cdn-prod.mortalkombat.com/roster/${kombatant}/thumb-p.png`
);
kombatantImg.setAttribute("alt", kombatant);
kombatantImg.setAttribute("class", "character-img");
kombatantImgWrapper.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", kombatant);
event.target.classList.add("dragging");
});
kombatantImgWrapper.addEventListener("dragend", (event) => {
event.target.classList.remove("dragging");
});
kombatantImgWrapper.appendChild(kombatantImg);
characterPool.appendChild(kombatantImgWrapper);
});
}
generateKombatants(kombatants);
/**
* Makes all elements with the class .drop-zone have a dragover event listener.
* */
function configureTierSectionDropZones() {
for (const dropZone of document.querySelectorAll(".tier-section")) {
dropZone.addEventListener("dragover", (event) => {
event.preventDefault();
dropZone.classList.add("tier-section--over");
});
dropZone.addEventListener("dragleave", (event) => {
event.preventDefault();
dropZone.classList.remove("tier-section--over");
});
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const droppedElementId = event.dataTransfer.getData("text/plain");
const droppedElement = document.getElementById(droppedElementId);
dropZone.appendChild(droppedElement);
dropZone.classList.remove("tier-section--over");
});
}
}
configureTierSectionDropZones();