Is there a way to customize the background to an image, and make the draw start and stop when button is pressed?

[itjomglobal]

We had the opportunity to use it for a physical event in the past and found it incredibly useful.

We were wondering if you offer paid customization services for your project. We have specific requirements that align with our upcoming events

[keoToto]

It is my first time using this App and i am interest in Random Name Picker Game.
How much is the fee for changing the background?
Thank you

[itjomglobal]

@icelam Is there an option to do this?

[icelam]

@itjomglobal, thank you for reaching out and providing positive feedback on this random name picker. I'm glad to hear that it was incredibly useful for your previous physical event. @keoToto, I also want to express my gratitude for your interest in our random name picker.

Regarding both of your inquiries about paid customization services, I regret to inform you that, at the moment, I do not offer any paid services for customization. However, I would be more than happy to guide you on the relevant code that you can customize to meet your specific requirements.

To customize the background, you can modify the following CSS code:

random-name-picker/src/assets/scss/_base.scss

Lines 43 to 50 in 44481db

	background: linear-gradient(
	240deg,
	$color-red-step1 0.13%,
	$color-red-step2 26.19%,
	$color-red-step3 52.6%,
	$color-red-step4 79.08%,
	$color-red-step5 100%
	);

To make the slot stop only when the button is clicked, you will need to modify how the button responds to the click event and also the core logic of the slot itself:

random-name-picker/src/assets/js/app.ts

Lines 120 to 128 in 44481db

	// Click handler for "Draw" button
	drawButton.addEventListener('click', () => {
	if (!slot.names.length) {
	onSettingsOpen();
	return;
	}
	slot.spin();
	});

random-name-picker/src/assets/js/Slot.ts

Lines 158 to 228 in 44481db

	public async spin(): Promise<boolean> {
	if (!this.nameList.length) {
	console.error('Name List is empty. Cannot start spinning.');
	return false;
	}
	if (this.onSpinStart) {
	this.onSpinStart();
	}
	const { reelContainer, reelAnimation, shouldRemoveWinner } = this;
	if (!reelContainer || !reelAnimation) {
	return false;
	}
	// Shuffle names and create reel items
	let randomNames = Slot.shuffleNames<string>(this.nameList);
	while (randomNames.length && randomNames.length < this.maxReelItems) {
	randomNames = [...randomNames, ...randomNames];
	}
	randomNames = randomNames.slice(0, this.maxReelItems - Number(this.havePreviousWinner));
	const fragment = document.createDocumentFragment();
	randomNames.forEach((name) => {
	const newReelItem = document.createElement('div');
	newReelItem.innerHTML = name;
	fragment.appendChild(newReelItem);
	});
	reelContainer.appendChild(fragment);
	console.log('Displayed items: ', randomNames);
	console.log('Winner: ', randomNames[randomNames.length - 1]);
	// Remove winner form name list if necessary
	if (shouldRemoveWinner) {
	this.nameList.splice(this.nameList.findIndex(
	(name) => name === randomNames[randomNames.length - 1]
	), 1);
	}
	console.log('Remaining: ', this.nameList);
	// Play the spin animation
	const animationPromise = new Promise((resolve) => {
	reelAnimation.onfinish = resolve;
	});
	reelAnimation.play();
	await animationPromise;
	// Sets the current playback time to the end of the animation
	// Fix issue for animatin not playing after the initial play on Safari
	reelAnimation.finish();
	Array.from(reelContainer.children)
	.slice(0, reelContainer.children.length - 1)
	.forEach((element) => element.remove());
	this.havePreviousWinner = true;
	if (this.onSpinEnd) {
	this.onSpinEnd();
	}
	return true;
	}
	}

If you have any further questions, feel free to ask. Thank you again for your support and interest in this random name picker.

[itjomglobal]

@icelam thank you for the guidance. Can you provide more guidance on how we can deploy the project ourselves too?

I have tried to deploy the the project as web service in Render but have not succussed yet, is there any helpful link that might help us following to deploy your project?

[icelam]

@itjomglobal I don't have experience with using Web Service in Render, so my advice may be limited. However, I can provide some general guidance on how you can configure your pipeline to work with any CI/CD tools that supports Node.js with yarn / npm installed.

This app should work fine under common static web hosting choices. I do have experience on deploying it to AWS S3 Bucket / Azure Blob Storage using GitHub Actions / CircleCI. Here's a general outline of the steps you can follow:

1. First, install project dependencies. You can do this by running the command yarn install. This will ensure that all the necessary npm packages are installed and ready for the build process. To optimize costs and improve the efficiency of CI/CD pipeline, you can consider adding a cache for the node_modules directory. Check the documentation of your specific CI/CD tool to determine the cache configuration options available.

2. Next, you'll need to build the project. Use the command yarn build to initiate the build process. This command will compile and bundle the source code, generating the necessary assets used for hosting.

3. Once the build process is complete, you'll need to copy all the generated assets located under the /dist directory. The specific command to accomplish this may vary depending on the CI/CD tool and OS you're using. Typically, you'll need to include a step in your pipeline that copies the contents of the /dist directory to a storage accessible by your chosen static web hosting service.