[OAB-22] play sound on win roll

.env

@@ -1,2 +1,2 @@
-SLACK_WEBHOOK=https://hooks.slack.com/services/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
+SLACK_WEBHOOK=https://hooks.slack.com/services/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
 SLACK_LOG_WEBHOOK=https://hooks.slack.com/services/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

README.md

@@ -37,6 +37,25 @@ Alias=kiosk.service
 WantedBy=multi-user.target
 ```
 
+### /lib/systemd/system/kiosk-uploader.service
+
+```conf
+[Unit]
+Description=Kiosk Uploader
+After=systemd-user-sessions.service
+Requires=redis.service
+
+[Service]
+WorkingDirectory=/home/pi/services/
+ExecStart=/home/pi/services/uploader --watch-dir /home/pi/services/data --log-file /home/pi/services/logs/uploader.log
+IgnoreSIGPIPE=false
+Type=simple
+
+[Install]
+Alias=kiosk-uploader.service
+WantedBy=multi-user.target
+```
+
 Enable & start services:
 
 ```bash

client/components/Animation.jsx

@@ -1,29 +1,33 @@
 import React from 'react'
+import { random } from 'lodash'
 
 export default class Animation extends React.Component {
-
  _setAnimation(position) {
  const rollerElement = document.querySelector(`.roller.${position}`)
  rollerElement.classList.remove('animate')
- setTimeout(() => rollerElement.classList.add('animate'))
+ rollerElement.offsetWidth // reflow hack
+ rollerElement.classList.add('animate')
  }
 
  render() {
- const { position, animationTime, rotations, angle, offset, startingIndex } = this.props
+ const { position, rotations, angle, startingIndex } = this.props
 
  const startingRotationInDegree = startingIndex * angle
- const rotationInDegree = startingRotationInDegree + (rotations * angle)
+ const rotationInDegree = startingRotationInDegree + rotations * angle
+ const animationTime = random(3, 6, true)
+ const offset = random(1, 7)
+
  const animation = `roller-${position} ${animationTime}s ease forwards`
 
  this._setAnimation(position)
 
  return (
  <style>
- {`.roller.animate.${position}{ animation: ${animation}; }` +
- `@keyframes roller-${position} {` +
- `0% { transform: rotateX(${startingRotationInDegree}deg); }` +
- `90% { transform: rotateX(${rotationInDegree + offset}deg); }` +
- `100% { transform: rotateX(${rotationInDegree}deg); }`}
+ {`@keyframes roller-${position} {` +
+ `0% { transform: rotateX(${startingRotationInDegree}deg); } ` +
+ `90% { transform: rotateX(${rotationInDegree + offset}deg); } ` +
+ `100% { transform: rotateX(${rotationInDegree}deg); } }` +
+ `.roller.animate.${position}{ animation: ${animation}; }`}
  </style>
  )
  }

client/components/Game.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Roller from './Roller'
 import socketIOClient from 'socket.io-client'
-import { logResult, resultResponse } from '../modules/result'
+import { resultResponse } from '../modules/result'
 import { ToastContainer, toast } from 'react-toastify'
 
 const ROLLERS = ['left', 'center', 'right']
@@ -21,10 +21,6 @@ export default class Game extends React.Component {
  componentDidMount() {
  this.socket.on('SPIN_REQUEST', forcedSpinTo => this._spinMachine(forcedSpinTo))
  this.socket.on('NOTIFY', (type, message) => toast[type](message))
-
- // toast.success("Success Notification!", {
- // position: toast.POSITION.TOP_CENTER
- // });
  }
 
  _spinMachine(forcedSpinTo) {

client/components/Roller.jsx

@@ -16,26 +16,26 @@ export default class Roller extends React.Component {
  spin(startingIndex = 0, forcedSpinTo) {
  return new Promise(resolve => {
  const { count, position } = this.props
-
  let rotations = random(30, 50)
- const animationTime = random(3, 6, true)
 
  if (isFinite(forcedSpinTo)) {
  rotations = 3 * count + forcedSpinTo - startingIndex
  }
 
- setTimeout(() => {
- resolve({ [position]: (startingIndex + rotations) % count })
- }, animationTime * 1000 + 500)
+ document.querySelector(`.roller.${position}`).addEventListener(
+ 'animationend',
+ () => {
+ resolve({ [position]: (startingIndex + rotations) % count })
+ },
+ { once: true }
+ )
 
  ReactDOM.render(
  <Animation
  startingIndex={startingIndex}
  position={position}
- animationTime={animationTime}
  rotations={rotations}
  angle={this.polygon.angle}
- offset={5}
  />,
  document.querySelector(`.styles-roller-${position}`)
  )

package.json

@@ -16,6 +16,7 @@
  "moment": "^2.22.2",
  "node-raspistill": "0.0.15",
  "onoff": "^3.1.0",
+ "python-shell": "^0.5.0",
  "react": "^16.4.1",
  "react-dom": "^16.4.1",
  "react-toastify": "^4.1.0",

src/migrate.js

@@ -0,0 +1,10 @@
+import redis from 'redis'
+import { USERS } from './users'
+
+const client = redis.createClient()
+
+for (const id of Object.keys(USERS)) {
+ client.hset(`${id}_user`, 'email', USERS[id].email, 'mention', USERS[id].mention, () => {
+ console.log(id)
+ })
+}

src/playSound.js

@@ -0,0 +1,6 @@
+var Python = require('python-shell')
+
+export default function(soundPath) {
+ var options = { mode: 'text', args: [soundPath] }
+ Python.run('src/play_sound.py', options, function(err) {})
+}

src/play_sound.py

@@ -0,0 +1,7 @@
+#!/usr/bin/env python
+
+import sys
+import os
+
+sound_path = sys.argv[1]
+os.system('mpg321 ' + sound_path + ' &')

src/server.js

@@ -14,6 +14,7 @@ import takePhoto from './camera'
 import webpack from 'webpack'
 import webpackConfig from '../webpack.config.js'
 import webpackMiddleware from 'webpack-dev-middleware'
+import playSound from './playSound'
 
 const app = express()
 const server = http.createServer(app)
@@ -84,6 +85,7 @@ io.on('connection', client => {
  readyForSpin = true
 
  if (result.win) {
+ playSound('src/sound/mlg.mp3')
  if (result.cashPrize) servo.move()
  slack.post(user.mention, result.icon, result.cashPrize ? '$$$' : '2 Kudos!')
  }

src/users.js

@@ -1,7 +1,8 @@
-const USERS = {
+export const USERS = {
  5501512322897: {
  mention: 'czana',
  email: 't.czana@selleo.com',
+ admin: true
  },
  4402038631408: {
  mention: 'bart',
@@ -138,6 +139,94 @@ const USERS = {
  4402148018063: {
  mention: 'lemon',
  email: 'l.gawel@selleo.com'
+ },
+ 4402148020376: {
+ mention: 'pommy',
+ email: 'k.pomykacz@selleo.com'
+ },
+ 5501522899144: {
+ mention: 'mark',
+ email: 'm.caputa@selleo.com'
+ },
+ 5501425332945: {
+ mention: 'beu',
+ email: 'r.jedryszczak@selleo.com'
+ },
+ 5501561213025: {
+ mention: 'dude',
+ email: 'p.duda@selleo.com'
+ },
+ 4402038631671: {
+ mention: 'dadesigner',
+ email: 'l.siwek@selleo.com'
+ },
+ 5501555277225: {
+ mention: 'Natalia',
+ email: 'n.milerska@selleo.com'
+ },
+ 5501535878785: {
+ mention: 'zebra',
+ email: 'p.wolanin@selleo.com'
+ },
+ 4402038639638: {
+ mention: 'Kasia',
+ email: 'k.babinska@selleo.com'
+ },
+ 5501561394339: {
+ mention: 'kantorm',
+ email: 'm.kantor@selleo.com'
+ },
+ 4402036975254: {
+ mention: 'dominikduda',
+ email: 'd.duda@selleo.com'
+ },
+ 5501568626383: {
+ mention: 'bob',
+ email: 'w.bozek@selleo.com'
+ },
+ 5501567016069: {
+ mention: 'tromik',
+ email: 't.romik@selleo.com'
+ },
+ 5497845585440: {
+ mention: 'Kacper',
+ email: 'k.wozniak@selleo.com'
+ },
+ 5501425432406: {
+ mention: 'cs3b',
+ email: 'm.czyz@selleo.com'
+ },
+ 5501567419089: {
+ mention: 'enka',
+ email: 'e.tabak@selleo.com'
+ },
+ 5501524337388: {
+ mention: 'Arkadiusz Kwaśny',
+ email: 'a.kwasny@selleo.com'
+ },
+ 5501425353830: {
+ mention: 'chalec',
+ email: 'p.chalecki@selleo.com'
+ },
+ 4402038656086: {
+ mention: 'grduch',
+ email: 'g.rduch@selleo.com'
+ },
+ 5501522904124: {
+ mention: 'Anna Łękawa',
+ email: 'a.lekawa@selleo.com'
+ },
+ 4402036995525: {
+ mention: 'dariusz_wylon',
+ email: 'd.wylon@selleo.com'
+ },
+ 5501520079015: {
+ mention: 'tb',
+ email: 't.bak@selleo.com'
+ },
+ 5501524317085: {
+ mention: 'kokosek',
+ email: 'j.kolonko@selleo.com'
  }
 }
 

yarn.lock

@@ -5319,6 +5319,10 @@ punycode@^2.1.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
+python-shell@^0.5.0:
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/python-shell/-/python-shell-0.5.0.tgz#461983bafd092010bc2760c365b13e7d50aab231"
+
 q@^1.1.2:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"