DenisLovers/DenisSlider2000
11
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add backend and viewers count

Browse Source
This commit is contained in:
Quentin ANIERE
2022-04-07 19:09:47 +02:00
parent f51308f586
commit 79fafa466b
7 changed files with 737 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

24
backend/index.js Normal file
View File

@@ -0,0 +1,24 @@
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const io = require("socket.io")(server);
usersConnected = 0
io.on("connection", (client) => {
usersConnected++;
client.on("disconnect", () => {
usersConnected--;
io.sockets.emit("update-count", {value: usersConnected});
});
io.sockets.emit("update-count", {value: usersConnected});
});
server.listen(3000, () => {
console.log("Server started on port 3000");
});

10
backend/package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "backend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"express": "^4.17.3",
"socketio": "^1.0.0"
}
}

650
backend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

44
index.html
View File

@@ -7,6 +7,7 @@
<title>DenisSlider2000™</title> <title>DenisSlider2000™</title>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head> </head>
<body> <body>
<div id="title"> <div id="title">
@@ -15,31 +16,36 @@
<div id="mobile-title"> <div id="mobile-title">
<img src="./images/mobile-title.gif"> <img src="./images/mobile-title.gif">
</div> </div>
<div class="swiper"> <div id="swiper-container">
<div class="swiper-wrapper"> <div class="swiper">
<div class="swiper-slide"> <div class="swiper-wrapper">
<div class="photo-container"> <div class="swiper-slide">
<img src="./images/denis/denis_chemise.png"> <div class="photo-container">
</div> <img src="./images/denis/denis_chemise.png">
</div> </div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_chapeau.png">
</div> </div>
</div> <div class="swiper-slide">
<div class="swiper-slide"> <div class="photo-container">
<div class="photo-container"> <img src="./images/denis/denis_chapeau.png">
<img src="./images/denis/saint_denis.png"> </div>
</div> </div>
</div> <div class="swiper-slide">
<div class="swiper-slide"> <div class="photo-container">
<div class="photo-container"> <img src="./images/denis/saint_denis.png">
<img src="./images/denis/denis.png"> </div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis.png">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> <div id="counter-container">
<span>Nombre de fans connectés : <span id="value">x</span></span>
</div>
<script src="http://danby.aniere.fr:3000/socket.io/socket.io.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

8
script.js
View File

@@ -1,3 +1,11 @@
document.addEventListener('DOMContentLoaded', () => {
var socket = io("ws://danby.aniere.fr:3000");
socket.on("update-count", (data) => {
document.getElementById("value").innerText = data.value;
});
});
const swiper = new Swiper('.swiper', { const swiper = new Swiper('.swiper', {
direction: "horizontal", direction: "horizontal",
loop: true, loop: true,

19
style.css
View File

@@ -18,6 +18,25 @@ body {
display: none; display: none;
} }
#swiper-container {
width: 100%;
display: flex;
justify-content: center;
}
#counter-container {
display: flex;
margin-top: 5vh;
justify-content: center;
}
#counter-container > span {
color: white;
font-weight: bold;
font-size: large ;
font-family: sans-serif;
}
.swiper { .swiper {
width: 500px; width: 500px;
height: 400px; height: 400px;