Skip to content

Commit

Permalink
Merge pull request #1 from julesrx/v2
Browse files Browse the repository at this point in the history 
V2
  • Loading branch information
@julesrx
julesrx authored Dec 6, 2023
2 parents 080f35f + b3abda3 commit 63cdcf1
Show file tree
Hide file tree
Showing 13 changed files with 1,005 additions and 559 deletions.
21 changes: 21 additions & 0 deletions .github/workflows/build.yml
View file
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
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
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
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
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

0 comments on commit 63cdcf1

Please sign in to comment.