Skip to content
This repository has been archived by the owner on Nov 24, 2022. It is now read-only.

Commit

Permalink
Merge pull request #3 from kdxcxs/element
Browse files Browse the repository at this point in the history
update to latest bilibili live rules
  • Loading branch information
kdxcxs authored Jul 20, 2020
2 parents ca0e16a + 70d3893 commit 3dddde4
Show file tree
Hide file tree
Showing 14 changed files with 8,718 additions and 8,563 deletions.
17 changes: 11 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ Bilibili直播弹幕抽奖

![screenshot](screenshot.png)

## :bookmark_tabs:内容列表
## :bookmark_tabs: 内容列表

- [背景](#背景)
- [安装](#安装)
- [使用说明](#使用说明)
- [使用许可](#使用许可)

## :triangular_flag_on_post:背景
## :triangular_flag_on_post: 背景

许多主播在直播抽奖时都是通过截图来抽奖的,而我从没中过,想来想去越想越气,这肯定是因为截图这种方法不公平!

于是就有了这个项目……

(然而我还是没中过)

## :hourglass:安装
## :hourglass: 安装

- 使用 yarn

Expand All @@ -35,16 +35,21 @@ yarn install
npm install
```

# :pushpin: ToDo

- [ ] 检查抽取人数是否大于观众总数 [Lottery.vue](./src/components/Lottery.vue)
- [ ] 美化
- [ ] 支持返回之前步骤
- [ ] 支持一次抽奖完成后再次抽奖
- [ ] 支持指定弹幕内容参加抽奖

## :bell:使用说明
## :bell: 使用说明

1. 输入房间号后点击 `进入房间` 按钮开始记录发送弹幕的观众 uid 和昵称,不会重复记录。
2. 点击 `停止记录` 按钮后停止记录弹幕。
3. 填入需要抽取的人数(小于等于刚才记录的总人数)
4. 点击 `随机抽奖` 按钮在刚才记录过程中所有发送弹幕的观众里面随机抽取指定数量观众。
5. 点击中奖观众的用户名可跳转到该观众的B站主页,方便私信。

## :page_with_curl:使用许可
## :page_with_curl: 使用许可

[WTFPL](LICENSE) :copyright: kdxcxs
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"bilibili-live-ws": "^5.0.1",
"core-js": "^3.6.4",
"element-ui": "^2.4.5",
"vue": "^2.6.11",
"vuetify": "^2.2.11",
"webpack": "^4.42.1"
},
"devDependencies": {
Expand All @@ -22,9 +23,10 @@
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-element": "~1.0.1",
"vue-cli-plugin-element-ui": "~1.1.4",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
Expand Down
Binary file modified screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 20 additions & 8 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,42 +30,54 @@
</template>

<script>
document.title = 'BiliBili直播弹幕抽奖'
document.title = 'BiliBili直播弹幕抽奖';
import connect from "./websocketClient/BiliLiveWs";
import Step from "./components/Step";
import RoomChoosing from "./components/RoomChoosing";
import Recording from "./components/Recording";
import Lottery from "./components/Lottery";
import Result from "./components/Result";
import { Loading } from 'element-ui';
export default {
name: 'App',
components: {Result, Lottery, Recording, RoomChoosing },
components: { Step, RoomChoosing, Recording, Lottery, Result },
data: () => ({
currentStep: 1,
roomid: 0,
inRoom: false,
recording: false,
involvedUid: [], // 所有参与用户的uid
involvedUname: {}, // 所有参与用户的用户名
luckyDogs: []
luckyDogs: [],
loadingInstance: Object
}),
methods: {
enterRoom: function (rid) {
this.involvedUid = [];
this.involvedUname = {};
this.recording = true;
this.roomid = parseInt(rid);
this.connectWs();
this.currentStep ++;
this.loadingInstance = Loading.service({target: 'html',
text: '正在进入直播间'
});
},
stopRecording: function () {
this.recording = false;
this.currentStep ++;
},
appendUser: function (luckyIndex) {
this.luckyDogs.push(luckyIndex);
},
onDanmu: function (userInfo) {
if (this.recording && !this.involvedUid.includes(userInfo[2][0])){
this.involvedUid.push(userInfo[2][0].toString());
this.involvedUname[userInfo[2][0]] = userInfo[2][1];
if (this.recording && !this.involvedUid.includes(userInfo[0])){
if (!this.inRoom) {
this.inRoom = true;
this.loadingInstance.close();
}
this.involvedUid.push(userInfo[0].toString());
this.involvedUname[userInfo[0]] = userInfo[1];
}
},
connectWs: function () {
Expand Down
152 changes: 76 additions & 76 deletions src/components/Lottery.vue
Original file line number Diff line number Diff line change
@@ -1,76 +1,76 @@
<template>
<div>
<v-dialog v-model="goalLegal" persistent max-width="290">
<v-card>
<v-card-title class="headline">抽取人数过多</v-card-title>
<v-card-text>所选抽取人数应小于参加观众人数</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text @click="goal = 1">确定</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-stepper-step step="3">
抽奖
</v-stepper-step>
<v-stepper-content step="3">
<p class="display-1 text-center purple--text">请选择人抽取人数</p>
<v-text-field
v-model="goal"
type="number"
label="抽取人数"
class="px-2"
outlined
></v-text-field>
<v-btn color="primary" @click="this.doLottery">随机抽奖</v-btn>
</v-stepper-content>
</div>
</template>

<script>
export default {
name: "Lottery",
data: () => ({
goal: 1
}),
computed: {
goalLegal: function () {
return this.stepNow===3 && this.goal>=this.uids.length;
}
},
methods: {
randomNum: function (minNum, maxNum) {
// https://www.cnblogs.com/starof/p/4988516.html
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
default:
return 0;
}
},
doLottery: function () {
if (!this.goalLegal) {
this.nextStep();
let count = 0;
let randomIndex = 0;
while (count < this.goal){
randomIndex = this.randomNum(0, this.uids.length-1);
if (!this.luckyDogs.includes(randomIndex)) {
this.luckyDogs.push(randomIndex);
count ++;
}
}
}
}
},
props: {
stepNow: Number,
uids: Array,
luckyDogs: Array,
nextStep: Function
}
}
</script>
<template>
<div>
<v-dialog v-model="goalLegal" persistent max-width="290">
<v-card>
<v-card-title class="headline">抽取人数过多</v-card-title>
<v-card-text>所选抽取人数应小于参加观众人数</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text @click="goal = 1">确定</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-stepper-step step="3">
抽奖
</v-stepper-step>
<v-stepper-content step="3">
<p class="display-1 text-center purple--text">请选择人抽取人数</p>
<v-text-field
v-model="goal"
type="number"
label="抽取人数"
class="px-2"
outlined
></v-text-field>
<v-btn color="primary" @click="this.doLottery">随机抽奖</v-btn>
</v-stepper-content>
</div>
</template>

<script>
export default {
name: "Lottery",
data: () => ({
goal: 1
}),
computed: {
goalLegal: function () {
return this.stepNow===3 && this.goal>=this.uids.length;
}
},
methods: {
randomNum: function (minNum, maxNum) {
// https://www.cnblogs.com/starof/p/4988516.html
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
default:
return 0;
}
},
doLottery: function () {
if (!this.goalLegal) {
this.nextStep();
let count = 0;
let randomIndex = 0;
while (count < this.goal){
randomIndex = this.randomNum(0, this.uids.length-1);
if (!this.luckyDogs.includes(randomIndex)) {
this.luckyDogs.push(randomIndex);
count ++;
}
}
}
}
},
props: {
stepNow: Number,
uids: Array,
luckyDogs: Array,
nextStep: Function
}
}
</script>
48 changes: 24 additions & 24 deletions src/components/Recording.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<template>
<div>
<v-stepper-step step="2">
记录参与观众
</v-stepper-step>
<v-stepper-content step="2">
<p class="display-1 text-center purple--text">当前已有</p>
<p class="display-2 text-center orange--text">{{ involvedInTotal }}</p>
<p class="display-1 text-center purple--text">名观众参与</p>
<v-btn color="primary" @click="stopRec">停止记录</v-btn>
<v-btn text>返回</v-btn>
</v-stepper-content>
</div>
</template>

<script>
export default {
name: "Recording",
props: {
involvedInTotal: Number,
stopRec: Function
}
}
</script>
<template>
<div>
<v-stepper-step step="2">
记录参与观众
</v-stepper-step>
<v-stepper-content step="2">
<p class="display-1 text-center purple--text">当前已有</p>
<p class="display-2 text-center orange--text">{{ involvedInTotal }}</p>
<p class="display-1 text-center purple--text">名观众参与</p>
<v-btn color="primary" @click="stopRec">停止记录</v-btn>
<v-btn text>返回</v-btn>
</v-stepper-content>
</div>
</template>

<script>
export default {
name: "Recording",
props: {
involvedInTotal: Number,
stopRec: Function
}
}
</script>
Loading

0 comments on commit 3dddde4

Please sign in to comment.