Increase fish number and make its change easier

To cater the powerful desktops, fish number is creased so that FPS won't
hit the roof 60 and an algorithm is introduced to decide the numbers
among small, medium and big fishes. Also to make future change of fish
number easier, the relevant logic is moved from html to js.

Author: Yang Gu

aquarium/aquarium.html

@@ -119,17 +119,8 @@
   <div class="fps">fps: <span id="fps"></div>
   <div id="topUI">
   <div>Number of Fish</div>
-  <div class="clickable" id="setSetting0">1</div>
-  <div class="clickable" id="setSetting1">10</div>
-  <div class="clickable" id="setSetting2">50</div>
-  <div class="clickable" id="setSetting3">100</div>
-  <div class="clickable" id="setSetting4">250</div>
-  <div class="clickable" id="setSetting5">500</div>
-  <div class="clickable" id="setSetting6">1000</div>
-  <div class="clickable" id="setSetting7">2000</div>
-  <div class="clickable" id="setSetting8">4000</div>
-  <div class="clickable" id="setSetting9">Change View</div>
-  <div class="clickable" id="setSetting10">Advanced</div>
+  <div class="clickable" id="setSettingChangeView">Change View</div>
+  <div class="clickable" id="setSettingAdvanced">Advanced</div>
   <div class="clickable" id="options">Options...
   <div id="optionsContainer">
   </div>

aquarium/aquarium.js

@@ -102,7 +102,6 @@ var g_netUI = [
 var g_fishTable = [
   {
     name: 'SmallFishA',
-    num: [0, 3, 36, 76, 206, 500-40-40-2-2, 1000-80-80-2-2, 2000-80-80-2-2, 4000-80-80-2-2, 50],
     speed: 1,
     speedRange: 1.5,
     radius: 30,
@@ -118,7 +117,6 @@ var g_fishTable = [
   },
   {
     name: 'MediumFishA',
-    num: [0, 3, 6, 10, 20, 40, 80, 80, 80, 10],
     speed: 1,
     speedRange: 2,
     radius: 10,
@@ -134,7 +132,6 @@ var g_fishTable = [
   },
   {
     name: 'MediumFishB',
-    num: [0, 2, 6, 10, 20, 40, 80, 80, 80, 10],
     speed: 0.5,
     speedRange: 4,
     radius: 10,
@@ -150,7 +147,6 @@ var g_fishTable = [
   },
   {
     name: 'BigFishA',
-    num: [1, 1, 1, 2, 2, 2, 2, 2, 2, 3],
     speed: 0.5,
     speedRange: 0.5,
     radius: 50,
@@ -170,7 +166,6 @@ var g_fishTable = [
   },
   {
     name: 'BigFishB',
-    num: [0, 1, 1, 2, 2, 2, 2, 2, 2, 1],
     speed: 0.5,
     speedRange: 0.5,
     radius: 45,
@@ -782,20 +777,12 @@ function advanceViewSettings() {
  * Sets the count
  */
 function setSetting(elem, id) {
-  switch (id) {
-  case 10:
-    break;
-  case 9:
-    advanceViewSettings();
-    break;
-  default:
-    g_numSettingElements[id] = elem;
-    setSettings({globals:{fishSetting:id}});
-    for (var otherElem in g_numSettingElements) {
-      g_numSettingElements[otherElem].style.color = "gray";
-    }
-    elem.style.color = "red";
+  g_numSettingElements[id] = elem;
+  setSettings({globals:{fishSetting:id}});
+  for (var otherElem in g_numSettingElements) {
+    g_numSettingElements[otherElem].style.color = "gray";
   }
+  elem.style.color = "red";
 }
 
 /**
@@ -854,8 +841,48 @@ function initialize() {
   Log("--Setup Laser----------------------------------------");
   var laser = setupLaser();
 
+  var num = [1, 100, 500, 1000, 5000, 10000, 15000, 20000, 25000, 30000];
+  var changeViewElem = document.getElementById("setSettingChangeView");
+  var parentElem = changeViewElem.parentNode;
+  for (var i = 0; i < num.length; ++i) {
+    var div = document.createElement("div");
+    div.className = "clickable";
+    div.id = "setSetting" + i;
+    div.innerHTML = num[i];
+    parentElem.insertBefore(div, changeViewElem);
+  }
+
   for (var ff = 0; ff < g_fishTable.length; ++ff) {
     g_fishTable[ff].fishData = [];
+    g_fishTable[ff].num = [];
+  }
+
+  var type = ["Big", "Medium", "Small"];
+  for (var i = 0; i < num.length; ++i) {
+    var numLeft = num[i];
+    for (var j = 0; j < type.length; ++j) {
+      for (var ff = 0; ff < g_fishTable.length; ++ff) {
+        var fishInfo = g_fishTable[ff];
+        var fishName = fishInfo.name;
+        if (!fishName.startsWith(type[j])) {
+          continue;
+        }
+        var numType = numLeft;
+        if (type[j] == "Big") {
+          numType = Math.min(numLeft, num[i] < 100 ? 1 : 2);
+        } else if (type[j] == "Medium") {
+          if (num[i] < 1000) {
+            numType = Math.min(numLeft, num[i] / 10 | 0);
+          } else if (num[i] < 10000) {
+            numType = Math.min(numLeft, 80);
+          } else {
+            numType = Math.min(numLeft, 160);
+          }
+        }
+        numLeft = numLeft - numType;
+        fishInfo.num.push(numType);
+      }
+    }
   }
 
   var particleSystem = new tdl.particles.ParticleSystem(
@@ -1616,11 +1643,15 @@ function setupCountButtons() {
   } else {
     setSetting(document.getElementById("setSetting2"), 2);
   }
-  setSetting(document.getElementById("setSetting9"), 9);
 }
 
 function initUIStuff() {
   setupCountButtons();
+  var elem = document.getElementById("setSettingChangeView");
+  elem.onclick = function() {
+    advanceViewSettings();
+  };
+  advanceViewSettings();
 
   function toggleOption(name, option, elem) {
     var options = { };
@@ -1697,7 +1728,7 @@ $(function(){
     g.net.fovFudge = 1;
   }
 
-  $('#setSetting10').click(function() {
+  $('#setSettingAdvanced').click(function() {
       $("#uiContainer").toggle('slow'); return false; });
   $("#uiContainer").toggle();
   $('#options').click(function() {