|
|
| (29 intermediate revisions by 5 users not shown) |
| Line 40: |
Line 40: |
| | } | | } |
| | | | |
| | + | .videoWrapper { |
| | + | position: relative; |
| | + | padding-bottom: 56.25%; /* 16:9 */ |
| | + | padding-top: 25px; |
| | + | height: 0; |
| | + | } |
| | + | .videoWrapper iframe { |
| | + | position: absolute; |
| | + | top: 0; |
| | + | left: 0; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | } |
| | + | |
| | + | .carousel-caption a { |
| | + | font-size: 50px; |
| | + | font-weight: bolder; |
| | + | text-shadow: 1px 3px 5px rgba(0,0,0,0.8); |
| | + | color: white; |
| | + | } |
| | | | |
| | #button-span { | | #button-span { |
| Line 48: |
Line 68: |
| | text-align:center; | | text-align:center; |
| | position: relative; | | position: relative; |
| − | left: 50px; | + | left: 0px; |
| − | right: 50px; | + | right: 0px; |
| | display: block; | | display: block; |
| | } | | } |
| Line 60: |
Line 80: |
| | text-align:center; | | text-align:center; |
| | position: relative; | | position: relative; |
| − | left: 50px; | + | left: 0px; |
| − | right: 50px; | + | right: 0px; |
| | display: block; | | display: block; |
| | } | | } |
| | #bodyContent .colourbox { | | #bodyContent .colourbox { |
| − | list-style-type: none;
| + | list-style-type: none; |
| − | background-color: #DCE7EF;
| + | background-color: #DCE7EF; |
| − | border-radius: 25px;
| + | border-radius: 25px; |
| | } | | } |
| | #bodyContent ul{ | | #bodyContent ul{ |
| − | list-style-type: none;
| + | list-style-type: none; |
| | + | } |
| | + | #circles_home { |
| | + | margin: 50px 50px 50px 80px; |
| | + | } |
| | + | #texthome{ |
| | + | width: 80%; |
| | } | | } |
| | | | |
| Line 77: |
Line 103: |
| | <body onload="startStartScreen()"> | | <body onload="startStartScreen()"> |
| | | | |
| − | | + | <div class="container"> |
| − | <img id="magnify-glass" src="https://static.igem.org/mediawiki/2017/a/a6/T--oxford--manifying-glass.png" style = "display:none">
| + | <div style="margin-top: 60px"></div> |
| − | <img id="red-blood-cell" src = "https://static.igem.org/mediawiki/2017/d/d6/T--oxford--home-rbc.png" style = "display:none">
| + | <div class="row"> |
| − | <img id="t-cruzi" src = "https://static.igem.org/mediawiki/2017/4/42/T--oxford--t_cruzi_cartoon.png" style = "display: none">
| + | <h1 style="line-height:60px">OXFORD iGEM 2017<br/><small><i>See cruzi </i></small><br/></h1> |
| − | <img id="start_screen_img" src = "https://static.igem.org/mediawiki/2017/7/72/T--oxford--home--landing_page.png" style = "display: none">
| + | |
| − | | + | |
| − | | + | |
| − | <div> | + | |
| − | <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>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| | </div> | | </div> |
| | | | |
| − | <script> | + | <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> |
| | | | |
| − | var myGamePiece;
| + | <!-- Wrapper for slides --> |
| − | var cells_size = 250;
| + | <div class="carousel-inner"> |
| − | 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(){
| + | <div class="item active"> |
| − | document.getElementById('main').style.cursor = "block"; | + | <img src="https://static.igem.org/mediawiki/2017/9/92/T--Oxford--NewHome--awardresize.jpg" alt="Award"> |
| − | //document.getElementById('header').style.cursor = "block";
| + | <div class="carousel-caption"> |
| − | //document.getElementById('title').style.cursor = "block"; | + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | myStartScreen.start(); | + | <h2> MEET THE TEAM! </h2> |
| − | //console.log('startScreen'); | + | </a> |
| − | }
| + | </div> |
| | + | </div> |
| | | | |
| − | function startGame() {
| + | <div class="item"> |
| − | document.getElementById('main').style.cursor = "none"; | + | <img src="https://static.igem.org/mediawiki/2017/1/18/T--Oxford--NewHome--Posterresize.jpg" alt="Poster"> |
| − | //document.getElementById('header').style.cursor = "none";
| + | <div class="carousel-caption"> |
| − | //document.getElementById('title').style.cursor = "none"; | + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | myGamePiece = new createMouse(10, 120); | + | <h2> MEET THE TEAM! </h2> |
| − | myGameArea.start(); | + | </a> |
| − | initialize(); | + | </div> |
| − | //console.log('startGame'); | + | </div> |
| − | }
| + | |
| | | | |
| − | function initialize(){
| + | <div class="item"> |
| − | for (var i = 0; i < cells_size; i++ ) { | + | <img src="https://static.igem.org/mediawiki/2017/8/81/T--Oxford--NewHome--Meetingresize.jpg" alt="Meeting"> |
| − | var dirr = (Math.random() * 2 * Math.PI);
| + | <div class="carousel-caption"> |
| − | var posx = (Math.random() * (main.width - 60));
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | var posy = (Math.random() * (main.height - 53));
| + | <h2> MEET THE TEAM! </h2> |
| − | cells[i] = new createComponent(posx,posy,dirr,"cell"); | + | </a> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | }
| + | <div class="item"> |
| − | var dirr = (Math.random() * 2 * Math.PI);
| + | <img src="https://static.igem.org/mediawiki/2017/0/0a/T--Oxford--NewHome--Jokesresize.jpg" alt="Jokes"> |
| − | var posx = (Math.random() * (main.width - 50));
| + | <div class="carousel-caption"> |
| − | var posy = (Math.random() * (main.height - 81));
| + | <a href="https://2017.igem.org/Team:Oxford/Team"> |
| − | tCruzi = new createComponent(posx,posy,dirr,"parasite");
| + | <h2> MEET THE TEAM! </h2> |
| − | time = new createComponent(30, 30, 0, "time"); | + | </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> |
| | | | |
| | + | <!-- 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> |
| | | | |
| − | var myStartScreen = {
| + | <div class="row"> |
| − | start : function(){
| + | <div class="col-sm-6"> |
| − | this.frameNo = 0;
| + | <a href="https://2017.igem.org/Team:Oxford/Awards"> |
| − | this.interval = setInterval(updateStartScreen, 20);
| + | <img class="img-responsive img-center" style="width:100%" src="https://static.igem.org/mediawiki/2017/f/f4/T--Oxford--NewHome--Prizesbox.png"> |
| − | window.addEventListener('mousemove', function(e){
| + | </a> |
| − | myStartScreen.x = e.pageX;
| + | </div> |
| − | myStartScreen.y = e.pageY-200;
| + | <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> |
| − | myStartScreen.mouseClick = false
| + | </div> |
| − | window.addEventListener('mousedown', function(e){
| + | </div> |
| − | 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);
| + | |
| − | }
| + | |
| | | | |
| − | }
| + | <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> |
| | | | |
| − | var myGameArea = {
| + | </div> |
| − | start : function() {
| + | |
| − | this.frameNo = 0;
| + | |
| − | this.interval = setInterval(updateGameArea, 20);
| + | |
| − | window.addEventListener('mousemove', function(e){
| + | |
| − | myGameArea.x = e.pageX;
| + | |
| − | myGameArea.y = e.pageY-200;
| + | |
| − | })
| + | |
| − | myGameArea.mouseSensor = 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(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);
| + | |
| | | | |
| − | }
| + | <div class="container"> |
| − | }
| + | <div style="margin-top: 60px"></div> |
| | + | <div class="row"> |
| | + | <h2> Our Project </h2><br/> |
| | + | </div> |
| | + | <div class="row" align="centre"> |
| | | | |
| − | function createMouse(x, y) {
| + | <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> |
| − | this.x = x;
| + | |
| − | this.y = y;
| + | |
| | | | |
| − | this.update = function(){
| + | <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. |
| − | main.style.display = "block";
| + | 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> |
| − | ctx = main.getContext("2d");
| + | <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> |
| − | var img = document.getElementById("magnify-glass");
| + | </div> |
| − | ctx.drawImage(img, this.x-magnify_w/22-13, this.y-magnify_w/22+13, magnify_w/11, magnify_h/11);
| + | </div> |
| − | ctx.save();
| + | </div> |
| − | 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(){
| + | <div class="container"> |
| − | main.style.display = "block";
| + | <div style="margin-top: 60px"></div> |
| − | 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){
| + | |
| − | this.type = type;
| + | |
| − | this.x = x;
| + | |
| − | 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(){
| + | |
| − | 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) {
| + | |
| − | var measurement = ctx.measureText(text);
| + | |
| − | var x = (ctx.canvas.width - measurement.width) / 2;
| + | |
| − | ctx.fillText(text, x-50, y);
| + | |
| − | }
| + | |
| − | | + | |
| − | var title = 'Finding T. Cruzi';
| + | |
| − | var hue = 0;
| + | |
| − | var direction = 1;
| + | |
| − | var ctx = main.getContext('2d');
| + | |
| − | var wasButtonDown = false;
| + | |
| − | | + | |
| − | function updateStartScreen(){
| + | |
| − | hue += 1 * direction;
| + | |
| − | if (hue > 255) direction = -1;
| + | |
| − | if (hue < 78) direction = 1;
| + | |
| − | | + | |
| − | var y = ctx.canvas.height / 2;
| + | |
| − | var color = 'rgb(7,38,' + hue + ')';
| + | |
| − | | + | |
| − | myStartScreen.clear();
| + | |
| − | | + | |
| − | var img = document.getElementById("start_screen_img");
| + | |
| − | 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';
| + | |
| − | ctx.font = '48px monospace';
| + | |
| − | //centerText(ctx, title, main.height*0.4);
| + | |
| − | | + | |
| − | ctx.fillStyle = color;
| + | |
| − | ctx.font = '40px Helvetica';
| + | |
| − | //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;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − |
| + | |
| − | myGameArea.clear();
| + | |
| − | if(checked == false){
| + | |
| − | found = myGamePiece.found();
| + | |
| − | if(found) {
| + | |
| − | checked = true;
| + | |
| − | //console.log("checked = true")
| + | |
| − | //myGameArea.stop();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | if(!found){myGameArea.frameNo += 1;} //stop the timing when t cruzi is found
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | myGamePiece.update();
| + | |
| − |
| + | |
| − | delay += 1;
| + | |
| − | if (delay >= 2) {
| + | |
| − | 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>
| + | |
| − | | + | |
| − | <br/> | + | |
| − | | + | |
| − | <div>
| + | |
| | <div class="row"> | | <div class="row"> |
| − |
| |
| | <div class="col-sm-3"> | | <div class="col-sm-3"> |
| | <form action="https://2017.igem.org/Team:Oxford/Description"> | | <form action="https://2017.igem.org/Team:Oxford/Description"> |
| Line 560: |
Line 228: |
| | <div class="col-sm-3"> | | <div class="col-sm-3"> |
| | <form action="https://2017.igem.org/Team:Oxford/Overview_Wet_Lab"> | | <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(158,206,235)"><span id="button-lg-span">Wet Lab<br>Overview</span></button> | + | <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> | | </form> |
| | </div> | | </div> |
| Line 566: |
Line 234: |
| | <div class="col-sm-3"> | | <div class="col-sm-3"> |
| | <form action="https://2017.igem.org/Team:Oxford/Model"> | | <form action="https://2017.igem.org/Team:Oxford/Model"> |
| − | <button type="submit" class="btn btn-default btn-circle-lg" style="background-color: rgb(68, 104, 125)"><span id="button-lg-span">Dry Lab<br>Overview</span></button> | + | <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> | | </form> |
| | </div> | | </div> |
