change design

Author: mfarukkoc

public/css/style.css

@@ -197,6 +197,18 @@ a {
 }
 
 /* Join Page */
+
+#share {
+ display: grid;
+ text-align: center;
+}
+
+#share a {
+ border-radius: 20px;
+ margin-bottom: 5px;
+ display: flex;
+}
+
 .join-container {
  max-width: 500px;
  margin: 80px auto;

public/join.html

@@ -35,6 +35,12 @@ <h1><i class="fas fa-random"></i>RiNGo</h1>
  <div class="chat-container">
  <header class="chat-header">
  <h1><i class="fas fa-random"></i> RiNGo</h1>
+ <div id="share">
+ <a class="btn" onclick="copy()">
+ <div id="link">url</div>
+ <i id="copy" class="fas fa-copy"></i> </a
+ >Share link to invite
+ </div>
  <a href="./" class="btn">Leave Room</a>
  </header>
  <main class="chat-main">
@@ -77,6 +83,6 @@ <h3><i class="fas fa-users"></i> Users</h3>
  crossorigin="anonymous"
  ></script>
  <script src="/socket.io/socket.io.js"></script>
- <script src="/js/test.js"></script>
+ <script src="/js/join.js"></script>
  </body>
 </html>

public/js/indexPage.js

@@ -3,10 +3,11 @@ const createRoomForm = document.getElementById('create-room-form');
 const socket = io();
 
 createRoomForm.addEventListener('submit', (e) => {
+ e.preventDefault();
  let userName = e.target.elements['username'].value.toString();
  let roomName = e.target.elements['room'].value.toString();
- sessionStorage.setItem("userName", userName);
- sessionStorage.setItem("autoJoin", true);
+ sessionStorage.setItem('userName', userName);
+ sessionStorage.setItem('autoJoin', true);
  socket.emit('createRoom', roomName);
 });
 

public/js/test.js renamed to public/js/join.js

@@ -19,6 +19,7 @@ usernameForm.addEventListener('submit', (e) => {
  location.pathname = '/';
  });
 
+ document.getElementById('link').innerHTML = location.href;
  //#region hide elements after succesfull submit
  for (var i = 0, len = elements.length; i < len; ++i) {
  elements[i].disabled = true;
@@ -147,3 +148,27 @@ const outputDice = (message) => {
  <div class="dice">Dice rolled with ${message.text}</div>`;
  document.querySelector('.chat-messages').appendChild(div);
 };
+
+function copy() {
+ element = document.getElementById('link');
+ var range, selection, worked;
+
+ if (document.body.createTextRange) {
+ range = document.body.createTextRange();
+ range.moveToElementText(element);
+ range.select();
+ } else if (window.getSelection) {
+ selection = window.getSelection();
+ range = document.createRange();
+ range.selectNodeContents(element);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }
+
+ try {
+ document.execCommand('copy');
+ alert('text copied');
+ } catch (err) {
+ alert('unable to copy text');
+ }
+}

server.js

@@ -30,7 +30,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 io.sockets.on('connection', (socket) => {
  socket.on('createRoom', (roomName) => {
  const room = createRoom(roomName, '');
- io.emit('roomCreated', room.id);
+ socket.emit('roomCreated', room.id);
  });
  socket.on('joinRoom', ({ username, roomId }) => {
  const user = userJoin(socket.id, username, roomId, 'Unknown');
@@ -60,65 +60,69 @@ io.sockets.on('connection', (socket) => {
  roomId: user.roomId,
  users: getRoomUsers(user.roomId),
  });
- });
 
- socket.on('random', () => {
- const user = getCurrentUser(socket.id);
- let result = getRandom(socket.id);
- let name = '';
- console.log('random emitted');
- console.log(result);
- if (result['succes'] == true) {
- name = result.lucky.username;
- io.to(result.lucky.roomId).emit(
- 'message',
- formatMessage(user.username + ' -> RiNGo', `${name} is the lucky one!`)
- );
+ socket.on('random', () => {
+ const user = getCurrentUser(socket.id);
+ let result = getRandom(socket.id);
+ let name = '';
+ console.log('random emitted');
+ console.log(result);
+ if (result['succes'] == true) {
+ name = result.lucky.username;
+ io.to(result.lucky.roomId).emit(
+ 'message',
+ formatMessage(
+ user.username + ' -> RiNGo',
+ `${name} is the lucky one!`
+ )
+ );
 
- console.log('aa');
- }
- io.emit('randomUser', { result, name });
- });
+  console.log('aa');
+  }
+  io.emit('randomUser', { result, name });
+  });
 
- socket.on('flipCoin', () => {
- const user = getCurrentUser(socket.id);
- const result = Math.random();
- io.to(user.roomId).emit(
- 'coinFlipResult',
- formatMessage(user.username + ' -> RiNGo', result)
- );
- });
+  socket.on('flipCoin', () => {
+  const user = getCurrentUser(socket.id);
+  const result = Math.random();
+  io.to(user.roomId).emit(
+  'coinFlipResult',
+  formatMessage(user.username + ' -> RiNGo', result)
+  );
+  });
 
- socket.on('rollDice', () => {
- const user = getCurrentUser(socket.id);
- let result = Math.floor(Math.random() * 6.2) + 1;
+  socket.on('rollDice', () => {
+  const user = getCurrentUser(socket.id);
+  let result = Math.floor(Math.random() * 6.2) + 1;
 
- io.to(user.roomId).emit(
- 'diceResult',
- formatMessage(user.username + ' -> RiNGo', result)
- );
- });
+  io.to(user.roomId).emit(
+  'diceResult',
+  formatMessage(user.username + ' -> RiNGo', result)
+  );
+  });
 
- // client disconnect
- socket.on('disconnect', () => {
- const user = userLeave(socket.id);
- if (user) {
- socket.broadcast
- .to(user.roomId)
- .emit(
- 'message',
- formatMessage(botName, `${user.username} has left the chat`)
- );
- io.to(user.roomId).emit('roomUsers', {
- room: user.roomId,
- users: getRoomUsers(user.room),
- });
- }
- });
+ // client disconnect
+ socket.on('disconnect', () => {
+ const user = userLeave(socket.id);
+ if (user) {
+ socket.broadcast
+ .to(user.roomId)
+ .emit(
+ 'message',
+ formatMessage(botName, `${user.username} has left the chat`)
+ );
+ io.to(user.roomId).emit('roomUsers', {
+ room: findRoom(user.roomId).name,
+ roomId: user.roomId,
+ users: getRoomUsers(user.roomId),
+ });
+ }
+ });
 
- socket.on('chatMessage', (msg) => {
- const user = getCurrentUser(socket.id);
- io.to(user.roomId).emit('message', formatMessage(user.username, msg));
+ socket.on('chatMessage', (msg) => {
+ const user = getCurrentUser(socket.id);
+ io.to(user.roomId).emit('message', formatMessage(user.username, msg));
+ });
  });
 });