DHBW/Projektmanagement-Game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Refactored and cleaned up

Browse Source
This commit is contained in:
Administrator 2021-05-26 19:34:31 +02:00
parent 05b85f2d4e
commit b911164db2
8 changed files with 159 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
public/css/chat.css Normal file
View File

@ -0,0 +1,100 @@
#chat {
display: flex;
flex-flow: column;
overflow: hidden;
border-left: #7d7d7d solid 2px;
height: 100%;
}
#messages_received {
flex: 1 1 90%;
display: flex;
flex-direction: column;
overflow: auto;
padding: 5px;
}
#message_add {
flex: 0 0 10%;
}
#message_add form {
height: 100%;
width: 100%;
}
#message_input {
height: calc(100% - 10px - 2em - 6px);
width: calc(100% - 10px);
}
#message_send {
height: 2em;
width: 100%;
}
.log_message {
list-style-type: none;
padding: 5px;
font-weight: bold;
color: #424242;
text-align: center;
}
.chat_message {
list-style-type: none;
margin: 5px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
background: #0672e6;
color: #fff;
position: relative;
}
.me {
margin-left: 2em;
}
.me:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 10px solid #0672e6;
border-right: 10px solid transparent;
border-top: 10px solid #0672e6;
border-bottom: 10px solid transparent;
right: -10px;
top: 0;
}
.others {
margin-right: 2em;
}
.others:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid #0672e6;
border-top: 10px solid #0672e6;
border-bottom: 10px solid transparent;
left: -10px;
top: 0;
}
.username {
font-weight: bold;
}
.messageBody {
}
.messageBody::before {
content: '\A';
white-space: pre;
}

84
public/css/components.css
View File

@ -12,92 +12,10 @@ body {
overflow: hidden; overflow: hidden;
} }
header {
height: 3em;
}
main { main {
display: grid; display: grid;
grid-template-columns: 80% 20%; grid-template-columns: 80% 20%;
height: calc(100% - 3em); height: calc(100% - 3em - 10px);
}
#game {
height: 100%;
grid-column-start: 1;
}
#chat {
border-left: #7d7d7d solid 2px;
height: 100%;
grid-column-start: 2;
}
#messages {
height: calc(100% - 5em - 3em);
overflow-y: scroll;
padding: 5px;
}
.log {
list-style-type: none;
padding: 5px;
font-weight: bold;
color: #424242;
text-align: center;
}
.message {
list-style-type: none;
margin: 5px;
border-radius: 5px;
background: #0079a5;
color: #fff;
padding: 5px 5px 5px 15px;
position: relative;
}
.me:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 15px solid #0079a5;
border-right: 15px solid transparent;
border-top: 15px solid #0079a5;
border-bottom: 15px solid transparent;
right: -10px;
top: 0;
}
.others:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #0079a5;
border-top: 15px solid #0079a5;
border-bottom: 15px solid transparent;
left: -10px;
top: 0;
}
.username {
font-weight: bold;
}
.messageBody {
}
.messageBody::before {
content: '\A';
white-space: pre;
}
#message_form {
height: 5em;
} }
.material-icon { .material-icon {

4
public/css/game.css Normal file
View File

@ -0,0 +1,4 @@
#game {
height: 100%;
grid-column-start: 1;
}

BIN
public/img/bunny.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 185 KiB

26
public/index.html
View File

@ -4,12 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Projektmanagement Game</title> <title>Projektmanagement Game</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/components.css"> <link href="css/components.css" rel="stylesheet">
<link rel="stylesheet" href="css/header.css"> <link href="css/header.css" rel="stylesheet">
<link href="css/chat.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css"> <link href="css/index.css" rel="stylesheet">
</head> </head>
<body> <body>
<header> <header>
@ -18,20 +19,25 @@
<main> <main>
<div id="game"></div> <div id="game"></div>
<div id="chat"> <div id="chat">
<div id="messages"></div> <div id="messages_received"></div>
<form id="message_form" onsubmit="sendMessage(); return false;"> <div id="message_add">
<label for="message"></label> <form onsubmit="sendMessage(); return false;">
<input id="message" name="message" placeholder="Type here..."/> <label for="message_input"></label>
<button type="submit" id="send">Send</button> <textarea id="message_input" name="message" placeholder="Type here..."></textarea>
<button id="message_send" type="submit">Send</button>
</form> </form>
</div> </div>
</div>
</main> </main>
<footer> <footer>
</footer> </footer>
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script><script src="js/chat.js"></script> <script crossorigin="anonymous"
integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh"
src="https://cdn.socket.io/3.1.3/socket.io.min.js"></script>
<script src="js/chat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script src="js/index.js"></script> <script src="js/index.js"></script>
</body> </body>

24
public/js/chat.js
View File

@ -8,7 +8,7 @@ window.addEventListener('load', function () {
socket.on('login', function (data) { socket.on('login', function (data) {
connected = true; connected = true;
log("Welcome " + username + "!"); addLogMessage("Welcome " + username + "!");
}); });
socket.on('new message', function (data) { socket.on('new message', function (data) {
@ -16,11 +16,11 @@ window.addEventListener('load', function () {
}); });
socket.on('user joined', function (data) { socket.on('user joined', function (data) {
log(data + ' joined'); addLogMessage(data + ' joined');
}); });
socket.on('user left', function (data) { socket.on('user left', function (data) {
log(data + ' left'); addLogMessage(data + ' left');
}); });
// Login // Login
@ -28,23 +28,23 @@ window.addEventListener('load', function () {
}); });
function sendMessage() { function sendMessage() {
let message = document.getElementById('message').value; let message = document.getElementById('message_input').value;
if (message && connected) { if (message && connected) {
document.getElementById('message').value = ''; document.getElementById('message_input').value = '';
addChatMessage({ username: username, message: message }); addChatMessage({username: username, message: message});
socket.emit('new message', message); socket.emit('new message', message);
} }
} }
function log(message) { function addLogMessage(message) {
let li = document.createElement('div'); let li = document.createElement('div');
li.classList.add('log'); li.classList.add('log_message');
li.innerText = message; li.innerText = message;
document.getElementById("messages").appendChild(li); document.getElementById("messages_received").appendChild(li);
} }
function addChatMessage(data) { function addChatMessage(data) {
@ -57,8 +57,8 @@ function addChatMessage(data) {
messageBody.innerText = data.message; messageBody.innerText = data.message;
let messageDiv = document.createElement('div'); let messageDiv = document.createElement('div');
messageDiv.classList.add('message'); messageDiv.classList.add('chat_message');
if(data.username === username) { if (data.username === username) {
messageDiv.classList.add('me'); messageDiv.classList.add('me');
} else { } else {
messageDiv.classList.add('others'); messageDiv.classList.add('others');
@ -66,5 +66,5 @@ function addChatMessage(data) {
messageDiv.appendChild(user); messageDiv.appendChild(user);
messageDiv.appendChild(messageBody); messageDiv.appendChild(messageBody);
document.getElementById('messages').append(messageDiv); document.getElementById('messages_received').append(messageDiv);
} }

22
public/js/game.js Normal file
View File

@ -0,0 +1,22 @@
const app = new PIXI.Application({
autoResize: true,
resolution: devicePixelRatio,
backgroundColor: 0x0073db
});
document.getElementById('game').appendChild(app.view);
// -------------------------------------- code --------------------------------------
// ------------------------------------ end code ------------------------------------
// Resize (Do Not modify)
window.addEventListener('resize', resize);
function resize() {
let game = document.getElementById('game');
app.renderer.resize(game.offsetWidth, game.offsetHeight);
}
resize();

22
public/js/index.js
View File

@ -1,20 +1,4 @@
const app = new PIXI.Application({ window.addEventListener('beforeunload', function (e) {
autoResize: true, // Prevent user from exiting page
resolution: devicePixelRatio, e.preventDefault();
backgroundColor: 0x0073db
}); });
document.getElementById('game').appendChild(app.view);
// -------------------------------------- code --------------------------------------
// ------------------------------------ end code ------------------------------------
// Resize (Do Not modify)
window.addEventListener('resize', resize);
function resize() {
let game = document.getElementById('game');
app.renderer.resize(game.offsetWidth, game.offsetHeight);
}
resize();