codecraft/ongoing-contest.php at main · hrid0yyy/codecraft · 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
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="icon"
      type="image/x-icon"
      href="assets/img/background/fav-logo.png"
    />
    <title>Contest Details - CodeCraft</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");

      * {
        font-family: "Syne", serif;
        font-optical-sizing: auto;
        font-style: normal;
      }

      /* Hide Y-axis scrollbar */
      .hide-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .hide-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
      }
    </style>
  </head>
  <body
    class="bg-[url('Mask.png')] bg-cover bg-center bg-no-repeat min-h-screen font-sans"
  >
    <div class="flex">
      <!-- Sidebar -->


      <!-- Main Content -->
      <main class="flex-1 p-8">
        <!-- Header -->
        <header class="flex justify-between items-center mb-8">
          <h1 class="text-2xl font-bold"></h1>
          <div class="flex items-center space-x-4">
            <div class="relative">
              <input
                type="text"
                placeholder="Search"
                class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none"
              />
              <img
                src="assets/img/background/search.png"
                alt="Search Icon"
                class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-purple-600"
              />
            </div>
            <img
              src="assets/img/background/Bell.png"
              width="24px"
              alt="Notification Icon"
              class="cursor-pointer"
            />
            <img
              src="<?php echo htmlspecialchars($userProfilePicture); ?>"
              alt="Profile Icon"
              class="rounded-full cursor-pointer"
              width="40"
              height="40"
            />
          </div>
        </header>

        <!-- Main Content -->
        <div class="grid grid-cols-4 gap-6">
          <!-- Contest Details -->
          <div class="col-span-3 bg-white shadow-lg rounded-lg p-6" id="contest-details">
  <!-- Content will be dynamically populated here -->
</div>

          <!-- Leaderboard -->
          <div class="col-span-1 bg-white shadow-lg rounded-lg p-6 h-96 overflow-y-auto hide-scrollbar">
  <h3 class="text-lg font-bold text-purple-600 mb-4">Leaderboard</h3>
  <ul id="leaderboard-container" class="space-y-4">
    <!-- Leaderboard entries will be dynamically added here -->
  </ul>
</div>
        </div>

        <!-- Questions Table -->
        <div class="bg-white shadow-lg rounded-lg mt-8 p-6">
  <h3 class="text-lg font-bold text-purple-600 mb-4">Questions</h3>
  <table class="w-full text-left border-collapse">
    <thead>
      <tr>
        <th class="border-b py-2">#</th>
        <th class="border-b py-2">Question</th>
        <th class="border-b py-2">Tags</th>
        <th class="border-b py-2">Action</th>
      </tr>
    </thead>
    <tbody id="questions-tbody">
      <!-- Questions will be dynamically populated here -->
    </tbody>
  </table>
</div>


      </main>
    </div>

    <script>


    // Extract contest ID from URL parameters
    const urlParams = new URLSearchParams(window.location.search);
  const contestId = urlParams.get("contest_id");

      // Function to fetch and populate contest details
  async function fetchContestDetails(contestId) {
    try {
      // Fetch contest details from the backend
      const response = await fetch(`backend/contest/details.php?contest_id=${contestId}`);
      if (!response.ok) {
        throw new Error("Failed to fetch contest details.");
      }

      const contest = await response.json();

      // Populate the contest details section
      const container = document.getElementById("contest-details");
      container.innerHTML = `
        <img
          src="${contest.banner || 'https://via.placeholder.com/150'}"
          alt="${contest.contest_name} Banner"
          class="rounded-lg mb-6 w-full h-64 object-cover"
        />
        <h2 class="text-3xl font-bold text-purple-600 mb-4">
          ${contest.contest_name}
        </h2>
        <p class="text-gray-700 mb-4">
          ${contest.description}
        </p>
        <p class="text-gray-700 mb-2">
          <strong>Ending Date:</strong> ${new Date(contest.end_time).toLocaleString()}
        </p>
        <p class="text-gray-700">
          <strong>Participants:</strong> ${contest.contestants}+
        </p>
      `;
    } catch (error) {
      console.error("Error fetching contest details:", error);
      const container = document.getElementById("contest-details");
      container.innerHTML = `
        <p class="text-red-500">Failed to load contest details. Please try again later.</p>
      `;
    }
  }


  // Fetch and populate the contest details
  if (contestId) {
    fetchContestDetails(contestId);
  } else {
    document.getElementById("contest-details").innerHTML = `
      <p class="text-red-500">No contest ID provided in the URL.</p>
    `;
  }
    </script>
    <script>


  // Function to fetch and populate questions
  async function fetchQuestions(contestId) {
    try {
      // Fetch questions from the backend
      const response = await fetch(`backend/contest/get-problems.php?contest_id=${contestId}`);
      if (!response.ok) {
        throw new Error("Failed to fetch questions.");
      }

      const questions = await response.json();

      // Get the table body element
      const tbody = document.getElementById("questions-tbody");
      tbody.innerHTML = ""; // Clear any existing content

      if (questions.length === 0) {
        tbody.innerHTML = `
          <tr>
            <td colspan="4" class="py-4 text-center text-gray-500">
              No questions available for this contest.
            </td>
          </tr>
        `;
        return;
      }

      // Populate the table with questions
      questions.forEach((question, index) => {
        const row = `
          <tr>
            <td class="border-b py-2">${index + 1}</td>
            <td class="border-b py-2">${question.problem_title}</td>
            <td class="border-b py-2">${question.tags}</td>
            <td class="border-b py-2">
              <button
                class="px-4 py-2 bg-purple-500 text-white rounded-lg"
                onclick="goToCompiler(${question.problem_id})"
              >
                Go to Compiler
              </button>
            </td>
          </tr>
        `;
        tbody.innerHTML += row;
      });
    } catch (error) {
      console.error("Error fetching questions:", error);
      const tbody = document.getElementById("questions-tbody");
      tbody.innerHTML = `
        <tr>
          <td colspan="4" class="py-4 text-center text-red-500">
            Failed to load questions. Please try again later.
          </td>
        </tr>
      `;
    }
  }

  // Function to redirect to the compiler for a specific problem
  function goToCompiler(problemId) {

    window.location.href = `contest-compiler.php?problem_id=${problemId}&contest_id=${contestId}`;
  }


  if (contestId) {
    fetchQuestions(contestId);
  } else {
    console.error("Contest ID is missing from the URL.");
  }


  if (contestId) {
    fetchLeaderboard(contestId);
  } else {
    console.error("Contest ID is missing in the URL.");
  }


  async function fetchLeaderboard(contestId) {
    try {
      const response = await fetch(
        `backend/contest/leaderboard.php?contestId=${contestId}`
      );

      if (!response.ok) {
        throw new Error("Failed to fetch leaderboard data.");
      }

      const data = await response.json();

      if (data.error) {
        throw new Error(data.error);
      }

      const leaderboardContainer = document.getElementById(
        "leaderboard-container"
      );
      leaderboardContainer.innerHTML = ""; // Clear existing leaderboard entries

      const leaderboard = data.leaderboard;

      if (leaderboard.length === 0) {
        leaderboardContainer.innerHTML = `<p class="text-gray-500">No participants found.</p>`;
        return;
      }

      leaderboard.forEach((entry, index) => {
        const listItem = document.createElement("li");
        listItem.className = "flex items-center space-x-4";

        const rankSpan = document.createElement("span");
        rankSpan.className = "font-medium text-gray-700";
        rankSpan.textContent = `${index + 1}.`;

        const profileImg = document.createElement("img");
        profileImg.src = entry.profile || "assets/img/background/avatar2.png";
        profileImg.alt = entry.user_name;
        profileImg.className = "w-10 h-10 rounded-full";

        const userDetailsDiv = document.createElement("div");
        userDetailsDiv.className = "flex-1";

        const userNameSpan = document.createElement("span");
        userNameSpan.className = "font-medium text-gray-700";
        userNameSpan.textContent = entry.user_name;

        userDetailsDiv.appendChild(userNameSpan);

        const scoreP = document.createElement("p");
        scoreP.className = "text-sm text-gray-500";
        scoreP.textContent = `${entry.total_solved_points} pts`;

        listItem.appendChild(rankSpan);
        listItem.appendChild(profileImg);
        listItem.appendChild(userDetailsDiv);
        listItem.appendChild(scoreP);

        leaderboardContainer.appendChild(listItem);
      });
    } catch (error) {
      console.error("Error fetching leaderboard:", error);
      const leaderboardContainer = document.getElementById(
        "leaderboard-container"
      );
      leaderboardContainer.innerHTML = `<p class="text-red-500">Failed to load leaderboard. Please try again later.</p>`;
    }
  }
</script>
  </body>
</html>