D3 Examples - hackarto vl early proto submission

xxxxxxxxxx
 
<html>
​
  <head>
    <title>haCkARTO VL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <!-- Include CARTO VL JS -->
    <script src="https://cartodb.github.io/carto-vl/dist/carto-vl.js"></script>
    <!-- Include Mapbox GL JS -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
    <!-- Include Mapbox GL CSS -->
    <link href="https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
    <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600|Open+Sans:300,400,700" rel="stylesheet">
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <!-- j query  -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
​
    <style>
      body {
        background:#2C2F33;
        height:100%;
        font-family: 'Open Sans', sans-serif;
      }
      .containerr {
        display:flex;
        width:100%;
        height:100%;
      }
      #mapcontainer{
        display:flex;
        min-width:500px;
        height:500px;
      }
      #map {
        flex:1;
      }
      newsec {
        clear:both;
        width:100%;
        height:400px;
        margin-left:20px;
        margin-right:20px;
        margin-top:30px;
      }
      .box {
        background: #2C2F33;
        font-family: 'Open Sans', sans-serif;
        color: #FFFFFF;
        z-index: 2;
        border-radius: 4px;
        padding: 16px;
        margin: 0 0 24px;
        box-shadow: 0 0px 16px rgba(0, 0, 0, 0.24);
      }
      aside.toolbox {
        position: absolute;
        top: 24px;
        left: 24px;
        min-width: 380px;
        max-width: 380px;
        z-index: 2;
      }
      .bigg {
        color: #FFFFFF;
        line-height: 30px;
        font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        font-weight: 600;
      }
      .grad {
        background: linear-gradient(to left, #C75DAB,#D691C1,#E4C1D9,#F1F1F1,#A7D3D4,#42B7B9,#009B9E);
      }
    </style>
  </head>
​
  <body>
    <aside class="toolbox">
      <div class="box">
        <form>
          <div class="form-row align-items-center">
            <div class="col-sm-1.5 my-1">
            <span class="badge badge-primary">COLD</span>
            </div>
            <div class="col-sm-9 my-1">
              <div class="progress">
                <div class="grad" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="col-sm-1 my-1">
              <span class="badge badge-danger">HOT</span>
            </div>
          </div>
​
          <div id="start">
​
            <div class="card text-white bg-dark mb-3">
              <h2 class="card-header">That's Hot</h2>
              <div class="card-body">
                <h5>Find the County!</h5>
                Enter your name, click start, and frantically try to find the "hottest" county by clicking, with styling as your guide to the heat. Think you found it? Click! <br><br> p.s. you're on the clock. good luck ;)
              </div>
​
            </div>
​
            <div class="card text-white bg-dark mb-3">
              <div class="card-body">
​
                <div class="form-row align-items-center">
                  <div class="col-sm-auto my-1">
                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder="your name" id="username" oninput="hasUsername()">
                      <div class="input-group-append">
                        <button class="btn btn-outline-warning" type="button" onclick="startGame()" id="startButton" disabled>Start Game</button>
                      </div>
                    </div>
                  </div>
                </div>
​
              </div>
            </div>
​
          </div>
​
          <div id="ranking" style="display:block" class="card text-white bg-dark mb-3">
            <h2 class="card-header">Rankings</h2>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped table-dark">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Name</th>
                      <th scope="col">Time</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td id="rn0"></td>
                      <td id="rt0"></td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td id="rn1"></td>
                      <td id="rt1"></td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td id="rn2"></td>
                      <td id="rt2"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
​
          <div id="quit" style="display:none">
            <div class="card text-white bg-dark mb-3">
              <div class="card-body">
​
                <div class="form-row align-items-center">
                  <div class="col-sm-auto my-1">
                    <div class="input-group mb-3">
                      <input type="text" readonly class="form-control" id="quitDialog" >
                      <div class="input-group-append">
                        <button class="btn btn-outline-warning" type="button" onclick="quitGame()" id="quitButton">Quit Game</button>
                      </div>
                    </div>
                  </div>
                </div>
​
              </div>
            </div>
​
            <div class="card text-white bg-dark mb-3">
              <div class="card-body">
                <timerr class="bigg">Loading</timerr>
                <div id="stopwatch" class="bigg"></div>
              </div>
            </div>
​
            <div class="card text-white bg-dark mb-3">
              <div class="card-body">
                <div id="results" class="bigg"></div>
              </div>
            </div>
​
          </div>
​
        </form>
​
      </div>
    </aside>
​
​
    <div class="containerr">
​
      <div id="mapcontainer">
        <div id="map"></div>
      </div>
​
    </div>
​
    <script>
​
      var cartouser='aroth-carto';
      var apiKey='ph5ha3HwevGxa7TECTzjjw';
      getRanks();
​
      const map = new mapboxgl.Map({
        container: 'map',
        // style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
        // style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
        style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
        center: [-91.406252,37.186204],
        zoom: 4,
        dragRotate: false
      });
​
      carto.setDefaultAuth({
        user: cartouser,
        apiKey: apiKey
      });
​
      var username = '';
      // var source ='';
      // var viz ='';
      var layer='';
      var myKey='';
      const delay = 20;
​
      var winViz;
​
      function loadMap(key){
         const source = new carto.source.SQL('SELECT a.*, (ST_distance(a.the_geom,b.the_geom)/c.heatlamp)*2.3 as heat FROM hackartovl_counties a, hackartovl_rand b, (select MAX(ST_distance(a.the_geom,b.the_geom)) as heatlamp from hackartovl_counties a, hackartovl_rand b) c WHERE b.cartodb_id = (select MAX(cartodb_id) from hackartovl_rand)');
​
         const vizHeat = new carto.Viz(`
          color: opacity(ramp($heat,reverse(tropic)),1)
          strokeColor: opacity(ramp($heat,[#DB66BC,#EB9FD4,#F7D1EB,#FFFFFF,#B7E7E8,#4ACCCF,#00AFB2]),1)
          strokeWidth: .4
          @county: $county
        `);
​
        const vizStart = new carto.Viz(`
         color: opacity(ramp($heat,[#C75DAB,#D691C1,#E4C1D9,#F1F1F1,#A7D3D4,#42B7B9,#009B9E]),0)
         strokeColor: opacity(ramp($heat,[#DB66BC,#EB9FD4,#F7D1EB,#FFFFFF,#B7E7E8,#4ACCCF,#00AFB2]),.2)
         strokeWidth: .4
         @county: $county
       `);
​
        winViz = new carto.Viz(`
          color: opacity(ramp($heat,PinkYl),1)
          strokeColor: opacity(ramp($heat,PinkYl),.2)
          strokeWidth: .4
        `);
​
        layer = new carto.Layer(key, source, vizHeat);
​
        const interactivity = new carto.Interactivity(layer);
        interactivity.on('featureClick', checkMatching);
​
        //  const delay = 20;
        let clickedFeatureId = null;
        interactivity.on('featureEnter', event => {
          if (event.features.length > 0) {
            const feature = event.features[0];
            if (feature.id !== clickedFeatureId) {
              feature.color.blendTo('opacity(ramp($heat,reverse(tropic)),1)', 700)
              feature.strokeWidth.blendTo('.4', delay);
              feature.strokeColor.blendTo('opacity(Purple, 0.8)', delay);
            }
          }
        });
        interactivity.on('featureLeave', event => {
          if (event.features.length > 0) {
            const feature = event.features[0];
            if (feature.id !== clickedFeatureId) {
              feature.color.reset(delay);
              feature.strokeWidth.reset(delay);
              feature.strokeColor.reset(delay);
            }
          }
        });
        //interactivity.on('featureClick', isithot);
​
        // interactivity.on('featureClickOut', event => {
        //   if (event.features.length > 0) {
        //     const feature = event.features[0];
        //     feature.color.reset(delay);
        //     feature.strokeWidth.reset(delay);
        //     feature.strokeColor.reset(delay);
        //   }
        // });
​
        layer.addTo(map);
      }
​
      //for a random float
      function randFloat(min, max, decimalPlaces) {
        var rand = Math.random()*(max-min) + min;
        var power = Math.pow(10, decimalPlaces);
        return Math.floor(rand*power) / power;
      }
​
      //for a random whole
      function randWhole(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
​
      function hasUsername(){
​
        var sbut = document.getElementById('startButton');
        var uname = document.getElementById('username');
        var input = uname.value.length;
​
        if(input<2){
          sbut.disabled = true;
        }else{
          sbut.disabled = false;
        }
      }
​
      function startGame(){
​
        // step one: get random coords
        username = document.getElementById('username').value;
        let tempCBDID = randWhole(1,3869);
        let Ukey = username.substring(0,2)+ Math.random()
        myKey=Ukey;
​
        //sql queries to be used
        let sqlInsert = 'INSERT INTO hackartovl_rand (the_geom,name,county,state,key) SELECT st_centroid(the_geom) as the_geom, \''+username+'\'as name, county, statefull,\''+Ukey+'\' as key FROM hackartovl_counties WHERE cartodb_id=\''+tempCBDID+'\'';
​
        //write to carto
        $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?q='+sqlInsert+'&api_key='+apiKey,function(data){
        });
​
        let x = document.getElementById('start');
        let y = document.getElementById('quit');
        let z = document.getElementById('ranking');
​
        x.style.display = "none";
        y.style.display = "block";
        z.style.display = "none";
        document.getElementById('quitDialog').value = document.getElementById('username').value
​
        loadMap(myKey);
​
        timer();
        console.log('username is: '+document.getElementById('username').value)
​
      }
​
      function quitGame(){
        let x = document.getElementById('start');
        let y = document.getElementById('quit');
        let z = document.getElementById('ranking');
​
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "block";
        document.getElementById('username').value=''
​
        window.location.reload();
      }
​
      var mycounty;
      var mystate;
​
      function checkMatching(event){
​
        let clicounty = '';
​
        for (let feature of event.features) {
          clicounty = feature.variables.county.value;
        }
​
        let sqlCheck = 'SELECT county, state FROM hackartovl_rand WHERE key = \''+myKey+'\''
        let sqlUpdate = 'UPDATE hackartovl_rand SET time = \''+time+'\', dur = to_timestamp(\''+time+'\', \'HH24:MI:SS\') WHERE key = \''+myKey+'\''
​
        $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?format=JSON&q='+sqlCheck+'&api_key='+apiKey,function(data){
          mycounty=data.rows[0].county;
          mystate=data.rows[0].state;
        });
​
        if(clicounty==mycounty){
​
          clearTimeout(t);
          getRanks();
​
          for (let feature of event.features) {
            layer.blendToViz(winViz);
          }
​
          let z = document.getElementById('ranking');
          z.style.display = "block";
​
          document.getElementById('results').innerHTML = 'That\'s Hot. You found ' + mycounty+', '+mystate
          $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?q='+sqlUpdate+'&api_key='+apiKey,function(data){
          });
​
          //interactivity.off('featureClick', checkMatching);
          document.getElementById('quitButton').innerHTML = 'New Game'
​
        }else{
          document.getElementById('results').innerHTML = 'No luck, try again.' ;
        //  isithot(false);
​
          for (let feature of event.features) {
            feature.color.blendTo('opacity(Purple, 0.5)', delay)
            feature.strokeWidth.blendTo('7', delay);
            feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', delay);
          }
        }
      }
​
      var rn1;
      var rt1;
      var rn2;
      var rt2;
      var rn0;
      var rt0;
​
      function getRanks(){
        let sqlRank='SELECT * FROM hackartovl_rand where not name = \'\' order by dur asc limit 5'
        $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?format=JSON&q='+sqlRank+'&api_key='+apiKey,function(data){
          rn0=data.rows[0].name;
          rt0=data.rows[0].time;
          rn1=data.rows[1].name;
          rt1=data.rows[1].time;
          rn2=data.rows[2].name;
          rt2=data.rows[2].time;
​
          document.getElementById('rn0').innerHTML=rn0
          document.getElementById('rt0').innerHTML=rt0
          document.getElementById('rn1').innerHTML=rn1
          document.getElementById('rt1').innerHTML=rt1
          document.getElementById('rn2').innerHTML=rn2
          document.getElementById('rt2').innerHTML=rt2
        });
      }
​
      //timer elements
      var timerr = document.getElementsByTagName('timerr')[0],
        // start = document.getElementById('start'),
        // stop = document.getElementById('stop'),
        // clear = document.getElementById('clear'),
        seconds = 0, minutes = 0, hours = 0,
        t,time='',countdown=0;
​
      function add() {
        if (countdown<=5){
          countdown++;
          timer();
          timerr.textContent += (".");
          // console.log(map.loaded());
        }else{
          seconds++;
          if (seconds >= 60) {
              seconds = 0;
              minutes++;
              if (minutes >= 60) {
                  minutes = 0;
                  hours++;
              }
          }
          timerr.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
          time=timerr.textContent
          timer();
        }
      }
      function timer() {
        t = setTimeout(add, 1000);
      }
    </script>
  </body>
</html>
​
    