Merge pull request #12 from laaledesiempre/main

[BUGFIX AND DEV] Added linting to package json, fixed colors and tab closing
Dpeta · Feb 6, 2024 · 164a224 · 164a224
2 parents 3cb47a3 + f342c36
commit 164a224
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -35,3 +35,11 @@ Run source through browserify + babel, equivalent to running bundle.sh:
 cat dist/pesterchum.js | openssl dgst -sha256 -binary | openssl base64 -A && echo
 ```
 Then input the resulting hashes, same as the previous setup.
+
+# Contributing
+> [!NOTE]  
+> This section still WIP
+
+Before sending a pull request, if you modified the `/src/pesterchum.js` file, please run 
+`npm run lint`
+This will run ESLint (``eslint --fix``) and automatically fix problems and enforce style guidelines. 
diff --git a/package.json b/package.json
@@ -10,6 +10,9 @@
     "webpack": "^5.76.0",
     "webpack-cli": "^4.10.0"
   },
+  "scripts": {
+    "lint": "eslint --fix ./src/pesterchum.js"
+  },
   "dependencies": {
     "@babel/cli": "^7.23.0",
     "@babel/preset-env": "^7.23.2",

diff --git a/src/pesterchum.js b/src/pesterchum.js
@@ -162,12 +162,13 @@ function run () {
     event.preventDefault()
     sendMsg(event)
   })
-
-  const maintab = document.getElementById('maintab')
+  // this was commented by ale since this is not used anymore
+  // const maintab = document.getElementById('maintab')
+  /*
   maintab.addEventListener('scroll', function (event) {
     updatePartButtonPos()
   })
-
+*/
   const manualJoinForm = document.getElementById('manualJoinForm')
   // const manualJoinInput = document.getElementById('manualJoinInput');
   manualJoinForm.addEventListener('submit', function (event) {
@@ -192,7 +193,8 @@ function run () {
       tabButton.remove()
 
       // Hide part button
-      event.currentTarget.style.display = 'none'
+      // deleted by ale not needed anymore
+      // event.currentTarget.style.display = 'none'
 
       // Part / Cease
       if (activeTab[i].memo) {
@@ -720,7 +722,8 @@ function updateMemoUserlist (channel) {
     }
   }
 }
-
+// this code was hidden by ale, since button now is fixed, no needed anymore
+/*
 function updatePartButtonPos () {
   const partButton = document.getElementById('part')
   const activeTab = pcoClient.tabs.filter((tab) => tab.active)
@@ -735,7 +738,7 @@ function updatePartButtonPos () {
     partButton.style.top = (((elmRect.bottom - elmRect.y) / 2) + 4) + 'px' // the +4 is to offset the magin/padding
   }
 }
-
+*/
 function connectButtonEvents () {
   const tablinks = pcoClient.maintab.getElementsByClassName('tablinks') // Tab buttons
   // let parts = pcoClient.maintab.getElementsByClassName('part');        // Close tab buttons
@@ -794,7 +797,8 @@ function connectButtonEvents () {
       }
 
       // Manage the close button
-      updatePartButtonPos()
+      // deleted by ale not needed anymore
+      // updatePartButtonPos()
 
       // We're doing active stuff
       setTabEnabled(true)
@@ -1228,7 +1232,6 @@ class PesterchumOnlineClient {
   tabify () {
     this.body.insertAdjacentHTML('beforeend',
       '<div id=\'chonkers\'>' +
-                                     '<button id=\'part\'>X</button>' +
                                      '<div id=\'chumrollContainer\'>' +
                                      '<button id=\'memolistButton\' class=\'MemosChumsTabs active\'>MEMOS</button>' +
                                      '<button id=\'userlistButton\' class=\'MemosChumsTabs\'>CHUMS</button>' +
@@ -1245,6 +1248,7 @@ class PesterchumOnlineClient {
                                      '<div class=\'mainContainer\'>' +
                                      '<div id=\'maintab\' class=\'tab\'>' +
                                      '<div class=\'tab-arrow-container\'>' +
+                                     '<button id=\'part\' class=\'tab-arrow\' >X</button>' +
                                      '<button class=\'tab-arrow\' > <- </button>' +
                                      '<button class=\'tab-arrow\' > -> </button>' +
                                      '</div>' +
@@ -1270,7 +1274,7 @@ class PesterchumOnlineClient {
     const maintabScrollValues = {
       x: 0
     }
-    document.querySelectorAll('.tab-arrow')[1].addEventListener('click', () => {
+    document.querySelectorAll('.tab-arrow')[2].addEventListener('click', () => {
       const box = document.querySelector('#maintab')
       console.log(maintabScrollValues.x)
       if (maintabScrollValues.x > box.scrollLeft + 51) {
@@ -1281,7 +1285,7 @@ class PesterchumOnlineClient {
         box.scrollLeft = +maintabScrollValues.x
       }
     })
-    document.querySelectorAll('.tab-arrow')[0].addEventListener('click', () => {
+    document.querySelectorAll('.tab-arrow')[1].addEventListener('click', () => {
       const box = document.querySelector('#maintab')
       console.log(maintabScrollValues.x)
       if (maintabScrollValues.x < 0) {

diff --git a/style.css b/style.css
@@ -23,7 +23,7 @@
   --red:#F60100;
   --gray:#5F5F5F;
   --black:#000001;
-  --white:#F4FEDF;
+  --white:#FFFFFF;
   --dark-yellow:#C59400;
 }
 *{
@@ -258,7 +258,7 @@ font-size: 2rem;
 }
 
 .textarea {
-  background-color: white; 
+  background-color: var(--white); 
 }
 
 .textarea.inactive {
@@ -270,7 +270,7 @@ font-size: 2rem;
 }
 
 .msg {
-  background-color: white; 
+  background-color: var(--white); 
 }
 
 .msg.inactive {
@@ -286,26 +286,6 @@ font-size: 2rem;
   top: 4px;
   left: 1.5%;
 }
-
-#part {
-  position: absolute;
-  border: none;
-  font-family: 'Courier';
-  font-weight: bold;
-  font-size:12px;
-  color: white;
-  width: 15px;
-  height: 15px;
-  background: none;
-  color: black;
-  display: none;
-  opacity: 0;
-}
-
-#part:hover {
-  color: white;
-}
-
 #manualJoinInput {
 font-family: strife;
 color: var(--white);
@@ -318,7 +298,7 @@ width: 95%;
   font-family:strife;
   width: 100%;
   height: 15%;
-  color: white;
+  color: var(--white);
   padding: 1%;
   overflow: auto;
 }
@@ -340,13 +320,13 @@ padding-inline-start: 0.5rem;
   margin: 1%;
 }
 .memoChumContainer:hover {
-  color: white;
+  color: var(--white);
   background-color: #646464;
 }
 
 .hidebutton {
   height: 10%;
-  background: white;
+  background: var(--white);
   font-weight: bold;
   font-size: 24px;
   font-family: 'Courier'; 
@@ -381,7 +361,7 @@ padding-inline-start: 0.5rem;
 }
 
 #chumroll {
-  color: white;
+  color: var(--white);
   font-weight: bold;
   font-family: 'Courier';
   overflow-x: scroll;
@@ -454,7 +434,7 @@ padding-inline-start: 0.5rem;
   display: flex;
   margin-inline-start: 0.5rem;
   width: 97%;
-  padding-inline-start: 7rem;
+  padding-inline-start: 10rem;
 }
 #tabContainer {
   width: 56%;
@@ -489,7 +469,7 @@ padding:0.5rem
     padding-top: 1%; 
     padding-bottom: 1%;
     width: 1.1%;     
-    background-color: white; 
+    background-color: var(--white); 
     border:2px solid #c48a00;
 }