Browse Source

initial commit for drumkit

master
Ken Aguilar 4 years ago
commit
36bf755247
18 changed files with 30898 additions and 0 deletions
  1. +9
    -0
      .gitignore
  2. +22
    -0
      bower.json
  3. +3
    -0
      src/Drumkit/Drumkit.js
  4. +108
    -0
      src/Drumkit/Drumkit.purs
  5. +30627
    -0
      src/Drumkit/app.js
  6. +60
    -0
      src/Drumkit/index.html
  7. BIN
      src/Drumkit/sounds/boom.wav
  8. BIN
      src/Drumkit/sounds/clap.wav
  9. BIN
      src/Drumkit/sounds/hihat.wav
  10. BIN
      src/Drumkit/sounds/kick.wav
  11. BIN
      src/Drumkit/sounds/openhat.wav
  12. BIN
      src/Drumkit/sounds/ride.wav
  13. BIN
      src/Drumkit/sounds/snare.wav
  14. BIN
      src/Drumkit/sounds/tink.wav
  15. BIN
      src/Drumkit/sounds/tom.wav
  16. +51
    -0
      src/Drumkit/style.css
  17. +9
    -0
      src/Main.purs
  18. +9
    -0
      test/Main.purs

+ 9
- 0
.gitignore View File

@@ -0,0 +1,9 @@
/bower_components/
/node_modules/
/.pulp-cache/
/output/
/generated-docs/
/.psc-package/
/.psc*
/.purs*
/.psa*

+ 22
- 0
bower.json View File

@@ -0,0 +1,22 @@
{
"name": "purescript30",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"output"
],
"dependencies": {
"purescript-prelude": "^4.1.0",
"purescript-console": "^4.2.0",
"purescript-effect": "^2.0.1",
"purescript-web-events": "^2.0.0",
"purescript-web-html": "^2.0.0",
"purescript-web-uievents": "^2.0.0",
"purescript-web-dom": "^2.0.0",
"purescript-transformers": "^4.2.0"
},
"devDependencies": {
"purescript-psci-support": "^4.0.0"
}
}

+ 3
- 0
src/Drumkit/Drumkit.js View File

@@ -0,0 +1,3 @@
exports.keyCode = function(e) {
return e.keyCode;
};

+ 108
- 0
src/Drumkit/Drumkit.purs View File

@@ -0,0 +1,108 @@
module Drumkit where

import Prelude (class Bind, Unit, bind, discard, pure, show, void, ($), (<<<), (<>), (=<<))
import Web.Event.EventTarget (EventListener)
import Web.Event.EventTarget as EvtTarget
import Web.Event.Event (EventType(..))
import Web.HTML as Web
import Web.HTML.Window as Window
import Web.HTML.HTMLDocument as HTMLDoc
import Effect (Effect)
import Effect as E
import Effect.Console (logShow)
import Web.UIEvent.KeyboardEvent (KeyboardEvent)
import Web.UIEvent.KeyboardEvent as KbEvent
import Data.Maybe (Maybe(..))
import Web.DOM.ParentNode (QuerySelector(..), ParentNode)
import Web.DOM.ParentNode as WebPNode
import Web.DOM.Internal.Types (Element, NodeList)
import Web.HTML.HTMLMediaElement as MediaEl
import Control.Monad.Reader.Trans
import Effect.Class (class MonadEffect)
import Effect.Class as EffClass
import Web.HTML.HTMLElement as HTMLElement
import Web.DOM.DOMTokenList as WebDOM
import Control.Monad (class Monad)
import Web.DOM.NodeList as NodeList
import Data.Function as F

foreign import keyCode :: KeyboardEvent -> Int

docNode :: Effect ParentNode
docNode = do
w <- Web.window
doc <- Window.document w
pure $ HTMLDoc.toParentNode doc

-- TODO: find common function with getKeyEl
getAudioEl
:: forall m. Bind m
=> MonadAsk ParentNode m
=> MonadEffect m
=> String
-> m (Maybe Element)
getAudioEl kcode = do
p <- ask
mElement <- EffClass.liftEffect $ WebPNode.querySelector (QuerySelector $ "audio[data-key='" <> kcode <>"']") p
pure mElement

-- TODO: find common function with getAudioEl
getKeyEl
:: forall m. Bind m
=> MonadAsk ParentNode m
=> MonadEffect m
=> String
-> m (Maybe Element)
getKeyEl kcode = do
p <- ask
mElement <- EffClass.liftEffect $ WebPNode.querySelector (QuerySelector $ ".key[data-key='"<> kcode <>"']") p
pure mElement

getAllKeys
:: forall m. Bind m
=> Monad m
=> MonadAsk ParentNode m
=> MonadEffect m
=> m NodeList
getAllKeys =
EffClass.liftEffect <<< WebPNode.querySelectorAll (QuerySelector ".key") =<< ask

evtListener :: ParentNode -> Effect EventListener
evtListener p = EvtTarget.eventListener $ \e -> void do
mKeyboardEvnt <- pure $ KbEvent.fromEvent e
case mKeyboardEvnt of
Just keyboardEvnt -> do
mAudio <- runReaderT (getAudioEl <<< show <<< keyCode $ keyboardEvnt) p
case mAudio of
Just audioElement ->
case MediaEl.fromElement audioElement of
Just audio -> do
MediaEl.setCurrentTime 0.0 audio
MediaEl.play audio
mKeyCode <- runReaderT (getKeyEl <<< show <<< keyCode $ keyboardEvnt) p
case mKeyCode of
Just k ->
case HTMLElement.fromElement k of
Just htmlElement -> do
domTokenList <- HTMLElement.classList htmlElement
WebDOM.add domTokenList "playing"
Nothing -> logShow "No HTML element."
Nothing -> logShow "No Keycode found"
Nothing -> logShow "No audio."
Nothing -> logShow "No audio element."
Nothing -> logShow "No Keycode found"

keyEvtListener :: Effect EventListener
keyEvtListener = EvtTarget.eventListener $ \e -> void do
logShow "otin"

main :: Effect Unit
main = do
w <- Web.window
p <- docNode
evt <- evtListener p
keyEvt <- keyEvtListener
nList <- runReaderT getAllKeys p
nodes <- NodeList.toArray nList
E.foreachE nodes (\key -> EvtTarget.addEventListener (EventType "transitioned") keyEvt false (Window.toEventTarget w))
EvtTarget.addEventListener (EventType "keydown") evt false (Window.toEventTarget w)

+ 30627
- 0
src/Drumkit/app.js
File diff suppressed because it is too large
View File


+ 60
- 0
src/Drumkit/index.html View File

@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>PS Drumkit</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

BIN
src/Drumkit/sounds/boom.wav View File


BIN
src/Drumkit/sounds/clap.wav View File


BIN
src/Drumkit/sounds/hihat.wav View File


BIN
src/Drumkit/sounds/kick.wav View File


BIN
src/Drumkit/sounds/openhat.wav View File


BIN
src/Drumkit/sounds/ride.wav View File


BIN
src/Drumkit/sounds/snare.wav View File


BIN
src/Drumkit/sounds/tink.wav View File


BIN
src/Drumkit/sounds/tom.wav View File


+ 51
- 0
src/Drumkit/style.css View File

@@ -0,0 +1,51 @@
html {
font-size: 10px;
background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
background-size: cover;
}

body,html {
margin: 0;
padding: 0;
font-family: sans-serif;
}

.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
}

.key {
border: .4rem solid black;
border-radius: .5rem;
margin: 1rem;
font-size: 1.5rem;
padding: 1rem .5rem;
transition: all .07s ease;
width: 10rem;
text-align: center;
color: white;
background: rgba(0,0,0,0.4);
text-shadow: 0 0 .5rem black;
}

.playing {
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}

kbd {
display: block;
font-size: 4rem;
}

.sound {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .1rem;
color: #ffc600;
}

+ 9
- 0
src/Main.purs View File

@@ -0,0 +1,9 @@
module Main where

import Prelude
import Effect (Effect)
import Effect.Console (log)

main :: Effect Unit
main = do
log "Hello sailor!"

+ 9
- 0
test/Main.purs View File

@@ -0,0 +1,9 @@
module Test.Main where

import Prelude
import Effect (Effect)
import Effect.Console (log)

main :: Effect Unit
main = do
log "You should add some tests."

Loading…
Cancel
Save