henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Merge branch '125-counter-der-punkte-js-animation' into 'master'

Browse Source 
Resolve "Counter der Punkte (js animation)"

Closes #125

See merge request enrichment-2024/qivip!83
This commit is contained in:
ben8
2025-05-23 17:24:36 +00:00
parent 8f6bfd2aad f30c984342
commit 3056a8b389
6 changed files with 127 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
django/play/consumers.py
View File

@@ -129,6 +129,7 @@ class GameConsumer(AsyncWebsocketConsumer):
time_factor = time_remaining / 30000 # 30 seconds max
score = int(base_score * (0.5 + 0.5 * time_factor))
participant.last_score=score
participant.score += score
participant.last_answer_correct = is_correct
participant.save()
@@ -460,7 +461,7 @@ class LobbyConsumer(AsyncWebsocketConsumer):
if answer == correct_answer:
# Base score for correct answer + bonus for speed
score = 1000 + int(time_remaining * 10) # 10 points per remaining second
participant.last_score= score
participant.score += score
participant.save()
return score

1
django/play/consumers/game.py
View File

@@ -233,6 +233,7 @@ class GameConsumer(AsyncWebsocketConsumer):
answer_obj.time_remaining = time_remaining
answer_obj.save()
participant.last_score = score
participant.score += score
participant.last_answer_correct = is_correct
participant.save()

18
django/play/migrations/0012_quizgameparticipant_last_score.py Normal file
View File

@@ -0,0 +1,18 @@
# Generated by Django 5.1.7 on 2025-05-22 15:26
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('play', '0011_quizgame_updated_at'),
]
operations = [
migrations.AddField(
model_name='quizgameparticipant',
name='last_score',
field=models.IntegerField(default=0, verbose_name='Letzte_Punkte'),
),
]

1
django/play/models.py
View File

@@ -43,6 +43,7 @@ class QuizGameParticipant(models.Model):
display_name = models.CharField(verbose_name="Anzeigename", max_length=15)
quiz_game = models.ForeignKey(QuizGame, on_delete=models.CASCADE, related_name="participants")
score = models.IntegerField(verbose_name="Punkte", default=0)
last_score = models.IntegerField(verbose_name="Letzte_Punkte", default=0)
avatar = models.CharField(max_length=200, blank=True, default="")
last_heartbeat = models.DateTimeField(auto_now_add=True)
last_answer = models.IntegerField(null=True, blank=True)

4
django/play/views.py
View File

@@ -57,6 +57,7 @@ def lobby(request, join_code):
if not participant.quiz_game.join_code == join_code: # Teilnehmer dem richtigen Spiel hinzufügen
participant.quiz_game = quiz_game
participant.score = 0 # Reset score when joining new game
participant.last_score = 0
participant.save()
except QuizGameParticipant.DoesNotExist:
return redirect('play:create_participant', join_code=join_code)
@@ -83,6 +84,7 @@ def create_participant(request, join_code):
if participant.quiz_game.join_code != join_code:
participant.quiz_game = quiz_game
participant.score = 0 # Reset score when joining new game
participant.last_score = 0
participant.save()
return redirect('play:lobby', join_code=join_code)
except QuizGameParticipant.DoesNotExist:
@@ -103,6 +105,7 @@ def create_participant(request, join_code):
participant.display_name = display_name
participant.quiz_game = quiz_game
participant.score = 0 # Initialize score
participant.last_score = 0
participant.save()
response = HttpResponseRedirect(reverse('play:lobby', kwargs={'join_code': join_code}))
@@ -340,6 +343,7 @@ def selected_mode(request, join_code):
participant.participant_id=host_id
participant.quiz_game = quiz_game
participant.score = 0 # Initialize score
participant.last_score = 0
participant.save()
quiz_game.current_state = "question"
quiz_game.question_start_time = timezone.now()

120
django/templates/play/game/score_overview.html
View File

@@ -27,12 +27,12 @@
<div class="mb-6">
<h2 class="text-xl font-bold mb-4">Punktestand</h2>
<div id="scoreboard" class="space-y-2">
<div id="scoreboard" class="leading-relaxed">
{% for participant in participants %}
{% if participant == my_participant or is_host %}
<div class=" p-4 bg-gray-100 rounded-lg flex justify-between items-center border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
<div>
<p class="text-lg font-bold">
<div class="mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
<div class="flex flex-col items-start gap-1">
<div class="text-lg font-bold flex items-center gap-2">
{% if forloop.counter == 1 %}
🥇
{% elif forloop.counter == 2 %}
@@ -42,22 +42,102 @@
{% else %}
{{ forloop.counter }}.
{% endif %}
{{ participant.display_name }}
</p>
<p data-last-score="{{ participant.last_score }}" class="text-gray-600" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p>
</div>
{% if participant.last_answer_correct %}
{% if participant == my_participant or request.session.mode == "learn" %}
<div class="align-center text-center overflow-auto p-4" id="antwort-richtig">Hier erscheint gleich dein Feedback...</div>
<span class="display_name text-gray-600 font-black text-2xl " id="display_name-{{ forloop.counter0 }}">{{ participant.display_name }}</span>
</div class="flex flex-col items-start">
<p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="text-gray-600 font-bold show-score" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p>
{% if participant == my_participant or request.session.mode == "learn"%}
<p class="text-blue-600 font-bold text-sm">+{{ participant.last_score }} Punkte</p>
{% endif %}
</div>
<script>
async function start() {
elements=document.getElementsByClassName("show-score");
for (let i = 0; i < elements.length; i++) {
const el = elements[i];
let counter=Number(el.getAttribute('data-score'))-Number(el.getAttribute('data-last-score'));
let goal=Number(el.getAttribute('data-score'));
let interval= setInterval(function(){
el.innerHTML = counter + " Punkte";
if(counter<=goal){
el.innerHTML = counter + " Punkte";
counter+=8;
}
else{
el.innerHTML = goal + " Punkte";
clearInterval(interval);
}
}, 20);}}
function bounce(){
const names = document.getElementsByClassName("display_name");
for (let i = 0; i < names.length; i++) {
names[i].classList.add("animate-bounce");
}
}
{% if is_last_question %}
bounce();
{% else %}
start();
{% endif %}
<span class="text-green-500 font-black">✓</span>
</script>
{% if participant == my_participant or request.session.mode == "learn" %}
{% if participant.last_answer_correct %}
<div class="mt-1 flex justify-center border-t-2 border-gray-300 gap-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="pt-2 text-center text-green-500 font-black size-10">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<div class=" pt-3 text-center text-gray-600 font-bold" id="antwort-richtig">
Hier erscheint gleich dein Feedback...
</div>
</div>
{% elif participant.last_answer_correct == False %}
{% if participant == my_participant or request.session.mode == "learn" %}
<div class="align-center text-center overflow-auto p-4" id="antwort-falsch">Hier erscheint gleich dein Feedback...</div>
{% endif %}
<span class="text-red-500 font-black">✗</span>
<div class="mt-1 flex justify-center border-t-2 border-gray-300 gap-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="pt-2 text-center text-red-500 font-black size-10">
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<div class=" pt-3 text-center text-gray-600 font-bold" id="antwort-falsch">
Hier erscheint gleich dein Feedback...
</div>
<div class="flex justify-center border-t-2 border-gray-500 gap-1">
{% endif %}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
@@ -65,11 +145,11 @@
{% if is_host %}
{% if is_last_question %}
<button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
<button id="finish-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
Quiz beenden
</button>
{% else %}
<button id="next-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
<button id="next-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
Nächste Frage
</button>
{% endif %}
@@ -103,7 +183,8 @@
});
// Warten bevor Animation startet
await sleep(1500); // <<< hier die 5 Sekunden Pause
await sleep(1500); // <<< hier die Pause
// Transition-Eigenschaft setzen nach Render-Zyklus
requestAnimationFrame(() => {
@@ -119,6 +200,7 @@
if (index === top3.length - 1) {
triggerConfetti();
}
}, index * 1500); // Zeitversetzt aufdecken
});