Skip to content

Commit

Permalink
Merge pull request #125 from HereIsYui/master
Browse files Browse the repository at this point in the history 
猜拳红包修改&聊天室颜色选择器修改
  • Loading branch information
@adlered
adlered committed May 24, 2023
2 parents e84514e + f56ff64 commit b1b87fd
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 18 deletions.
Binary file modified src/main/resources/images/redpacket/gesture/paper.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/main/resources/images/redpacket/gesture/rock.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/main/resources/images/redpacket/gesture/scissors.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 45 additions & 8 deletions src/main/resources/js/chat-room.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ var x = 0;
var y = 0;
var isClick = true;
var thisClient = 'Web/PC网页端';
// 弹幕颜色选择器
var BarragerColorPicker = null;
var DarwColorPicker = null;
var ChatRoom = {
init: function () {
// 聊天窗口高度设置
Expand Down Expand Up @@ -484,15 +487,45 @@ var ChatRoom = {
$("#paintContent").slideUp(1000);
}
});
BarragerColorPicker = new XNColorPicker({
color: "#ffffff",
selector: "#selectBarragerColor",
showhistorycolor:false,
colorTypeOption:'single',
autoConfirm:true,
onError:function(e){},
onCancel:function(color){},
onChange:function(color){
},
onConfirm:function(color){
}
})
// 监听弹幕颜色
$('#selectBarragerColor').cxColor({
color: '#ffffff'
});
// $('#selectBarragerColor').cxColor({
// color: '#ffffff'
// });
// 监听修改颜色
$('#selectColor').cxColor();
$("#selectColor").bind("change", function () {
ChatRoom.changeColor(this.value);
});
// $('#selectColor').cxColor();
DarwColorPicker = new XNColorPicker({
color: "#000000",
selector: "#selectColor",
showhistorycolor:false,
colorTypeOption:'single',
autoConfirm:true,
onError:function(e){},
onCancel:function(color){},
onChange:function(color){
// console.log("change",color.color.rgba)
ChatRoom.changeColor(color.color.rgba);
},
onConfirm:function(color){
// console.log("change",color.color.rgba)
ChatRoom.changeColor(color.color.rgba);
}
})
// $("#selectColor").bind("change", function () {
// ChatRoom.changeColor(this.value);
// });
$("#selectWidth").bind("change", function () {
let width = $("#selectWidth").val();
ChatRoom.changeWidth(width);
Expand All @@ -501,7 +534,8 @@ var ChatRoom = {
setInterval(ChatRoom.reloadMessages, 15 * 60 * 1000);
},
sendBarrager: function () {
let color = $("#selectBarragerColor")[0].value;
// let color = $("#selectBarragerColor")[0].value;
let color = BarragerColorPicker.color.rgba;
let content = $('#barragerInput').val();
let json = {
color: color,
Expand Down Expand Up @@ -1543,6 +1577,9 @@ ${result.info.msg}
ChatRoom.renderRedPacket(result.who, result.info.count, result.info.got, result.recivers, result.diceRet, result.info.userName)
if (result.info.count === result.info.got) {
$("#chatroom" + oId).find(".hongbao__item").css("opacity", ".36").attr('onclick', "ChatRoom.unpackRedPacket(" + oId + ")");
if(!$("#chatroom" + oId).find(".hongbao__item").hasClass('opened')){
$("#chatroom" + oId).find(".hongbao__item").addClass('opened')
}
if (result.dice === true) {
$("#chatroom" + oId).find(".redPacketDesc").html("已开盘");
} else {
Expand Down
41 changes: 41 additions & 0 deletions src/main/resources/js/xncolorpicker.min.js
View file

Large diffs are not rendered by default.

28 changes: 24 additions & 4 deletions src/main/resources/scss/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2484,6 +2484,9 @@ code .dec {
margin: 5px 0;
}

.chats__content .vditor-reset{
overflow: visible;
}
.hongbao__item {
position: relative;
background-color: var(--layer-background-color);
Expand All @@ -2505,35 +2508,52 @@ code .dec {
z-index: 128;
top: 0;
left: 0;
display: flex;
/*display: flex;
justify-content: space-around;
align-items: center;
align-items: center;*/
width: 100%;
height: 100%;
padding: 5px;
opacity: 0;
opacity: 1;
transition: .5s;
box-sizing: border-box;
}
.hongbao__item:hover .hongbao__finger_guessing{
/*.hongbao__item:hover .hongbao__finger_guessing,
.hongbao__item:active .hongbao__finger_guessing{
opacity: 1;
background: rgba(0,0,0,.3);
}*/

.opened .hongbao__finger_guessing{
display: none;
}

.hongbao__finger_guessing_icon{
position: absolute;
right: -25px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid transparent;
transition: .2s;
}
.hongbao__finger_guessing_icon:hover{
border-color:#5c1151;
}

.hongbao__finger_guessing_icon:nth-child(1){
top: -25px;
background: url("../images/redpacket/gesture/rock.png") no-repeat center center;
background-size: contain;
}
.hongbao__finger_guessing_icon:nth-child(2){
top: 15px;
right: -50px;
background: url("../images/redpacket/gesture/scissors.png") no-repeat center center;
background-size: contain;
}
.hongbao__finger_guessing_icon:nth-child(3){
top: 55px;
background: url("../images/redpacket/gesture/paper.png") no-repeat center center;
background-size: contain;
}
Expand Down
40 changes: 40 additions & 0 deletions src/main/resources/scss/mobile-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2758,7 +2758,12 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de
animation: swim 15s linear;
}*/

.chats__content .vditor-reset{
overflow: visible;
}

.hongbao__item {
position: relative;
background-color: var(--layer-background-color);
color: var(--layer-color);
cursor: pointer;
Expand All @@ -2783,6 +2788,41 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de
margin: 10px 0
}


.opened .hongbao__finger_guessing{
display: none;
}

.hongbao__finger_guessing_icon{
position: absolute;
right: -25px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid transparent;
transition: .2s;
}
.hongbao__finger_guessing_icon:hover{
border-color:#5c1151;
}

.hongbao__finger_guessing_icon:nth-child(1){
top: -25px;
background: url("../images/redpacket/gesture/rock.png") no-repeat center center;
background-size: contain;
}
.hongbao__finger_guessing_icon:nth-child(2){
top: 15px;
right: -50px;
background: url("../images/redpacket/gesture/scissors.png") no-repeat center center;
background-size: contain;
}
.hongbao__finger_guessing_icon:nth-child(3){
top: 55px;
background: url("../images/redpacket/gesture/paper.png") no-repeat center center;
background-size: contain;
}

.hide-list {
--border-color: #d1d5da;
--second-color: rgba(88, 96, 105, 0.36);
Expand Down
7 changes: 4 additions & 3 deletions src/main/resources/skins/classic/chat-room.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@
<button class="green" onclick="ChatRoom.send()">发送</button>
</div>
<div id="paintContent" style="display: none;">
<div style="margin: 20px 0 0 0;">
<input id="selectColor" name="mycolor" type="text" class="input_cxcolor" readonly="" style="background-color: rgb(0, 0, 0);">
<div style="margin: 20px 0 0 0;display: flex">
<div id="selectColor" style="margin:0 10px;border:1px solid #000"></div>
<input id="selectWidth" type="number" inputmode="decimal" pattern="[0-9]*" min="1" value="3" style="width: 50px">
</div>
<canvas id="paintCanvas" width="500" height="490"></canvas>
Expand All @@ -131,7 +131,7 @@
</div>
</div>
<div style="margin-top: 10px;">
弹幕颜色：<input id="selectBarragerColor" name="mycolor" type="text" class="input_cxcolor" readonly="">
弹幕颜色：<div id="selectBarragerColor" style="display: inline-block;border:1px solid #000"></div>
</div>
<div class="ft__smaller ft__fade" style="margin-top: 10px; margin-bottom: 10px;">发送弹幕每次将花费 <b><span id="barragerCost">${barragerCost}</span></b> <span id="barragerUnit">${barragerUnit}</span></div>
</div>
Expand Down Expand Up @@ -208,6 +208,7 @@
<script src="${staticServePath}/js/chat-room${miniPostfix}.js?${staticResourceVersion}"></script>
<script src="${staticServePath}/js/lib/viewer.min.js"></script>
<script src="${staticServePath}/js/lib/barrager/jquery.barrager.min.js"></script>
<script src="${staticServePath}/js/xncolorpicker.min.js"></script>
<script>
Label.addBoldLabel = '${addBoldLabel}';
Label.addItalicLabel = '${addItalicLabel}';
Expand Down
7 changes: 4 additions & 3 deletions src/main/resources/skins/mobile/chat-room.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,8 @@
</div>
</div>
<div id="paintContent" style="display: none">
<div style="margin: 20px 0 0 0;">
<input id="selectColor" name="mycolor" type="text" class="input_cxcolor" readonly="" style="background-color: rgb(0, 0, 0);">
<div style="margin: 20px 0 0 0;display: flex">
<div id="selectColor" style="margin:0 10px;border:1px solid #000"></div>
<input id="selectWidth" type="number" inputmode="decimal" pattern="[0-9]*" min="1" value="3" style="width: 50px">
</div>
<canvas id="paintCanvas" width="306" height="300"></canvas>
Expand Down Expand Up @@ -148,7 +148,7 @@
</div>
</div>
<div style="margin-top: 10px;">
弹幕颜色：<input id="selectBarragerColor" name="mycolor" type="text" class="input_cxcolor" readonly="">
弹幕颜色：<div id="selectBarragerColor" style="display: inline-block;border:1px solid #000"></div>
</div>
<div class="ft__smaller ft__fade" style="margin-top: 10px; margin-bottom: 10px;">发送弹幕每次将花费 <b><span id="barragerCost">${barragerCost}</span></b> <span id="barragerUnit">${barragerUnit}</span></div>
</div>
Expand Down Expand Up @@ -195,6 +195,7 @@
<script src="${staticServePath}/js/chat-room${miniPostfix}.js?${staticResourceVersion}"></script>
<script src="${staticServePath}/js/lib/viewer.min.js"></script>
<script src="${staticServePath}/js/lib/barrager/jquery.barrager.min.js"></script>
<script src="${staticServePath}/js/xncolorpicker.min.js"></script>
<script>
Label.addBoldLabel = '${addBoldLabel}';
Label.addItalicLabel = '${addItalicLabel}';
Expand Down

0 comments on commit b1b87fd

Please sign in to comment.