Challenge ratings (#114)

* Add user facing UI for CTFd/CTFd#2808

Author: ColdHeat

assets/js/challenges.js

@@ -74,6 +74,11 @@ Alpine.data("Challenge", () => ({
   share_url: null,
   max_attempts: 0,
   attempts: 0,
+  ratingValue: 0,
+  hoveredRating: 0,
+  selectedRating: 0,
+  ratingReview: "",
+  ratingSubmitted: false,
 
   async init() {
     highlight();
@@ -221,6 +226,20 @@ Alpine.data("Challenge", () => ({
     // Dispatch load-challenges event to call loadChallenges in the ChallengeBoard
     this.$dispatch("load-challenges");
   },
+
+  async submitRating() {
+    const response = await CTFd.pages.challenge.submitRating(
+      this.id,
+      this.selectedRating,
+      this.ratingReview,
+    );
+    if (response.value) {
+      this.ratingValue = this.selectedRating;
+      this.ratingSubmitted = true;
+    } else {
+      alert("Error submitting rating");
+    }
+  },
 }));
 
 Alpine.data("ChallengeBoard", () => ({

package.json

@@ -10,7 +10,7 @@
     "verify": "vite build; git diff --quiet --exit-code"
   },
   "dependencies": {
-    "@ctfdio/ctfd-js": "^0.0.17",
+    "@ctfdio/ctfd-js": "^0.0.18",
     "@fontsource/lato": "^4.5.3",
     "@fontsource/raleway": "^4.5.3",
     "@fortawesome/fontawesome-free": "6.5.1",

static/assets/challenges.074c9899.js

@@ -0,0 +1 @@
+import{C as o,m as d}from"./index.b6be5691.js";window.CTFd=o;window.Alpine=d;d.start();