Projet_WebDev/Jeu.html at master · JPDLD/Projet_WebDev · GitHub

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>Mon Jeu</title>
<link rel="stylesheet" href="style.css">
        <style>

            #zone_chat strong {

                color: white;

                background-color: black;

                padding: 2px;

            }

        </style>
</head>
<body>
  <canvas id="canvas" height=400 width=400></canvas>
  <script src = "Terrain.js"></script>


  <h1>Salle de Chat</h1>

        <form action="/" method="post" id="formulaire_chat">

            <input type="text" name="message" id="message" placeholder="Votre message..." size="50" autofocus />

            <input type="submit" id="envoi_message" value="Envoyer" />

        </form>

        <section id="zone_chat">


        </section>


        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <script src="node_modules/socket.io/socket.io.js"></script>

        <script src="socket.io/socket.io.js">


            // Connexion à socket.io

            var socket = io.connect('http://localhost:8080');


            // On demande le pseudo, on l'envoie au serveur et on l'affiche dans le titre

            var pseudo = prompt('Quel est votre pseudo ?');

            socket.emit('nouveau_client', pseudo);

            document.title = pseudo + ' - ' + document.title;


            // Quand on reçoit un message, on l'insère dans la page

            socket.on('message', function(data) {

                insereMessage(data.pseudo, data.message)

            })


            // Quand un nouveau client se connecte, on affiche l'information

            socket.on('nouveau_client', function(pseudo) {

                $('#zone_chat').prepend('<p><em>' + pseudo + ' a rejoint le Chat !</em></p>');

            })


            // Lorsqu'on envoie le formulaire, on transmet le message et on l'affiche sur la page

            $('#formulaire_chat').submit(function () {

                var message = $('#message').val();

                socket.emit('message', message); // Transmet le message aux autres

                insereMessage(pseudo, message); // Affiche le message aussi sur notre page

                $('#message').val('').focus(); // Vide la zone de Chat et remet le focus dessus

                return false; // Permet de bloquer l'envoi "classique" du formulaire

            });


            // Ajoute un message dans la page

            function insereMessage(pseudo, message) {

                $('#zone_chat').prepend('<p><strong>' + pseudo + '</strong> ' + message + '</p>');

            }

        </script>


</body>
</html>