Remove inline button handlers and centralize UI click binding by Copilot · Pull Request #626 · NextCommunity/NextCommunity.github.io

Copilot · 2026-09-26T16:08:10Z

This change removes inline onclick usage from interactive controls and moves button behavior into script-managed event listeners. The update keeps the existing UI actions intact while eliminating inline JavaScript from the affected templates.

Template changes
- Replaced inline button handlers with stable id and data-* hooks across dev tools, console controls, game launchers, footer actions, and profile interactions.
- Kept the markup intent explicit by encoding action metadata in attributes instead of executable HTML.
Client-side event wiring
- Added centralized listener registration in src/assets/js/script.js via initButtonHandlers().
- Mapped declarative hooks to existing behaviors such as secret unlocks, XP awards, console controls, game launches, theme toggle, screenshot mode, and level jump.
- Hardened the duel launcher binding to resolve the nearest .user-card[data-name] at click time before invoking startDuelFromCard().
Selector alignment
- Updated dev-tool styling rules in src/assets/css/style.css to target the new data-* attributes instead of [onclick*="..."] selectors.

<button type="button" data-action="launch-space-invaders">
  🚀 Launch
</button>

document
  .querySelectorAll("button[data-action='launch-space-invaders']")
  .forEach((button) => {
    button.addEventListener("click", () => {
      SpaceInvaders.launch();
    });
  });

Co-authored-by: jbampton <418747+jbampton@users.noreply.github.com>

deepsource-io · 2026-09-26T16:08:25Z

DeepSource Code Review

We reviewed changes in 1839f0e...29676bd on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
JavaScript		Sep 26, 2026 4:08p.m.	Review ↗
Secrets		Sep 26, 2026 4:08p.m.	Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

deepsource-io · 2026-09-26T16:08:41Z

+function resolveExperienceValue(value) {
+  const experienceMap = {
+    XP_SPACE_INVADERS_WIN,
+    _XP_CODE_BREAKER_WIN,
+    _XP_DEV_DUEL_PLAY,
+  };
+
+  return experienceMap[value] ?? Number(value);
+}


Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable

It is considered a best practice to avoid 'polluting' the global scope with variables that are intended to be local to the script. Global variables created from a script can produce name collisions with global variables created from another script, which will usually lead to runtime errors or unexpected behavior. It is mostly useful for browser scripts.

deepsource-io · 2026-09-26T16:08:41Z

+function bindClickHandler(id, handler) {
+  const element = document.getElementById(id);
+
+  if (element) {
+    element.addEventListener("click", handler);
+  }
+}


Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable

It is considered a best practice to avoid 'polluting' the global scope with variables that are intended to be local to the script. Global variables created from a script can produce name collisions with global variables created from another script, which will usually lead to runtime errors or unexpected behavior. It is mostly useful for browser scripts.

deepsource-io · 2026-09-26T16:08:41Z

+function initButtonHandlers() {
+  document.querySelectorAll("button[data-secret-unlock]").forEach((button) => {
+    button.addEventListener("click", () => {
+      triggerSecretUnlock(button.dataset.secretUnlock);
+    });
+  });
+
+  document.querySelectorAll("button[data-add-experience]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const amount = resolveExperienceValue(button.dataset.addExperience);
+
+      if (Number.isFinite(amount)) {
+        addExperience(amount);
+      }
+
+      if (button.dataset.sound) {
+        playSound(button.dataset.sound);
+      }
+    });
+  });
+
+  document.querySelectorAll("button[data-action='trigger-force-surge']").forEach((button) => {
+    button.addEventListener("click", triggerForceSurge);
+  });
+
+  document.querySelectorAll("button[data-action='trigger-magic-xp']").forEach((button) => {
+    button.addEventListener("click", () => {
+      triggerMagicXP();
+      if (button.dataset.sound) {
+        playSound(button.dataset.sound);
+      }
+    });
+  });
+
+  document
+    .querySelectorAll("button[data-action='toggle-screenshot-mode']")
+    .forEach((button) => {
+      button.addEventListener("click", window.toggleScreenshotMode);
+    });
+
+  document
+    .querySelectorAll("button[data-action='launch-profile-code-breaker']")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME);
+      });
+    });
+
+  document
+    .querySelectorAll("button[data-action='launch-space-invaders']")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        SpaceInvaders.launch();
+      });
+    });
+
+  document
+    .querySelectorAll("button[data-action='launch-arcade-code-breaker']")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        CodeBreaker.launch(null, "Arcade Mode");
+      });
+    });
+
+  document
+    .querySelectorAll("button[data-action='start-duel-from-card']")
+    .forEach((button) => {
+      button.addEventListener("click", (event) => {
+        const card = event.currentTarget.closest(".user-card[data-name]");
+
+        if (card) {
+          startDuelFromCard(card);
+        }
+      });
+    });
+
+  bindClickHandler("close-matrix-btn", closeMatrix);
+  bindClickHandler("footer-surge-button", handleFooterDotClick);
+  bindClickHandler("reopen-console-btn", reopenConsole);
+  bindClickHandler("minimize-console-btn", minimizeConsole);
+  bindClickHandler("maximize-console-btn", maximizeConsole);
+  bindClickHandler("close-console-btn", closeConsole);
+  bindClickHandler("surprise-me-btn", scrollToRandomUser);
+  bindClickHandler("level-badge", handleLevelClick);
+  bindClickHandler("theme-icon", toggleTheme);
+  bindClickHandler("jump-to-level-btn", jumpToLevel);
+  bindClickHandler("self-destruct-btn", window.startSelfDestruct);
+  bindClickHandler("reset-local-storage-btn", () => {
+    localStorage.clear();
+    location.reload();
+  });
+}


Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable

It is considered a best practice to avoid 'polluting' the global scope with variables that are intended to be local to the script. Global variables created from a script can produce name collisions with global variables created from another script, which will usually lead to runtime errors or unexpected behavior. It is mostly useful for browser scripts.

deepsource-io · 2026-09-26T16:08:41Z

+    .querySelectorAll("button[data-action='launch-profile-code-breaker']")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME);


'CodeBreaker' is not defined

Variables that aren't defined, but accessed may throw reference errors at runtime.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Using variables that are injected by scripts included in an HTML file is currently not supported.

deepsource-io · 2026-09-26T16:08:41Z

+    .querySelectorAll("button[data-action='launch-space-invaders']")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        SpaceInvaders.launch();


'SpaceInvaders' is not defined

Variables that aren't defined, but accessed may throw reference errors at runtime.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Using variables that are injected by scripts included in an HTML file is currently not supported.

deepsource-io · 2026-09-26T16:08:41Z

+    .querySelectorAll("button[data-action='launch-arcade-code-breaker']")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        CodeBreaker.launch(null, "Arcade Mode");


'CodeBreaker' is not defined

Variables that aren't defined, but accessed may throw reference errors at runtime.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Using variables that are injected by scripts included in an HTML file is currently not supported.

deepsource-io · 2026-09-26T16:08:41Z

+        const card = event.currentTarget.closest(".user-card[data-name]");
+
+        if (card) {
+          startDuelFromCard(card);


'startDuelFromCard' is not defined

Variables that aren't defined, but accessed may throw reference errors at runtime.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Using variables that are injected by scripts included in an HTML file is currently not supported.

Copilot AI and others added 3 commits September 26, 2026 16:00

Replace inline button onclick handlers

3f7554d

Co-authored-by: jbampton <418747+jbampton@users.noreply.github.com>

Finish inline click handler cleanup

bfe988f

Co-authored-by: jbampton <418747+jbampton@users.noreply.github.com>

Harden duel button event binding

29676bd

Co-authored-by: jbampton <418747+jbampton@users.noreply.github.com>

Copilot AI assigned Copilot and jbampton Sep 26, 2026

github-project-automation Bot added this to Next Sep 26, 2026

Copilot created this pull request from a session on behalf of jbampton September 26, 2026 16:08 View session

deepsource-io Bot reviewed Sep 26, 2026

View reviewed changes

jbampton closed this Sep 26, 2026

github-project-automation Bot moved this to Done in Next Sep 26, 2026

Navigation Menu

Uh oh!

Remove inline button handlers and centralize UI click binding - #626

Remove inline button handlers and centralize UI click binding#626
jbampton with Copilot wants to merge 3 commits into
mainfrom
copilot/remove-inline-js-event-listeners

Copilot AI commented Sep 26, 2026

Uh oh!

deepsource-io Bot commented Sep 26, 2026 •

edited

Loading

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

deepsource-io Bot Sep 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Copilot AI commented Sep 26, 2026

Uh oh!

deepsource-io Bot commented Sep 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

Unexpected function declaration in the global scope, wrap in an IIFE for a local variable, assign as global property for a global variable

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

'CodeBreaker' is not defined

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

'SpaceInvaders' is not defined

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

'CodeBreaker' is not defined

Uh oh!

deepsource-io Bot Sep 26, 2026

Choose a reason for hiding this comment

'startDuelFromCard' is not defined

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

deepsource-io Bot commented Sep 26, 2026 •

edited

Loading