lint: initial setup

.eslintignore

@@ -0,0 +1 @@
+/public/resources/modules/3rdparty/*

.eslintrc.js

@@ -0,0 +1,30 @@
+/* eslint-env node */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: false,
+  },
+  extends: [
+    '@underscript',
+  ],
+  globals: {
+    editEvent: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  rules: {
+    'import/no-unresolved': ['error', {
+      ignore: [
+        '^http',
+      ],
+    }],
+    'no-underscore-dangle': ['error', {
+      allow: [
+        '_oldValue',
+        '_tippy',
+      ],
+    }],
+  },
+};

package.json

@@ -7,5 +7,9 @@
     "private": true,
     "dependencies": {
         "node-fetch": "^2.6.7"
+    },
+    "devDependencies": {
+        "@underscript/eslint-config": "^1.0.1",
+        "eslint": "^8.49.0"
     }
 }

public/resources/modules/card.js

@@ -5,7 +5,7 @@ import Builder from './utils/builder.js';
 
 const underlineRegex = new Builder(() => new RegExp(`(?<!\\\\)(${effects.join('|')})(?![^{]*})|_([^_]+)_`, 'g'));
 const specialRegex = new RegExp(`(?<!{|>|\\w|\\\\)(${specials.join('|')})(?![\\w}])`, 'g');
-const colorRegex = /\{([^;|}]*)[^}]*[;|]([^}]+)}/g; ///\{color:([^}]+)}(.*){\/color}/g;
+const colorRegex = /\{([^;|}]*)[^}]*[;|]([^}]+)}/g; // /\{color:([^}]+)}(.*){\/color}/g;
 const highlightRegex = /\{([^}]+)}/g;
 
 let id = 1;
@@ -22,7 +22,7 @@ export default function card(monster = true) {
   const wrapper = cardWrapper();
   wrapper.id = `card${id++}`;
   wrapper.innerHTML = `
-    <table class="cardBoard ${monster?'monster':'spell'}">
+    <table class="cardBoard ${monster ? 'monster' : 'spell'}">
       <tr>
         <td class="name" colspan="3"><span></span><input type="text" placeholder="Name"></td>
         <td class="cost edit"><span>0</span></td>
@@ -38,16 +38,16 @@ export default function card(monster = true) {
         <td class="description" colspan="4"><div></div><textarea></textarea></td>
       </tr>
       <tr>
-        ${monster?'<td class="attack edit"><span>0</span></td>':''}
-        <td class="rarity" colspan="${monster?2:4}"><img src="rarity/COMMON.png"></td>
-        ${monster?'<td class="health edit"><span>0</span></td>':''}
+        ${monster ? '<td class="attack edit"><span>0</span></td>' : ''}
+        <td class="rarity" colspan="${monster ? 2 : 4}"><img src="rarity/COMMON.png"></td>
+        ${monster ? '<td class="health edit"><span>0</span></td>' : ''}
       </tr>
     </table>
     <span class="footer">undercard.feildmaster.com</span>`;
 
   // Menu
-  const card = wrapper.querySelector('.cardBoard');
-  card.oncontextmenu = cardMenu;
+  const element = wrapper.querySelector('.cardBoard');
+  element.oncontextmenu = cardMenu;
 
   // Name
   const nameCell = wrapper.querySelector('.name');
@@ -109,7 +109,7 @@ function finalizeName(e = {}) {
   }
   span.textContent = input.value;
   span.style.display = '';
-  resize(span.parentElement, {height: false});
+  resize(span.parentElement, { height: false });
 }
 
 function edit(input) {
@@ -153,7 +153,7 @@ function renderDescription(span, e = {}) {
     editEvent('description');
   }
   span.innerHTML = this.value
-    .replace(underlineRegex.value, (_, $1, $2) => `<span class="underline">${$2||$1}</span>`)
+    .replace(underlineRegex.value, (_, $1, $2) => `<span class="underline">${$2 || $1}</span>`)
     .replace(colorRegex, (_, $1, $2) => `<span style="color:${$1}">${$2}</span>`)
     .replace(specialRegex, (_, $1) => `<span class="${getClass($1)}">${$1}</span>`)
     .replace(highlightRegex, (_, $1) => `<span class="cardName">${$1}</span>`)
@@ -178,14 +178,15 @@ function getClass(keyword) {
     case 'BASE':
     case 'TOKEN':
     case 'GENERATED': return keyword;
+    default: throw new Error(`Unknown Keyword: ${keyword}`);
   }
 }
 
 function readImage(image) {
   if (!(this.files && this.files[0])) return;
   editEvent('image');
   const reader = new FileReader();
-  reader.onload = function (e) {
+  reader.onload = (e) => {
     image.src = e.target.result;
   };
   reader.readAsDataURL(this.files[0]);

public/resources/modules/draggable.js

@@ -1,21 +1,26 @@
 import 'https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.8/draggable.bundle.js';
-import {editing} from './card.js';
+import { editing } from './card.js';
 
-const instance = new Draggable.Sortable([], {
+const {
+  Draggable,
+  // Sensors,
+  Sortable,
+} = window.Draggable;
+const instance = new Sortable([], {
   draggable: '.cardWrapper',
   classes: {
     'source:dragging': 'dragging',
   },
-  //handle: '.name',
-}).removePlugin(Draggable.Draggable.Plugins.Focusable, Draggable.Draggable.Plugins.Announcement)
-  //.removeSensor(Draggable.Sensors.TouchSensor)
+  // handle: '.name',
+}).removePlugin(Draggable.Plugins.Focusable, Draggable.Plugins.Announcement)
+  // .removeSensor(Sensors.TouchSensor)
   .on('drag:start', (e) => {
     if (editing || !e.sourceContainer.parentElement.classList.contains('sortmode')) e.cancel();
   });
 
 export default function setup(group) {
   instance.addContainer(group.querySelector('.cards'));
-  group.querySelector('.sidebar .sort').parentElement.onclick = function() {
+  group.querySelector('.sidebar .sort').parentElement.onclick = () => {
     group.classList.toggle('sortmode');
   };
 }

public/resources/modules/effects.js

@@ -3,24 +3,24 @@ export const specials = ['ATK', 'DMG', 'HP', 'KR', 'cost', 'G', 'TOKEN', 'BASE',
 
 const div = document.querySelector('#descriptionTip div');
 function addType(type) {
-    const el = document.createElement('span');
-    el.innerText = type.replace('s?', '');
-    div.append(el, ' ');
+  const el = document.createElement('span');
+  el.innerText = type.replace('s?', '');
+  div.append(el, ' ');
 }
 
 function load(resource) {
   return fetch(`/resources/data/${resource}.json`)
-    .then(res => res.json());
+    .then((res) => res.json());
 }
 
 function addTribes() {
   const container = document.createElement('div');
   container.innerHTML = document.querySelector('#selectTribe').innerHTML;
   const last = container.querySelector('img:last-child');
-  effects.forEach(effect => {
+  effects.forEach((effect) => {
     if (!effect.endsWith('?')) return;
     last.before(getTribe(effect.substring(0, effect.length - 2)));
-  })
+  });
   document.querySelector('#selectTribe').innerHTML = container.innerHTML;
 }
 
@@ -38,7 +38,7 @@ const resources = ['effects', 'extra'];
 export const ready = Promise.all(resources.map(load))
   .then((res) => {
     // Populate effects array
-    res.forEach(data => effects.push(...data));
+    res.forEach((data) => effects.push(...data));
 
     effects.forEach(addType);
     specials.forEach(addType);

public/resources/modules/extras.js

@@ -1,14 +1,15 @@
 let val = false;
 
 export function toggle() {
-    val = !val;
-    document.body.classList.toggle('showExtras', val);
+  val = !val;
+  document.body.classList.toggle('showExtras', val);
 }
 
 export default function value() {
   return val;
 }
 
-if (/(?:\?|\&)extras\b/i.test(location.search)) {
+const params = new URLSearchParams(location.search);
+if (params.has('extras')) {
   toggle();
 }

public/resources/modules/group.js

@@ -1,3 +1,4 @@
+/* global gtag */
 import card from './card.js';
 import draggable from './draggable.js';
 import tip from './tippy.js';
@@ -24,7 +25,7 @@ export default function newGroup() {
 }
 
 function generate(monster, container) {
-  gtag('event', `create_${monster ? 'monster':'spell'}`,);
+  gtag('event', `create_${monster ? 'monster' : 'spell'}`);
   const wrapper = card(monster);
   container.querySelector('.cards').append(wrapper);
 
@@ -42,8 +43,9 @@ function setupName(container) {
   input.onblur = () => {
     name.style.display = '';
     const text = input.value.trim();
-    if (text)
+    if (text) {
       name.textContent = text;
+    }
   };
   if (id > 0) {
     name.textContent = `Group ${id}`;

public/resources/modules/index.js

@@ -16,5 +16,5 @@ function ready() {
 
 Promise.all(preloads)
   .then(ready)
+  // eslint-disable-next-line no-console
   .catch(console.error);
-

public/resources/modules/menu.js

@@ -1,8 +1,8 @@
 import saveCard from './save.js';
 
 export default function cardMenu(e) {
-  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) return;
-  if (e.target === this.querySelector('.description textarea')) return;
+  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) return undefined;
+  if (e.target === this.querySelector('.description textarea')) return undefined;
   e.stopPropagation();
   const context = document.querySelector('.context');
   context.style.display = 'unset';
@@ -22,7 +22,9 @@ export default function cardMenu(e) {
 }
 
 const context = document.querySelector('.context');
-const close = () => context.style.display = '';
+function close() {
+  context.style.display = '';
+}
 context.querySelector('.close').onclick = close;
 window.addEventListener('contextmenu', close);
 window.addEventListener('click', close);

public/resources/modules/resize.js

@@ -1,13 +1,14 @@
 export default function resize(container, {
-  size=12,
-  minsize=7,
-  steps=0.5,
-  height=true
+  size = 12,
+  minsize = 7,
+  steps = 0.5,
+  height = true,
 } = {}) {
   const type = height ? 'Height' : 'Width';
+  let newSize = size;
   container.style.fontSize = '';
-  while (container[`scroll${type}`] > container[`client${type}`] && size-steps >= minsize) {
-    size -= steps;
-    container.style.fontSize = `${size}px`;
+  while (container[`scroll${type}`] > container[`client${type}`] && newSize - steps >= minsize) {
+    newSize -= steps;
+    container.style.fontSize = `${newSize}px`;
   }
 }

public/resources/modules/save.js

@@ -1,18 +1,19 @@
+/* global domtoimage */
 export default function save(element, as) {
   element.classList.toggle('saving', true);
   image(element).then((url) => {
     const link = document.createElement('a');
-    link.download = `${as||element.querySelector('.name input').value||'undercard'}.png`;
+    link.download = `${as || element.querySelector('.name input').value || 'undercard'}.png`;
     link.href = url;
     link.click();
   }).catch((error) => console.error('Ooops.', error))
-  .then(() => {
-    element.classList.toggle('saving', false);
-  });
+    .then(() => {
+      element.classList.toggle('saving', false);
+    });
 }
 
 export function image(element) {
-  return domtoimage.toPng(element, {filter});
+  return domtoimage.toPng(element, { filter });
 }
 
 function filter(node) {

public/resources/modules/tippy.js

@@ -1,5 +1,5 @@
 import tippy from './3rdparty/tippy.js';
-import {isDragging} from './draggable.js';
+import { isDragging } from './draggable.js';
 import extras from './extras.js';
 
 let active;
@@ -115,7 +115,8 @@ function modifySoul(nameCell, popper) {
   if (this === activeSoul) {
     input.focus();
     return;
-  } else if (activeSoul) {
+  }
+  if (activeSoul) {
     activeSoul.classList.remove('active');
     nameCell.classList.remove(activeSoul.textContent);
   }
@@ -127,15 +128,19 @@ function modifySoul(nameCell, popper) {
 }
 
 tippy.setDefaults({
-  onShown, onShow, onHide,
+  onShown,
+  onShow,
+  onHide,
   placement: 'right-end',
   a11y: false,
   arrow: false,
   trigger: 'manual',
   duration: 0,
   hideOnClick: false,
-  //performance: true,
-  shouldPopperHideOnBlur() { return false },
+  // performance: true,
+  shouldPopperHideOnBlur() {
+    return false;
+  },
   interactive: true,
   ignoreAttributes: true,
   animateFill: false,

public/resources/script.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const effects = [
     'Magic', 'Future', 'Dodge', 'Dust', 'Taunt', 'Paralyze', 'paralyzed', 'Start of turn', 'End of turn', 'Haste', 'Armor', `Can't attack`, 'Candy', 'Transparency', 'Charge',
     'Fatigue', 'Turbo', 'Ranged', 'Support',

public/resources/simpletoast.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*
  * SimpleToast - A small library for toasts
  */

public/service-worker.js

@@ -1,3 +1,5 @@
+/* eslint-env serviceworker */
+/* global workbox */
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
 
 workbox.core.setCacheNameDetails({
@@ -10,7 +12,6 @@ workbox.routing.registerRoute(
   new workbox.strategies.NetworkFirst(),
 );
 
-
 // Cache js/css files
 workbox.routing.registerRoute(
   /\.(?:js|css)$/,
@@ -37,9 +38,8 @@ workbox.routing.registerRoute(
   }),
 );
 
-
 // Offline analytics
-workbox.googleAnalytics.initialize(); 
+workbox.googleAnalytics.initialize();
 
 // Cache the Google Fonts stylesheets with a stale while revalidate strategy.
 workbox.routing.registerRoute(
@@ -63,7 +63,7 @@ workbox.routing.registerRoute(
       }),
     ],
   }),
-); 
+);
 
 workbox.routing.registerRoute(
   /.otf$/,