Initial connection of front-end to back-end.

files/routes/__init__.py

@@ -15,4 +15,5 @@ from .votes import *
 from .feeds import *
 from .awards import *
 from .giphy import *
-from .subs import *
+from .subs import *
+from .lottery import *

files/routes/lottery.py

@@ -0,0 +1,20 @@
+from files.__main__ import app, limiter
+from files.helpers.wrappers import *
+from files.helpers.alerts import *
+from files.helpers.get import *
+from files.helpers.const import *
+
+@app.post("/lottery/buy")
+@limiter.limit("1/second;30/minute;200/hour;1000/day")
+@auth_required
+def lottery_buy(v):
+    if v.coins < 12:
+        return {"error": "Lottershe tickets cost 12 dramacoins each."}, 400
+
+    # Charge user for ticket
+    v.coins -= 12
+
+    # Save changes
+    g.db.commit()
+
+    return {"message": "Lottershe ticket purchased!"}

files/templates/lottery_modal.html

@@ -57,6 +57,7 @@
             type="button"
             class="btn btn-success lottery-modal--action"
             id="purchaseTicket"
+            onclick="purchaseLotteryTicket()"
           >
             Purchase 1 for
             <img
@@ -71,12 +72,73 @@
               data-bs-original-title="coins"
             />
 
-            10
+            12
           </button>
+          <script>
+            const userCoinCount = {{v.coins}};
+            const ticketCost = 12;
+
+            if (userCoinCount < ticketCost) {
+              const purchaseTicketButton = document.getElementById('purchaseTicket');
+              purchaseTicketButton.disabled = true;
+            }
+          </script>
         </div>
       </div>
     </div>
   </div>
+
+  <!-- Success -->
+  <div
+    class="toast"
+    id="lottery-post-success"
+    style="
+      position: fixed;
+      bottom: 1.5rem;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      width: 275px;
+      z-index: 1000;
+    "
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+    data-bs-animation="true"
+    data-bs-autohide="true"
+    data-bs-delay="5000"
+  >
+    <div class="toast-body bg-success text-center text-white">
+      <i class="fas fa-comment-alt-smile mr-2"></i
+      ><span id="lottery-post-success-text"></span>
+    </div>
+  </div>
+
+  <!-- Error -->
+  <div
+    class="toast"
+    id="lottery-post-error"
+    style="
+      position: fixed;
+      bottom: 1.5rem;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      width: 275px;
+      z-index: 1000;
+    "
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+    data-bs-animation="true"
+    data-bs-autohide="true"
+    data-bs-delay="5000"
+  >
+    <div class="toast-body bg-danger text-center text-white">
+      <i class="fas fa-exclamation-circle mr-2"></i
+      ><span id="lottery-post-error-text"></span>
+    </div>
+  </div>
 </div>
 
 <script src="/assets/js/lottery_modal.js?v=249" data-cfasync="false"></script>