Giter VIP home page Giter VIP logo

moshang-xc / lottery Goto Github PK

View Code? Open in Web Editor NEW
3.3K 21.0 788.0 10.17 MB

🎉🌟✨🎈年会抽奖程序,基于 Express + Three.js的 3D 球体抽奖程序,奖品🧧🎁,文字,图片,抽奖规则均可配置,😜抽奖人员信息Excel一键导入😍,抽奖结果Excel导出😎,给你的抽奖活动带来全新酷炫体验🚀🚀🚀

Home Page: https://moshang-xc.github.io/lottery/

License: MIT License

JavaScript 85.60% CSS 11.12% HTML 1.69% Dockerfile 1.14% Shell 0.44%
lottery prizes threejs nodejs lucky lucky-wheel luckydraw

lottery's Introduction

Lottery program

Annual dinner lottery program, 3D sphere raffle, support for configuration of prize information, import participants information by Excel, and export lottery results by Excel If programm is helpful for you😎😎😎, it will be greatful to comment us with⭐star⭐ 😘😘😘😍🥰🎉🎈🎃

点击跳转至中文使用文档

Try it now: https://moshang-xc.github.io/lottery/

Technology Stack

Technology stack: Node + Express + Three.js

Server: Express + Node

Web Page: Three.js, References to the official 3D example of Three.js

Function Description:

  1. The result can ben save and downloaded to excel synchronously🎉
  2. The winner will not participate in the drawing, and the drawing person can be drawn again if he/she not on site🎁
  3. Refresh or trun off the server will save the winner data and will not resrt the lottery data, only by click the reset button on the page can the lottery data be reset🧧
  4. The number of prizes is able to configure🎈
  5. After all the prizes have been drawn, you can continue to draw special prizes(For example:Red pockets, additional prizes, etc). By default, one is extracted at once🧨

Preview

Try it now: https://moshang-xc.github.io/lottery/

lottery.gif

index.jpg

start.jpg

end.jpg

Install

git clone https://github.com/moshang-xc/lottery.git

cd lottery

# Server plugin installation
cd server
npm install

# Front-end plugin installation
cd ../product
npm install

# Package
npm run build

# Running
npm run serve

# Developing & debugging
npm run dev

Directory Structure

Lottery
├── product
│   ├── src
│   │   ├── lottery
│   │   │   └── index.js
│   │   ├── lib
│   │   ├── img
│   │   ├── css
│   │   └── data
│   ├── package.json
│   └── webpack.config.js
├── server
│   ├── config.js
│   ├── server.js
│   └── package.js
  1. product is Front-end page directory
  2. server is Server directory
  3. config is Profile for prize information

Configuration Information

Lottery personnel list information configuration

The lottery list information is in the server/data/user.xlsx file, information could only fill in base on the format, file name and title are not able to revise

Prize information configuration

Prize information is filled in the server/config.js file, and the file name cannot be modified.

The configuration of the prizes is described as follows:

Parameter Value Type Description
type Number Type of prize, unique identifier, 0 is the placeholder for the default special prize, other prizes cannot be used
count Number Prizes amount
text String Prizes name
title String Prizes description
img String Image URL of the prize, image is underimg catalog
// Prize information, the first item is reserved and cannot be modified. Other items can be modified as required
// Prize in
let prizes = [{
        type: 0,
        count: 1000,
        title: "",
        text: "Special Price"
    },
    {
        type: 1,
        count: 2,
        text: "Special Price"
        title: "Mystery jackpot"
        img: "../img/secrit.jpg"
    },
    {
        type: 2,
        count: 5,
        text: "First prize"
        title: "Mac Pro",
        img: "../img/mbp.jpg"
    }
    ...
];

The configuration of the number of prizes drawn each time

EACH_COUNTIt is used to configure the number of lottery draws each time, which corresponds to the prizes one by one. For example, the number of lottery draws corresponding to the above prize configuration is as follows:

const EACH_COUNT = [1, 1, 5];

Configuration above means the order of the number of prizes to be drawn at one time is:one special prize per time, one grand prize per time and 5 first prize per time.

Enterprise Identity Configuration

This identification is used to display on the lottery card.

const COMPANY = "MoShang";

Docker Deployment plan

Summary

This project is support to deploy by Docker. Docker is a platform with lightweight containerization, allows you to quickly deploy, test and run the applications. This text will introduce how to deploy the project by Docker.

System Requirement

Before you use the Docker to deploy the project, you need to ensure you have download below software:

  • Docker (Please refer Docker official file to get the installation instructions)
  • Docker Compose

Installation

  1. Download and unzip the source code for the project

  2. Access the project directory after unzipped the file

  3. Execute the following command to build the Docker mirror image:

    ./build.sh [TAG]
    

    It will use Dockerfile to set up the Docker mirror image named lottery:[TAG]. If no tag is specified, the 'latest' tag is used by default

  4. Execute the following command to run the local container:

    ./dev.sh [TAG]
    

    This will start the container and deploy the application in the Docker container. You can test loacally to ensure all running fulently.
    Please be pay attention that all applicaiton in the container will monitor port 8888 and port 443.

  5. Execute the following command to tag the Docker mirror image and push it to the remote Docker repository

    ./tagpush.sh [TAG]
    

    It will tag the Docker mirror image and push it to the remote Docker repository, please build up your repo at https://hub.docker.com/ if you want to us Docker official hub.

  6. Ensure it has a file named docker-compose.yml and add below information:

    version: '3.8'
    
    volumes:
      lottery_log:
    
    services:
      lottery:
        container_name: lottery
        expose:
          - 8888
        ports:
          - "28458:8888"
          - "443:443"
        volumes:
          - "lottery_log:/var/log"
        image: "panda1024/lottery:[TAG]" 
        restart: always
    

Kindly take note that [TAG] should be replaced with the name of the mirror image you pushed to the Docker repository

  1. Run the following command in the project directory on the server to deploy the application using Docker Compose:
docker-compose up -d

This will start a Docker Compose stack and deploy the project into it. Note that port 8888 and port 443 of the container are mapped to port 8888 and port 443 on the server. If you wish to use a different port, please change the docker-compose.yml file accordingly.

License

MIT

lottery's People

Contributors

aras-ax avatar dependabot[bot] avatar jessytsu1 avatar yiliangjianghu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lottery's Issues

打包不能使用

请问一下,这个打包是在product中打包吗,打包出来的文件不呢正常访问

特别奖概率问题及少量抽奖人员抽取完毕后系统异常

1、当所有奖项都抽取完毕后,临时抽取的特别奖经测试发现是从所有奖项获得者之外抽取的,并不是所有人概率都相同;
2、特别奖将所有人都抽取完毕后,Uncaught TypeError: Cannot read property '1' of undefined``Uncaught (in promise) TypeError: Cannot read property '1' of undefined,所有按钮失效,isLotting 持久 false。

lottery使用说明

您好,
感谢您开发了优秀的抽奖程序lottery,我们有个抽奖活动,计划使用您分享的开源代码,如果您有任何异议,可以随时与我们联络。
联系邮箱:[email protected]

部署

您好,项目很nice,请问这个怎么部署到服务器上呢?

请问如何设置重新抽奖人数

每次重新抽奖的人数和上一次的数量一样
不在场人员每次就一两个不会有这么多
所以应该怎么更改设置重新抽奖人数呢?

如何取消特别奖?

请问下特别奖是否可以取消呢 或者直接改为一等奖?测试了一下好像直接删除type 0 无效,或者特别奖是否可以改为有限

部署运行问题

您好,非常喜欢您的这个抽奖程序,只是在按照安装部署手册进行的时候,在server目录下面运行npm run serve时候报错,是不是我哪里的操作不正确呢,麻烦请您指教。
npm error

run serve报错,如图

issue

我该如何处理呢
加载EXCEL数据文件
lottery server listenig at http://:::8888
node:internal/errors:478
ErrorCaptureStackTrace(err);
^

Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:285:19)
at onErrorNT (node:internal/child_process:485:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn cmd',
path: 'cmd',
spawnargs: [ '/c', 'start', '""', '/b', '/wait', 'http://127.0.0.1:8888' ]
}

数据获取问题

在index.js 初始化数据时,因为获取数据有两个是异步接口,会导致未获奖人员名单,还未获取到,后续代码就执行的结果,导致界面本应该是展开的状态,结果却是球形

人员未到场

如果某个奖项抽8个人,其中只有1个或2个人未到场,可否只重新抽未到的,其他抽中的已到场人员不重抽?

安装进程卡在\product npm install

image
安装进程卡在
F:>cd lottery-master

F:\lottery-master>cd server

F:\lottery-master\server>npm install
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'F:\lottery-master\server\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 193 packages from 139 contributors and audited 264 packages in 35.104s
found 101 low severity vulnerabilities
run npm audit fix to fix them, or npm audit for details

F:\lottery-master\server>cd ../product
F:\lottery-master\product>npm install
[ ......] / extract:@webassemblyjs/helper-wasm-bytecode: sill extract @webassemblyjs/helper-wasm-bytecode@1.

无法完成安装

每次抽取人数bug

image
比如下图圈起来的地方
image
我第一次抽9个,第二次应该是抽剩下的部分,只剩下一个奖品,否则就会产生负数

抽奖函数的问题

抽奖函数里,currentLuckys.push(basicData.leftUsers.splice(luckyId, 1)[0]);
如果是重新抽奖,之前抽到的这部分人还是被剩余人员里减去了,实际上他们也是要参与抽奖的

抽奖建议

1.进入抽奖,配置年份,现在默认获取当前的日期年:2019 高亮
2.抽奖后的本次开奖人员自适应显示;如果设置成:10人,还是当行一排显示,超过人员显示被遮住了

项目很nice :-)

重复中奖

已经中奖名单,没有在抽奖池移除,出现一个人重复中奖

登录拦截

最好加一个登录拦截,安全一些。
谢谢楼主,我们年会就用你这个了。

错误

`[root@localhost product]# npm run serve

[email protected] serve
npm run start

[email protected] start
cd dist && node ../../server/index.js 8888

加载EXCEL数据文件
lottery server listenig at http://:::8888
/root/lottery/server/node_modules/opn/index.js:85
reject(new Error('Exited with code ' + code));
^

Error: Exited with code 3
at ChildProcess. (/root/lottery/server/node_modules/opn/index.js:85:13)
at Object.onceWrapper (node:events:510:26)
at ChildProcess.emit (node:events:390:28)
at maybeClose (node:internal/child_process:1064:16)
at Socket. (node:internal/child_process:450:11)
at Socket.emit (node:events:390:28)
at Pipe. (node:net:687:12)
`

使用

您好,请问您的这个项目可以自由使用吗?

bug

大佬这个抽奖奖品轮次为17轮次的时候,总是漏掉最后一个轮次,最开始的轮次总是不显示原始名字,而是直接显示特等奖

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.