From 2cdc1f062f9ce2dfcda9fac7142dfe9c7d5d731d Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 25 Jun 2024 14:34:07 +0200 Subject: [PATCH 01/19] Load image and audio sorces when building the balloon --- src/balloons/default.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/balloons/default.ts b/src/balloons/default.ts index e7b4a7e0..60f9cd65 100644 --- a/src/balloons/default.ts +++ b/src/balloons/default.ts @@ -99,10 +99,6 @@ export default class Default extends Balloon { constructor() { super(); importStylesheet('default-styles', this.resourceLocation + 'default.css'); - // Load the pop sound - this.popSound.src = this.popSoundUrl; - // Load the balloon image - this.balloonImage.src = this.balloonImageUrl; } public build() { @@ -117,6 +113,11 @@ export default class Default extends Balloon { this.swingDurationThreshold[1] ); + // Load the pop sound + this.popSound.src = this.popSoundUrl; + // Load the balloon image + this.balloonImage.src = this.balloonImageUrl; + this.element.classList.add('balloon'); // Set css variables From ff95f01f64462ab15aae5222427306265bc34f55 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 25 Jun 2024 14:34:29 +0200 Subject: [PATCH 02/19] Add a golden balloon svg #242 --- resources/balloons/gold/balloon.svg | 46 +++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 resources/balloons/gold/balloon.svg diff --git a/resources/balloons/gold/balloon.svg b/resources/balloons/gold/balloon.svg new file mode 100644 index 00000000..e0636276 --- /dev/null +++ b/resources/balloons/gold/balloon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + \ No newline at end of file From cc16ff3ecadc7fd0a22a6f8fa05c464435d5de97 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 25 Jun 2024 17:51:21 +0200 Subject: [PATCH 03/19] Add gradient to golden balloon #242 --- resources/balloons/gold/balloon.svg | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/resources/balloons/gold/balloon.svg b/resources/balloons/gold/balloon.svg index e0636276..fded9830 100644 --- a/resources/balloons/gold/balloon.svg +++ b/resources/balloons/gold/balloon.svg @@ -1,12 +1,18 @@ + + + + + + - + - + \ No newline at end of file From 8910f3c49d602791841bec7c4ed1140e587e85f5 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 25 Jun 2024 19:06:32 +0200 Subject: [PATCH 04/19] Add the golden balloon #242 --- src/balloons/gold.ts | 12 ++++++++++++ src/balloons/index.ts | 1 + 2 files changed, 13 insertions(+) create mode 100644 src/balloons/gold.ts diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts new file mode 100644 index 00000000..e38f61bf --- /dev/null +++ b/src/balloons/gold.ts @@ -0,0 +1,12 @@ +import Default, { BalloonOptions } from './default'; + +export default class Confetti extends Default { + public static readonly spawn_chance: number = 10.1; + // @ts-ignore + public readonly name = 'gold'; + + constructor() { + super(); + this.options.imageUrl = `/../${this.name}/balloon.svg`; + } +} diff --git a/src/balloons/index.ts b/src/balloons/index.ts index 05d885f6..872d0bc0 100644 --- a/src/balloons/index.ts +++ b/src/balloons/index.ts @@ -1,2 +1,3 @@ export { default as Default } from './default'; export { default as Confetti } from './confetti'; +export { default as Gold } from './gold'; From 2606dd96f25357265187b654f044a78be7ee47b5 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Thu, 27 Jun 2024 14:06:50 +0200 Subject: [PATCH 05/19] Update gold balloon spawn rate --- src/balloons/gold.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index e38f61bf..8718a4d4 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,7 +1,7 @@ import Default, { BalloonOptions } from './default'; export default class Confetti extends Default { - public static readonly spawn_chance: number = 10.1; + public static readonly spawn_chance: number = 0.05; // @ts-ignore public readonly name = 'gold'; From d7b6e50e2c66b6c3c4edf31a161a56774e535eaf Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 28 Jun 2022 22:57:11 +0200 Subject: [PATCH 06/19] Update balloon colors --- resources/balloons/gold/balloon.svg | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/balloons/gold/balloon.svg b/resources/balloons/gold/balloon.svg index fded9830..b0b303ce 100644 --- a/resources/balloons/gold/balloon.svg +++ b/resources/balloons/gold/balloon.svg @@ -3,8 +3,8 @@ - - + + From e38822cd754bd76a4dabf0b5d064d614ba22f600 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Sat, 29 Jun 2024 23:00:40 +0200 Subject: [PATCH 07/19] Make the golden balloon rise slower --- src/balloons/gold.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index 8718a4d4..379d152e 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -5,6 +5,8 @@ export default class Confetti extends Default { // @ts-ignore public readonly name = 'gold'; + public readonly riseDurationThreshold: [number, number] = [15000, 20000]; + constructor() { super(); this.options.imageUrl = `/../${this.name}/balloon.svg`; From cb83106c916bf6cf7f81ef0e18f9e64db3bb80b1 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Sun, 30 Jun 2024 22:09:12 +0200 Subject: [PATCH 08/19] Fix balloon set riseDuration configuration --- src/balloons/gold.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index 379d152e..ca1975c8 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -5,10 +5,10 @@ export default class Confetti extends Default { // @ts-ignore public readonly name = 'gold'; - public readonly riseDurationThreshold: [number, number] = [15000, 20000]; - constructor() { super(); this.options.imageUrl = `/../${this.name}/balloon.svg`; + this.riseDurationThreshold[0] = 15000; + this.riseDurationThreshold[1] = 20000; } } From 8ebfa29f6783df4577803fb9202f93c794021291 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Mon, 1 Jul 2024 17:54:11 +0200 Subject: [PATCH 09/19] Rename Gold balloon class to Gold --- src/balloons/gold.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index ca1975c8..1297c1a9 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,6 +1,6 @@ -import Default, { BalloonOptions } from './default'; +import Default from './default'; -export default class Confetti extends Default { +export default class Gold extends Default { public static readonly spawn_chance: number = 0.05; // @ts-ignore public readonly name = 'gold'; From c28c44e0099c12ddb79ba6faa122484adc90561b Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Mon, 1 Jul 2024 18:01:46 +0200 Subject: [PATCH 10/19] Make gold balloon swing slower --- src/balloons/gold.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index 1297c1a9..7475a025 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,7 +1,7 @@ import Default from './default'; export default class Gold extends Default { - public static readonly spawn_chance: number = 0.05; + public static readonly spawn_chance: number = 1.05; // @ts-ignore public readonly name = 'gold'; @@ -10,5 +10,7 @@ export default class Gold extends Default { this.options.imageUrl = `/../${this.name}/balloon.svg`; this.riseDurationThreshold[0] = 15000; this.riseDurationThreshold[1] = 20000; + this.swingDurationThreshold[0] = 3; + this.swingDurationThreshold[1] = 4; } } From 5aed11efc84926139fa5a1832d8886f955e26ec2 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 2 Jul 2024 09:48:43 +0200 Subject: [PATCH 11/19] Fix gold spawnrate, again --- src/balloons/gold.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index 7475a025..2649db04 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,7 +1,7 @@ import Default from './default'; export default class Gold extends Default { - public static readonly spawn_chance: number = 1.05; + public static readonly spawn_chance: number = 0.05; // @ts-ignore public readonly name = 'gold'; From a1fff00af98ad75e52acf4c2ee8428c951392496 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 2 Jul 2024 21:24:04 +0200 Subject: [PATCH 12/19] Refactor default balloon options and name --- src/balloons/default.ts | 55 ++++++++++++++++++++++------------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/src/balloons/default.ts b/src/balloons/default.ts index 60f9cd65..60ce80b7 100644 --- a/src/balloons/default.ts +++ b/src/balloons/default.ts @@ -31,6 +31,18 @@ export type BalloonOptions = { * If not provided, the default sound will be used. */ popSoundUrl: string; + /** + * The duration thresholds for the rise animation. + * + * The first value is the minimum duration and the second value is the maximum duration. + */ + riseDurationThreshold: [number, number]; + /** + * The duration thresholds for the swing animation. + * + * The first value is the minimum duration and the second value is the maximum duration. + */ + swingDurationThreshold: [number, number]; /** * The amount of pixels the balloon should wave back and forth. * @@ -45,27 +57,20 @@ export type BalloonOptions = { export default class Default extends Balloon { public static readonly spawn_chance: number = 0.9; - public readonly name = 'default'; - public readonly options: BalloonOptions = { - dir_name: this.name, - imageUrl: '/icon.png', - popSoundUrl: '/pop.mp3', - swingOffset: 15, - waveDegrees: 8, - }; - - /** - * The duration thresholds for the rise animation. - * - * The first value is the minimum duration and the second value is the maximum duration. - */ - public readonly riseDurationThreshold: [number, number] = [10000, 15000]; - /** - * The duration thresholds for the swing animation. - * - * The first value is the minimum duration and the second value is the maximum duration. - */ - public readonly swingDurationThreshold: [number, number] = [2, 4]; + public get name(): 'default' { + return 'default'; + } + public get options(): BalloonOptions { + return { + dir_name: this.name, + imageUrl: '/icon.png', + popSoundUrl: '/pop.mp3', + riseDurationThreshold: [10000, 15000], + swingDurationThreshold: [2, 4], + swingOffset: 15, + waveDegrees: 8, + }; + } /** * The image element for the balloon image. @@ -105,12 +110,12 @@ export default class Default extends Balloon { const size = random(50, 75); const positionX = random(5, 95); const riseDuration = random( - this.riseDurationThreshold[0], - this.riseDurationThreshold[1] + this.options.riseDurationThreshold[0], + this.options.riseDurationThreshold[1] ); const waveDuration = random( - this.swingDurationThreshold[0], - this.swingDurationThreshold[1] + this.options.swingDurationThreshold[0], + this.options.swingDurationThreshold[1] ); // Load the pop sound From e98efd37d3393c88259e2f646e8a78772964636a Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 2 Jul 2024 21:24:54 +0200 Subject: [PATCH 13/19] Update confetti and gold options and name --- src/balloons/confetti.ts | 4 +++- src/balloons/gold.ts | 19 ++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/balloons/confetti.ts b/src/balloons/confetti.ts index 0efc4771..a05d4ddf 100644 --- a/src/balloons/confetti.ts +++ b/src/balloons/confetti.ts @@ -5,7 +5,9 @@ import Default from './default'; export default class Confetti extends Default { public static readonly spawn_chance: number = 0.1; // @ts-ignore - public readonly name = 'confetti'; + public get name(): 'confetti' { + return 'confetti'; + } private readonly mask = document.createElement('img'); diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index 2649db04..773b9bfd 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,16 +1,17 @@ -import Default from './default'; +import Default, { BalloonOptions } from './default'; export default class Gold extends Default { public static readonly spawn_chance: number = 0.05; // @ts-ignore - public readonly name = 'gold'; + public get name(): 'gold' { + return 'gold'; + } - constructor() { - super(); - this.options.imageUrl = `/../${this.name}/balloon.svg`; - this.riseDurationThreshold[0] = 15000; - this.riseDurationThreshold[1] = 20000; - this.swingDurationThreshold[0] = 3; - this.swingDurationThreshold[1] = 4; + public get options(): BalloonOptions { + return { + ...super.options, + riseDurationThreshold: [15000, 20000], + swingDurationThreshold: [3, 4], + }; } } From 8225bfe48fa8d59021406fcd74ea91aad0b29375 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Tue, 2 Jul 2024 21:38:45 +0200 Subject: [PATCH 14/19] Add balloon.originalPath function to make overriding the options easier --- src/balloons/default.ts | 18 ++++++++++++++++-- src/balloons/gold.ts | 1 + 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/balloons/default.ts b/src/balloons/default.ts index 60ce80b7..12190a69 100644 --- a/src/balloons/default.ts +++ b/src/balloons/default.ts @@ -57,14 +57,16 @@ export type BalloonOptions = { export default class Default extends Balloon { public static readonly spawn_chance: number = 0.9; + public get name(): 'default' { return 'default'; } + public get options(): BalloonOptions { return { dir_name: this.name, - imageUrl: '/icon.png', - popSoundUrl: '/pop.mp3', + imageUrl: this.originalPath('/icon.png'), + popSoundUrl: this.originalPath('/pop.mp3'), riseDurationThreshold: [10000, 15000], swingDurationThreshold: [2, 4], swingOffset: 15, @@ -106,6 +108,18 @@ export default class Default extends Balloon { importStylesheet('default-styles', this.resourceLocation + 'default.css'); } + /** + * Get the path for the resources of the default balloon. + * + * This should only be used in the balloon.options. + * + * @param path The path of the resource. + * @returns The original path of the resource. + */ + protected originalPath(path: string): string { + return '/../default' + path; + } + public build() { const size = random(50, 75); const positionX = random(5, 95); diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index 773b9bfd..d49df763 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -10,6 +10,7 @@ export default class Gold extends Default { public get options(): BalloonOptions { return { ...super.options, + imageUrl: '/balloon.svg', riseDurationThreshold: [15000, 20000], swingDurationThreshold: [3, 4], }; From 2d79e88d942a06ebe0506d41242344a32acf731a Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Fri, 5 Jul 2024 09:11:39 +0200 Subject: [PATCH 15/19] Add size option to default balloon close #249 --- src/balloons/default.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/balloons/default.ts b/src/balloons/default.ts index 12190a69..c7defa3f 100644 --- a/src/balloons/default.ts +++ b/src/balloons/default.ts @@ -31,6 +31,12 @@ export type BalloonOptions = { * If not provided, the default sound will be used. */ popSoundUrl: string; + /** + * The size of the balloon. + * + * The first value is the minimum size and the second value is the maximum size. + */ + size: [number, number]; /** * The duration thresholds for the rise animation. * @@ -67,6 +73,7 @@ export default class Default extends Balloon { dir_name: this.name, imageUrl: this.originalPath('/icon.png'), popSoundUrl: this.originalPath('/pop.mp3'), + size: [50, 75], riseDurationThreshold: [10000, 15000], swingDurationThreshold: [2, 4], swingOffset: 15, @@ -121,8 +128,8 @@ export default class Default extends Balloon { } public build() { - const size = random(50, 75); const positionX = random(5, 95); + const size = random(this.options.size[0], this.options.size[1]); const riseDuration = random( this.options.riseDurationThreshold[0], this.options.riseDurationThreshold[1] From 27fc2d072b6ae9cb721aba73bbfef15ec529e73c Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Fri, 5 Jul 2024 09:23:05 +0200 Subject: [PATCH 16/19] Slightly increase golden balloon size --- src/balloons/gold.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index d49df763..c3d00ec8 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,7 +1,7 @@ import Default, { BalloonOptions } from './default'; export default class Gold extends Default { - public static readonly spawn_chance: number = 0.05; + public static readonly spawn_chance: number = 1.05; // @ts-ignore public get name(): 'gold' { return 'gold'; @@ -13,6 +13,7 @@ export default class Gold extends Default { imageUrl: '/balloon.svg', riseDurationThreshold: [15000, 20000], swingDurationThreshold: [3, 4], + size: [100, 125], }; } } From b168d885e7382533c947449b06ba49daabba7c08 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Sat, 6 Jul 2024 12:18:58 +0200 Subject: [PATCH 17/19] Add a golden shine to golden balloon --- resources/balloons/gold/balloon.svg | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/resources/balloons/gold/balloon.svg b/resources/balloons/gold/balloon.svg index b0b303ce..aaf16a0c 100644 --- a/resources/balloons/gold/balloon.svg +++ b/resources/balloons/gold/balloon.svg @@ -6,6 +6,17 @@ + + + + + + + + + + + Date: Sun, 7 Jul 2024 21:17:27 +0200 Subject: [PATCH 18/19] Fix gold balloon spawn rate, again --- src/balloons/gold.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/balloons/gold.ts b/src/balloons/gold.ts index c3d00ec8..de632190 100644 --- a/src/balloons/gold.ts +++ b/src/balloons/gold.ts @@ -1,7 +1,7 @@ import Default, { BalloonOptions } from './default'; export default class Gold extends Default { - public static readonly spawn_chance: number = 1.05; + public static readonly spawn_chance: number = 0.05; // @ts-ignore public get name(): 'gold' { return 'gold'; From bc53ec0da7b35fcea6b308a698b7ea14f0686c06 Mon Sep 17 00:00:00 2001 From: SimonStnn Date: Sun, 7 Jul 2024 22:10:51 +0200 Subject: [PATCH 19/19] Add golden balloon test --- tests/balloons/gold.test.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 tests/balloons/gold.test.ts diff --git a/tests/balloons/gold.test.ts b/tests/balloons/gold.test.ts new file mode 100644 index 00000000..d7c378fb --- /dev/null +++ b/tests/balloons/gold.test.ts @@ -0,0 +1,23 @@ +import { Gold } from '@/balloons'; +import fetchMock from 'jest-fetch-mock'; + +fetchMock.enableMocks(); + +describe('Gold Balloon', () => { + let balloon: Gold; + + beforeEach(() => { + balloon = new Gold(); + + fetchMock.resetMocks(); + }); + + test('name should be "gold"', () => { + expect(balloon.name).toBe('gold'); + }); + + test('name should be the same as the class name', () => { + expect(balloon.name).toBe('gold'); + expect(balloon.name).toBe(Gold.name.toLowerCase()); + }); +});