Merge pull request #12 from redmoe/master

Fixed eslint, added readmes, cleaned up chat log examples
jbakse · Jun 12, 2020 · 122ba31 · 122ba31
2 parents ff3ea59 + 329bf86
commit 122ba31
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 165 deletions.
diff --git a/public/examples/chat_log/README.md b/public/examples/chat_log/README.md
@@ -0,0 +1,8 @@
+# Chat Log
+
+This example creates a shared message log between players using p5.js.
+
+- **type** in the text field.
+- **click** the SEND button to send a message to everyone in the room.
+
+> Open this example in two browser windows at once!
diff --git a/public/examples/chat_log/index.html b/public/examples/chat_log/index.html
@@ -9,7 +9,7 @@
       button {
         margin-top: 1em;
       }
-      #chatBox {
+      #chatLog {
         background-color: Snow;
         overflow: auto;
         white-space: pre;
@@ -18,7 +18,7 @@
     </style>
   </head>
   <body>
-    <div id="chatBox"></div>
+    <div id="chatLog"></div>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"
       integrity="sha256-Pg1di+fBF53Rbh9oZR/FeD1xsFzTLC963lcac1D0ias="

diff --git a/public/examples/chat_log/index.js b/public/examples/chat_log/index.js
@@ -1,11 +1,12 @@
-// https://opengameart.org/content/a-platformer-in-the-forest
-
-/* eslint-disable no-unused-vars */
 /* global connectToSharedRoom getSharedData */
 
-let shared;
-let chatHistory;
-let yourName;
+let chatHistory,
+  userName,
+  shared,
+  chatLog,
+  messageInput,
+  sendButton,
+  clearButton;
 
 function preload() {
   partyConnect(
@@ -14,25 +15,21 @@ function preload() {
     "main"
   );
   shared = partyLoadShared("globals");
-  host = partyLoadShared("host");
 }
 
 function setup() {
   let canvas=createCanvas(400, 400);
-  chatBox=document.getElementById('chatBox');
-  chatBox.style.height=(height - 60)+"px";
-  chatBox.style.width=width+"px";
+  chatLog=document.getElementById('chatLog');
+  chatLog.style.height=(height - 60)+"px";
+  chatLog.style.width=width+"px";
 
   //textbox that contains writing message
   messageInput = createInput();
   messageInput.size(width-50,20);
   messageInput.position(20, height-10);
 
-  //name of the user running this instance
-  yourName=nameGenerator();
-
   //button for sending messsages
-  sendButton = createButton('send');
+  sendButton = createButton('SEND');
   sendButton.position(messageInput.x + messageInput.width, messageInput.y-12);
   sendButton.size(AUTO,24);
   sendButton.mousePressed(sendMessageToLog);
@@ -42,30 +39,31 @@ function setup() {
     }
   });
 
+  //name of the user running this instance
+  userName=nameGenerator();
   if (!shared.log) { 
-    shared.log='Weclome to ChatBox, '+yourName+'!';
+    shared.log=shared.log+'\n'+userName+' has entered the chat';
   }
   else {
-    shared.log=shared.log+'\n'+yourName+' has entered the chat';
+    shared.log='Weclome to chatLog, '+userName+'!';
   }
-
-  createButton("clear").mousePressed(() => {
-    shared.log=yourName+' has cleared the log. Blame them!';
-  });
-
 }
 
 function draw() {
-  if (!shared) return;
   if (shared.log!=chatHistory) {
-    chatBox.innerHTML=shared.log;
-    chatBox.scrollTop=chatBox.scrollHeight;
+    chatLog.innerHTML=shared.log;
+    chatLog.scrollTop=chatLog.scrollHeight;
     chatHistory=shared.log;
   }
+  if (partyIsHost() && !clearButton) {
+    clearButton=createButton("clear").mousePressed(() => {
+      shared.log=userName+' has cleared the log. Blame them!';
+    });
+  }
 }
 
 function sendMessageToLog() {
-  shared.log=chatBox.innerHTML+'\n'+yourName+': “'+messageInput.value()+'”';
+  shared.log=chatLog.innerHTML+'\n'+userName+': “'+messageInput.value()+'”';
   messageInput.value('');
 }
 
@@ -74,52 +72,5 @@ function nameGenerator() {
 }
 
 let animalNames=[
-  "Cat",
-  "Moose",
-  "Zebra",
-  "Mongoose",
-  "Goose",
-  "Rabbit",
-  "Lion",
-  "Tiger",
-  "Horse",
-  "Pig",
-  "Human",
-  "Fish",
-  "Ladybug",
-  "Dog",
-  "Rhino",
-  "Python",
-  "Snake",
-  "Bear",
-  "Deer",
-  "Antelope",
-  "Elephant",
-  "Skunk",
-  "Capybara",
-  "Liger",
-  "Donkey",
-  "Camel",
-  "Giraffe",
-  "Walrus",
-  "Goat",
-  "Rooster",
-  "Monkey",
-  "Ape",
-  "Gorilla",
-  "Rat",
-  "Ox",
-  "Cow",
-  "Chicken",
-  "Eagle",
-  "Parrot",
-  "Wolf",
-  "Sheep",
-  "Anteater",
-  "Mouse",
-  "Spider",
-  "Owl",
-  "Carp",
-  "Salmon",
-  "Buffalo",
+  "Cat","Moose","Zebra","Mongoose","Goose","Rabbit","Lion","Tiger","Horse","Pig","Human","Fish","Ladybug","Dog","Rhino","Python","Snake","Bear","Deer","Antelope","Elephant","Skunk","Capybara","Liger","Donkey","Camel","Giraffe","Walrus","Goat","Rooster","Monkey","Ape","Gorilla","Rat","Ox","Cow","Chicken","Eagle","Parrot","Wolf","Sheep","Anteater","Mouse","Spider","Owl","Carp","Salmon","Buffalo",
 ]
diff --git a/public/examples/chat_log_no_p5/README.md b/public/examples/chat_log_no_p5/README.md
@@ -0,0 +1,8 @@
+# Chat Log
+
+This example creates a shared message log between players, without using p5.js.
+
+- **type** in the text field.
+- **click** the SEND button to send a message to everyone in the room.
+
+> Open this example in two browser windows at once!
diff --git a/public/examples/chat_log_no_p5/index.js b/public/examples/chat_log_no_p5/index.js
@@ -1,35 +1,36 @@
-// https://opengameart.org/content/a-platformer-in-the-forest
-
-/* eslint-disable no-unused-vars */
 /* global connectToSharedRoom getSharedData */
 
-let chatHistory;
-let yourName;
-let shared;
+let chatHistory,
+  userName,
+  shared,
+  chatLog,
+  messageInput,
+  sendButton,
+  clearButton;
 
 async function init() {
-  console.log("Create Connection Manager");
+  //create a new client on the backend server
   const client = new party.Client("wss://deepstream-server-1.herokuapp.com");
   await client.whenReady();
-  console.log("Connection Ready");
 
-  console.log("Create Room");
+  //create a room using the parameters of the project name and room name
   const room = new party.Room(client, "chat_log_nop5", "main");
   await room.whenReady();
-  console.log("Room Ready");
-
-  console.log("Join Room");
+
+	//join the room and remove any clients who are no longer present
   room.join();
   room.removeDisconnectedClients();
 
-  console.log("Create Record");
+	//create a record that will be used for transporting data between users
   const record = new party.Record(client, "chat_log_nop5-main/test");
   await record.whenReady();
-  console.log("Record Ready");
+
+	//create the global vaiable for accessing shared data
+  shared = record.getShared();
 
-  // clean up on exit
+  //clean up on exit
   window.addEventListener("beforeunload", () => {
-    shared.log=shared.log+'\n'+yourName+' has left the chat';
+    shared.log=shared.log+'\n'+userName+' has left the chat';
     room.leave();
     client.close();
   });
@@ -41,27 +42,17 @@ async function init() {
 }
 init();
 
-
 function setup() {
-  let height=400;
-  let width=400;
-
-  chatBox=document.createElement('DIV');
-  chatBox.style.cssText="background-color: Snow; overflow: auto; white-space: pre; padding: 20px;"
-  chatBox.id="chatBox";
-  chatBox.style.height=(height - 60)+"px";
-  chatBox.style.width=width+"px";
-  document.body.appendChild(chatBox);  
+  chatLog=document.createElement('DIV');
+  chatLog.style.cssText="background-color: Snow; overflow: auto; white-space: pre; padding: 20px; height:400px; width:400px"
+  document.body.appendChild(chatLog);  
 
   //textbox that contains writing message
   messageInput = document.createElement("INPUT");
-  messageInput.style.width=(width-50)+"px";
+  messageInput.style.width="330px";
 
   document.body.appendChild(messageInput);  
 
-  //name of the user running this instance
-  yourName=nameGenerator();
-
   //button for sending messsages
   sendButton = document.createElement("BUTTON");
   sendButton.innerHTML="SEND";
@@ -74,31 +65,34 @@ function setup() {
   });
   document.body.appendChild(sendButton);
 
-  if (!shared.log) { 
-    shared.log='Weclome to ChatBox, '+yourName+'!';
-  }
-  else {
-    shared.log=shared.log+'\n'+yourName+' has entered the chat';
-  }
   clearButton=document.createElement("BUTTON");
   clearButton.innerHTML="Clear";
   clearButton.onclick=function() {
-    shared.log=yourName+' has cleared the log. Blame them!';
+    shared.log=userName+' has cleared the log. Blame them!';
   };
   document.body.appendChild(clearButton);
+
+  //random name of the user running this instance
+  userName=nameGenerator();
+
+  if (shared.log) { 
+    shared.log=shared.log+'\n'+userName+' has entered the chat';
+  }
+  else {
+    shared.log='Weclome to chatLog, '+userName+'!';
+  }
 }
 
 function update() {
-  if (!shared) return;
   if (shared.log!=chatHistory) {
-    chatBox.innerHTML=shared.log;
-    chatBox.scrollTop=chatBox.scrollHeight;
+    chatLog.innerHTML=shared.log;
+    chatLog.scrollTop=chatLog.scrollHeight;
     chatHistory=shared.log;
   }
 }
 
-function sendMessageToLog() {
-  shared.log=chatBox.innerHTML+'\n'+yourName+': “'+messageInput.value+'”';
+function sendMessageToLog() { 
+  shared.log=chatLog.innerHTML+'\n'+userName+': “'+messageInput.value+'”';
   messageInput.value='';
 }
 
@@ -111,52 +105,5 @@ function random(array) {
 }
 
 let animalNames=[
-  "Cat",
-  "Moose",
-  "Zebra",
-  "Mongoose",
-  "Goose",
-  "Rabbit",
-  "Lion",
-  "Tiger",
-  "Horse",
-  "Pig",
-  "Human",
-  "Fish",
-  "Ladybug",
-  "Dog",
-  "Rhino",
-  "Python",
-  "Snake",
-  "Bear",
-  "Deer",
-  "Antelope",
-  "Elephant",
-  "Skunk",
-  "Capybara",
-  "Liger",
-  "Donkey",
-  "Camel",
-  "Giraffe",
-  "Walrus",
-  "Goat",
-  "Rooster",
-  "Monkey",
-  "Ape",
-  "Gorilla",
-  "Rat",
-  "Ox",
-  "Cow",
-  "Chicken",
-  "Eagle",
-  "Parrot",
-  "Wolf",
-  "Sheep",
-  "Anteater",
-  "Mouse",
-  "Spider",
-  "Owl",
-  "Carp",
-  "Salmon",
-  "Buffalo",
+  "Cat","Moose","Zebra","Mongoose","Goose","Rabbit","Lion","Tiger","Horse","Pig","Human","Fish","Ladybug","Dog","Rhino","Python","Snake","Bear","Deer","Antelope","Elephant","Skunk","Capybara","Liger","Donkey","Camel","Giraffe","Walrus","Goat","Rooster","Monkey","Ape","Gorilla","Rat","Ox","Cow","Chicken","Eagle","Parrot","Wolf","Sheep","Anteater","Mouse","Spider","Owl","Carp","Salmon","Buffalo",
 ]