Skip to content
Permalink
Browse files

R3-2018

R3-2018
  • Loading branch information
Paul Rohrlach
Paul Rohrlach committed Mar 18, 2018
2 parents 30f3465 + 64f5bf0 commit b7ef7721697f7f5f46f253158bf21370e7c3d87e
@@ -44,7 +44,7 @@

// Draw avatars
App.state.avatars.forEach(function(avatar) {
App.context.drawImage(avatar.image, avatar.x, avatar.y, avatar.height, avatar.width);
App.context.drawImage(avatar.image, avatar.x, avatar.y, avatar.width, avatar.height);
App.context.textAlign = "center";
App.context.textBaseline = "top";
if(avatar.show == '1'){
@@ -5,12 +5,12 @@ place = (data) ->
img = new Image
img.src = data['file']
multiplier = data.size/10
img.height = img.height*multiplier
img.width = img.width*multiplier
displayName = '1'
if App.state.avatars[data.avatar_id] != undefined
displayName = App.state.avatars[data.avatar_id].show
img.addEventListener 'load', (e) ->
img.height = img.height*multiplier
img.width = img.width*multiplier
App.state.avatars[data.avatar_id] = {
image: img,
x: data['x'] - (img.width / 2),
@@ -46,62 +46,64 @@ size = (data) ->
App.drawFrame()

drop = (data) ->
btn = document.querySelector ".avatar-selection[data-avatar-id='#{data.avatar_id}']"
btn.removeAttribute 'disabled'
btn.setAttribute 'title', "#{btn.dataset.name}"
delete App.state.avatars[data.avatar_id]
App.drawFrame()
if `data.avatar_id == window.holding`
nameInput = document.querySelector '#editAvatarName'
nameInput.removeAttribute 'value'
nameInput.setAttribute 'disabled', 'disabled'
editNameBtn = document.querySelector '#editNameBtn'
editNameBtn.setAttribute 'disabled', 'disabled'
dropButton = document.querySelector '#dropAvatarButton'
dropButton.setAttribute 'disabled', 'disabled'
dropButton.removeAttribute 'title'
dropButton.dataset.avatarId = undefined
nameBtn = document.querySelector '#avatarName'
nameBtn.removeAttribute 'disabled', 'disabled'
window.holding = undefined

mirrorDiv = document.querySelector '#mirrorPane'
mirrorDiv.innerHTML = ' '
if document.querySelector('#toolbox') != null
btn = document.querySelector ".avatar-selection[data-avatar-id='#{data.avatar_id}']"
btn.removeAttribute 'disabled'
btn.setAttribute 'title', "#{btn.dataset.name}"
if `data.avatar_id == window.holding`
nameInput = document.querySelector '#editAvatarName'
nameInput.removeAttribute 'value'
nameInput.setAttribute 'disabled', 'disabled'
editNameBtn = document.querySelector '#editNameBtn'
editNameBtn.setAttribute 'disabled', 'disabled'
dropButton = document.querySelector '#dropAvatarButton'
dropButton.setAttribute 'disabled', 'disabled'
dropButton.removeAttribute 'title'
dropButton.dataset.avatarId = undefined
nameBtn = document.querySelector '#avatarName'
nameBtn.removeAttribute 'disabled', 'disabled'
window.holding = undefined

mirrorDiv = document.querySelector '#mirrorPane'
mirrorDiv.innerHTML = ' '

hold = (data) ->
avatarName = data.names
btn = document.querySelector ".avatar-selection[data-avatar-id='#{data.avatar_id}']"
btn.setAttribute 'disabled', 'disabled'
btn.setAttribute 'title', "#{btn.getAttribute 'title'} (#{data.username})"
if avatarName[data.avatar_id] == undefined
avatarName[data.avatar_id] = data['name']
if data.holding != null
holdbtn = document.querySelector ".avatar-selection[data-avatar-id='#{data.holding}']"
holdbtn.removeAttribute 'disabled'
holdbtn.setAttribute 'title', "#{holdbtn.getAttribute 'data-avatar-name'}"
if `data.avatar_id == window.holdWait`
nameInput = document.querySelector '#editAvatarName'
nameInput.value = avatarName[data.avatar_id]
nameInput.removeAttribute 'disabled'
editBtn = document.querySelector '#editNameBtn'
editBtn.removeAttribute 'disabled'
dropButton = document.querySelector '#dropAvatarButton'
dropButton.removeAttribute 'disabled'
dropButton.setAttribute 'title', "#{btn.dataset.name}"
nameBtn = document.querySelector '#avatarName'
nameBtn.removeAttribute 'disabled'
window.holdWait = undefined
window.holding = data.avatar_id

mirrorDiv = document.querySelector '#mirrorPane'
mirrorImg = new Image
mirrorImg.addEventListener 'load', (e) ->
mirrorDiv.appendChild(mirrorImg)
mirrorDiv.removeChild(mirrorDiv.childNodes[0])
mirrorImg.src = data['file']
widthMultiplier = mirrorImg.width/mirrorImg.height
mirrorImg.height = 80
mirrorImg.width = 80*widthMultiplier
if document.querySelector('#toolbox') != null
avatarName = data.names
btn = document.querySelector ".avatar-selection[data-avatar-id='#{data.avatar_id}']"
btn.setAttribute 'disabled', 'disabled'
btn.setAttribute 'title', "#{btn.getAttribute 'title'} (#{data.username})"
if avatarName[data.avatar_id] == undefined
avatarName[data.avatar_id] = data['name']
if data.holding != null
holdbtn = document.querySelector ".avatar-selection[data-avatar-id='#{data.holding}']"
holdbtn.removeAttribute 'disabled'
holdbtn.setAttribute 'title', "#{holdbtn.getAttribute 'data-avatar-name'}"
if `data.avatar_id == window.holdWait`
nameInput = document.querySelector '#editAvatarName'
nameInput.value = avatarName[data.avatar_id]
nameInput.removeAttribute 'disabled'
editBtn = document.querySelector '#editNameBtn'
editBtn.removeAttribute 'disabled'
dropButton = document.querySelector '#dropAvatarButton'
dropButton.removeAttribute 'disabled'
dropButton.setAttribute 'title', "#{btn.dataset.name}"
nameBtn = document.querySelector '#avatarName'
nameBtn.removeAttribute 'disabled'
window.holdWait = undefined
window.holding = data.avatar_id

mirrorDiv = document.querySelector '#mirrorPane'
mirrorImg = new Image
mirrorImg.addEventListener 'load', (e) ->
mirrorDiv.appendChild(mirrorImg)
mirrorDiv.removeChild(mirrorDiv.childNodes[0])
mirrorImg.src = data['file']
widthMultiplier = mirrorImg.width/mirrorImg.height
mirrorImg.height = 80
mirrorImg.width = 80*widthMultiplier

nameToggle = (data) ->
avatar = App.state.avatars[data.avatar_id]
@@ -142,26 +144,22 @@ editName = (data) ->

document.addEventListener 'turbolinks:load', (e) ->
if document.querySelector('#toolbox') != null
document.querySelectorAll('.avatar-selection').forEach (elem) ->
elem.addEventListener 'mouseup', (e) ->
App.avatar.hold this.dataset.avatarId

document.querySelectorAll('.avatar-selection').forEach (elem) ->
elem.addEventListener 'mouseup', (e) ->
App.avatar.hold this.dataset.avatarId, this.dataset.avatarName

document.querySelector('#dropAvatarButton').addEventListener 'mouseup', (e) ->
App.avatar.drop()

document.querySelector('#dropAvatarButton').addEventListener 'mouseup', (e) ->
App.avatar.drop()

document.querySelector('#avatarSlider').addEventListener 'mouseup', (e) ->
App.avatar.size document.querySelector('#avatarSlider').value

document.querySelector('#editNameBtn').addEventListener 'mouseup', (e) ->
App.avatar.editName(document.querySelector('#editAvatarName').value)

document.querySelector('#avatarName').addEventListener 'mouseup', (e) ->
App.avatar.nameToggle()

document.querySelector('#canvas').addEventListener 'mouseup', (e) ->
App.avatar.place e.x, e.y, document.querySelector('#avatarSlider').value, document.querySelector('.avatar-selection').avatarName

@@ -15,6 +15,7 @@ jQuery(document).on 'turbolinks:load', ->
drawing = false
timeSinceLastSend = $.now()
size = 1
dragging = false

$('.color-option').click ->
color = $(this).data("color")
@@ -55,6 +56,13 @@ jQuery(document).on 'turbolinks:load', ->
document.getElementById("brushSize").innerHTML = size

canvas.on 'mousedown touchstart', (e) ->
if(window.holding != undefined)
avatar = App.state.avatars[window.holding]
if(avatar != undefined)
if(e.clientX >= avatar.x && e.clientX <= (avatar.width + avatar.x))
if(e.clientY >= avatar.y && e.clientY <= (avatar.height + avatar.y))
dragging = true

e.preventDefault()
x = e.offsetX
y = e.offsetY
@@ -70,9 +78,22 @@ jQuery(document).on 'turbolinks:load', ->

canvas.bind 'mouseup mouseleave touchend', ->
drawing = false
dragging = false

canvas.on 'mousemove touchmove', (e) ->
if(drawing && $.now() - timeSinceLastSend > 10)
if(dragging)
avatar = App.state.avatars[window.holding]
img = new Image()
img.onload = ->
context.clearRect(0, 0, innerWidth, innerHeight);
App.drawFrame()
context.globalAlpha = 0.4
x = e.clientX - (avatar.width / 2)
y = e.clientY - (avatar.height / 2)
context.drawImage(img, x, y, avatar.width, avatar.height)
context.globalAlpha = 1.0
img.src = avatar.image.src
else if(drawing && $.now() - timeSinceLastSend > 10)
x = e.offsetX
y = e.offsetY
stage_id = $('#stage-id').val()

0 comments on commit b7ef772

Please sign in to comment.
You can’t perform that action at this time.