Skip to content

Commit 1fb878f

Browse files
iokiwiiokiwi
committed
Add particles, fireworks and tidy success/error styles for challenges
1 parent dc91482 commit 1fb878f

File tree

9 files changed

+175
-26
lines changed

9 files changed

+175
-26
lines changed

‎race_condition/problems.py

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,14 @@ def validate(problem_name, challenge_number):
151151
next_challenge = _show_challenge(problem_name, challenge_number + 1)
152152

153153
if next_challenge is None:
154-
next_challenge = "<h1 class='success'>Problem Complete</h1>"
154+
template_vars = {
155+
"problem_name": problem_name,
156+
"challenge_input": load_markdown(
157+
f"problems/{problem_name}/input_{challenge_number}.md"
158+
),
159+
"challenge_number": challenge_number,
160+
}
161+
next_challenge = render_template("problem/_complete.html", **template_vars)
155162

156163
return jsonify(
157164
{

‎race_condition/static/app.css

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/* body {
2-
color: red !important;
3-
} */
4-
51
body {
62
font-size: 1.25rem;
73
}
@@ -10,17 +6,33 @@ input {
106
font-size: 1.25em !important;
117
}
128

13-
.success {
9+
.success > .card {
1410
color: white !important;
15-
/* background-color: #51cb69 !important; */
1611
background-color: #7cd88e !important;
1712
}
1813

19-
.incorrect {
14+
.incorrect > .card {
2015
color: white !important;
2116
background-color: #d87c8f !important;
2217
}
2318

24-
.challenge {
25-
padding: 15px;
26-
}
19+
.background {
20+
position: fixed;
21+
top: 0;
22+
left: 0;
23+
z-index: -1;
24+
width: 100vw;
25+
height: 100vh;
26+
/* This is a beautiful black/blue/purple gradient background */
27+
/* background: rgb(2,0,36); */
28+
/* background: linear-gradient(120deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(145,0,255,1) 100%); */
29+
}
30+
31+
.overlay {
32+
position: fixed;
33+
top: 0;
34+
left: 0;
35+
width: 100vw;
36+
height: 100vh;
37+
pointer-events: none;
38+
}

‎race_condition/static/app.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ var handleSubmit = function(event) {
2121
let challengeNumber = challengeDiv.data("challengenumber");
2222
let problemName = challengeDiv.data("problemname");
2323

24-
console.log(challengeNumber)
25-
2624
let answerInput = challengeDiv.find(".answer");
2725
let answer = answerInput.val();
2826

@@ -32,8 +30,14 @@ var handleSubmit = function(event) {
3230
data: JSON.stringify({ data: answer }),
3331
contentType: 'application/json',
3432
success: function(response) {
33+
3534
challengeDiv.removeClass("incorrect");
3635
challengeDiv.addClass("success");
36+
37+
const container = document.querySelector('.fireworks')
38+
const fireworks = new Fireworks.default(container)
39+
fireworks.launch(10)
40+
3741
setTimeout(function () {
3842
$("#challenges-list").html(response.challenge_response);
3943
hljs.highlightAll();
@@ -46,7 +50,7 @@ var handleSubmit = function(event) {
4650
});
4751
}
4852

49-
5053
$(document).ready(function(){
51-
54+
particlesJS.load('particles-js', 'static/particles.json', function() {
55+
});
5256
});

‎race_condition/static/particles.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎race_condition/static/particles.json

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"particles": {
3+
"number": {
4+
"value": 80,
5+
"density": {
6+
"enable": true,
7+
"value_area": 1500
8+
}
9+
},
10+
"color": {
11+
"value": "#E0E0E0"
12+
},
13+
"shape": {
14+
"type": "circle",
15+
"stroke": {
16+
"width": 0,
17+
"color": "#000000"
18+
},
19+
"polygon": {
20+
"nb_sides":20
21+
},
22+
"image": {
23+
"src": "img/github.svg",
24+
"width": 100,
25+
"height": 100
26+
}
27+
},
28+
"opacity": {
29+
"value": 0.5,
30+
"random": false,
31+
"anim": {
32+
"enable": false,
33+
"speed": 1,
34+
"opacity_min": 0.1,
35+
"sync": false
36+
}
37+
},
38+
"size": {
39+
"value": 5,
40+
"random": true,
41+
"anim": {
42+
"enable": false,
43+
"speed": 80,
44+
"size_min": 0.1,
45+
"sync": false
46+
}
47+
},
48+
"line_linked": {
49+
"enable": true,
50+
"distance": 300,
51+
"color": "#E0E0E0",
52+
"opacity": 0.3,
53+
"width": 2
54+
},
55+
"move": {
56+
"enable": true,
57+
"speed": 3,
58+
"direction": "none",
59+
"random": false,
60+
"straight": false,
61+
"out_mode": "out",
62+
"bounce": false,
63+
"attract": {
64+
"enable": false,
65+
"rotateX": 600,
66+
"rotateY": 1200
67+
}
68+
}
69+
},
70+
"interactivity": {
71+
"detect_on": "canvas",
72+
"events": {
73+
"onhover": {
74+
"enable": false,
75+
"mode": "repulse"
76+
},
77+
"onclick": {
78+
"enable": true,
79+
"mode": "push"
80+
},
81+
"resize": true
82+
},
83+
"modes": {
84+
"grab": {
85+
"distance": 800,
86+
"line_linked": {
87+
"opacity": 1
88+
}
89+
},
90+
"bubble": {
91+
"distance": 800,
92+
"size": 80,
93+
"duration": 2,
94+
"opacity": 0.8,
95+
"speed": 3
96+
},
97+
"repulse": {
98+
"distance": 400,
99+
"duration": 0.4
100+
},
101+
"push": {
102+
"particles_nb": 4
103+
},
104+
"remove": {
105+
"particles_nb": 2
106+
}
107+
}
108+
},
109+
"retina_detect": true
110+
}

‎race_condition/templates/base.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<!-- <link rel="stylesheet" href="https://unpkg.com/github-markdown-css/github-markdown.css"/> -->
7-
<link rel="stylesheet" href="https://unpkg.com/markdown-css/modest.css"/>
8-
<!-- <link rel="stylesheet" href="https://unpkg.com/primer/build/build.css"/> -->
96
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
10-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
118
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
129
<title>{% block title %}&lt; Race Condition /&gt;{% endblock %}</title>
1310
</head>
@@ -16,11 +13,15 @@
1613
{% block content %}
1714
{% endblock %}
1815
</div>
16+
<div id="particles-js" class="background"></div>
17+
<div class="fireworks overlay"></div>
1918
</body>
2019
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2120
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
22-
<!-- Example with Highlight.js -->
2321
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
2422
<script>hljs.highlightAll();</script>
25-
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
23+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
24+
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
25+
<script src="{{ url_for('static', filename='particles.js') }}"></script>
26+
<script src="{{ url_for('static', filename='app.js') }}"></script>
2627
</html>

‎race_condition/templates/problem/_challenge.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
<div class="card mb-3">
2-
<div class="card-body">
3-
4-
<div id="challenge-{{challenge_number}}" class="challenge mb-3" data-challengeNumber="{{challenge_number}}" data-problemName="{{problem_name}}">
1+
<div id="challenge-{{challenge_number}}" class="challenge mb-3" data-challengeNumber="{{challenge_number}}" data-problemName="{{problem_name}}">
2+
<div class="card mb-3">
3+
<div class="card-body">
54

65
<h5>Input {{challenge_number}}</h5>
76
<article class="markdown-body">

‎race_condition/templates/problem/_complete.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div id="challenge-{{challenge_number}}" class="challenge mb-3 success" data-challengeNumber="{{challenge_number}}" data-problemName="{{problem_name}}">
2+
<div class="card mb-3">
3+
<div class="card-body">
4+
<h1>Problem Complete</h1>
5+
</div>
6+
</div>
7+
</div>

‎race_condition/templates/problem/show.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
{% block content %}
44

5-
<div class="mb-6">
5+
<div class="mb-5 pt-5">
66
<article class="markdown-body">
77
{{ problem_statement|safe }}
88
</article>

0 commit comments

Comments
 (0)