Recall-Rumble/renderModes.js at main · TaigaTi/Recall-Rumble · GitHub

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
function renderEasy(cardColumn, card, isMobile) {
  cardColumn.classList.add(
    "col-3",
    "col-md-3",
    "gb-3",
    "gx-2",
    "gx-md-3",
    "mb-2",
    "mb-md-3",
    "text-center"
  );

  !isMobile ? (card.style.height = "32vh") : "";
}

function renderMedium(cardColumn, card, isMobile) {
  cardColumn.classList.add(
    "col-3",
    "col-md-3",
    "gb-3",
    "gx-2",
    "gx-md-1",
    "mb-2",
    "mb-md-3",
    "text-center"
  );

  !isMobile ? (card.style.height = "22vh") : "";
  !isMobile ? (card.style.width = "20vh") : "";
  !isMobile ? (cardColumn.style.width = "22vh") : "";
  !isMobile ? (cardColumn.style.height = "22vh") : "";
}

function renderHard(cardColumn, card, isMobile) {
  cardColumn.classList.add(
    "col-3",
    "col-md-3",
    "gb-3",
    "gx-0",
    "gx-md-0",
    "mb-2",
    "mb-md-2",
    "text-center"
  );

  function hardDesktopRender() {
    card.style.height = "99%";
    card.style.width = "90%";
    cardColumn.style.width = "20vh";
    cardColumn.style.height = "18vh";
  }

  function hardMobileRender() {
    card.style.height = "99%";
    card.style.width = "90%";
    cardColumn.style.width = "10vh";
    cardColumn.style.height = "13vh";
  }

  !isMobile ? hardDesktopRender() : hardMobileRender();
}

function renderRows(cardRow) {
  cardRow.classList.add("row", "row1", "d-flex", "justify-content-center");
}