Increment attempts counter after a submission (#82)

* Increment attempts counter on submission * challenge.html: simplify alert class attribute * yarn build
CTFd · Jun 2, 2024 · e7336db · e7336db
1 parent 2b9206f
commit e7336db
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 17 deletions.
diff --git a/assets/js/challenges.js b/assets/js/challenges.js
@@ -63,6 +63,8 @@ Alpine.data("Challenge", () => ({
   solves: [],
   response: null,
   share_url: null,
+  max_attempts: 0,
+  attempts: 0,
 
   async init() {
     highlight();
@@ -174,6 +176,11 @@ Alpine.data("Challenge", () => ({
       this.submission = "";
     }
 
+    // Increment attempts counter
+    if (this.max_attempts > 0 && this.response.data.status != "already_solved") {
+      this.attempts += 1;
+    }
+
     // Dispatch load-challenges event to call loadChallenges in the ChallengeBoard
     this.$dispatch("load-challenges");
   },

diff --git a/static/assets/challenges.0e43adc4.js b/static/assets/challenges.0e43adc4.js
diff --git a/static/assets/challenges.a2215eea.js b/static/assets/challenges.a2215eea.js
diff --git a/static/manifest.json b/static/manifest.json
@@ -30,7 +30,7 @@
     ]
   },
   "assets/js/challenges.js": {
-    "file": "assets/challenges.0e43adc4.js",
+    "file": "assets/challenges.a2215eea.js",
     "src": "assets/js/challenges.js",
     "isEntry": true,
     "imports": [

diff --git a/templates/challenge.html b/templates/challenge.html
@@ -1,4 +1,4 @@
-<div :class="getStyles()" role="document" x-data="Challenge" x-init="id = {{ challenge.id }}">
+<div :class="getStyles()" role="document" x-data="Challenge" x-init="id = {{ challenge.id }}; max_attempts = {{ max_attempts }}; attempts = {{ attempts }}">
   <div class="modal-content">
     <div class="modal-body py-4 px-4 px-sm-5">
 
@@ -111,15 +111,11 @@ <h3 class="challenge-value text-center">
               </div>
             {% endif %}
 
-            {% if max_attempts > 0 %}
-              <div class="row text-center">
-                <div class="col-12">
-                  <p>
-                    {{ attempts }}/{{ max_attempts }} attempt{{ max_attempts|pluralize }}
-                  </p>
-                </div>
-              </div>
-            {% endif %}
+            <template x-if="max_attempts > 0">
+              <p class="text-center">
+                <span x-text="attempts"></span>/<span x-text="max_attempts"></span> {% trans c=max_attempts %}attempt{% pluralize %}attempts{% endtrans %}
+              </p>
+            </template>
 
             <div class="row submit-row">
               <div class="col-12 col-sm-8">
@@ -153,12 +149,12 @@ <h3 class="challenge-value text-center">
             <div class="row notification-row">
               <div class="col-12">
                 <template x-if="response">
-                  {# This alert is re-used for all alerts, so it's important not to make it dismissble #}
-                  <div
+                  {# This alert is re-used for all alerts, so it's important not to make it dismissible #}
+                  <div class="alert text-center w-100 mt-3"
                       :class="{
-                        'alert text-center w-100 mt-3 alert-success': response.data.status == 'correct',
-                        'alert text-center w-100 mt-3 alert-info': response.data.status == 'already_solved',
-                        'alert text-center w-100 mt-3 alert-danger': response.data.status == 'incorrect',
+                        'alert-success': response.data.status == 'correct',
+                        'alert-info': response.data.status == 'already_solved',
+                        'alert-danger': response.data.status == 'incorrect',
                       }" role="alert"
                   >
                     <strong x-text="response.data.message"></strong>