|
|
| (39 intermediate revisions by 6 users not shown) |
| Line 5: |
Line 5: |
| | <style> | | <style> |
| | canvas { | | canvas { |
| − | border:1px solid #002147;
| |
| | background-color: #e8d5d7; | | background-color: #e8d5d7; |
| | width:80%; | | width:80%; |
| Line 13: |
Line 12: |
| | } | | } |
| | | | |
| − | </style>
| + | hr { |
| − | </head>
| + | display: block; |
| − | <body onload="startStartScreen()">
| + | height: 1px; |
| | + | border: 0; |
| | + | border-top: 1px solid black; |
| | + | margin: 1em 0; |
| | + | padding: 0; |
| | + | } |
| | | | |
| − | | + | .btn-circle { |
| − | <img id="magnify-glass" src="https://static.igem.org/mediawiki/2017/a/a6/T--oxford--manifying-glass.png" style = "display:none">
| + | width: 50px; |
| − | <img id="red-blood-cell" src = "https://static.igem.org/mediawiki/2017/d/d6/T--oxford--home-rbc.png" style = "display:none">
| + | height: 50px; |
| − | <img id="t-cruzi" src = "https://static.igem.org/mediawiki/2017/4/42/T--oxford--t_cruzi_cartoon.png" style = "display: none">
| + | padding: 10px 16px; |
| − | <img id="start_screen_img" src = "https://static.igem.org/mediawiki/2017/7/72/T--oxford--home--landing_page.png" style = "display: none">
| + | border-radius: 50%; |
| − | | + | font-size: 24px; |
| − | | + | line-height: 1.33; |
| − | | + | background-color: rgba(95,155,175,0.9); |
| − | <div id='canvas_happy' class="container-fluid">
| + | |
| − | <div id='header' style="margin-top: 100px"></div>
| + | |
| − | <div id="wrapper" role="wrapper">
| + | |
| − | <center><canvas id="main" width="800" height="452" style="display: block; background-color: #f7eff0;"></canvas></center>
| + | |
| − | </div>
| + | |
| − | <div id='header' style="margin-top: 100px"></div>
| + | |
| − | </div>
| + | |
| − | <div class="container-fluid">
| + | |
| − | <div class="jumbotron">
| + | |
| − | <p>The aim of our project was to develop a cell-free detection system for congenital Chagas disease in the acute phase by detecting the cruzipain in the blood.
| + | |
| − | Congenital Chagas disease is a growing global concern and at present, the acute phase of Chagas disease is difficult to diagnose as it is asymptomatic and current diagnostics are both expensive and inaccessible to the majority of those affected. Our final diagnostic kit would allow Chagas disease to be detected by preventing the clotting of a blood sample. </p>
| + | |
| − | <p> We imagine that this system would be adaptable for other parasites and pathogens which have similar difficulties in detection, both in the input for the system and the options for output.</p>
| + | |
| − | <br></br>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <script>
| + | |
| − | | + | |
| − | var myGamePiece;
| + | |
| − | var cells_size = 250;
| + | |
| − | var cells = [cells_size];
| + | |
| − | var tCruzi;
| + | |
| − | var delay = 0;
| + | |
| − | var magnification = 2;
| + | |
| − | var rbc_w = 60/2;
| + | |
| − | var rbc_h = 53/2;
| + | |
| − | var t_cruzi_w = 50;
| + | |
| − | var t_cruzi_h = 81; //t cruzi image height
| + | |
| − | var magnify_w = 2874;
| + | |
| − | var magnify_h = 3475;
| + | |
| − | var peek_size = 100;
| + | |
| − | var time;
| + | |
| − | var checked = false;
| + | |
| − | var found = false;
| + | |
| − | | + | |
| − | function startStartScreen(){
| + | |
| − | document.getElementById('main').style.cursor = "block"; | + | |
| − | //document.getElementById('header').style.cursor = "block"; | + | |
| − | //document.getElementById('title').style.cursor = "block"; | + | |
| − | myStartScreen.start();
| + | |
| − | //console.log('startScreen');
| + | |
| | } | | } |
| | | | |
| − | function startGame() {
| + | .btn-circle-lg { |
| − | document.getElementById('main').style.cursor = "none"; | + | width: 240px; |
| − | //document.getElementById('header').style.cursor = "none"; | + | height: 240px; |
| − | //document.getElementById('title').style.cursor = "none"; | + | padding: 10px 16px; |
| − | myGamePiece = new createMouse(10, 120); | + | border-radius: 50%; |
| − | myGameArea.start();
| + | font-size: 60px; |
| − | initialize(); | + | line-height: 1.33; |
| − | //console.log('startGame'); | + | |
| | } | | } |
| | | | |
| − | function initialize(){
| + | .videoWrapper { |
| − | for (var i = 0; i < cells_size; i++ ) {
| + | position: relative; |
| − | var dirr = (Math.random() * 2 * Math.PI);
| + | padding-bottom: 56.25%; /* 16:9 */ |
| − | var posx = (Math.random() * (main.width - 60));
| + | padding-top: 25px; |
| − | var posy = (Math.random() * (main.height - 53));
| + | height: 0; |
| − | cells[i] = new createComponent(posx,posy,dirr,"cell");
| + | } |
| − | | + | .videoWrapper iframe { |
| − | }
| + | position: absolute; |
| − | var dirr = (Math.random() * 2 * Math.PI);
| + | top: 0; |
| − | var posx = (Math.random() * (main.width - 50));
| + | left: 0; |
| − | var posy = (Math.random() * (main.height - 81));
| + | width: 100%; |
| − | tCruzi = new createComponent(posx,posy,dirr,"parasite");
| + | height: 100%; |
| − | time = new createComponent(30, 30, 0, "time");
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | | + | .carousel-caption a { |
| − | var myStartScreen = {
| + | font-size: 50px; |
| − | start : function(){ | + | font-weight: bolder; |
| − | this.frameNo = 0;
| + | text-shadow: 1px 3px 5px rgba(0,0,0,0.8); |
| − | this.interval = setInterval(updateStartScreen, 20);
| + | color: white; |
| − | window.addEventListener('mousemove', function(e){
| + | |
| − | myStartScreen.x = e.pageX;
| + | |
| − | myStartScreen.y = e.pageY-200;
| + | |
| − | })
| + | |
| − | myStartScreen.mouseClick = false
| + | |
| − | window.addEventListener('mousedown', function(e){
| + | |
| − | xleft = $("#main").offset().left; //getting the coordinates of the canvas
| + | |
| − | ytop = $("#main").offset().top;
| + | |
| − | xright = $("#main").offset().left + $("#main").outerWidth();
| + | |
| − | ybottom = $("#main").offset().top + $("#main").outerHeight();
| + | |
| − | //console.log(e.pageX);
| + | |
| − | //console.log(e.pageY);
| + | |
| − | if(e.pageX < xright){
| + | |
| − | if(e.pageX > xleft){
| + | |
| − | if(e.pageY < ybottom){
| + | |
| − | if(e.pageY > ytop){
| + | |
| − | myStartScreen.mouseClick = true;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | //console.log("mouth inside detected");
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | })
| + | |
| − | /*window.addEventListener('resize',function(e){
| + | |
| − | $("#main").outerHeight(($(window).height()-$("#main").offset().top- Math.abs($("#main").outerHeight(true) - $("#main").outerHeight()))*0.8);
| + | |
| − | })*/
| + | |
| − | },
| + | |
| − | clear : function() {
| + | |
| − | main.getContext("2d").clearRect(0, 0, main.width, main.height);
| + | |
| − | }, | + | |
| − | stop : function(){
| + | |
| − | clearInterval(this.interval);
| + | |
| − | }
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | var myGameArea = {
| + | #button-span { |
| − | start : function() { | + | font-weight: bold; |
| − | this.frameNo = 0;
| + | font-size: 20px; |
| − | this.interval = setInterval(updateGameArea, 20);
| + | color: black; |
| − | window.addEventListener('mousemove', function(e){
| + | line-height: 0.2; |
| − | myGameArea.x = e.pageX;
| + | text-align:center; |
| − | myGameArea.y = e.pageY-200;
| + | position: relative; |
| − | })
| + | left: 0px; |
| − | myGameArea.mouseSensor = false;
| + | right: 0px; |
| − | window.addEventListener('mousedown', function(e){
| + | display: block; |
| − | xleft = $("#main").offset().left; //getting the coordinates of the canvas
| + | |
| − | ytop = $("#main").offset().top;
| + | |
| − | xright = $("#main").offset().left + $("#main").outerWidth();
| + | |
| − | ybottom = $("#main").offset().top + $("#main").outerHeight();
| + | |
| − | console.log(xleft);
| + | |
| − | console.log(xright);
| + | |
| − | console.log(e.pageX);
| + | |
| − | console.log(ytop);
| + | |
| − | console.log(ybottom);
| + | |
| − | console.log(e.pageY);
| + | |
| − | if(e.pageX < xright){
| + | |
| − | if(e.pageX > xleft){
| + | |
| − | if(e.pageY < ybottom){
| + | |
| − | if(e.pageY > ytop){
| + | |
| − | myGameArea.mouseSensor = true;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | })
| + | |
| − | },
| + | |
| − | clear : function() { | + | |
| − | main.getContext("2d").clearRect(0, 0, main.width, main.height);
| + | |
| − | }, | + | |
| − | stop : function() {
| + | |
| − | clearInterval(this.interval);
| + | |
| − | | + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | function createMouse(x, y) {
| + | #button-lg-span { |
| − | this.x = x; | + | font-weight: bold; |
| − | this.y = y; | + | font-size: 20px; |
| − | | + | color: black; |
| − | this.update = function(){ | + | line-height: 1; |
| − | main.style.display = "block";
| + | text-align:center; |
| − | ctx = main.getContext("2d");
| + | position: relative; |
| − | var img = document.getElementById("magnify-glass");
| + | left: 0px; |
| − | ctx.drawImage(img, this.x-magnify_w/22-13, this.y-magnify_w/22+13, magnify_w/11, magnify_h/11);
| + | right: 0px; |
| − | ctx.save();
| + | display: block; |
| − | ctx.beginPath();
| + | } |
| − | ctx.arc(this.x, this.y, peek_size, 0, 2 * Math.PI);
| + | #bodyContent .colourbox { |
| − | ctx.fillStyle = 'rgb(255, 237, 237)';
| + | list-style-type: none; |
| − | ctx.fill();
| + | background-color: #DCE7EF; |
| − | //ctx.lineWidth = 3;
| + | border-radius: 25px; |
| − | ctx.strokeStyle = '#003300';
| + | } |
| − | //ctx.stroke();
| + | #bodyContent ul{ |
| − | ctx.clip();
| + | list-style-type: none; |
| − | ctx.restore()
| + | } |
| − | } | + | #circles_home { |
| − | | + | margin: 50px 50px 50px 80px; |
| − | this.updateFound = function(){
| + | } |
| − | main.style.display = "block";
| + | #texthome{ |
| − | ctx = main.getContext("2d");
| + | width: 80%; |
| − | var img = document.getElementById("magnify-glass");
| + | |
| − | ctx.drawImage(img, this.x-magnify_w/22-13, this.y-magnify_w/22+13, magnify_w/11, magnify_h/11);
| + | |
| − | ctx.save();
| + | |
| − | ctx.beginPath();
| + | |
| − | ctx.arc(this.x, this.y, peek_size, 0, 2 * Math.PI);
| + | |
| − | ctx.fillStyle = "rgba(0,33,71,.5)";
| + | |
| − | ctx.fill();
| + | |
| − | //ctx.lineWidth = 3;
| + | |
| − | ctx.strokeStyle = '#003300';
| + | |
| − | ctx.font = "20px Calibri";
| + | |
| − | ctx.fillStyle = "#FFFFFF";
| + | |
| − | this.text1 = " Yay!"
| + | |
| − | this.text2 = " You've found"
| + | |
| − | this.text3 = " it in " + Math.round(myGameArea.frameNo*20/1000) + " seconds. In"
| + | |
| − | this.text4 = " practice, it takes 5-10"
| + | |
| − | this.text5 = " minutes for a sample"
| + | |
| − | this.text6 = " of blood under the"
| + | |
| − | this.text7 = " microscope."
| + | |
| − | ctx.fillText(this.text1, this.x-80, this.y-80);
| + | |
| − | ctx.fillText(this.text2, this.x-80, this.y-60);
| + | |
| − | ctx.fillText(this.text3, this.x-80, this.y-40);
| + | |
| − | ctx.fillText(this.text4, this.x-90, this.y-20);
| + | |
| − | ctx.fillText(this.text5, this.x-100, this.y);
| + | |
| − | ctx.fillText(this.text6, this.x-90, this.y+20);
| + | |
| − | ctx.fillText(this.text7, this.x-80, this.y+40);
| + | |
| − | ctx.font = "15px Calibri";
| + | |
| − | ctx.fillStyle = "#FFFFFF";
| + | |
| − | this.text9 = "click for"
| + | |
| − | ctx.fillText(this.text9, this.x-20, this.y+60);
| + | |
| − | | + | |
| − | | + | |
| − | ctx.font = "35px Calibri";
| + | |
| − | ctx.fillStyle = "#1569d6";
| + | |
| − | this.text8 = "RESTART"
| + | |
| − | ctx.fillText(this.text8, this.x-58, this.y+90);
| + | |
| − | | + | |
| − | //ctx.stroke();
| + | |
| − | //ctx.clip();
| + | |
| − | ctx.restore();
| + | |
| − | if (myGameArea.mouseSensor) {
| + | |
| − | checked = false; | + | |
| − | found=false;
| + | |
| − | myGameArea.stop();
| + | |
| − | startStartScreen();
| + | |
| − | //console.log("mouse detected after found");
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | this.found = function(){
| + | |
| − | var distance_x = Math.abs(this.x - tCruzi.x - t_cruzi_w/8);
| + | |
| − | var distance_y = Math.abs(this.y - tCruzi.y - t_cruzi_h/8);
| + | |
| − | if ((distance_x*distance_x + distance_y*distance_y) < 100){
| + | |
| − | return true;
| + | |
| − | }
| + | |
| − | else {return false;}
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | function createComponent(x, y, dir, type){
| + | </style> |
| − | this.type = type;
| + | </head> |
| − | this.x = x;
| + | <body onload="startStartScreen()"> |
| − | this.y = y;
| + | |
| − | this.dir = dir;
| + | |
| − | this.is_peeking = false;
| + | |
| − | this.dx = 0;
| + | |
| − | this.dy = 0;
| + | |
| − | this.distance = 0;
| + | |
| − | this.peek_calc = function(on_canvas){
| + | |
| − | if (on_canvas)
| + | |
| − | {
| + | |
| − | this.dx = myGameArea.x - this.x;
| + | |
| − | this.dy = myGameArea.y - this.y;
| + | |
| − | this.distance = Math.sqrt(this.dx*this.dx + this.dy*this.dy);
| + | |
| − | this.is_peeking = (this.distance < peek_size * 1.5)? true:false;
| + | |
| − | }
| + | |
| − | else
| + | |
| − | {
| + | |
| − | this.is_peeking = false;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | this.draw_main = function(){
| + | |
| − | ctx = main.getContext("2d");
| + | |
| − | if(this.type == "cell"){
| + | |
| − |
| + | |
| − | var img = document.getElementById("red-blood-cell");
| + | |
| − | ctx.drawImage(img, this.x, this.y, rbc_w, rbc_h);
| + | |
| − | }
| + | |
| − | if(this.type == "parasite"){
| + | |
| − |
| + | |
| − | var img = document.getElementById("t-cruzi");
| + | |
| − | ctx.drawImage(img, this.x, this.y, t_cruzi_w/4, t_cruzi_h/4);
| + | |
| − | }
| + | |
| − | //if(this.type)
| + | |
| − | }
| + | |
| | | | |
| − | this.draw_peek = function(){
| + | <div class="container"> |
| − | if (this.is_peeking)
| + | <div style="margin-top: 60px"></div> |
| − | {
| + | <div class="row"> |
| − | ctx = main.getContext("2d");
| + | <h1 style="line-height:60px">OXFORD iGEM 2017<br/><small><i>See cruzi </i></small><br/></h1> |
| − | ctx.save();
| + | </div> |
| − | ctx.beginPath();
| + | |
| − | ctx.arc(myGameArea.x, myGameArea.y, peek_size, 0, 2 * Math.PI);
| + | |
| − | ctx.clip();
| + | |
| − | if(this.type == "cell"){
| + | |
| − |
| + | |
| − | var img = document.getElementById("red-blood-cell");
| + | |
| − | ctx.drawImage(img, (this.x - this.dx * magnification), (this.y - this.dy * magnification), rbc_w * magnification * 1.5, rbc_h * magnification * 1.5);
| + | |
| − | }
| + | |
| − | if(this.type == "parasite"){
| + | |
| − |
| + | |
| − | var img = document.getElementById("t-cruzi");
| + | |
| − | ctx.drawImage(img, (this.x - this.dx * magnification), (this.y - this.dy * magnification), t_cruzi_w/4 * magnification * 1.5, t_cruzi_h/4 * magnification * 1.5);
| + | |
| − | }
| + | |
| | | | |
| − | ctx.restore();
| + | <div class="row"> |
| − | }
| + | <div id="myCarousel" class="carousel slide" data-ride="carousel"> |
| − | } | + | <!-- Indicators --> |
| | + | <ol class="carousel-indicators"> |
| | + | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> |
| | + | <li data-target="#myCarousel" data-slide-to="1"></li> |
| | + | <li data-target="#myCarousel" data-slide-to="2"></li> |
| | + | <li data-target="#myCarousel" data-slide-to="3"></li> |
| | + | <li data-target="#myCarousel" data-slide-to="4"></li> |
| | + | </ol> |
| | | | |
| − | this.move = function(){
| + | <!-- Wrapper for slides --> |
| | + | <div class="carousel-inner"> |
| | | | |
| − | var newXDirection = 0.1*Math.cos(this.dir);
| + | <div class="item active"> |
| − | var newYDirection = 0.1*Math.sin(this.dir);
| + | <img src="https://static.igem.org/mediawiki/2017/9/92/T--Oxford--NewHome--awardresize.jpg" alt="Award"> |
| − | this.x += newXDirection;
| + | <div class="carousel-caption"> |
| − | this.y += newYDirection;
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| | + | <h2> MEET THE TEAM! </h2> |
| | + | </a> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | var bottomline = main.height - rbc_h;
| + | <div class="item"> |
| − | var rightline = main.width - rbc_w;
| + | <img src="https://static.igem.org/mediawiki/2017/1/18/T--Oxford--NewHome--Posterresize.jpg" alt="Poster"> |
| − | if(this.y > bottomline || this.x > rightline || this.y < 0 || this.x < 0){
| + | <div class="carousel-caption"> |
| − |
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | this.x -= newXDirection*2;
| + | <h2> MEET THE TEAM! </h2> |
| − | this.y -= newYDirection*2;
| + | </a> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | }
| + | <div class="item"> |
| − |
| + | <img src="https://static.igem.org/mediawiki/2017/8/81/T--Oxford--NewHome--Meetingresize.jpg" alt="Meeting"> |
| − | } | + | <div class="carousel-caption"> |
| | + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| | + | <h2> MEET THE TEAM! </h2> |
| | + | </a> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | this.updateTime = function(){
| + | <div class="item"> |
| − | ctx.font = "30px Arial";
| + | <img src="https://static.igem.org/mediawiki/2017/0/0a/T--Oxford--NewHome--Jokesresize.jpg" alt="Jokes"> |
| − | ctx.fillStyle = "#000000";
| + | <div class="carousel-caption"> |
| − | ctx.fillText(this.text, this.x, this.y);
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | } | + | <h2> MEET THE TEAM! </h2> |
| | + | </a> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | }
| + | <div class="item"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/2/2c/T--Oxford--NewHome--Ladiesresize.jpg" alt="Ladies"> |
| | + | <div class="carousel-caption"> |
| | + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| | + | <h2> MEET THE TEAM! </h2> |
| | + | </a> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | function centerText(ctx, text, y) {
| + | <!-- Left and right controls --> |
| − | var measurement = ctx.measureText(text); | + | <a class="left carousel-control" href="#myCarousel" data-slide="prev"> |
| − | var x = (ctx.canvas.width - measurement.width) / 2; | + | <span class="glyphicon glyphicon-chevron-left"></span> |
| − | ctx.fillText(text, x-50, y); | + | <span class="sr-only">Previous</span> |
| − | }
| + | </a> |
| | + | <a class="right carousel-control" href="#myCarousel" data-slide="next"> |
| | + | <span class="glyphicon glyphicon-chevron-right"></span> |
| | + | <span class="sr-only">Next</span> |
| | + | </a> |
| | + | </div> |
| | | | |
| − | var title = 'Finding T. Cruzi';
| + | <div class="row"> |
| − | var hue = 0;
| + | <div class="col-sm-6"> |
| − | var direction = 1;
| + | <a href="https://2017.igem.org/Team:Oxford/Awards"> |
| − | var ctx = main.getContext('2d');
| + | <img class="img-responsive img-center" style="width:100%" src="https://static.igem.org/mediawiki/2017/f/f4/T--Oxford--NewHome--Prizesbox.png"> |
| − | var wasButtonDown = false;
| + | </a> |
| | + | </div> |
| | + | <div class="col-sm-6"> |
| | + | <a class="twitter-timeline" data-width="100%" data-height="500" href="https://twitter.com/OxfordiGEM?ref_src=twsrc%5Etfw">Tweets by OxfordiGEM</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | function updateStartScreen(){
| + | <div class="row"> |
| − | hue += 1 * direction;
| + | <div class="col-sm-12"> |
| − | if (hue > 255) direction = -1;
| + | <div class="embed-responsive embed-responsive-16by9"> |
| − | if (hue < 78) direction = 1;
| + | <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4heo3c2qvWo" allowfullscreen></iframe> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | var y = ctx.canvas.height / 2;
| + | </div> |
| − | var color = 'rgb(7,38,' + hue + ')';
| + | |
| | | | |
| − | myStartScreen.clear();
| + | <div class="container"> |
| | + | <div style="margin-top: 60px"></div> |
| | + | <div class="row"> |
| | + | <h2> Our Project </h2><br/> |
| | + | </div> |
| | + | <div class="row" align="centre"> |
| | | | |
| − | var img = document.getElementById("start_screen_img");
| + | <a href="https://2017.igem.org/Team:Oxford/Game"> <img class="img-responsive img-center" src="https://static.igem.org/mediawiki/2017/thumb/a/a6/T--oxford--play2.png/320px-T--oxford--play2.png"> </a> |
| − | ctx.drawImage(img, 0, 0, 800, 452);
| + | |
| − | //ctx.drawImage(img, 0, 0, main.height*start_screen_img.width/start_screen_img.height, main.height);
| + | |
| − | //console.log(main.width);
| + | |
| − | //console.log(main.height);
| + | |
| − | /*var screen_height = $("#main").outerHeight();
| + | |
| − | var screen_width = $("#main").outerWidth();
| + | |
| − | var screen_width_height_ratio = screen_width/screen_height;
| + | |
| − | var ssi_width_height_ratio = start_screen_img.width/start_screen_img.height;//ssi = start screen img
| + | |
| − | //console.log(ssi_width_height_ratio);//working correctly
| + | |
| − | //console.log(screen_width_height_ratio);//working correctly
| + | |
| − | //console.log(ssi_width_height_ratio);
| + | |
| − | if(screen_width_height_ratio>ssi_width_height_ratio){
| + | |
| − | var start_screen_x = (main.width - main.height*ssi_width_height_ratio)/2;
| + | |
| − | //console.log('start screen x is' + start_screen_x);
| + | |
| − | ctx.drawImage(img, start_screen_x, 0, main.height*1.78, main.height);
| + | |
| − | console.log(screen_height*ssi_width_height_ratio);
| + | |
| − | console.log(screen_height);
| + | |
| − | } else{
| + | |
| − | //if(screen_width_height_ratio<ssi_width_height_ratio){
| + | |
| − | //console.log("smaller");
| + | |
| − | /*var start_screen_y = (screen_height - screen_width/ssi_width_height_ratio)/2;
| + | |
| − | ctx.drawImage(img, 0, start_screen_y, screen_width, screen_width/ssi_width_height_ratio);
| + | |
| − | console.log(screen_width);
| + | |
| − | console.log(screen_width/ssi_width_height_ratio);
| + | |
| − |
| + | |
| − | ctx.drawImage(img, 0, 0, screen_width, screen_width/ssi_width_height_ratio);
| + | |
| − | }*/
| + | |
| | | | |
| − | ctx.fillStyle = 'white';
| + | <p><br/>The aim of our project was to develop a cell-free detection system for congenital Chagas disease in the acute phase by detecting the cruzipain in the blood. |
| − | ctx.font = '48px monospace';
| + | Congenital Chagas disease is a growing global concern and at present, the acute phase of Chagas disease is difficult to diagnose as it is asymptomatic and current diagnostics are both expensive and inaccessible to the majority of those affected. Our final diagnostic kit would allow Chagas disease to be detected by preventing the clotting of a blood sample. </p> |
| − | //centerText(ctx, title, main.height*0.4);
| + | <p> We imagine that this system would be adaptable for other parasites and pathogens which have similar difficulties in detection, both in the input for the system and the options for output.</p> |
| − | | + | </div> |
| − | ctx.fillStyle = color;
| + | </div> |
| − | ctx.font = '40px Helvetica';
| + | </div> |
| − | //centerText(ctx, 'click to begin', main.height*0.9);
| + | |
| − | | + | |
| − | | + | |
| − | if (myStartScreen.mouseClick) {
| + | |
| − | // do something here to transition to the actual game
| + | |
| − | myStartScreen.stop();
| + | |
| − | startGame();
| + | |
| − | //console.log('startgamefromclick');
| + | |
| − |
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | function updateGameArea() {
| + | |
| − | var on_screen = false;
| + | |
| − | if (myGameArea.x){
| + | |
| − | if(myGameArea.y){
| + | |
| − | myGamePiece.x = myGameArea.x;
| + | |
| − | myGamePiece.y = myGameArea.y;
| + | |
| − | on_screen = true;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| | + | <div class="container"> |
| | + | <div style="margin-top: 60px"></div> |
| | + | <div class="row"> |
| | + | <div class="col-sm-3"> |
| | + | <form action="https://2017.igem.org/Team:Oxford/Description"> |
| | + | <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(72,145,220)"><span id="button-lg-span">Project<br>Description</span></button> |
| | + | </form> |
| | + | </div> |
| | | | |
| − | myGameArea.clear(); | + | <div class="col-sm-3"> |
| − | if(checked == false){ | + | <form action="https://2017.igem.org/Team:Oxford/Overview_Wet_Lab"> |
| − | found = myGamePiece.found();
| + | <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(234,139,68)"><span id="button-lg-span">Wet Lab<br>Overview</span></button> |
| − | if(found) {
| + | </form> |
| − | checked = true;
| + | </div> |
| − | //console.log("checked = true")
| + | |
| − | //myGameArea.stop();
| + | |
| − | }
| + | |
| − | } | + | |
| − | | + | |
| − | if(!found){myGameArea.frameNo += 1;} //stop the timing when t cruzi is found | + | |
| | | | |
| | + | <div class="col-sm-3"> |
| | + | <form action="https://2017.igem.org/Team:Oxford/Model"> |
| | + | <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(185, 207, 150)"><span id="button-lg-span">Dry Lab<br>Overview</span></button> |
| | + | </form> |
| | + | </div> |
| | | | |
| − | | + | <div class="col-sm-3"> |
| − | myGamePiece.update(); | + | <form action="https://2017.igem.org/Team:Oxford/Applied_Design"> |
| | + | <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(95, 155, 175)"><span id="button-lg-span">Applied<br>Design</span></button> |
| | + | </form> |
| | + | </div> |
| | | | |
| − | delay += 1;
| + | </div> |
| − | if (delay >= 2) {
| + | </div> |
| − | for (var i = 0; i < cells.length; i++) {
| + | |
| − | cells[i].dir += (Math.random() * Math.PI/5) - (Math.PI/10);
| + | |
| − | cells[i].move();
| + | |
| − | cells[i].peek_calc(on_screen);
| + | |
| − | }
| + | |
| − | tCruzi.dir += (Math.random() * Math.PI/5) - (Math.PI/10);
| + | |
| − | tCruzi.move();
| + | |
| − | tCruzi.peek_calc(on_screen);
| + | |
| − | }
| + | |
| − |
| + | |
| − | for (var i = 0; i < cells.length; i++ ) {
| + | |
| − | //console.log("cell" + i + "is updated");
| + | |
| − | cells[i].draw_main();
| + | |
| − |
| + | |
| − | }
| + | |
| − | //tCruzi.draw_main();
| + | |
| − |
| + | |
| − | | + | |
| − | | + | |
| − | myGamePiece.update();
| + | |
| − | //console.log(tCruzi.type);
| + | |
| − | for (var i = 0; i < cells.length; i++ ) {
| + | |
| − | //console.log("cell" + i + "is updated");
| + | |
| − | cells[i].draw_peek();
| + | |
| − |
| + | |
| − | }
| + | |
| − | tCruzi.draw_peek();
| + | |
| − | | + | |
| − | time.text="time elapsed: " + Math.round(myGameArea.frameNo*20/1000) + " seconds";
| + | |
| − | time.updateTime();
| + | |
| − | | + | |
| − | | + | |
| − | if (found)
| + | |
| − | {myGamePiece.updateFound();
| + | |
| − | //console.log("third update");
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | </script> | + | |
| | | | |
| | </body> | | </body> |
