diff --git a/docs/assets/js/UI/ui.js b/docs/assets/js/UI/ui.js index de9eb84..5350b2e 100644 --- a/docs/assets/js/UI/ui.js +++ b/docs/assets/js/UI/ui.js @@ -1,5 +1,3 @@ -//Colors - // UI for title screen function drawTitleScreenUI() { } @@ -10,7 +8,12 @@ function drawLevelTransitionUI() { // UI for playing function drawPlayingUI() { + + //Heart Rate Monitor heartBeatUI(cw/4*3-8,ch/8*7-8,cw/4,ch/8); + + //Respiration Monitor + respiratoryUI(cw/8*5,ch/8*7-8, cw/16, ch/8); } //UI for pause screen @@ -21,11 +24,26 @@ function drawPausedUI() { function drawEndUI() { } -// Construct a rectangular UI -function rectUI() {}; + +/*** + * + * RESPIRATORY UI + * + */ + +function respiratoryUI(x, y, width, height){ + cartesianRect(x,y,width,height, "black"); + cartesianRect(x,y+(height-breath/constants.lifeFuncs.breath.fullBreath*height), width, breath/constants.lifeFuncs.breath.fullBreath*height, "teal"); +} + +/*** + * + * HEART RATE MONITOR UI + * + */ //Heart rate monitor history -let heartBeatHistory = [] +let heartBeatHistory = []; heartBeatHistory.length = constants.ui.heartRate.history_length; heartBeatHistory.fill(0); @@ -33,7 +51,7 @@ let heartBeatHistory = [] let shiftAccum = 0; //Beat progression -let beatTimeElapsed = 0; +let beatTimeElapsed = Infinity; // Draw heartbeat UI function heartBeatUI(x, y, width, height){ @@ -64,7 +82,7 @@ function heartBeatUI(x, y, width, height){ for (let index = 0; index < heartBeatHistory.length; index++) { const qrsValueAtPosition = heartBeatHistory[index]; const qrsValueAtNextPosition = heartBeatHistory[index+1]; - line(x+(index*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtPosition*width/heartBeatHistory.length), x+((index+1)*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtNextPosition*width/heartBeatHistory.length), "red"); + line(x+(index*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtPosition*width/heartBeatHistory.length), x+((index+1)*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtNextPosition*width/heartBeatHistory.length),Math.min(3,Math.max(3/beatTimeElapsed,1)), "red"); } } diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js index d5d7b7e..c4ef125 100644 --- a/docs/assets/js/constants.js +++ b/docs/assets/js/constants.js @@ -34,6 +34,11 @@ var constants = { complex_width: 18 } }, + lifeFuncs:{ + breath:{ + fullBreath: 200 + } + }, legs:{ size:{ maximumMovement: 30 diff --git a/docs/assets/js/game.js b/docs/assets/js/game.js index 02bb89b..262094c 100644 --- a/docs/assets/js/game.js +++ b/docs/assets/js/game.js @@ -341,6 +341,11 @@ function rect(x,y,w,h,color) { curCtx.fillRect(x-(w/2)+camera.x+difx,y-(h/2)+camera.y+dify,w,h); } +function cartesianRect(x,y,w,h,color) { + curCtx.fillStyle = color; + curCtx.fillRect(x+camera.x+difx,y+camera.y+dify,w,h); +} + function circle(x,y,r,color) { curCtx.beginPath(); curCtx.arc(x+camera.x+difx, y+camera.y+dify, r, 0, 2 * Math.PI, false); @@ -348,9 +353,10 @@ function circle(x,y,r,color) { curCtx.fill(); } -function line(x1, y1, x2, y2, color) { +function line(x1, y1, x2, y2, weight, color) { curCtx.beginPath(); curCtx.strokeStyle = color; + curCtx.lineWidth = weight; curCtx.moveTo(x1 + camera.x + difx, y1 + camera.y + dify); curCtx.lineTo(x2 + camera.x + difx , y2 + camera.y + dify); curCtx.stroke(); diff --git a/docs/assets/js/player/lifeFunctions.js b/docs/assets/js/player/lifeFunctions.js index 9fdf42f..0cd075e 100644 --- a/docs/assets/js/player/lifeFunctions.js +++ b/docs/assets/js/player/lifeFunctions.js @@ -17,14 +17,13 @@ function updateLife() { if(keyPress[k.x]) { heartbeat(); } - }; function breathe() { breath += 5; - if(breath >= 200) { - breath = 200; + if(breath >= constants.lifeFuncs.breath.fullBreath) { + breath = constants.lifeFuncs.breath.fullBreath; fullBreathTimer++; if(fullBreathTimer >= 60) { //cough and lose breath or something @@ -37,5 +36,4 @@ function breathe() { function heartbeat() { heartBeat = true; - }; \ No newline at end of file