HTML:
Я вывел список кейсов через CaseAction, @click="gostyle(1000)" открывает саму рулетку
<div v-for="item in caseAction" class="blockdonate">
<a>{{item.title}}</a>
<p>{{item.subtitle}}</p>
<h1>{{item.cost}} <img src="./assets/images/icons/donate.png" class="logo"></h1>
<div class="imgdonate"><img :src='"./assets/images/items/" + (item.background) + ".png"'></div>
<div @click="gostyle(1000)" class="btnbuydonate">Открыть</div>
</div>
JavaScript:
JS из html
//Рулетка
scrollContainInner() {
document.querySelector('.roulette-content__shop-case__item-wrapper__contain-inner').scrollTop = 0;
},
caseInit(data) {
this.caseData.selected = 1;
try {
mp.trigger('r:getCase', 1);
} catch (e) {
stackMessage('Failed to get case', 3);
}
},
setCase(e) {
this.caseData.items = e;
this.caseData.contain = [...this.caseData.items].sort((a, b) => a.rarity - b.rarity);
this.caseData.items = this.chanceCalculate(this.caseData.items);
},
openCase(type) {
if (this.caseData.active) {
return stackMessage('Roulette was be started', 3);
}
// stackMessage('Start roulette!', 1);
// stackMessage(`Roulette param:`, 2);
// stackMessage(`- active status ${this.caseData.active}`, 2);
// stackMessage(`- speen animation time ${this.caseData.animation.seconds}`, 2);
// stackMessage(`- speen animation type ${this.caseData.animation.type}`, 2);
// Get winId
try {
mp.trigger('r:getWinId', type);
} catch (e) {
stackMessage('Failed to get winId', 3);
}
},
getWinIdCallback(e, type) {
this.caseData.winId = e;
this.caseData.winItem = this.caseData.contain.find((item) => item.id === e);
this.caseData.active = true;
this.buttonBackLock = true;
if (type === 'quick') {
// stackMessage('Roulette stop!', 3);
// stackMessage(`Win id ${this.caseData.winId}`, 1);
this.caseData.active = false;
this.buttonBackLock = false;
this.modal = 10;
return;
}
let items = document.querySelectorAll('.roulette-content__shop-case__item-wrapper__drum-item');
for (let i = 0; i < items.length; i++) {
items[i].style.transition = 'unset';
items[i].style.transform = 'unset';
}
let calc = Math.floor(items[this.caseData.items.length - this.caseData.itemSetWin].offsetLeft - (document.querySelector('.roulette-content__shop-case__item-wrapper__drum').offsetWidth / 2) + items[0].offsetWidth / 2);
for (let i = 0; i < this.caseData.items.length; i++) {
this.caseData.items.splice(this.caseData.items.length - this.caseData.itemSetWin, 1, this.caseData.contain.find((item) => item.id === this.caseData.winId));
items[i].style.transition = `transform ${this.caseData.animation.seconds}s ${this.caseData.animation.type}`;
items[i].style.transform = `translateX(-${this.toVwConverter(calc)}vw)`;
}
setTimeout(() => {
// stackMessage('Roulette stop!', 3);
// stackMessage(`Win id ${this.caseData.winId}`, 1);
this.caseData.active = false;
this.buttonBackLock = false;
for (let i = 0; i < items.length; i++) {
items[i].style.transition = 'unset';
}
this.modal = 10;
}, this.caseData.animation.seconds * 1000);
},
chanceCalculate(data) {
let itemsMaxChance = 0,
itemsMinChance,
newItems = [];
for (let i = 0; i < data.length; i++) {
if (data[i].chance > itemsMaxChance) {
itemsMaxChance = data[i].chance;
}
}
itemsMinChance = itemsMaxChance;
for (let i = 0; i < data.length; i++) {
if (data[i].chance < itemsMinChance) {
itemsMinChance = data[i].chance;
}
}
for (let i = 0; i < this.caseData.minItems; i++) {
for (let r = 0; r < data.length; r++) {
if (newItems.length === this.caseData.minItems) continue;
if (data[r].chance >= this.getRandom(itemsMinChance, itemsMaxChance)) {
newItems.push(data[r]);
}
}
}
return newItems;
},
getRandom(min, max) {
return Number((Math.random() * (max - min) + min).toFixed(1));
},
toVwConverter(param) {
return (param / window.innerWidth * 100).toFixed(2);
},
getPrize(type, index) {
let id = arguments.length === 2 ? index : this.caseData.winItem.id;
let items = document.querySelectorAll('.roulette-content__shop-case__item-wrapper__drum-item');
mp.trigger('r:getprize', type, id);
// Generate new items in drum
this.caseData.items = this.chanceCalculate(this.caseData.contain);
for (let i = 0; i < items.length; i++) {
items[i].style.transform = 'unset';
}
if (type == 'get') {
this.modal = 0;
}
if (type == 'getandtake') {
this.modal = 0;
}
if (type == 'sell') {
this.modal = 0;
}
}
JavaScript:
Сам js из src
let roulette;
let caseid;
mp.events.add('r:SendCasePrize', (prize,money) => {
playermenu.execute(`playermenu.prizes=${prize}`);
playermenu.execute(`playermenu.money=${money}`);
});
mp.events.add('r:setcase', (c) => {
playermenu.execute(`playermenu.setCase(${c})`)
});
mp.events.add('r:getCase', (c) => {
caseid = c;
mp.events.callRemote('r:GetCase', c);
});
mp.events.add('r:getWinId', (type) => {
mp.events.callRemote('r:getWinId', type, 1);
});
mp.events.add('r:getprize', (type, id) => {
if (caseid == undefined) return;
mp.events.callRemote('r:getPrize', type, id, caseid);
});
mp.events.add('r:getWinIdCallback', (e, type) => {
playermenu.execute(`playermenu.getWinIdCallback(${e},'${type}')`);
});
mp.events.add('HelpMenu:SendNotify', (type, layout, msg, time)=>{
if (roulette != null) roulette.execute(`notify(${type},${layout},'${msg}',${time})`);
});
mp.events.add('r:rouletteClose', () => {
if (roulette != null) {
roulette.destroy();
roulette = null;
}
global.menuClose();
mp.gui.cursor.visible = false;
})
JavaScript:
caseAction: [
{
caseId: 1,
title: 'SilverCase',
subtitle: 'SilverCase',
cost: 200,
icon: '',
background: 'case1'
},
{
caseId: 2,
title: 'GoldCase',
subtitle: 'GoldCase',
cost: 400,
icon: '',
background: 'case2'
},
{
caseId: 3,
title: 'CyberCase',
subtitle: 'CyberCase',
cost: 600,
icon: '',
background: 'case3'
},
],
Последнее редактирование: