diff --git a/.gitignore b/.gitignore
index 62c8935..cbe38a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
-.idea/
\ No newline at end of file
+.idea/
+node_modules/
+package-lock.json
+package.json
\ No newline at end of file
diff --git a/Webservice/server.js b/Webservice/server.js
new file mode 100644
index 0000000..543b9cb
--- /dev/null
+++ b/Webservice/server.js
@@ -0,0 +1,47 @@
+let express = require('express');
+let app = express();
+let server = require('http').createServer(app);
+
+let io = require('socket.io')(server);
+
+let port = parseInt(process.env.PORT) || 5000;
+server.listen(port, function () {
+ console.info('Webserver running');
+ console.info('Port %d', port);
+});
+
+
+app.use(express.static(__dirname + '/../public'));
+
+
+io.on('connection', function (socket) {
+ let addedUser = false;
+
+ socket.on('add user', function (username) {
+ socket.username = username;
+ addedUser = true;
+
+ socket.emit('login');
+
+ socket.broadcast.emit('user joined', socket.username);
+
+ console.info("[JOINED ] " + socket.username);
+ });
+
+ socket.on('new message', function (data) {
+ socket.broadcast.emit('new message', {
+ username: socket.username,
+ message: data
+ });
+
+ console.info("[MESSAGE] " + socket.username + ": " + data);
+ });
+
+ socket.on('disconnect', function () {
+ if (addedUser) {
+ socket.broadcast.emit('user left', socket.username);
+ }
+
+ console.info("[LEFT ] " + socket.username);
+ });
+});
diff --git a/index.html b/index.html
deleted file mode 100644
index 3b86675..0000000
--- a/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
- Projektmanagement Game
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/public/css/components.css b/public/css/components.css
new file mode 100644
index 0000000..326a2c5
--- /dev/null
+++ b/public/css/components.css
@@ -0,0 +1,117 @@
+html {
+ width: 100%;
+ height: 100%;
+ font-family: Arial, sans-serif
+}
+
+body {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ 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;
+}
+
+.material-icon {
+ font-family: Material Icons, sans-serif !important;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ -webkit-font-feature-settings: "liga";
+ -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file
diff --git a/public/css/header.css b/public/css/header.css
new file mode 100644
index 0000000..c10b70f
--- /dev/null
+++ b/public/css/header.css
@@ -0,0 +1,18 @@
+header {
+ box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ -webkit-user-select: none;
+ background-color: #7d7d7d;
+ color: #ffffff;
+ height: 3em;
+ padding-top: 10px;
+}
+
+.title {
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2em;
+ vertical-align: central;
+}
\ No newline at end of file
diff --git a/static/css/index.css b/public/css/index.css
similarity index 100%
rename from static/css/index.css
rename to public/css/index.css
diff --git a/public/img/bunny.jpg b/public/img/bunny.jpg
new file mode 100644
index 0000000..9674fa0
Binary files /dev/null and b/public/img/bunny.jpg differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..d99cf03
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Projektmanagement Game
+
+
+
+
+
+
+
+
+
+
+ Projektmanagement Game
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/js/chat.js b/public/js/chat.js
new file mode 100644
index 0000000..436126c
--- /dev/null
+++ b/public/js/chat.js
@@ -0,0 +1,70 @@
+let socket;
+let username = prompt("Please enter your name");
+//let room_name = prompt("Please enter room name", "1234");
+let connected = false;
+
+window.addEventListener('load', function () {
+ socket = io();
+
+ socket.on('login', function (data) {
+ connected = true;
+ log("Welcome " + username + "!");
+ });
+
+ socket.on('new message', function (data) {
+ addChatMessage(data);
+ });
+
+ socket.on('user joined', function (data) {
+ log(data + ' joined');
+ });
+
+ socket.on('user left', function (data) {
+ log(data + ' left');
+ });
+
+ // Login
+ socket.emit('add user', username);
+});
+
+function sendMessage() {
+ let message = document.getElementById('message').value;
+
+ if (message && connected) {
+ document.getElementById('message').value = '';
+
+ addChatMessage({ username: username, message: message });
+
+ socket.emit('new message', message);
+ }
+}
+
+function log(message) {
+ let li = document.createElement('div');
+ li.classList.add('log');
+ li.innerText = message;
+
+ document.getElementById("messages").appendChild(li);
+}
+
+function addChatMessage(data) {
+ let user = document.createElement('span');
+ user.classList.add('username');
+ user.innerText = data.username;
+
+ let messageBody = document.createElement('span');
+ messageBody.classList.add('messageBody');
+ messageBody.innerText = data.message;
+
+ let messageDiv = document.createElement('div');
+ messageDiv.classList.add('message');
+ if(data.username === username) {
+ messageDiv.classList.add('me');
+ } else {
+ messageDiv.classList.add('others');
+ }
+ messageDiv.appendChild(user);
+ messageDiv.appendChild(messageBody);
+
+ document.getElementById('messages').append(messageDiv);
+}
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
new file mode 100644
index 0000000..6a175ac
--- /dev/null
+++ b/public/js/index.js
@@ -0,0 +1,20 @@
+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();
\ No newline at end of file
diff --git a/static/css/components.css b/static/css/components.css
deleted file mode 100644
index 8e5b26d..0000000
--- a/static/css/components.css
+++ /dev/null
@@ -1,20 +0,0 @@
-body {
- padding: 0;
- margin: 0;
-}
-
-.material-icon {
- font-family: Material Icons,sans-serif !important;
- font-weight: 400;
- font-style: normal;
- font-size: 24px;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-feature-settings: "liga";
- -webkit-font-smoothing: antialiased;
-}
\ No newline at end of file
diff --git a/static/css/header.css b/static/css/header.css
deleted file mode 100644
index db68018..0000000
--- a/static/css/header.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.app-header {
- box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
- overflow: hidden;
- -webkit-user-select: none;
- background-color: #7d7d7d;
- color: #ffffff;
- display: grid;
- grid-gap: 5%;
- grid-template-columns: 25% 40% 25%;
- height: auto;
- max-height: 100px;
- padding-top: 10px;
- padding-bottom: 10px;
-}
-
-.logo {
- grid-column: 1;
-}
-
-.title {
- grid-column: 2;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 2em;
-}
-
-.help {
- grid-column: 3;
- display: flex;
- justify-content: right;
- align-items: center;
- margin-right: 10px;
-}
\ No newline at end of file
diff --git a/static/js/index.js b/static/js/index.js
deleted file mode 100644
index e69de29..0000000