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;
}
header {
height: 3em;
}
main {
display: grid;
grid-template-columns: 80% 20%;
height: calc(100% - 3em);
}
#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;
height: calc(100% - 3em - 10px);
}
.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">
<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 rel="stylesheet" href="css/header.css">
<link href="css/components.css" rel="stylesheet">
<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>
<body>
<header>
@ -18,20 +19,25 @@
<main>
<div id="game"></div>
<div id="chat">
<div id="messages"></div>
<div id="messages_received"></div>
<form id="message_form" onsubmit="sendMessage(); return false;">
<label for="message"></label>
<input id="message" name="message" placeholder="Type here..."/>
<button type="submit" id="send">Send</button>
<div id="message_add">
<form onsubmit="sendMessage(); return false;">
<label for="message_input"></label>
<textarea id="message_input" name="message" placeholder="Type here..."></textarea>
<button id="message_send" type="submit">Send</button>
</form>
</div>
</div>
</main>
<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="js/index.js"></script>
</body>

20
public/js/chat.js
View File

@ -8,7 +8,7 @@ window.addEventListener('load', function () {
socket.on('login', function (data) {
connected = true;
log("Welcome " + username + "!");
addLogMessage("Welcome " + username + "!");
});
socket.on('new message', function (data) {
@ -16,11 +16,11 @@ window.addEventListener('load', function () {
});
socket.on('user joined', function (data) {
log(data + ' joined');
addLogMessage(data + ' joined');
});
socket.on('user left', function (data) {
log(data + ' left');
addLogMessage(data + ' left');
});
// Login
@ -28,10 +28,10 @@ window.addEventListener('load', function () {
});
function sendMessage() {
let message = document.getElementById('message').value;
let message = document.getElementById('message_input').value;
if (message && connected) {
document.getElementById('message').value = '';
document.getElementById('message_input').value = '';
addChatMessage({username: username, message: message});
@ -39,12 +39,12 @@ function sendMessage() {
}
}
function log(message) {
function addLogMessage(message) {
let li = document.createElement('div');
li.classList.add('log');
li.classList.add('log_message');
li.innerText = message;
document.getElementById("messages").appendChild(li);
document.getElementById("messages_received").appendChild(li);
}
function addChatMessage(data) {
@ -57,7 +57,7 @@ function addChatMessage(data) {
messageBody.innerText = data.message;
let messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add('chat_message');
if (data.username === username) {
messageDiv.classList.add('me');
} else {
@ -66,5 +66,5 @@ function addChatMessage(data) {
messageDiv.appendChild(user);
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({
autoResize: true,
resolution: devicePixelRatio,
backgroundColor: 0x0073db
window.addEventListener('beforeunload', function (e) {
// Prevent user from exiting page
e.preventDefault();
});
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();