<file_sep># shannonthurston.github.io

This is a simple place for storing my little test and demo files that I build in my spare time.  
It will hopefully become a nice portfolio site in the future.
<file_sep>var app = angular.module("CodePlaygroundApp", []);
app.controller("CodePlaygroundAppCtrl", function ($scope, $timeout, $window) {
  var c = this;

  c.lsName = "codePlayground";

  c.showHistory = false;
  c.historyClass = 'hide';

  c.hideHistory = function(ev){
    c.showHistory = false;
    c.historyClass = 'hide';
  }

  c.toggleHistory = function(){
    if(c.showHistory){
      c.historyClass = 'hide';
    } else {
      c.historyClass = 'show';
    }
    c.showHistory = !c.showHistory;
  }

  c.clearHistory = function(){
    if(localStorage.length > 0){
      localStorage.clear();
    }
    c.getHistory();
    c.hideHistory();
  }
 
  c.saveHistory = function () {
    if(c.codeHistory.length == 0){
      return false;
    }
    var codeHistory = JSON.stringify(c.codeHistory);
    localStorage.setItem(c.lsName, codeHistory);
  };

  c.addHistory = function(item){
    if(!item){return false;}
    var nowMS = new Date().getTime();
    c.codeHistory.push({name: nowMS, value: item});
  }

  c.getHistory = function(){
    var codeHistory = localStorage.getItem(c.lsName);
      historyObj = JSON.parse(codeHistory);
    if (codeHistory) {
      c.codeHistory = historyObj;
    } else {
      c.codeHistory = [];
    }
  }

  c.loadHistory = function(name){
    console.log('loading history');
    var item = c.codeHistory.find(function(el){
      return el.name == name;
    });
    if(item){
      c.htmlEditor.getDoc().setValue(item.value);
    }
  }

  $timeout(c.getHistory, 0);


  c.htmlEditor = CodeMirror(document.querySelector("#editor"), {
    mode: "javascript",
    tabSize: 4,
    lineNumbers: true,
    lineWrapping: true,
    extraKeys: { "Shift-Ctrl-Space": "autocomplete" },
    keyMap: "macSublime",
    dragDrop: true,
    smartIndent: true,
    spellcheck: true,
    autocorrect: true,
    rulers: true,
    foldGutter: true,
    gutters: ["CodeMirror-lint-markers"],
    lint: { options: { esversion: 2021 } },
  });

$window.htmlEditor = c.htmlEditor;

  CodeMirror.commands["selectAll"](c.htmlEditor);



  document.querySelector("#run-button").addEventListener("click", function () {
    let htmlCode = c.htmlEditor.getValue();
    c.addHistory(htmlCode);
    c.saveHistory();
    let results = evalTheCode(htmlCode);
    let consoleElement = document.querySelector("#results");
    consoleElement.innerText = results.value;
    consoleElement.className = "";
    consoleElement.classList.add(results.status);
  });

  document
    .querySelector("#clear-results")
    .addEventListener("click", function () {
      let consoleElement = document.querySelector("#results");
      consoleElement.innerText = "";
    });
  document
    .querySelector("#clear-console")
    .addEventListener("click", function () {
      console.clear();
    });

  document.querySelector("#editor").onkeydown = triggerEnterKey;

  function triggerEnterKey(event) {
    if (event.key =="Enter" && event.shiftKey) {
      event.preventDefault();
      document.querySelector("#run-button").click();
    }
  }

  function evalTheCode(htmlCode) {
    var res = { value: undefined, status: undefined };
    try {
      res.value = eval(htmlCode);
      res.status = "success";
    } catch (e) {
      res.value = e;
      res.status = "error";
    }
    return res;
  }
});
<file_sep> var app = angular.module('PhaseTenApp', []);
app.controller('PhaseTenAppCtrl', function($scope){

    $scope.result_round_1 = 0;
    $scope.round_one_bonus = 0;
    $scope.result_round_2 = 0;
    $scope.result_final = 0;
    $scope.finished_first_bonus = 0;
    
    
    $scope.updateRound1Total = function(){
        var p1 = $scope.phase_1 || 0;
        var p2 = $scope.phase_2 || 0;
        var p3 = $scope.phase_3 || 0;
        var p4 = $scope.phase_4 || 0;
        var p5 = $scope.phase_5 || 0;
        
        var round1Total = (p1 + p2 + p3 + p4 + p5);
        if(round1Total >= 220){
           $scope.round_one_bonus = 40; 
        }
        $scope.result_round_1 = round1Total;
    };
    
    $scope.updateRound2Total = function(){
        var p6 = $scope.phase_6 || 0;
        var p7 = $scope.phase_7 || 0;
        var p8 = $scope.phase_8 || 0;
        var p9 = $scope.phase_9 || 0;
        var p10 = $scope.phase_10 || 0;
        
        var round2Total = (p6 + p7 + p8 + p9 + p10);
        $scope.result_round_2 = round2Total;
    };
    
    $scope.updateFinalResults = function(){
        $scope.result_final = ($scope.result_round_1 + $scope.result_round_2 + $scope.round_one_bonus + $scope.finished_first_bonus);
    }
  
    $scope.updateTotals = function(){
        console.log('updating totals');
        $scope.updateRound1Total();
        $scope.updateRound2Total();
        $scope.updateFinalResults();
    }
    
    $scope.finishedFirstBonus = function(){
        $scope.finished_first_bonus = 40;
        $scope.updateTotals();
    }
    
    $scope.clearFinishedFirstBonus = function(){
         $scope.finished_first_bonus = 0;
        $scope.updateTotals();
    }
    
    
    
    $scope.updateTotals();
    
});
<file_sep> var app = angular.module('TemplateApp', []);
app.controller('TemplateAppCtrl', function($scope){

    $scope.testValue = 0;
    
    
    
});
<file_sep>c = {};

c.CANVAS = document.getElementById("visual");
c.canvasCtx = c.CANVAS.getContext("2d");
c.AUDIO = document.querySelector("audio");
c.TOGGLE = document.querySelector("#toggle");
c.MUTE = document.querySelector(".mute");
c.VISUALIZER = document.querySelector("#visualizer");
c.WIDTH = window.innerWidth;
c.HEIGHT = window.innerHeight;
c.playing = false;

c.CANVAS.width = c.WIDTH;
c.CANVAS.height = c.HEIGHT;

jQuery(c.CANVAS).css("width", c.WIDTH);
jQuery(c.CANVAS).css("height", c.HEIGHT);
jQuery("main").css("padding-top", "0");

c.record = function (ev) {
  if (c.playing) {
    c.CTX.close();
    c.playing = false;
    return;
  }
  c.playing = true;

  c.CTX = new AudioContext();
  c.audioStream = navigator.mediaDevices
    .getUserMedia({ audio: true, video: false })
    .then(function (stream) {
      c.source = c.CTX.createMediaStreamSource(stream);
      c.gain = c.CTX.createGain();
      c.gain.gain.value = 0;
      c.analyser = c.CTX.createAnalyser();
      c.dataArray = new Uint8Array(c.analyser.frequencyBinCount);

      c.source.connect(c.gain);
      c.source.connect(c.analyser);
      c.gain.connect(c.CTX.destination);
      c.visualize();
    });
};

c.FULLSCREEN = function (ev) {
  var canvas = document.getElementById("visual");
  if (!document.fullscreenElement) {
    canvas.requestFullscreen().then(
      function (ev) {
        console.log("success");
      },
      function (err) {
        console.error("fail");
      }
    );
  } else {
    document.exitFullscreen();
  }
};

c.VISUALIZER.addEventListener("click", c.record);

c.visualize = function () {
  c.analyser.fftSize = 512;

  var dataArrayAlt = new Uint8Array(c.analyser.frequencyBinCount);
  c.canvasCtx.clearRect(0, 0, c.WIDTH, c.HEIGHT);

  var drawEverything = function () {
    if (!c.playing) {
      return false;
    }
    var drawVisual = requestAnimationFrame(drawEverything);

    c.analyser.getByteFrequencyData(dataArrayAlt);
    //Clear the canvas
    c.canvasCtx.fillStyle = "rgb(0, 0, 0)";
    c.canvasCtx.fillRect(0, 0, c.WIDTH, c.HEIGHT);

    //draw on cavas
    var x = 0;

    var randomChar = function () {
      var idx = parseInt(Math.random() * 85);
      var randomCharacter = String.fromCharCode(idx);
      return randomCharacter || "?";
    };

    for (var i = 0; i < c.analyser.frequencyBinCount; i++) {
      var freq = dataArrayAlt[i];
      var randx = Math.random();
      var randy = Math.random();
      var randz = Math.random();
      var freqFontSize = freq / 2;

      c.canvasCtx.strokeStyle =
        "rgb(" +
        randx * freq * 3 +
        "," +
        randy * freq +
        "," +
        randz * freq +
        ")";

      c.canvasCtx.font = freqFontSize + "px serif";
      c.canvasCtx.strokeText(
        randomChar(),
        (randx * c.WIDTH + x) / 2,
        (randy * c.HEIGHT + x) / 2
      );
      if (i % 15 == 0) {
        c.canvasCtx.strokeRect(
          (randx * c.WIDTH + x) / 2,
          (randy * c.HEIGHT + x) / 2,
          freq / 3,
          freq / 3
        );
      }

      x += (2 * freq) / 20;
    }

    var barWidth = (c.WIDTH / c.analyser.frequencyBinCount) * 2;
    var barHeight;
    var x1 = 0;
    var x2 = 0;
    var y = c.HEIGHT;

    for (var i2 = 0; i2 < c.analyser.frequencyBinCount; i2++) {
      barHeight = dataArrayAlt[i2];

      c.canvasCtx.fillStyle =
        "rgb(" +
        (barHeight + 20) +
        "," +
        (barHeight + 120) +
        "," +
        (barHeight + 120) +
        ")";
      c.canvasCtx.fillRect(x1, c.HEIGHT - barHeight, barWidth, barHeight);

      c.canvasCtx.fillStyle =
        "rgb(" +
        (barHeight + 120) +
        "," +
        (barHeight + 20) +
        "," +
        (barHeight + 120) +
        ")";
      c.canvasCtx.fillRect(c.WIDTH + x2, 0, barWidth, barHeight + 1.5);

      x1 += barWidth + 1;
      x2 = -x1;
    }
  };

  drawEverything();

  var drawAlt = function () {
    if (!c.playing) {
      return false;
    }
    var drawVisual = requestAnimationFrame(drawAlt);

    c.analyser.getByteFrequencyData(dataArrayAlt);

    c.canvasCtx.fillStyle = "rgb(0, 0, 0)";
    c.canvasCtx.fillRect(0, 0, c.WIDTH, c.HEIGHT);

    var barWidth = (c.WIDTH / c.analyser.frequencyBinCount) * 2;
    var barHeight;
    var x = 0;
    var x2 = 0;
    var y = c.HEIGHT;

    for (var i = 0; i < c.analyser.frequencyBinCount; i++) {
      barHeight = dataArrayAlt[i];

      c.canvasCtx.fillStyle =
        "rgb(" +
        (barHeight + 20) +
        "," +
        (barHeight + 120) +
        "," +
        (barHeight + 120) +
        ")";
      c.canvasCtx.fillRect(x, c.HEIGHT - barHeight, barWidth, barHeight);

      c.canvasCtx.fillStyle =
        "rgb(" +
        (barHeight + 120) +
        "," +
        (barHeight + 20) +
        "," +
        (barHeight + 120) +
        ")";
      c.canvasCtx.fillRect(c.WIDTH + x2, 0, barWidth, barHeight + 1.5);

      x += barWidth + 1;
      x2 = -x;
    }
  };

  //drawAlt();
};
