Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancements #1

Merged
merged 9 commits into from
Nov 30, 2015
Merged

Enhancements #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ff22b19
Add particle effects
JoelBesada Nov 25, 2015
c195655
Properly copy assets in serve mode
JoelBesada Nov 25, 2015
5e51147
Layout tweaks
JoelBesada Nov 26, 2015
c77fa6a
Add comment particle color
JoelBesada Nov 26, 2015
fbe2105
Add a bar to show when combo resets
JoelBesada Nov 26, 2015
640ea95
Lower power mode threshold
JoelBesada Nov 26, 2015
cebbbe0
Add regular comment to color list
JoelBesada Nov 26, 2015
a88f0bb
Bugfix for particle effects positioning being off due to scrolling
gernberg Nov 28, 2015
a5f0cc1
Merge pull request #2 from gernberg/enhancements
JoelBesada Nov 28, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,18 @@
<script src="bundle.js" inline></script>
</head>
<body>
<div class="background"></div>
<canvas class="canvas-overlay"></canvas>
<pre id="editor"></pre>
<div class="streak-container">
<div class="current">Current Streak</div>
<div class="current">Combo</div>
<div class="counter">0</div>
<div class="bar"></div>
<div class="exclamations"></div>
</div>
<div class="reference-screenshot-container">
<span>Reference</span>
<div class="reference-screenshot" style="background-image:url(assets/page.png);"></div>
<span>Reference Screenshot</span>
</div>

<div class="power-mode-indicator">
Expand Down
144 changes: 130 additions & 14 deletions app/scripts/app.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,60 @@ require "brace/theme/vibrant_ink"
require "brace/ext/searchbox"

class App
POWER_MODE_ACTIVATION_THRESHOLD: 250
POWER_MODE_ACTIVATION_THRESHOLD: 200
STREAK_TIMEOUT: 10 * 1000

MAX_PARTICLES: 500
PARTICLE_NUM_RANGE: [5..12]
PARTICLE_GRAVITY: 0.075
PARTICLE_ALPHA_FADEOUT: 0.96
PARTICLE_VELOCITY_RANGE:
x: [-1, 1]
y: [-3.5, -1.5]

PARTICLE_COLORS:
"text": [255, 255, 255]
"text.xml": [255, 255, 255]
"keyword": [0, 221, 255]
"variable": [0, 221, 255]
"meta.tag.tag-name.xml": [0, 221, 255]
"keyword.operator.attribute-equals.xml": [0, 221, 255]
"constant": [249, 255, 0]
"constant.numeric": [249, 255, 0]
"support.constant": [249, 255, 0]
"string.attribute-value.xml": [249, 255, 0]
"string.unquoted.attribute-value.html": [249, 255, 0]
"entity.other.attribute-name.xml": [129, 148, 244]
"comment": [0, 255, 121]
"comment.xml": [0, 255, 121]

EXCLAMATION_EVERY: 10
EXCLAMATIONS: ["Super!", "Radical!", "Fantastic!", "Great!", "OMG",
"Whoah!", ":O", "Nice!", "Splendid!", "Wild!", "Grand!", "Impressive!",
"Stupendous!", "Extreme!", "Awesome!"]

currentStreak: 0
powerMode: false
particles: []
particlePointer: 0
lastDraw: 0

constructor: ->
@$streakCounter = $ ".streak-container .counter"
@$streakBar = $ ".streak-container .bar"
@$exclamations = $ ".streak-container .exclamations"
@$reference = $ ".reference-screenshot-container"
@$editor = $ "#editor"
@canvas = @setupCanvas()
@canvasContext = @canvas.getContext "2d"
@$download = $ ".download-button"

@$body = $ "body"

@debouncedSaveContent = _.debounce @saveContent, 300
@debouncedEndStreak = _.debounce @endStreak, @STREAK_TIMEOUT
@throttledShake = _.throttle @shake, 100, trailing: false
@throttledSpawnParticles = _.throttle @spawnParticles, 25, trailing: false

@editor = @setupAce()
@loadContent()
Expand All @@ -38,10 +71,14 @@ class App
@editor.getSession().on "change", @onChange
$(window).on "beforeunload", -> "Hold your horses!"

$(".instructions-container, .instructions-button").on "click", => $("body").toggleClass "show-instructions"
$(".instructions-container, .instructions-button").on "click", ->
$("body").toggleClass "show-instructions"

@$reference.on "click", => @$reference.toggleClass "active"
@$download.on "click", @onClickDownload

window.requestAnimationFrame? @onFrame

setupAce: ->
editor = ace.edit "editor"

Expand All @@ -51,23 +88,37 @@ class App
editor.getSession().setMode "ace/mode/html"
editor.session.setOption "useWorker", false
editor.session.setFoldStyle "manual"
editor.$blockScrolling = Infinity

editor

setupCanvas: ->
canvas = $(".canvas-overlay")[0]
canvas.width = window.innerWidth
canvas.height = window.innerHeight
canvas

loadContent: ->
return unless (content = localStorage["content"])
@editor.setValue content, -1

saveContent: =>
localStorage["content"] = @editor.getValue()

onFrame: (time) =>
@drawParticles time - @lastDraw
@lastDraw = time
window.requestAnimationFrame? @onFrame

increaseStreak: ->
@currentStreak++
@showExclamation() if @currentStreak > 0 and @currentStreak % @EXCLAMATION_EVERY is 0

if @currentStreak >= @POWER_MODE_ACTIVATION_THRESHOLD and not @powerMode
@activatePowerMode()

@refreshStreakBar()

@renderStreak()

endStreak: ->
Expand All @@ -83,6 +134,18 @@ class App
_.defer =>
@$streakCounter.addClass "bump"

refreshStreakBar: ->
@$streakBar.css
"webkit-transform": "scaleX(1)"
"transform": "scaleX(1)"
"transition": "none"

_.defer =>
@$streakBar.css
"webkit-transform": ""
"transform": ""
"transition": "all #{@STREAK_TIMEOUT}ms linear"

showExclamation: ->
$exclamation = $("<span>")
.addClass "exclamation"
Expand All @@ -93,21 +156,64 @@ class App
$exclamation.remove()
, 3000

getCursorPosition: ->
{left, top} = @editor.renderer.$cursorLayer.getPixelPosition()
left += @editor.renderer.gutterWidth + 4
top -= @editor.renderer.scrollTop
{x: left, y: top}

spawnParticles: (type) ->
return unless @powerMode

{x, y} = @getCursorPosition()
numParticles = _(@PARTICLE_NUM_RANGE).sample()
color = @getParticleColor type
_(numParticles).times =>
@particles[@particlePointer] = @createParticle x, y, color
@particlePointer = (@particlePointer + 1) % @MAX_PARTICLES

getParticleColor: (type) ->
@PARTICLE_COLORS[type] or [255, 255, 255]

createParticle: (x, y, color) ->
x: x
y: y + 10
alpha: 1
color: color
velocity:
x: @PARTICLE_VELOCITY_RANGE.x[0] + Math.random() *
(@PARTICLE_VELOCITY_RANGE.x[1] - @PARTICLE_VELOCITY_RANGE.x[0])
y: @PARTICLE_VELOCITY_RANGE.y[0] + Math.random() *
(@PARTICLE_VELOCITY_RANGE.y[1] - @PARTICLE_VELOCITY_RANGE.y[0])

drawParticles: (timeDelta) =>
@canvasContext.clearRect 0, 0, @canvas.width, @canvas.height

for particle in @particles
continue if particle.alpha <= 0.1

particle.velocity.y += @PARTICLE_GRAVITY
particle.x += particle.velocity.x
particle.y += particle.velocity.y
particle.alpha *= @PARTICLE_ALPHA_FADEOUT

@canvasContext.fillStyle = "rgba(#{particle.color.join ", "}, #{particle.alpha})"
@canvasContext.fillRect Math.round(particle.x - 1), Math.round(particle.y - 1), 3, 3

shake: ->
intensity = -(Math.random() * 5 + 5)
x = intensity * (Math.random() > 0.5 ? -1 : 1)
y = intensity * (Math.random() > 0.5 ? -1 : 1)
return unless @powerMode

translate = "translate3D(#{x}px, #{y}px, 0)"
@$body.css
"webkit-transform": translate
"transform": translate
intensity = 1 + 2 * Math.random() * Math.floor(
(@currentStreak - @POWER_MODE_ACTIVATION_THRESHOLD) / 100
)
x = intensity * (if Math.random() > 0.5 then -1 else 1)
y = intensity * (if Math.random() > 0.5 then -1 else 1)

@$editor.css "margin", "#{y}px #{x}px"

setTimeout =>
@$body.css
"webkit-transform": "none"
"transform": "none"
, 50
@$editor.css "margin", ""
, 75

activatePowerMode: =>
@powerMode = true
Expand All @@ -133,6 +239,16 @@ class App
@increaseStreak()
@debouncedEndStreak()

@shake() if @powerMode
@throttledShake()

pos = if e.data.action is "insertText"
e.data.range.end
else
e.data.range.start

token = @editor.session.getTokenAt pos.row, pos.column

_.defer =>
@throttledSpawnParticles(token.type) if token

$ -> new App
Loading