icelam / random-name-picker

Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API.
https://pinkylam.me/playground/random-name-picker
MIT License
115 stars 140 forks source link

[Feature request] Add option to draw multiple names #24

Open singsingwong2 opened 9 months ago

singsingwong2 commented 9 months ago

Hi,

This tool is great. I would like to help but I don't really good at node.js.

It will be great if this tool can allow user to draw multiple names from the list.

Also, it is also good if we can fine tune the time for the reel to rotate. If there is other quick way to do this, please let me know.

Thanks, Sing

loupdaniel commented 9 months ago

Hi @singsingwong2, I'm not the person who developed this awesome tool but you can check my repo that I forked from this project.

I've added two more slots and added each of the three slots' titles for picking song titles, genres, and styles. You can edit the titles in the src/pages/landing.pug in my repo(https://github.com/loupdaniel/Sync-Perfect) by forking it to your own repo if you want.

.slots-container
      .slot-group
        .slot-text
          p Song Title

        .slot
          .slot__outer
            .slot__inner
              .slot__shadow
                #reel.reel

      .slot-group
        .slot-text
          p Genre

        .slot
          .slot__outer
            .slot__inner
              .slot__shadow
                #genrereel.genrereel

      .slot-group
        .slot-text
          p Style

        .slot
          .slot__outer
            .slot__inner
              .slot__shadow
                #stylereel.stylereel

Random Name Picker for Lucky Draw - Chrome 2024-02-06 오후 11_11_12

icelam commented 9 months ago

Hi @singsingwong2,

Thank you for your feedback regarding the lucky draw app. Originally, the app was created to facilitate a lucky draw event for Chinese New Year at my company happened couple of years ago. At the moment, I don't have any immediate plans to implement new features, particularly for the purpose of drawing multiple names. Incorporating such functionality would require a redesign of the user interface to ensure a seamless user experience.

That being said, I do believe that allowing customization of the animation speed is a valuable suggestion. I will consider adding support for this feature or include code customization guidelines in README in the future. Your input is appreciated, and I will take it into account for future updates.

singsingwong2 commented 9 months ago

That's sad. Some other lucky draw online tool suggest drawing multiple items but their UI is not as fancy as yours.

I do a quick (and dirty) hack for my purpose (same as you, I need to use it in annual dinner for Chinese new year XD) See if I can have more time to recode it and make up a patch for you to review and merge.

image

icelam commented 9 months ago

Hi @singsingwong2,

Thank you for sharing your quick hack. Your patch on the UI does look promising. However, I would prefer a more careful rethinking of the UI design. The reason for this is that the number of name picks and the height of the screen can vary, and I want to ensure the best user experience.

If we continue with the current slot machine UI for picking a large number of names at once, there is a possibility that a scroll bar might appear on the webpage. This could potentially impact the user experience negatively. On the other hand, I want to avoid imposing an upper limit on the number of names that can be drawn at once.

Given this consideration, I think I will need some additional time to brainstorm and come up with a solution that addresses these concerns for supporting generic usage. If you have any further ideas, please feel free to share them, and I will definitely take them into account.