npm package: @jacksonfrankland/game-kit
Description: Game Kit
Latest version: 1.0.1

# Game Kit

A collection of personal svelte components and scripts for game development



## Svelte Components



### Button

```html
<Button styles"mt-6" on:click={() => {console.log('Hello World')}>
    Hello World
</Button>
```

- **styles:** additional classes to be applied to the button element



### Card

```html
<Card transition>
    Hello World
</Card>
```

- **transition:** Should the card transition in



### Fullscreen

```html
<Fullscreen />
```



### Game Canvas

```html
<script>
    function update ({detail}) {
        // detail is a instance of CanvasHelper
        // Game loop logic goes here
    }
</script>

<GameCanvas bind:canvas ratio={16/9} on:update={update} styles="bg-teal-400" />
```

- **styles:** additional classes to be applied to the canvas element
- **ratio:** the aspect ration of the canvas
- **bind:canvas:** binds to the canvas element. This is useful for the MouseEvents component



### Input

```html
<Input bind:value={name} on:input={type} id="name" placeholder="John Doe" styles="mb-4" />
```

- **bind:value:** binds to the input value
- **on:input:** when the input field changes do this
- **id:** the id of the input field
- **placeholder:** the placeholder for the input field
- **styles:** additional classes to be applied to the input element



### Label

```html
<Label control="code" styles="mb-4"> Code </Label>
```

- **control:** the form element this is for
- **styles:** additional classes to be applied to the label element



### Mouse Events

```html
<script>
    function click({detail: point}) {
        // point is a vector with the upper left cornor of the element being 0,0
        // the largest dimension of the elelement will be of length 1
        //
        // do something
    }
</script>

<MouseEvents element={canvas}
	on:click={click}
    on:mouseMove={mouseMove}
    on:mouseUp={mouseUp}
    on:mouseDown={mouseDown}
/>
<GameCanvas bind:canvas ratio={16/9} on:update={update} styles="bg-teal-400" />
```



### Prose

```html
<Prose style="bg-gray-200"> Hello World </Prose>
```

- **styles:** additional classes to be applied to the div container element



### Spinner

```html
<Spinner />
```



## Game Scripts



### Bondary Bounce

```javascript
let soundDirection = {
    top: this.transform.velocity.y * -1,
    right: this.transform.velocity.x,
    bottom: this.transform.velocity.y,
    left: this.transform.velocity.x * -1
}
boundaryBounce(this.transform, this.radius, new Vector, new Vector(detail.width, detail.height), direction => {
    Disc.hitSound(soundDirection[direction]);
});
```



### Canvas Helper

```html
<script>
    function update ({detail}) {
        //clear canvas
        detail.clear();

        // draw circle: circle (position, radius, fill)
        detail.circle(new Vector(.5, .5), .05, 'red');

        // draw svg: svgPath (d, fill, position, offset, viewBox, scale)
        detail.svgPath(arrow, 'white', ORIGIN, new Vector(0, 1), new Vector(20, 20), new Vector(scale, scale));
        
    }
</script>

<GameCanvas bind:canvas ratio={16/9} on:update={update} styles="bg-teal-400" />
```



### Circle Bounce

```javascript
circleBounce(a, b, intensity => Disc.hitSound(intensity));
```



### Many to Many Collision

```javascript
get collider () {
    return {
        shape: 'circle',
        radius: this.radius,
        position: this.transform.position
    }
}

static collisionDetection (discs) {
    manyToManyCollision(discs, (a, b) => {
        // Do something
    });
}
```



### Transform

```javascript
constructor (position = new Vector()) {
    this.transform = new Transform(position);
    this.transform.friction = .0015;
}

 update (detail) {
     this.transform.update(detail.delta);
 }
```



### Vector

```javascript
// constructor (x = 0, y = 0)
let v = new Vector(1, 1);
// or
Vector.create(1, 1);

// static generators
Vector.right;
Vector.left;
Vector.up;
Vector.down;

// getters
a = v.basic;
a = v.round;
a = v.magnitudeSquared;
a = v.magnitude;
a = v.unit;
a = v.degrees;
a = v.radians;

// methods
a = v.add(other);
a = v.subtract(other);
a = v.multiply(scalar);
a = v.distanceSquared(other);
a = v.withMagnitude(magnitude);
a = v.dot(other);
a = v.angleBetween(other);
a = v.projectOnto(other);
```