Commit 22f5983e authored by Kannan V M's avatar Kannan V M
Browse files

Split and arrange code for better readability

parent a5f933f8
......@@ -15,20 +15,20 @@ server.listen(port, () => {
});
//assign static path to public folder
app.use(express.static(path.join(__dirname, '/')));
app.use(express.static(path.join(__dirname, '/public/')));
app.get('/mod', (req, res) => {
res.sendFile(__dirname + '/mod.html');
app.get('/mod_en', (req, res) => {
res.sendFile(__dirname + '/public/mod.html');
});
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
const user = io.of('/');
const mod = io.of('/mod');
const user_en = io.of('/user_en');
const mod_en = io.of('/mod_en');
var leafids = [];
const leafids = [];
for (let i=7; i<332; i++) {
leafID = "path" + i.toString();
i += 3;
......@@ -39,11 +39,12 @@ var leavesdata = {}; //object of structure {socketid1: {leaftext:"text",leafid:"
var leafno = 0;
var socketids = [];
user.on('connection', (socket) => {
user_en.on('connection', (socket) => {
let id = socket.id;
socket.emit('leaves data', leavesdata);
socket.on('leaf text', (leafdata) => {
console.log(leafdata);
if(!socketids.includes(id)) { //checks if socketid is already assigned with leafid
socketids.push(id);
leafdata["leafid"] = leafids[leafno]; //if not assign leafid
......@@ -53,8 +54,10 @@ user.on('connection', (socket) => {
leavesdata[id]["leaftext"] = leafdata["leaftext"]; //if yes update the message
leafdata = leavesdata[id];
};
io.emit('leaf data', leafdata);
io.of('mod').emit('leaves data', leavesdata);
console.log(leafdata);
user_en.emit('leaf data', leafdata);
mod_en.emit('leaves data', leavesdata);
console.log(leavesdata);
fs.writeFileSync(filepath, JSON.stringify(leavesdata), function(err) {
if(err) return console.error(err);
......@@ -62,10 +65,11 @@ user.on('connection', (socket) => {
});
});
mod.on('connection', (socket) => {
mod_en.on('connection', (socket) => {
io.of('mod').emit('leaves data', leavesdata);
socket.on('message delete', id => {
io.emit('delete text', leavesdata[id]["leafid"]);
console.log(leavesdata);
mod_en.emit('delete text', leavesdata[id]["leafid"]);
delete leavesdata[id];
const index = socketids.indexOf(id);
if (index > -1) {
......
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<ul id="listid">
</ul>
<br/>
<br/>
<br/>
<br/>
<button onclick="savenExit()">Save and Reset</button>
<script src="socket.io.js"></script>
<script>
const mod = io.connect('/mod');
mod.on('leaves data', (leavesdata) => {
var text = {};
var x;
document.getElementById("listid").innerHTML = '';
for (x in leavesdata) {
document.getElementById("listid").innerHTML += '<li>'+leavesdata[x]["leaftext"]+'<button onclick="contentRemove('+"'"+x+"'"+')">Remove</button></li>';
};
});
function contentRemove(socketid){
mod.emit('message delete', socketid);
};
function savenExit(){
var d = new Date();
var filename = d.getTime();
mod.emit('save exit', filename);
}
</script>
</body>
</html>
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knowledge Tree - Free Software Camp</title>
<style>
body {
margin: 0;
background: #3c3c3c;
}
svg {
height: 80vh;
margin-top: 5vh;
}
svg path.leaf-inactive {
fill: rgba(145, 158, 94, 0.2);
-webkit-transform: scale(0.7);
-webkit-transform-origin: 50% 50%;
transform: scale(0.7);
transform-origin: 50% 50%;
transform-box: fill-box;
}
svg path.leaf-active {
animation: shake-and-grow 3s cubic-bezier(.36, .07, .19, .97) both;
fill: rgba(145, 158, 94);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
cursor: pointer;
}
@keyframes shake-and-grow {
0% {
transform: scale(0.7);
}
2%,
18% {
transform: translate3d(-1px, 0, 0) scale(0.7);
}
4%,
16% {
transform: translate3d(2px, 0, 0) scale(0.7);
}
6%,
10%,
14% {
transform: translate3d(-2px, 0, 0) scale(0.7);
}
8%,
12% {
transform: translate3d(1px, 0, 0) scale(0.7);
}
18% {
transform: sclae(0.8);
}
100% {
transform: scale(1);
}
}
svg path.leaf:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0) scale(0.7);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0) scale(0.7);
}
20%,
80% {
transform: translate3d(2px, 0, 0) scale(0.7);
}
30%,
50%,
70% {
transform: translate3d(-2px, 0, 0) scale(0.7);
}
40%,
60% {
transform: translate3d(1px, 0, 0) scale(0.7);
}
}
input[type="submit"], button {
border: none;
border-radius: 5px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#knowledge-form {
text-align: center;
}
#knowledge-input, #knowledge-submit, #knowledge-edit {
margin: 10px auto;
}
#knowledge-input {
border: none;
border-radius: 5px;
width: 420px;
padding: 10px;
}
#knowledge-submit {
background: #008CBA;
font-size: 14px;
color: white;
}
#knowledge-edit {
background: #e5721f;
display: none;
}
#knowledge {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 57vw;
min-height: 35vw;
margin: 0 auto;
transform: translate(-50%, -60%);
z-index: -1;
}
#knowledge p {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
font-size: 4vw;
text-align: center;
text-shadow: 3px 3px 3px #AAAAAA;
text-transform: capitalize;
transform: translate(-50%, -50%);
}
#close-button {
display: none;
width: 120px;
margin: -10vh auto;
text-align: center;
}
#close-button button {
background: #f44336;
}
@media only screen and (max-width: 480px) {
#knowledge-form {
margin-top: -15vh;
}
#knowledge-input {
width: 280px;
}
#close-button {
margin-top: -15vh;
}
</style>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
<script src="user.js"></script>
</head>
<body>
......@@ -516,110 +336,5 @@
<div id="close-button">
<button onclick="closeLeaf()">Close</button>
</div>
<script src="socket.io.js"></script>
<script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-or-later
var socket = io();
socket.on('leaves data', (leavesdata) => {
let i = 0;
for(leaf in leavesdata) {
leafdata = leavesdata[leaf];
growLeaves(i, leafdata);
i++;
}
function growLeaves(i, leafdata) {
setTimeout(function() {
growLeaf(leafdata);
}, 300 * i);
}
});
function addKnowledgeItem() {
leaftext = document.getElementById('knowledge-input').value;
var leafdata = { "leaftext": leaftext }
socket.emit("leaf text", leafdata);
document.getElementById("knowledge-input").style.display = "none";
document.getElementById("knowledge-submit").style.display = "none";
document.getElementById("knowledge-edit").style.display = "block";
}
function editKnowledgeItem() {
document.getElementById("knowledge-input").style.display = "block";
document.getElementById("knowledge-submit").style.display = "block";
document.getElementById("knowledge-edit").style.display = "none";
}
socket.on('leaf data', (leafdata) => {
growLeaf(leafdata);
});
function growLeaf(leafdata) {
leafID = leafdata.leafid;
activeLeaf = document.getElementById(leafID);
activeLeaf.classList.add("leaf-active");
activeLeaf.classList.remove("leaf-inactive");
activeLeaf.addEventListener("click", popupLeaf, false);
let knowledgeItem = document.createElement("p");
knowledgeItem.setAttribute("class", "knowledge-item");
let knowledgeId = activeLeaf.id.replace("path", "knowledge");
leafData = document.getElementById(knowledgeId);
if(leafData) {
leafData.innerHTML = leafdata.leaftext;
} else {
knowledgeItem.setAttribute("id", knowledgeId);
knowledgeItem.innerHTML = leafdata.leaftext;
document.getElementById("knowledge").appendChild(knowledgeItem);
}
}
function popupLeaf() {
let knowledgeId = this.id.replace("path", "knowledge");
document.getElementById(knowledgeId).style.display = "block";
document.getElementById("knowledge").style.display = "block";
document.getElementById("knowledge").style.backgroundImage = "url('leaf.svg')";
document.getElementById("knowledge").style.backgroundRepeat = "no-repeat";
document.getElementById("knowledge").style.backgroundSize = "cover";
document.getElementById("tree").style.visibility = "hidden";
document.getElementById("knowledge-form").style.visibility = "hidden";
document.getElementById("close-button").style.display = "block";
}
function closeLeaf() {
document.getElementById("close-button").style.display = "none";
document.getElementById("knowledge").style.display = "none";
let knowledgeItems = document.getElementById("knowledge").children;
for (let i=0; i<knowledgeItems.length; i++) {
knowledgeItems[i].style.display = "none";
}
document.getElementById("tree").style.visibility = "visible";
document.getElementById("knowledge-form").style.visibility = "visible";
}
window.onload = function() {
let activeLeaves = document.getElementsByClassName("leaf-active");
for(let i=0; i<activeLeaves.length; i++) {
activeLeaves[i].addEventListener('click', popupLeaf, false);
}
}
socket.on('delete text', (leafid) => {
activeLeaf = document.getElementById(leafid);
activeLeaf.classList.remove("leaf-active");
activeLeaf.classList.add("leaf-inactive");
activeLeaf.removeEventListener("click", popupLeaf, false);
let knowledgeId = leafid.replace("path", "knowledge");
document.getElementById(knowledgeId).innerHTML = "";
});
// @license-end
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
<script src="mod.js"></script>
</head>
<body>
<ul id="listid">
</ul>
<br/>
<br/>
<br/>
<br/>
<button onclick="savenExit()">Save and Reset</button>
</body>
</html>
const mod = io.connect('/mod_en');
mod.on('leaves data', (leavesdata) => {
var text = {};
var x;
document.getElementById("listid").innerHTML = '';
for (x in leavesdata) {
document.getElementById("listid").innerHTML += '<li>'+leavesdata[x]["leaftext"]+'<button onclick="contentRemove('+"'"+x+"'"+')">Remove</button></li>';
};
});
function contentRemove(socketid){
mod.emit('message delete', socketid);
};
function savenExit(){
var d = new Date();
var filename = d.getTime();
mod.emit('save exit', filename);
}
body {
margin: 0;
background: #3c3c3c;
}
svg {
height: 80vh;
margin-top: 5vh;
}
svg path.leaf-inactive {
fill: rgba(145, 158, 94, 0.2);
-webkit-transform: scale(0.7);
-webkit-transform-origin: 50% 50%;
transform: scale(0.7);
transform-origin: 50% 50%;
transform-box: fill-box;
}
svg path.leaf-active {
animation: shake-and-grow 3s cubic-bezier(.36, .07, .19, .97) both;
fill: rgba(145, 158, 94);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
cursor: pointer;
}
@keyframes shake-and-grow {
0% {
transform: scale(0.7);
}
2%,
18% {
transform: translate3d(-1px, 0, 0) scale(0.7);
}
4%,
16% {
transform: translate3d(2px, 0, 0) scale(0.7);
}
6%,
10%,
14% {
transform: translate3d(-2px, 0, 0) scale(0.7);
}
8%,
12% {
transform: translate3d(1px, 0, 0) scale(0.7);
}
18% {
transform: sclae(0.8);
}
100% {
transform: scale(1);
}
}
svg path.leaf:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0) scale(0.7);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0) scale(0.7);
}
20%,
80% {
transform: translate3d(2px, 0, 0) scale(0.7);
}
30%,
50%,
70% {
transform: translate3d(-2px, 0, 0) scale(0.7);
}
40%,
60% {
transform: translate3d(1px, 0, 0) scale(0.7);
}
}
input[type="submit"], button {
border: none;
border-radius: 5px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#knowledge-form {
text-align: center;
}
#knowledge-input, #knowledge-submit, #knowledge-edit {
margin: 10px auto;
}
#knowledge-input {
border: none;
border-radius: 5px;
width: 420px;
padding: 10px;
}
#knowledge-submit {
background: #008CBA;
font-size: 14px;
color: white;
}
#knowledge-edit {
background: #e5721f;
display: none;
}
#knowledge {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 57vw;
min-height: 35vw;
margin: 0 auto;
transform: translate(-50%, -60%);
z-index: -1;
}
#knowledge p {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
font-size: 4vw;
text-align: center;
text-shadow: 3px 3px 3px #AAAAAA;
text-transform: capitalize;
transform: translate(-50%, -50%);
}
#close-button {
display: none;
width: 120px;
margin: -10vh auto;
text-align: center;