add validation and fix some bugs

prakhar9998 · Feb 20, 2019 · e6ce839 · e6ce839
1 parent 9827712
commit e6ce839
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 33 deletions.
diff --git a/sherlocked/models.py b/sherlocked/models.py
@@ -1,8 +1,12 @@
 from django.contrib.auth.models import AbstractUser
 from django.db import models
+from datetime import timedelta
 
 class Question(models.Model):
     question_text = models.CharField(max_length=200)
     question_story = models.TextField()
     question_level = models.IntegerField(default=-1)
-    answer = models.CharField(max_length=100)
+    answer = models.CharField(max_length=100)
+    # TODO: add image in models
+    # image = models.ImageField(null=True, blank=True)
+    wait_duration = models.DurationField(default=timedelta(seconds=13))
diff --git a/sherlocked/views.py b/sherlocked/views.py
@@ -7,7 +7,6 @@
 from django.contrib.auth.decorators import login_required
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
-
 from userAuth.models import Player
 from .models import Question
 
@@ -59,6 +58,7 @@ def play(request):
         'question': question,
     }
 
+    # TODO: Add flip clock in template
     return render(
         request,
         'sherlocked/play.html',
@@ -87,14 +87,15 @@ def submit(request):
 
             # Increment the amount of time the user needs to wait 
             # to move on to the next question.
-            wait_time = timedelta(seconds=62)
-            player.unlock_time = datetime.now() + wait_time
-
+            # question.wait_time = timedelta(seconds=12)
+            player.unlock_time = datetime.now() + question.wait_duration
+            player.last_solved = datetime.now()
             player.save()
 
             is_correct = 'true'
             response_text = 'Correct Answer!'
 
+        # TODO: Pass a dictionary in JSON response
         return JsonResponse(
             {
                 'isCorrect': is_correct,
@@ -104,7 +105,7 @@ def submit(request):
     return redirect("play")
 
 def leaderboard(request):
-    players_list = Player.objects.order_by()
+    players_list = Player.objects.order_by("level", "-last_solved")
     paginator = Paginator(players_list, 10)
 
     page = request.GET.get('page')

diff --git a/templates/base.html b/templates/base.html
@@ -1,12 +1,84 @@
+{% load static %}
 <!DOCTYPE html>
 <html>
 <head>
     <title>{% block title %}{% endblock %}</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Old+Standard+TT');
+
+        img {
+            margin-left: 20%;
+        }
+
+        body {
+            font-family: 'Old Standard TT', serif;
+            margin: 0;
+        }
+
+        #header {
+            font-family: 'Old Standard TT', serif;
+            color: white;
+            text-align: center;
+            font-size: 45px;
+            margin: 10px;
+        }
+
+        #container {
+            display: flex;
+            align-items: center;
+            /* border: 1px solid black; */
+            height: 100vh;
+            justify-content: space-between;
+        }
+
+        .links {
+            text-decoration: none;
+            /* border: 1px solid blue; */
+            color: white;
+            font-size: 26px;
+            padding: 12px 12px 12px 25px;
+        }
+
+        .sidebar {
+            /* border: 1px solid red; */
+            width: 300px;
+            background-color: #231f20;
+            display: flex;
+            flex-direction: column;
+            position: fixed;
+            bottom: 0px;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        #content {
+            /* border: 1px solid red; */
+            margin-left: 400px;
+            margin-right: 400px;
+        }
+    </style>
 </head>
 <body>
-    <main>
-        {% block content %}
-        {% endblock %}
-    </main>
+    <div id="container">
+        <div class="sidebar">
+            <div class="logo">
+                <h1 id="header">Sherlocked</h1>
+                <img src="{% static 'img/sherlock.png' %}" height="150" width="150" alt="sherlock image">
+            </div>
+            <a href="#" class="links">Solve Mystery</a>
+            <a href="#" class="links">Leaderboard</a>
+            <a href="#" class="links">Description</a>
+            <a href="#" class="links">Rules</a>
+            <a href="#" class="links">Forum</a>
+            <a href="#" class="links">Logout</a>
+        </div>
+
+        <div id="content">
+            {% block content %}
+            {% endblock %}
+        </div>  
+    </div>
+
 </body>
 </html>
diff --git a/templates/registration/signup.html b/templates/registration/signup.html
@@ -1,14 +1,30 @@
 <h2>Sign up</h2>
-  <form method="post" action="{% url 'signup' %}">
+<form method="post" action="{% url 'signup' %}">
     {% csrf_token %}
     {% for field in form %}
-      <p>
-        {{ field.label_tag }}<br>
-        {{ field }}
-        {% for error in field.errors %}
-          <p style="color: red">{{ error }}</p>
-        {% endfor %}
-      </p>
+        <p>
+            {{ field.label_tag }}<br>
+            {{ field }}
+            {% for error in field.errors %}
+                <p style="color: red">{{ error }}</p>
+            {% endfor %}
+        </p>
     {% endfor %}
-    <button type="submit">Sign up</button>
-  </form>
+    <button type="submit">submit</button>
+    <p><span id="validate-message"></span></p>
+</form>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        var pass1 = document.querySelector("#id_password1");
+        var pass2 = document.querySelector("#id_password2");
+        pass2.addEventListener('keyup', () => {
+            var validateMessage = document.querySelector("#validate-message");
+            if (pass1.value === pass2.value && pass1.value != "") {
+                validateMessage.innerHTML = "Yay!";
+            } else {
+                validateMessage.innerHTML = "Nope.. You shall not pass.";
+            }
+        });
+    })
+</script>
diff --git a/templates/sherlocked/play.html b/templates/sherlocked/play.html
@@ -1,26 +1,39 @@
 {% extends 'base.html' %}
 
-{% load staticfiles %}
+{% load static %}
 
 {% block title %}Play{% endblock %}
 
 {% block content %}
     <h1>{{ user.username }}</h1>
     <h2>You're at question {{ question.question_level }}</h2>
-    <h3>Story</h3>
-    <p>{{ question.question_story }}</p>
-    <h3>Question</h3>
-    <p>{{ question.question_text }}</p>
-
-    <form action="{% url 'submit' %}" method="POST" id="ans-form">
-        {% csrf_token %}
-        <label for="answer">Answer:</label>
-        <input name="answer" id = "answer" type="text">
-        <p><input type="submit">Submit</p>
-    </form>
+    <div id="story">
+            <h3>Story</h3>
+        <p>{{ question.question_story }}</p>
+    </div>
+
+    <div id="question" style="display: none;">
+        <h3>Question</h3>
+        <p>{{ question.question_text }}</p>
+        <form action="{% url 'submit' %}" method="POST" id="ans-form">
+            {% csrf_token %}
+            <label for="answer">Answer:</label>
+            <input name="answer" id = "answer" type="text">
+            <p><input type="submit">Submit</p>
+        </form>
+    </div>
+
+    <button onclick="displayQuestion()">Go to the question</button>
 
     <p id='response'></p>
 
+    <script>
+        function displayQuestion() {
+            document.querySelector('#story').style.display = "none";
+            document.querySelector("#question").style.display = "block";
+        }
+    </script>
+
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
     <script src="{% static 'js/ajax_submit.js' %}"></script>

diff --git a/templates/signup.html b/templates/signup.html
@@ -6,6 +6,16 @@
     <form method="POST">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Sign Up</button>
+        <button onclick="validate()">Sign Up</button>
     </form>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            var pass1 = document.querySelector("#id_password1");
+            var pass2 = document.querySelector("#id_password2");
+            console.log(pass1);
+            console.log(pass2);
+        })
+    </script>
+
 {% endblock %}