Webbserverprogrammering 1

Show sourcecode

The following files exists in this folder. Click to view.

webbserver/filmquiz/

api/
createroom.php
createtables.php
createuser.php
css/
dbconnection.php
game.php
index.php
login.php
logout.php
remove.php
rensa.php
results.php
waiting.php

game.php

88 lines UTF-8 Windows (CRLF)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/stylesheet.css" rel="stylesheet">
    <title>Film Quiz</title>
        <?php
    include("dbconnection.php");
    /** @var PDO $dbconn */
    $room_id = $_SESSION['room_id'];
    $user_id = $_SESSION['user_id'];
    $username = $_SESSION['username'];

    // Gå till loginsida om ingen är inloggad
    if ($username === null) {
        header("Location: login.php");
        exit;
    }
    ?>
</head>
<body>
    <h2>Runda <span id="round">1</span> / 10</h2>
    <br>
    <h3>Scores:</h3>
    <div id="scores"></div>
    <br>
    <p>Tid kvar: <span id="countdown">10</span>s</p>
    <img id="backdrop" src="" style="width:100%; max-width:800px;">
    <br><br>
    <form type="post" onsubmit="event.preventDefault(); submitGuess()">
        <input type="text" id="guess">
        <button type="submit">Svara</button>
    </form>
    <p id="message"></p>
    <p>Alla titlar är på engelska, även svenska filmer</p>

    <script>
        const room_id = <?php echo json_encode($room_id); ?>;
        const user_id = <?php echo json_encode($user_id); ?>;
        let lastRound = 0;

        // Kolla api/gamestate.php varje sekund om tiden gått ut
        setInterval(async () => {
            const res = await fetch(`api/gamestate.php?room_id=${room_id}`);
            const state = await res.json();
            updateUI(state);
        }, 1000);

        // Om spelare anger ett svar, ropa på api/gamestate.php med POST
        async function submitGuess() {
            const guess = document.getElementById('guess').value;
            const res = await fetch('api/gamestate.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: `room_id=${room_id}&user_id=${user_id}&guess=${encodeURIComponent(guess)}`
            });
            const state = await res.json();
            updateUI(state);
        }

        // Funktion som skriver ut nuvarande status
        function updateUI(state) {
            document.getElementById('round').textContent = state.round;
            document.getElementById('countdown').textContent = state.time_left;

            // Töm om det är en ny runda
            if (state.round !== lastRound) {
                document.getElementById('backdrop').src = state.backdrop;
                document.getElementById('guess').value = '';
                document.getElementById('message').textContent = '';
                lastRound = state.round;
            }
            if (state.message) {
                document.getElementById('message').textContent = state.message;
            }

            if (state.status === 'finished') {
                window.location.href = 'results.php';
            }
            if (state.scores) {
                document.getElementById('scores').innerHTML = state.scores
                .map(s => `<p>${s.username}: ${s.points} poäng</p>`).join('');
            }
        }         
    </script>
</body>
</html>