Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

I didn't have the energy or time to get this working in #206, but: Vitest isn't properly configured to figure out code coverage across files. But after running pnpm run test run --coverage, the generated coverage/index.html has "Unknown% Statements 0/0". 😬

Additional Info

No response

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

Right now, emojis are not interactive: the user can't click, drag, etc. with them. As @ian-craig said in #1:

No emoji overlay is complete without the ability to interact with them.

The most straightforward form of interaction I can imagine is adding a click handler. Consumers should be able to specify an onClick function that takes in an actor.

A few implementation detail notes:

• For accessibility, this means emojis should always be an interactive element (i.e. a <button> for this type of interaction). I think removing the tagName option is therefore reasonable.
• Let's make this a general events option with an onClick property, rather than a specific onClick option. We'll eventually want more event handlers than just clicks.

emojisplosion({
	events: {
		onClick(actor) {
			actor.update({
				opacity: 1,
				velocity: {
					y: actor.velocity.y - 1,
				},
			});
		},
	},
});

Additional Info

Consider this issue to be a precursor/lead-in to #1. Once we have this issue's infrastructure for an events option added, adding in drag handlers should be a natural next step.

I'll want to use these in the browser extensions.

CSS performs better and looks great with browser GPUs these days.

However, JS would enable a lot of interesting interactions, such as #1.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

Using peerDependencies in a package.json is nice to indicate the supported versions of the peer.

Actual

konami-emoji-blast-astro doesn't include one for astro.

Additional Info

No response

Hi, love the work!

I am setting fontSize like so:

const { cancel } = emojisplosions({
      container: $modal[0],
      emojiCount: () => Math.random() * 20 + 20,
      emojis: ["💖", "💕", "💗", "💓", "💝"],
      physics: { fontSize: { max: 54, min: 24 } },
    });

And am still seeing the default 14->28 range. Help, I want big emojis!
I love this though...

Now that actors are using translate (#22), easy demos on pages with content aren't working because the emojis are too low on the page.

No emoji overlay is complete without the ability to interact with them.

Mouse down on an emoji should bring it back to full opacity and hold it's position relative to the mouse as if the user had caught the emoji. Momentum on mouse up should be preserved so users can throw emojis around.

Bonus if the emoji explodes again like a new firework shortly after it is released.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

This comment exists in doc-content.tsx:

// TODO: create a component for code tag so that the styles are automatically applied

It's in reference to there being a lot of <code css={usageStyles.code}> tags in the page. Agreed, this would be a nice opportunity to refactor a bit to extract out a shared component for code.

Additional Info

No response

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

This is my first monorepo and I've never done automated releases before. I'd like to try out Changesets. 🚀

Additional Info

No response

This repository is from back when I used .travis.yml as the build manager for all my projects... it's been a while!

This repository still uses TSLint, which is being deprecated: palantir/tslint#4534. It'd be great to move it over to typescript-eslint to no longer use deprecated packages.

Protip: tslint-to-eslint-config is the recommended package to do so!

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

Right now, emojisplosion internally uses an the Animator class to run the regular gameplay loop of telling EmojiActors ("actors") to animate. It stores actors in an array internally:

https://github.com/JoshuaKGoldberg/emojisplosion/blob/fe1ef216a89d6dd32bc5e752e203ceb66206c6d7/src/animator.ts#L11-L14

Whenever an actor "dies" (leaves the screen area), it's removed from that array with a .splice:

https://github.com/JoshuaKGoldberg/emojisplosion/blob/fe1ef216a89d6dd32bc5e752e203ceb66206c6d7/src/animator.ts#L52-L57

I wonder if that's actually inefficient? Now that all browsers have Sets, should we look into going with a Set for storage, so that it has O(1) removals?

Additional Info

...alternately, should we loop from the end of the actors array to the beginning (let i = actors.length - 1; i >= 0; i -= 1)?

Investigation needed!

Since this is a performance investigation, we'd need real data in multiple popular browsers (Chrome, Firefox, Safari) to indicate whether any approach is noticeably better or worse than others.

#45 - jsfiddle is nice, but eventually I'd like to have a dedicated one. Perhaps with a konamimojisplosion integration on it. 😄

When you click very close to the top of the screen in the default settings, emoji that happen to go out of bounds get culled. We should avoid culling the emoji at that stage, and wait until they fall.

This was added because if the general gravity physics constant is inverted, we don't know if they'll be out of bounds by the top or bottom of the screen.

Solution: maybe wait until the element has gone from positive to negative y-velocity (or vice versa?).

Turns out webpack won't like esnext in all forms. Great.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

This repo's emoji list was first filled out in July of 2018 (8c0e417). A lot of years of emoji have come out since then. I'd like to add more of them.

Additional Info

No response

Bug Report Checklist

• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

It'd be nice to have both light & dark mode. Right now it seems like it's just dark mode?

Additional Info

Originally filed as cgradeff/emojisplosion-site#7.

Overview

...

using it here (https://julians-fantabulous-site-0260b5.webflow.io/old-home) on the 'join waitlist' button. on desktop it works great but on mobile it doesnt explode out of the button but just below.

using code straight from the library

<script async src="https://unpkg.com/emojisplosion/lib/global.js"></script>

<script>
window.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('[data-trigger="emoji"]');

    const cumulativeOffset = (element) => {
        let top = 0,
            left = 0;
        do {
            top += element.offsetTop || 0;
            left += element.offsetLeft || 0;
            element = element.offsetParent;
        } while (element);

        return {
            top: top,
            left: left
        };
    };

    button.addEventListener("click", function() {
        
        emojisplosion({
        	emojis: ["🤫"],
            physics: {
                fontSize: 28,
                initialVelocities: {
                    rotation: {
                        max: 28,
                        min: -28
                    }
                },
                rotationDecelaration: 1.01
            },

 
                      
              position() {
                const offset = cumulativeOffset(button);

                return {
                    x: offset.left + button.clientWidth / 2,
                    y: offset.top + button.clientHeight / 2
                   
                   
                };
            }
        });
    });
});

</script>

Or just any other server, just to open the demos in the browser without cloning the repo.

Bug Report Checklist

• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

Right now, emojis pop out of the explosion container and over the surrounding page:

It'd be nice to limit them to the container for demo purposes.

One drawback, though, is that this might overcomplicate the code for the demos? They're really nice and straightforward now. It would be unfortunate to make them much more verbose for this...

I'm thinking: how about providing a container element as a parameter to those functions?

Additional Info

Originally filed as cgradeff/emojisplosion-site#8.

Emojisplosions are triggered by JavaScript and animated by CSS. JS will still run when a window is blurred, albeit at an unpredictably slower speed. CSS will not. This results in a bunch of explosions starting all over the page when it's refocused.

Solution: stop creating new emojisplosions when the window is blurred, and resume when it becomes focused again.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

A few of these projects use Webpack to create browser-friendly bundles. Webpack is kind of old. Newer shiny things like Vite exist now. Let's use that!

Additional Info

No response

Inspired by @helenamerk in #42: it'd be awesome to flesh out a few more demos.

Our team built out a few templates like "rocket" and "rainbow" that are super fun and might be neat additions to this project.

Accepting PRs!

In more detail:

• Right now emojisplosion has some demos on https://github.com/JoshuaKGoldberg/emojisplosion/tree/6c886bd123927eac9f67b5cc0c142221642d4d2d/demo
• Those demos only scratch the surface of what can be done with emojisplosion. This library is actually quite configurable!
• I'd love to see some more demo .html pages added that use the configurable options for fun

A few ideas of examples (feel free to ignore these and make your own!):

• Rocket-based example: shoot a 🚀 out of a spot at an angle, and have a little fireworks-style blast of ✨ and ☁️ out of the spot
• Swimming fish: have them float through the page with a wavy fish-like movement
• Rainbows: maybe something with a bunch of ❤️ 🧡 💛 💚 💙 💜?

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

As a precursor to the monorepo work (#172), I'd like to get this repo into my normal http://github.com/JoshuaKGoldberg/create-typescript-app templating. Then it'll be easier to turn it into a monorepo.

Additional Info

No response

Bug Report Checklist

• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

This comment exists in side-bar.tsx:

// TODO: separate the examples into different tabs by type

Agreed, that'd be nice. It's a big scrolling list right now.

Additional Info

No response

Ionic/Angular project. Latest versions.

Specific code here: https://github.com/peterennis/ae-monorepo-ng/blob/master/packages/ae-i4/src/app/pages/home/home.page.ts

I expect the cancel to happen on leaving the page but it does not trigger.
The ionViewDidLeave is activated as the log is displayed.

Is there some ts foo I am missing?

Based on the readme example:

My goal is to have play/pause/continue/stop operations.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

Back in #138 I'd changed the default built-in emojis to include 🩷 (pink heart) and 🩵 (light blue heart). The expectation was that they should work in modern browsers users are likely to be on.

Actual

It's March 2024 and they're still showing up as unknown emojis in my Chrome. So I don't believe they're ready to be used yet. I'll remove them.

Additional Info

No response

Animators always requestAnimationFrame(this.tick) at the end of their ticks. They should stop if all their actors have been disposed.

Bug Report Checklist

• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

https://github.com/cgradeff/emojisplosion-site -> https://www.emojisplosion.dev is incredible and wonderful and needs a rename to https://emojiblast.dev (which I now have). I'd like to make it more of a traditional docs site for all the packages in this monorepo:

• emoji-blast
• konami-emoji-blast
• The various integrations

...let's build this with Astro Starlight!

Additional Info

#284 tracks porting the existing site as-is, but with the rename. This issue is for making a wholly new, more comprehensive site.

Opacity changes are a bit harder for browsers than pure position. Not doing that by default will help with the default usage's performance.

If an emoji actor is a bagillion pixels outside of the screen, it normally shouldn't matter what its opacity is; the actor should be deleted. This wasn't originally a native part of the engine because it's possible for folks to configure gravity to allow emojis to slingshot back into the screen eventually.

Emojis should be pruned by default for the sake of performance, with an off-by-default flag to preserve them.

Browsers are much better at animating transforms than raw positions, since they're visual only and don't require layouts. This should fix jittery animations on Macs.

The package versions created by webpack (e.g. https://unpkg.com/[email protected]/lib/global.js) don't care what the input format is, but the webpack consumption from import { emojisplosions } from 'emojisplosion' is giving define is not defined complaints in my otherwise-working Webpack/React app.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

When I press the Click Me button with the keyboard, I'd expect emojis blast from the button's position (prolly centre of the button) 🤩💥💥

Actual

Emojis blast from the top left corner of the page and this ain't so exciting when most of them end up beyond the visible area 😔⛈️

Additional Info

I made https://github.com/JoshuaKGoldberg/template-typescript-node-package/ and want to use it in more of my packages. Let's use it here!

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

The site should be readable in mobile viewports.

Actual

There's a lot of page padding:

Additional Info

No response

Bug Report Checklist

• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

I'm going to want to share the site around on social media and such. Over the last year I've started using the wonderful opengraph.xyz to make sure all common site's meta tags are included.

https://www.opengraph.xyz/url/https%3A%2F%2Femojiblast.dev

We're missing a few. I'll add them in. 🚀

Additional Info

No response

It's a little spooky how some elements magically float above the emojis. Can't have that!

z-index: 2147483647;

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: matchUpdateTypes: matchUpdateTypes should be inside a 'packageRule' only

C:\ae\emojisplosion>npm i
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 432 packages from 321 contributors and audited 5749 packages in 26.256s
found 72 vulnerabilities (1 moderate, 71 high)
  run `npm audit fix` to fix them, or `npm audit` for details

I am testing this. Do you want a PR when fixed?

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

Right now, there are X project repositories around emojisplosion (soon to be renamed to emoji-blast):

• https://github.com/JoshuaKGoldberg/emojisplosion
• https://github.com/JoshuaKGoldberg/konamimojisplosion
• https://github.com/JoshuaKGoldberg/astro-konamimojisplosion
• https://github.com/JoshuaKGoldberg/typedoc-plugin-konamimojisplosion
• https://github.com/cgradeff/emojisplosion-site

konamimojisplosion (soon to be renamed to konami-emoji-blast) currently includes a React bit built-in. But I'd like to split it into separate packages for each popular frontend library: Angular, Preact, Solid, Svelte, React, Vue, ... and it'd be nice to not have to make an entirely new repository for each of them.

Additional Info

This is now the second personal project I'm looking at turning into a monorepo with a rename: JoshuaKGoldberg/TypeStat#1040 -> JoshuaKGoldberg/TypeStat#1314.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

Running an accessibility scanning tool such as https://www.deque.com/axe/browser-extensions should show no reports on the website.

Actual

A few reports are happening:

• Elements must meet minimum color contrast ratio thresholds
• Links must have discernible text
• Scrollable region must have keyboard access

Additional Info

Originally filed as cgradeff/emojisplosion-site#4.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

The following should be allowed:

emojiBlast({
	physics: {
		gravity: -0.35,
		initialVelocities: {
			y: { max: 14, min: 11.7 },
		},
	},
});

Actual

error TS2739: Type '{ y: { max: number; min: number; }; }' is missing the following properties from type 'InitialVelocities': rotation, x

21    initialVelocities: {
      ~~~~~~~~~~~~~~~~~

Additional Info

Splitting out of #283.

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

I love the name "emojisplosion". I really do. But it's hard to remember or type and is probably harming the success of the package 😞. A simpler name like "emoji-blast" would probably be more widely findable...

Additional Info

I'll think about this for a bit.

Bug Report Checklist

• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Overview

As a precursor to #238: I'll bring on the existing site into the monorepo. This way I can get it up and running sooner. It's not good to have a 404ing emojiblast.dev for too long.

Additional Info

No response

Testing with angular, ionic, and typescript.

Test Repo: https://github.com/peterennis/aemojitest
It works using the script load from unpkg

I want to lazyload.

Failure on branch "angulartest" here: https://github.com/peterennis/aemojitest/tree/angulartest

C:\ae\aemojitest>npm start

> [email protected] start C:\ae\aemojitest
> ng serve

 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 1.97 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 149 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 116 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2019-09-27T00:39:13.437Z - Hash: 61cab9594fdca97e6e1e - Time: 8379ms

ERROR in node_modules/emojisplosion/src/utils.ts:8:11 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type '(() => T) | (T & Function)' has no compatible call signatures.

8         ? value()
            ~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.