137 lines
3.7 KiB
TypeScript
137 lines
3.7 KiB
TypeScript
import HTML from '../../HTML'
|
|
import { Process } from '../../types'
|
|
|
|
import icon from '../../assets/icons/fruits/fruits.png'
|
|
import cherriesIcon from '../../assets/icons/fruits/cherries.png'
|
|
import lemonIcon from '../../assets/icons/fruits/lemon.png'
|
|
import tangerineIcon from '../../assets/icons/fruits/tangerine.png'
|
|
|
|
const SlotMachine: Process = {
|
|
config: {
|
|
name: 'Fruits',
|
|
type: 'process',
|
|
icon,
|
|
targetVer: '1.0.0-indev.0'
|
|
},
|
|
run: async (process): Promise<void> => {
|
|
const win = await process.loadLibrary('lib/WindowManager').then((wm: any) => {
|
|
return wm.createWindow({
|
|
title: 'Fruits',
|
|
icon,
|
|
width: 400,
|
|
height: 500,
|
|
canResize: false
|
|
}, process)
|
|
})
|
|
|
|
const setupWindowStyles = (): void => {
|
|
win.content.style.padding = '20px'
|
|
win.content.style.textAlign = 'center'
|
|
win.content.style.display = 'flex'
|
|
win.content.style.flexDirection = 'column'
|
|
win.content.style.justifyContent = 'center'
|
|
win.content.style.alignItems = 'center'
|
|
win.content.style.background = '#181825'
|
|
}
|
|
|
|
const createReelContainer = (): HTML => {
|
|
return new HTML('div').appendTo(win.content).style({
|
|
position: 'relative',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
marginBottom: '20px',
|
|
height: '150px',
|
|
overflow: 'hidden'
|
|
})
|
|
}
|
|
|
|
const createOverlay = (parentElement: HTML): void => {
|
|
new HTML('div').appendTo(parentElement).style({
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0',
|
|
width: '100%',
|
|
height: '100%',
|
|
background: '#000',
|
|
opacity: '0.5'
|
|
})
|
|
}
|
|
|
|
const icons = [cherriesIcon, lemonIcon, tangerineIcon]
|
|
|
|
const getRandomIcon = (): string => icons[Math.floor(Math.random() * icons.length)]
|
|
|
|
const slotIcons = [getRandomIcon(), getRandomIcon(), getRandomIcon()]
|
|
|
|
const updateReel = (reelContainer: HTML): void => {
|
|
reelContainer.clear()
|
|
slotIcons.forEach((icon) => {
|
|
new HTML('img').attr({
|
|
src: icon,
|
|
width: '100',
|
|
height: '100'
|
|
}).appendTo(reelContainer)
|
|
})
|
|
}
|
|
|
|
let isSpinning = false
|
|
|
|
const spinSlotMachine = (): void => {
|
|
if (isSpinning) return
|
|
|
|
isSpinning = true
|
|
|
|
const spinDuration = 3000
|
|
const frameDuration = 100
|
|
const winColor = '#FFD700'
|
|
|
|
let frameCount = 0
|
|
const totalFrames = spinDuration / frameDuration
|
|
|
|
const spinInterval = setInterval(() => {
|
|
if (frameCount < totalFrames - 1) {
|
|
slotIcons.unshift(getRandomIcon())
|
|
slotIcons.pop()
|
|
}
|
|
|
|
updateReel(reelContainer)
|
|
|
|
frameCount++
|
|
|
|
if (frameCount === totalFrames) {
|
|
clearInterval(spinInterval)
|
|
|
|
if (slotIcons[0] === slotIcons[1] && slotIcons[1] === slotIcons[2]) {
|
|
const button = win.content.querySelector('button')
|
|
button.style.transition = 'background-color 0.5s ease-out'
|
|
button.style.backgroundColor = winColor
|
|
|
|
setTimeout(() => {
|
|
button.style.transition = 'background-color 0.5s ease'
|
|
button.style.backgroundColor = '#3498db'
|
|
}, 3000)
|
|
}
|
|
|
|
isSpinning = false
|
|
}
|
|
}, frameDuration)
|
|
}
|
|
|
|
setupWindowStyles()
|
|
|
|
const reelContainer = createReelContainer()
|
|
createOverlay(reelContainer)
|
|
|
|
updateReel(reelContainer)
|
|
|
|
new HTML('button')
|
|
.text('Spin')
|
|
.on('click', spinSlotMachine)
|
|
.appendTo(win.content)
|
|
.attr({
|
|
style: 'font-size: 18px; padding: 10px 20px; background: #3498db; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px'
|
|
})
|
|
}
|
|
}
|
|
|
|
export default SlotMachine
|