Skip to content

P
projet-cdaw
Commit 808bc22a authored by raphael.peim's avatar raphael.peim
Browse files
Options

Update Rules.vue and Game.vue

parent a10f0700
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 4 deletions
frontend/chat/ajax/sendmsg.php 0 → 100644
View file @ 808bc22a
<?php
require '../init.php';
if(isset($_POST['message']) && !empty($_POST['message']) && isset($_SESSION['id_utilisateur'])) {
$usr = 0;
if(isset($_POST['usr'])) {
$usr = $_POST['usr'];
}
$sql = "INSERT INTO `messages`(id_user, id_user_private, content)
VALUES (" . intval($_SESSION['id_utilisateur']) . ", " . intval($usr) . ", :message)";
$query = $db->prepare($sql);
$query->bindValue(':message', $_POST['message'], PDO::PARAM_STR);
$query->execute();
}
?>
\ No newline at end of file
frontend/chat/ajax/showmsg.php 0 → 100644
View file @ 808bc22a
<?php
require '../init.php';
if(isset($_SESSION['id_utilisateur'])) {
$message = array();
$sql = "SELECT m.id, u.login, u.avatar, u.avatar_url, m.content, m.`date`, m.id_user_private
FROM `messages` AS m
LEFT JOIN users AS u ON u.id = m.id_user
WHERE (date BETWEEN timestamp(DATE_SUB(NOW(), INTERVAL 2 MINUTE))
AND timestamp(NOW()))
AND (m.id_user_private = 0
OR m.id_user = " . intval($_SESSION['id_utilisateur']) . "
OR m.id_user_private = " . intval($_SESSION['id_utilisateur']) . ")
GROUP BY m.id";
foreach($db->query($sql) as $data) {
$msg = array(
'id_message' => $data['id'],
'login' => $data['login'],
'prive' => $data['id_user_private'],
'message' => strip_tags($data['content']),
'avatar' => $data['avatar'],
'avatar_url' => $data['avatar_url'],
'date' => $data['date']
);
$message[] = $msg;
}
echo json_encode($message);
}
?>
\ No newline at end of file
frontend/chat/ajax/showuser.php 0 → 100644
View file @ 808bc22a
<?php
require '../init.php';
if(isset($_SESSION['id_utilisateur']))
{
// MAJ session
$sql = "UPDATE `sessions` SET date=CURRENT_TIMESTAMP WHERE id_user = " . intval($_SESSION['id_utilisateur']);
$query = $db->prepare($sql);
$query->execute();
// Liste utilisateurs
$utilisateur = array();
$sql = "SELECT s.id_user, u.login, u.avatar, u.avatar_url
FROM `sessions` AS s
LEFT JOIN users AS u ON u.id = s.id_user
WHERE (s.date BETWEEN timestamp(DATE_SUB(NOW(), INTERVAL 10 SECOND)) AND timestamp(NOW()))
GROUP BY s.id_user";
foreach($db->query($sql) as $data) {
$usr = array(
'id_utilisateur' => $data['id_user'],
'login' => $data['login'],
'avatar' => $data['avatar'],
'avatar_url' => $data['avatar_url']
);
$utilisateur[] = $usr;
}
echo json_encode($utilisateur);
}
?>
\ No newline at end of file
frontend/chat/index.php 0 → 100644
View file @ 808bc22a
<?php
require 'init.php';
if(isset($_POST['action']) && $_POST['action']=='deconnexion')
{
unset($_SESSION);
session_destroy();
header('Location:'.URL_SITE);
}
if(!empty($_POST['login']) && !empty($_POST['password']))
{
$sql = "SELECT `id`, `password` FROM users WHERE login=:login";
$query = $db->prepare($sql);
$query->bindValue(':login', $_POST['login'], PDO::PARAM_STR);
$query->execute();
$row = $query->fetch();
if(!empty($row) && password_verify($_POST['password'], $row['password'])) {
$_SESSION['id_utilisateur'] = $row['id'];
}
}
if(isset($_SESSION['id_utilisateur']))
{
$sql = "SELECT id FROM `sessions` WHERE id_user=".intval($_SESSION['id_utilisateur']);
$query = $db->prepare($sql);
$query->execute();
$row = $query->fetch();
if(!empty($row[0]))
{
// MAJ session
$sql = "UPDATE `sessions` SET date=CURRENT_TIMESTAMP WHERE id_user=".intval($_SESSION['id_utilisateur']);
$query = $db->prepare($sql);
$query->execute();
}
else
{
// Insertion session
$sql = "INSERT INTO `sessions`(id_user) VALUES(".intval($_SESSION['id_utilisateur']).")";
$query = $db->prepare($sql);
$query->execute();
}
}
?>
<!doctype html>
<html lang="fr-FR">
<head>
<meta charset="utf-8" />
<title>Chat</title>
<style type="text/css">
body{font-family:Arial;}
h1,h2,p{text-align:center;}
#main-wrapper{max-width:600px;margin:auto;}
#message{background-color:#f3f2f7;padding:0 10px;height:300px;width:100%;box-sizing:border-box;border-radius:5px;overflow-y:scroll;border:1px solid #cccccc;}
#utilisateur{list-style:none;padding:0;background-color:#f3f2f7;height:100px;width:100%;box-sizing:border-box;border-radius:5px;overflow-y:scroll;margin-bottom:10px;border:1px solid #cccccc;}
#send{margin-top:10px;width:100%;padding:5px;border-radius:5px;border:1px solid #cccccc;box-sizing:border-box;}
.message{border-bottom:1px solid #cccccc;padding:10px 0;font-size:0.9em;}
.message img{float:left;margin-top:-5px;margin-right:5px;}
.utilisateur{padding:5px;font-size:0.9em;}
.utilisateur{color:#3e3e3e;cursor:default;}
.utilisateur:hover{cursor:pointer;background-color:#cccccc !important;}
.utilisateur:nth-child(2n+2){background-color:#ffffff;}
.utilisateur .usr{width:100%;padding-right:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.utilisateur .usr img{float:left;margin-right:5px;}
.utilisateur-action{position:absolute;box-shadow:1px 1px 3px #cccccc;padding:5px;background-color:#ffffff;border-radius:5px;}
.utilisateur-action-close{position:absolute;left:130px;top:0px;}
.button{cursor:pointer;padding:10px 15px;font-weight:bold;border-radius:5px;color:#ffffff;border:0px;background:#3e679b;box-sizing:border-box;text-align:center;text-decoration:none;}
.button-blue:hover{background:#5980B8;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="main-wrapper">
<h1>Chat</h1>
<?php
if(!isset($_SESSION['id_utilisateur']))
{
?>
<h2>Connectez-vous</h2>
<form method="post" action="<?php echo URL_SITE; ?>">
<p>Login<br /><input type="text" name="login" /></p>
<p>Mot de passe<br /><input type="password" name="password" /></p>
<p><input type="submit" class="button" value="Connexion" /></p>
</form>
<?php
}
else
{
?>
<form method="post" action="<?php echo URL_SITE; ?>">
<input type="hidden" name="action" value="deconnexion" />
<p><input type="submit" value="Se déconnecter" class="button" /></p>
</form>
<hr />
<div class="box-light" id="salle">
<p>Utilisateurs connectés</p>
<input type="hidden" name="attentelogin" id="attentelogin" value="<?php echo $_SESSION['id_utilisateur']; ?>" />
<ul id="utilisateur"></ul>
<p>Canal de discussion</p>
<div id="message"></div>
<input type="text" name="send" id="send" placeholder="Message..." />
<p><input type="button" id="send-button" class="button" value="Envoyer le message" /></p>
</div>
<script src="https://media.p3x.fr/js/jquery-3.2.1.min.js"></script>
<script>
// Envoi message
$('#send-button').click(function(){
if($('#send').val()!='')
{
$.ajax({
method: 'POST',
url: '<?php echo URL_SITE; ?>ajax/sendmsg.php',
data: { message: $('#send').val() }
});
$('#send').val('');
}
});
$('#send').keypress(function(event){
if(event.which==13)
{
$('#send-button').click();
}
});
// Affichage des messages
var timeout = 1000;
var showmsg = function() {
$.ajax({
method: 'POST',
url: '<?php echo URL_SITE; ?>ajax/showmsg.php'
})
.done(function(msg){
var tab = jQuery.parseJSON(msg);
tab.forEach(function(message){
if(!$('#message-' + message.id_message).length)
{
var pv = '';
var img = '<?php echo URL_MEDIA; ?>avatar/' + message.avatar + '.png';
if(message.avatar_url!=''){ img = message.avatar_url; }
if(message.prive!=0){ pv = '[Privé] '; }
$('<div></div>')
.attr('id', 'message-' + message.id_message)
.addClass('message')
.html('<img src="' + img + '" alt="' + message.login + '" width="25" height="25" /><strong>' + message.login + '</strong><div class="clear"></div>' + pv + message.message)
.appendTo('#message');
var div = $('#message');
var height = div[0].scrollHeight;
div.scrollTop(height);
}
});
});
setTimeout(showmsg, timeout);
};
showmsg();
// Affichage des utilisateurs
var mousex = 0;
var mousey = 0;
$(document).on("mousemove", function(event){
mousex = event.pageX;
mousey = event.pageY;
});
var timeouta = 5000;
var showuser = function() {
$.ajax({
method: 'POST',
url: '<?php echo URL_SITE; ?>ajax/showuser.php'
})
.done(function(msg){
var tab = jQuery.parseJSON(msg);
var tabusr = [];
tab.forEach(function(utilisateur){
tabusr.push('utilisateur-' + utilisateur.id_utilisateur);
var img = '<?php echo URL_MEDIA; ?>avatar/' + utilisateur.avatar + '.png';
if(utilisateur.avatar_url!=''){ img = utilisateur.avatar_url; }
if(!$('#utilisateur-' + utilisateur.id_utilisateur).length)
{
$('<li></li>')
.attr('id', 'utilisateur-' + utilisateur.id_utilisateur)
.addClass('utilisateur')
.click(function(){
$('.utilisateur-action').hide();
$('#utilisateur-action-' + utilisateur.id_utilisateur)
.css('top',mousey)
.css('left',mousex)
.show();
})
.appendTo('#utilisateur');
$('<div></div>')
.attr('id', 'utilisateur-usr-' + utilisateur.id_utilisateur)
.addClass('usr')
.appendTo('#utilisateur-' + utilisateur.id_utilisateur);
$('<img />')
.attr('src', img)
.css('width', '25px')
.css('height', '25px')
.appendTo('#utilisateur-usr-' + utilisateur.id_utilisateur);
$('<strong></strong>')
.html(utilisateur.login)
.appendTo('#utilisateur-usr-' + utilisateur.id_utilisateur);
$('<div></div>')
.addClass('clear')
.appendTo('#utilisateur-' + utilisateur.id_utilisateur);
if($('#attentelogin').val()!=utilisateur.id_utilisateur)
{
$('<div></div>')
.attr('id', 'utilisateur-action-' + utilisateur.id_utilisateur)
.addClass('utilisateur-action')
.hide()
.appendTo('#utilisateur-' + utilisateur.id_utilisateur);
$('<img />')
.attr('src', '<?php echo URL_MEDIA; ?>graphic/deconnexion.png')
.addClass('utilisateur-action-close')
.click(function(){
$('#utilisateur-action-' + utilisateur.id_utilisateur).hide();
return false;
})
.appendTo('#utilisateur-action-' + utilisateur.id_utilisateur);
$('<div></div>')
.attr('id', 'utilisateur-action-profil-' + utilisateur.id_utilisateur)
.html('<img src="<?php echo URL_MEDIA; ?>graphic/profil.png" /> Voir le profil')
.click(function(){
window.open('<?php echo URL_PROFIL; ?>' + utilisateur.login,'_blank');
$('#utilisateur-action-' + utilisateur.id_utilisateur).hide();
return false;
})
.addClass('utilisateur-action-profil')
.appendTo('#utilisateur-action-' + utilisateur.id_utilisateur);
$('<div></div>')
.attr('id', 'utilisateur-action-prive-' + utilisateur.id_utilisateur)
.html('<img src="<?php echo URL_MEDIA; ?>graphic/message.png" /> Message privé')
.click(function(){
var pvmsg = prompt("Votre message privé");
if(pvmsg!='')
{
$.ajax({
method: 'POST',
url: '<?php echo URL_SITE; ?>ajax/sendmsg.php',
data: { message: pvmsg, usr: utilisateur.id_utilisateur }
});
$('#utilisateur-action-' + utilisateur.id_utilisateur).hide();
return false;
}
})
.addClass('utilisateur-action-prive')
.appendTo('#utilisateur-action-' + utilisateur.id_utilisateur);
}
}
});
$('.utilisateur').each(function(){
var comp = '*' + tabusr.join('*') + '*';
if(!(comp.indexOf('*' + $(this).attr('id') + '*')>-1))
{
$(this).remove();
}
});
});
setTimeout(showuser, timeouta);
};
showuser();
</script>
<?php
}
?>
</div>
</body>
</html>
\ No newline at end of file
frontend/chat/init.php 0 → 100644
View file @ 808bc22a
<?php
header('Content-Type:text/html;charset=utf-8');
// BDD
define('DB_HOST', 'localhost');
define('DB_PORT', 8888);
define('DB_DATABASE', 'dbtest');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
// Infos site
define('URL_SITE', 'http://localhost:8888/IMT/CDAW/frontend/chat/'); //adresse du dossier avec le projet
define('URL_MEDIA', 'http://localhost:8888/IMT/CDAW/frontend/chat/images/'); //adresse du dossier images
define('URL_PROFIL', 'https://www.google.fr/?q=');
define('PATH_SITE', '/chemin/chat/');
// Connexion BDD
$db = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_DATABASE . ';charset=utf8', DB_USERNAME, DB_PASSWORD);
// Session
session_start();
?>
\ No newline at end of file
frontend/src/views/Game.vue
View file @ 808bc22a
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
<div class="row h-100"> <div class="row h-100">
<div id="chat" class="col-3 h-100" style="border: 1px solid black;"> <div id="chat" class="col-3 h-100" style="border: 1px solid black;">
<frameset class="w-100 h-100"> <frameset class="w-100 h-100">
<frame src="https://eden.imt-lille-douai.fr/~alexandre.trochon/chatserver/" /> <frame :src="frame" />
<!-- <frame src="http://localhost:8888/IMT/CDAW/frontend/chat" /> -->
</frameset> </frameset>
</div> </div>
<div class="col-9 h-100" style="border: 1px solid black;"> <div class="col-9 h-100" style="border: 1px solid black;">
...@@ -17,16 +18,15 @@ ...@@ -17,16 +18,15 @@
<script> <script>
import Navbar from '@/components/Navbar' import Navbar from '@/components/Navbar'
// import Input from '@/components/Input'
export default { export default {
name: 'Game', name: 'Game',
components: { components: {
Navbar Navbar
// Input
}, },
data() { data() {
return { return {
frame: "https://eden.imt-lille-douai.fr/~alexandre.trochon/chatserver?login=" + localStorage.login,
input: { type: 'text', id: 'message', placeholder: 'Ecrivez votre message' } input: { type: 'text', id: 'message', placeholder: 'Ecrivez votre message' }
} }
}, },
......
frontend/src/views/Rules.vue
View file @ 808bc22a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="body"> <div class="body">
<Navbar/> <Navbar/>
<div class="container d-flex justify-content-center"> <div class="container d-flex justify-content-center">
<h1>Les règles</h1> <img src="../assets/img/rules.png" class="img-fluid" alt="Responsive image" style="border: 1px solid black;" />
</div> </div>
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment