Added a circle in center to indicate the mass causing gravity

resources/public/index.html

@@ -22,6 +22,11 @@ body {
     fill: orange;
 }
 
+#mass {
+    opacity: 0.5;
+    fill: khaki;
+}
+
 #rpaddle, #lpaddle {
     fill: rgb(108, 182, 108);
 }
@@ -48,13 +53,14 @@ body {
             <h2 id="title">Gravity Pong!</h2>
             <div>
                 <span style="float: left; vertical-align: top;">Gravity 
-                    <input id="gravity" type="range" min="1" max="10" value="1" step="1" />
+                    0 <input id="gravity" type="range" min="0" max="10" value="1" step="1" /> 10
                 </span>
                 <span style="float: right; font-size: smaller">
                     <span id="state">press &lt;space&gt; to start</span>
                 </span>
             </div>
             <svg id="canvas">
+                <circle id="mass" />
                 <text id="score">0</text>
                 <circle id="ball" />
                 <rect id="lpaddle" />

src/cljs/frpong/core.cljs

@@ -62,18 +62,24 @@
 (def *init-vel-deg-lim* [35 55])
 (def *perturb-factor*   0.02)
 
+(def *init-mass-radius* 0)
+
 (def *paddle-width*     10)
 (def *paddle-step*      8)
 (def *max-paddle-y*     (- *height* *paddle-size*))
 (def *ef-paddle-width*  (+ *paddle-width* *padding*))
 (def *init-paddle-pos*  (/ (- *height* *paddle-size*) 2))
 
-(def *gravity*          (atom 0.01))
+(def *gravity*          (atom 0.005))
+
+(defn mass-radius []
+  (+ *init-mass-radius* (* (deref *gravity*) 1000)))
 
 ;; listen for changes in the gravity input slider and set the atom value accordingly
 (ev/listen! (dom/by-id "gravity") :change 
-  #(let [val (* (int (dom/value (dom/by-id "gravity"))) 0.005)]
+  #(let [val (* (int (dom/value (dom/by-id "gravity"))) 0.01)]
       (reset! *gravity* val)
+      (dom/set-attr! (dom/by-id "mass") "r" (mass-radius))
       (.blur (dom/by-id "gravity"))))
 
 (defn layout-game
@@ -86,6 +92,10 @@
     (dom/set-attr! "r" *ball-radius*)
     (dom/set-attr! "cx" (first *center*))
     (dom/set-attr! "cy" (second *center*)))
+  (doto (dom/by-id "mass")
+    (dom/set-attr! "r" (mass-radius))
+    (dom/set-attr! "cx" (first *center*))
+    (dom/set-attr! "cy" (second *center*)))
   (doto (dom/by-id "score")
     (dom/set-attr! "x" (first *center*))
     (dom/set-attr! "y" (second *center*)))