Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2 #1

Merged
merged 10 commits into from
Dec 6, 2023
Merged

V2 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f1aecd0
update deps
julesrx Dec 6, 2023
12633bb
working ok
julesrx Dec 6, 2023
75c68d8
stop
julesrx Dec 6, 2023
d1b2879
feat: insert onto body
julesrx Dec 6, 2023
f8193e1
update readme
julesrx Dec 6, 2023
d2898b3
update package
julesrx Dec 6, 2023
0042837
publish script
julesrx Dec 6, 2023
8ee917e
type module
julesrx Dec 6, 2023
8acc6d6
pnpm version workflow
julesrx Dec 6, 2023
b3abda3
readme
julesrx Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
name: Build

on: [push]

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- uses: actions/setup-node@v4
with:
node-version: 20

- uses: pnpm/action-setup@v2
with:
run_install: true
version: 8

- name: Build
run: pnpm build
14 changes: 7 additions & 7 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"singleQuote": true,
"endOfLine": "lf",
"arrowParens": "avoid",
"tabWidth": 4,
"useTabs": false,
"printWidth": 100,
"trailingComma": "none"
"singleQuote": true,
"endOfLine": "lf",
"arrowParens": "avoid",
"tabWidth": 4,
"useTabs": false,
"printWidth": 100,
"trailingComma": "none"
}
42 changes: 19 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Bouncing Element

[![npm](https://img.shields.io/npm/v/bouncing-element/latest)](https://www.npmjs.com/package/bouncing-element)
[![npm](https://img.shields.io/npm/v/bouncing-element)](https://npmjs.com/bouncing-element)
[![Build](https://github.com/julesrx/bouncing-element/actions/workflows/build.yml/badge.svg)](https://github.com/julesrx/bouncing-element/actions/workflows/build.yml)

JavaScript library to reproduce the famous DVD screensaver with any DOM element.

Expand All @@ -21,29 +22,24 @@ npm i bouncing-element
## Usage

```ts
import Bouncer from 'bouncing-element'; // if installed via NPM
import { createBouncer } from 'bouncing-element';

// Create the bouncer
new Bouncer({
// querySelector (default '.bounce')
selector: '.bounce',

// frame transformers (default [])
// used to add different effects to the elements for each frame
frameTransformers: [
{
// tranform key
key: 'hue',

// initial value
initialValue: 0,

// tranform function
tranformer: (bouncingEl, value) => {
bouncingEl.element.style.color = `hsl(${value}, 100%, 50%)`;
return value == 360 ? 0 : value + 1;
}
}
]
const { start, stop } = createBouncer(elements, {
// set to true to insert the elements to the body (default: false)
insert: true,

// frame transformers (default: [])
// used to add different effects to the elements for each frame
frameTransformers: [
{
key: 'hue',
initialValue: 0,
tranformer: (el, value) => {
el.element.style.color = `hsl(${value}, 100%, 50%)`;
return value == 360 ? 0 : value + 1;
}
}
]
});
```
133 changes: 13 additions & 120 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,125 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Bouncing Element</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="bounce" viewBox="0 0 210 107">
<title>DVD logo</title>
<path
d="M118.895,20.346c0,0-13.743,16.922-13.04,18.001c0.975-1.079-4.934-18.186-4.934-18.186s-1.233-3.597-5.102-15.387H81.81H47.812H22.175l-2.56,11.068h19.299h4.579c12.415,0,19.995,5.132,17.878,14.225c-2.287,9.901-13.123,14.128-24.665,14.128H32.39l5.552-24.208H18.647l-8.192,35.368h27.398c20.612,0,40.166-11.067,43.692-25.288c0.617-2.614,0.53-9.185-1.054-13.053c0-0.093-0.091-0.271-0.178-0.537c-0.087-0.093-0.178-0.722,0.178-0.814c0.172-0.092,0.525,0.271,0.525,0.358c0,0,0.179,0.456,0.351,0.813l17.44,50.315l44.404-51.216l18.761-0.092h4.579c12.424,0,20.09,5.132,17.969,14.225c-2.29,9.901-13.205,14.128-24.75,14.128h-4.405L161,19.987h-19.287l-8.198,35.368h27.398c20.611,0,40.343-11.067,43.604-25.288c3.347-14.225-11.101-25.293-31.89-25.293h-18.143h-22.727C120.923,17.823,118.895,20.346,118.895,20.346L118.895,20.346z"
/>
<path
d="M99.424,67.329C47.281,67.329,5,73.449,5,81.012c0,7.558,42.281,13.678,94.424,13.678c52.239,0,94.524-6.12,94.524-13.678C193.949,73.449,151.664,67.329,99.424,67.329z M96.078,85.873c-11.98,0-21.58-2.072-21.58-4.595c0-2.523,9.599-4.59,21.58-4.59c11.888,0,21.498,2.066,21.498,4.59C117.576,83.801,107.966,85.873,96.078,85.873z"
/>
<polygon
points="182.843,94.635 182.843,93.653 177.098,93.653 176.859,94.635 179.251,94.635 178.286,102.226 179.49,102.226 180.445,94.635 182.843,94.635"
/>
<polygon
points="191.453,102.226 191.453,93.653 190.504,93.653 187.384,99.534 185.968,93.653 185.013,93.653 182.36,102.226 183.337,102.226 185.475,95.617 186.917,102.226 190.276,95.617 190.504,102.226 191.453,102.226"
/>
</svg>
<title>Bouncing Element</title>
</head>
<body>
<div id="actions">
<button type="button" id="start">Start</button>
<button type="button" id="stop">Stop</button>
</div>

<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>
<i class="bounce">🐸</i>

<script type="module" src="/src/main.ts"></script>
</body>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
30 changes: 14 additions & 16 deletions lib/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
export interface BouncerOptions {
selector?: string;

frameTransformers: FrameTransformer[];
start?: boolean;
insert?: boolean;
frameTransformers?: FrameTransformer[];
}

export interface FrameTransformer {
key: string;
initialValue: any;
tranformer(el: BouncingElement , value: any): any;
key: string;
initialValue: any;
tranformer(el: BouncingElement, value: any): any;
}

export interface BouncingElement {
element: HTMLElement;
element: HTMLElement;

x: number;
y: number;
x: number;
y: number;

xSpeed: number;
ySpeed: number;
xSpeed: number;
ySpeed: number;

direction: number;
direction: number;

tranformers: FrameTransformer[];
data: {
[key: string]: any;
};
tranformers: FrameTransformer[];
data: { [key: string]: any };
}
Loading