|
|
| (127 intermediate revisions by 7 users not shown) |
| Line 5: |
Line 5: |
| | <style> | | <style> |
| | canvas { | | canvas { |
| − | border:1px solid #d3d3d3;
| |
| | background-color: #e8d5d7; | | background-color: #e8d5d7; |
| | + | width:80%; |
| | } | | } |
| − | </style>
| + | #canvas_happy{ |
| − | </head>
| + | background-color: #002147; |
| − | <body onload="startStartScreen()">
| + | |
| − | | + | |
| − | | + | |
| − | <img id="magnify-glass" src="https://static.igem.org/mediawiki/2017/a/a6/T--oxford--manifying-glass.png" style = "display:none">
| + | |
| − | <img id="red-blood-cell" src = "https://static.igem.org/mediawiki/2017/d/d6/T--oxford--home-rbc.png" style = "display:none">
| + | |
| − | <img id="t-cruzi" src = "https://static.igem.org/mediawiki/2017/4/42/T--oxford--t_cruzi_cartoon.png" style = "display: none">
| + | |
| − | <img id="start-screen" src = "https://static.igem.org/mediawiki/2017/c/c8/T--oxford--home--background.jpeg" style = "display: none">
| + | |
| − | | + | |
| − | <div class="container-fluid">
| + | |
| − | <div style="margin-top: 100px"></div>
| + | |
| − | <h1 class="text-center"><i>See. cruzi</i></h1>
| + | |
| − | <canvas id="main" width="960" height="540" style="display: block; background-color: #f7eff0;"></canvas>
| + | |
| − | | + | |
| − | | + | |
| − | <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(){
| + | |
| − | myStartScreen.start();
| + | |
| − | //console.log('startScreen');
| + | |
| | } | | } |
| | | | |
| − | function startGame() {
| + | hr { |
| − | myGamePiece = new createMouse(10, 120); | + | display: block; |
| − | myGameArea.start(); | + | height: 1px; |
| − | initialize(); | + | border: 0; |
| − | //console.log('startGame'); | + | border-top: 1px solid black; |
| | + | margin: 1em 0; |
| | + | padding: 0; |
| | } | | } |
| | | | |
| − | function initialize(){
| + | .btn-circle { |
| − | for (var i = 0; i < cells_size; i++ ) {
| + | width: 50px; |
| − | var dirr = (Math.random() * 2 * Math.PI);
| + | height: 50px; |
| − | var posx = (Math.random() * (main.width - 60));
| + | padding: 10px 16px; |
| − | var posy = (Math.random() * (main.height - 53));
| + | border-radius: 50%; |
| − | cells[i] = new createComponent(posx,posy,dirr,"cell"); | + | font-size: 24px; |
| − | | + | line-height: 1.33; |
| − | } | + | background-color: rgba(95,155,175,0.9); |
| − | var dirr = (Math.random() * 2 * Math.PI);
| + | |
| − | var posx = (Math.random() * (main.width - 50)); | + | |
| − | var posy = (Math.random() * (main.height - 81)); | + | |
| − | tCruzi = new createComponent(posx,posy,dirr,"parasite"); | + | |
| − | time = new createComponent(30, 30, 0, "time");
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | | + | .btn-circle-lg { |
| − | var myStartScreen = {
| + | width: 240px; |
| − | start : function(){ | + | height: 240px; |
| − | this.frameNo = 0;
| + | padding: 10px 16px; |
| − | this.interval = setInterval(updateStartScreen, 20);
| + | border-radius: 50%; |
| − | window.addEventListener('mousemove', function(e){
| + | font-size: 60px; |
| − | myStartScreen.x = e.pageX;
| + | line-height: 1.33; |
| − | myStartScreen.y = e.pageY;
| + | |
| − | })
| + | |
| − | myStartScreen.mouseClick = false
| + | |
| − | window.addEventListener('mousedown', function(e){
| + | |
| − | console.log(e.pageX);
| + | |
| − | console.log(e.pageY);
| + | |
| − | if(e.pageX < 800){
| + | |
| − | if(e.pageY < 500){
| + | |
| − | myStartScreen.mouseClick = true;
| + | |
| − | console.log("mouth inside detected");
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | })
| + | |
| − | },
| + | |
| − | clear : function() { | + | |
| − | main.getContext("2d").clearRect(0, 0, main.width, main.height);
| + | |
| − | }, | + | |
| − | stop : function(){
| + | |
| − | clearInterval(this.interval);
| + | |
| − | }
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | var myGameArea = {
| + | .videoWrapper { |
| − | start : function() {
| + | position: relative; |
| − | this.frameNo = 0;
| + | padding-bottom: 56.25%; /* 16:9 */ |
| − | this.interval = setInterval(updateGameArea, 20);
| + | padding-top: 25px; |
| − | window.addEventListener('mousemove', function(e){
| + | height: 0; |
| − | myGameArea.x = e.pageX;
| + | |
| − | myGameArea.y = e.pageY;
| + | |
| − | })
| + | |
| − | myGameArea.mouseSensor = false;
| + | |
| − | window.addEventListener('mousedown', function(e){
| + | |
| − | if(e.pageX<800){
| + | |
| − | if(e.pageY<500){
| + | |
| − | myGameArea.mouseSensor = true;
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | })
| + | |
| − | },
| + | |
| − | clear : function() {
| + | |
| − | main.getContext("2d").clearRect(0, 0, main.width, main.height);
| + | |
| − | },
| + | |
| − | stop : function() {
| + | |
| − | clearInterval(this.interval);
| + | |
| − | | + | |
| − | }
| + | |
| | } | | } |
| − | | + | .videoWrapper iframe { |
| − | function createMouse(x, y) {
| + | position: absolute; |
| − | this.x = x;
| + | top: 0; |
| − | this.y = y;
| + | left: 0; |
| − | this.update = function(){
| + | width: 100%; |
| − | main.style.display = "block";
| + | height: 100%; |
| − | ctx = main.getContext("2d");
| + | |
| − | 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 = 'rgb(255, 237, 237)';
| + | |
| − | ctx.fill();
| + | |
| − | //ctx.lineWidth = 3;
| + | |
| − | ctx.strokeStyle = '#003300';
| + | |
| − | //ctx.stroke();
| + | |
| − | ctx.clip();
| + | |
| − | ctx.restore()
| + | |
| − | }
| + | |
| − | | + | |
| − | this.updateFound = function(){
| + | |
| − | main.style.display = "block";
| + | |
| − | ctx = main.getContext("2d");
| + | |
| − | 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){
| + | .carousel-caption a { |
| − | this.type = type; | + | font-size: 50px; |
| − | this.x = x; | + | font-weight: bolder; |
| − | this.y = y;
| + | text-shadow: 1px 3px 5px rgba(0,0,0,0.8); |
| − | this.dir = dir;
| + | color: white; |
| − | 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(){
| + | |
| − | if (this.is_peeking)
| + | |
| − | {
| + | |
| − | ctx = main.getContext("2d");
| + | |
| − | ctx.save();
| + | |
| − | 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();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | this.move = function(){
| + | |
| − | | + | |
| − | var newXDirection = 0.1*Math.cos(this.dir);
| + | |
| − | var newYDirection = 0.1*Math.sin(this.dir);
| + | |
| − | this.x += newXDirection;
| + | |
| − | this.y += newYDirection;
| + | |
| − | | + | |
| − | var bottomline = main.height - rbc_h;
| + | |
| − | var rightline = main.width - rbc_w;
| + | |
| − | if(this.y > bottomline || this.x > rightline || this.y < 0 || this.x < 0){
| + | |
| − |
| + | |
| − | this.x -= newXDirection*2;
| + | |
| − | this.y -= newYDirection*2;
| + | |
| − | | + | |
| − | }
| + | |
| − |
| + | |
| − | } | + | |
| − | | + | |
| − | this.updateTime = function(){
| + | |
| − | ctx.font = "30px Arial";
| + | |
| − | ctx.fillStyle = "#000000";
| + | |
| − | ctx.fillText(this.text, this.x, this.y);
| + | |
| − | }
| + | |
| − | | + | |
| | } | | } |
| | | | |
| − | function centerText(ctx, text, y) {
| + | #button-span { |
| − | var measurement = ctx.measureText(text); | + | font-weight: bold; |
| − | var x = (ctx.canvas.width - measurement.width) / 2; | + | font-size: 20px; |
| − | ctx.fillText(text, x-50, y); | + | color: black; |
| | + | line-height: 0.2; |
| | + | text-align:center; |
| | + | position: relative; |
| | + | left: 0px; |
| | + | right: 0px; |
| | + | display: block; |
| | } | | } |
| | | | |
| − | var title = 'Finding T. Cruzi';
| + | #button-lg-span { |
| − | var hue = 0;
| + | font-weight: bold; |
| − | var direction = 1;
| + | font-size: 20px; |
| − | var ctx = main.getContext('2d');
| + | color: black; |
| − | var wasButtonDown = false;
| + | line-height: 1; |
| − | | + | text-align:center; |
| − | function updateStartScreen(){
| + | position: relative; |
| − | hue += 1 * direction; | + | left: 0px; |
| − | if (hue > 255) direction = -1; | + | right: 0px; |
| − | if (hue < 78) direction = 1; | + | display: block; |
| − | | + | } |
| − | var y = ctx.canvas.height / 2; | + | #bodyContent .colourbox { |
| − | var color = 'rgb(7,38,' + hue + ')'; | + | list-style-type: none; |
| − | | + | background-color: #DCE7EF; |
| − | myStartScreen.clear(); | + | border-radius: 25px; |
| − | | + | } |
| − | var img = document.getElementById("start-screen"); | + | #bodyContent ul{ |
| − | ctx.drawImage(img, 0, 25, 960, 540); | + | list-style-type: none; |
| − | | + | } |
| − | ctx.fillStyle = 'white'; | + | #circles_home { |
| − | ctx.font = '48px monospace';
| + | margin: 50px 50px 50px 80px; |
| − | centerText(ctx, title, y-50);
| + | } |
| − | | + | #texthome{ |
| − | ctx.fillStyle = color;
| + | width: 80%; |
| − | ctx.font = '40px Helvetica';
| + | |
| − | centerText(ctx, 'click to begin', 450);
| + | |
| − | | + | |
| − | | + | |
| − | if (myStartScreen.mouseClick) {
| + | |
| − | // do something here to transition to the actual game
| + | |
| − | myStartScreen.stop();
| + | |
| − | startGame();
| + | |
| − | console.log('startgamefromclick');
| + | |
| − |
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| | + | </style> |
| | + | </head> |
| | + | <body onload="startStartScreen()"> |
| | | | |
| − | function updateGameArea() {
| + | <div class="container"> |
| − | var on_screen = false;
| + | <div style="margin-top: 60px"></div> |
| − | if (myGameArea.x){
| + | <div class="row"> |
| − | if(myGameArea.y){
| + | <h1 style="line-height:60px">OXFORD iGEM 2017<br/><small><i>See cruzi </i></small><br/></h1> |
| − | myGamePiece.x = myGameArea.x;
| + | </div> |
| − | myGamePiece.y = myGameArea.y;
| + | |
| − | on_screen = true;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − |
| + | <div class="row"> |
| − | myGameArea.clear();
| + | <div id="myCarousel" class="carousel slide" data-ride="carousel"> |
| − | if(checked == false){
| + | <!-- Indicators --> |
| − | found = myGamePiece.found();
| + | <ol class="carousel-indicators"> |
| − | if(found) {
| + | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> |
| − | checked = true;
| + | <li data-target="#myCarousel" data-slide-to="1"></li> |
| − | //console.log("checked = true")
| + | <li data-target="#myCarousel" data-slide-to="2"></li> |
| − | //myGameArea.stop();
| + | <li data-target="#myCarousel" data-slide-to="3"></li> |
| − | }
| + | <li data-target="#myCarousel" data-slide-to="4"></li> |
| − | } | + | </ol> |
| | | | |
| − | if(!found){myGameArea.frameNo += 1;} //stop the timing when t cruzi is found
| + | <!-- Wrapper for slides --> |
| | + | <div class="carousel-inner"> |
| | | | |
| − | | + | <div class="item active"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/9/92/T--Oxford--NewHome--awardresize.jpg" alt="Award"> |
| | + | <div class="carousel-caption"> |
| | + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| | + | <h2> MEET THE TEAM! </h2> |
| | + | </a> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | myGamePiece.update(); | + | <div class="item"> |
| − |
| + | <img src="https://static.igem.org/mediawiki/2017/1/18/T--Oxford--NewHome--Posterresize.jpg" alt="Poster"> |
| − | delay += 1;
| + | <div class="carousel-caption"> |
| − | if (delay >= 2) {
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | for (var i = 0; i < cells.length; i++) {
| + | <h2> MEET THE TEAM! </h2> |
| − | cells[i].dir += (Math.random() * Math.PI/5) - (Math.PI/10);
| + | </a> |
| − | cells[i].move();
| + | </div> |
| − | cells[i].peek_calc(on_screen);
| + | </div> |
| − | }
| + | |
| − | 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(); | + | |
| − | | + | |
| | | | |
| | + | <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> |
| | | | |
| − | myGamePiece.update();
| + | <div class="item"> |
| − | //console.log(tCruzi.type);
| + | <img src="https://static.igem.org/mediawiki/2017/0/0a/T--Oxford--NewHome--Jokesresize.jpg" alt="Jokes"> |
| − | for (var i = 0; i < cells.length; i++ ) {
| + | <div class="carousel-caption"> |
| − | //console.log("cell" + i + "is updated");
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | cells[i].draw_peek();
| + | <h2> MEET THE TEAM! </h2> |
| − |
| + | </a> |
| − | } | + | </div> |
| − | tCruzi.draw_peek(); | + | </div> |
| | | | |
| − | time.text="time elapsed: " + Math.round(myGameArea.frameNo*20/1000) + " seconds"; | + | <div class="item"> |
| − | time.updateTime(); | + | <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> |
| | | | |
| | + | <!-- Left and right controls --> |
| | + | <a class="left carousel-control" href="#myCarousel" data-slide="prev"> |
| | + | <span class="glyphicon glyphicon-chevron-left"></span> |
| | + | <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> |
| | | | |
| − | if (found)
| + | <div class="row"> |
| − | {myGamePiece.updateFound();
| + | <div class="col-sm-6"> |
| − | //console.log("third update"); | + | <a href="https://2017.igem.org/Team:Oxford/Awards"> |
| − | }
| + | <img class="img-responsive img-center" style="width:100%" src="https://static.igem.org/mediawiki/2017/f/f4/T--Oxford--NewHome--Prizesbox.png"> |
| − | }
| + | </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> |
| | | | |
| − | </script> | + | <div class="row"> |
| | + | <div class="col-sm-12"> |
| | + | <div class="embed-responsive embed-responsive-16by9"> |
| | + | <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4heo3c2qvWo" allowfullscreen></iframe> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | <div class="jumbotron">
| |
| − | <p><b>Developing a cell-free detection system for Chagas disease in the acute phase by detecting biomarkers in the blood</b></p>
| |
| − | <p>The aim of our iGEM project is to design a cell-free diagnosis kit to detect the presence of biomarkers specific to the <i>Trypanosoma cruzi</i>, the protozoan parasite responsible for Chagas disease, a neglected tropical disease impacting 6-7 million people primarily in Latin America.</p>
| |
| − | <p>Currently, the acute (early) phase of Chagas disease is difficult to diagnose, due to it being asymptomatic and methods using DNA amplification or immunoassays being both expensive and inaccessible to the majority of those affected by Chagas disease. Current treatments using benznidazole and nifurtimox are almost 100% effective if given shortly after the onset of the acute phase. However, lack of diagnosis in the acute phase leads to the onset of the chronic phase, which causes irreversible pathological consequences to the heart, digestive system, and nervous system.</p>
| |
| − | <p>The final diagnostic kit would allow Chagas disease to be diagnosed in the acute phase by preventing the clotting of a blood sample, by releasing hirudin (a peptide from leeches) upon cleavage by the protease cruzipain (a cysteine protease specific to <i>T. cruzi</i>). Our system would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration, allowing it to be used in the field without the need for expensive equipment or highly trained professionals - all it will require is a blood sample. 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>
| |
| − | <p>We are developing two methods to detect the presence of cruzipain, both being modelled in <i>E. coli</i>. The first is DNA based, and involves the cleavage of a repressor protein to lead to expression of hirudin (modelled using fluorescent proteins and using TEV instead of cruzipain). The second involves tagging hirudin (again modelled with a fluorophore) to outer membrane vesicles, where the peptide could be cleaved and released from OmpA by cruzipain (modelled with TEV). Our systems would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration.</p>
| |
| − | <p>Chagas disease claims over 12000 lives per year. We believe that the death toll could be significantly reduced by a synthetic biology solution, which is cost effective, accessible, and accurate in the swift diagnosis of Chagas disease; a solution that our project aims to provide.</p>
| |
| − | <p>If you want to collaborate with us, please send us an email:<u>oxfordigem@bioch.ox.ac.uk</u></p>
| |
| − | <p> Please also support us by liking our facebook page → <a href="https://www.facebook.com/oxfordigem/"><img src="https://static.igem.org/mediawiki/2017/e/e4/T--oxford--fbicon.png" alt="Facebook Page" width="20" height=“20"> </a> </p>
| |
| − | <div class="center" > <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/1/10/Oxford_banner.png"> </div>
| |
| − | </div>
| |
| | </div> | | </div> |
| | | | |
| − | | + | <div class="container"> |
| − | <div class="column half_size" > | + | <div style="margin-top: 60px"></div> |
| − | <h5>Tips</h5> | + | <div class="row"> |
| − | <p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
| + | <h2> Our Project </h2><br/> |
| − | <ul>
| + | |
| − | <li>State your accomplishments! Tell people what you have achieved from the start. </li>
| + | |
| − | <li>Be clear about what you are doing and how you plan to do this.</li> | + | |
| − | <li>You have a global audience! Consider the different backgrounds that your users come from.</li>
| + | |
| − | <li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
| + | |
| − | <li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li>
| + | |
| − | <li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
| + | |
| − | <li>Have lots of fun! </li> | + | |
| − | </ul> | + | |
| | </div> | | </div> |
| | + | <div class="row" align="centre"> |
| | | | |
| | + | <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> |
| | | | |
| − | <div class="column half_size" >
| + | <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. |
| − | <h5>Inspiration</h5>
| + | 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> You can also view other team wikis for inspiration! Here are some examples:</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> |
| − | <ul>
| + | </div> |
| − | <li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
| + | |
| − | <li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
| + | |
| − | <li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
| + | |
| − | <li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
| + | |
| − | <li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li> | + | |
| − | <li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li> | + | |
| − | </ul>
| + | |
| | </div> | | </div> |
| | + | </div> |
| | | | |
| | + | <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> |
| | + | |
| | + | <div class="col-sm-3"> |
| | + | <form action="https://2017.igem.org/Team:Oxford/Overview_Wet_Lab"> |
| | + | <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> |
| | + | </form> |
| | + | </div> |
| | | | |
| | + | <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"> |
| | + | <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> |
| | + | |
| | + | </div> |
| | + | </div> |
| | | | |
| | </body> | | </body> |
| | | | |
| | </html> | | </html> |
| | + | {{Oxford/footer}} |
