got a reasonable attr-based animation in place

web-world/examples/attr-animation/attr-animation.rkt

@@ -9,25 +9,38 @@
 (define (tick w v)
   (modulo (add1 w) 10))
 
+
+;; pick-block: world view -> view
+;; Focus the view on block i.
+(define (pick-block v i)
+  (view-focus v (format "#~a" i)))
+
+
 (define (draw w v)
-  (define base (update-view-attr (view-focus v (format "#~a" w))
+  (define v1 (update-view-attr
+              (pick-block v w)
               "class"
               "selectedBlock"))
-  (define with-left (if (> w 0)
+  (define v2 (update-view-attr
-                        (view-right (update-view-attr (view-left base)
+              (pick-block v1 (modulo (sub1 w) 10))
               "class"
               "offsetBlock"))
-                        base))
+  (define v3 (update-view-attr
-  (define with-right (if (< w 9)
+              (pick-block v2 (modulo (add1 w) 10))
-                         (view-left (update-view-attr (view-right base)
               "class"
               "offsetBlock"))
-                         with-left))
+  (define v4 (update-view-attr
-  with-right)
+              (pick-block v3 (modulo (- w 2) 10))
-
+                          "class"
+                          "block"))
+  (define v5 (update-view-attr
+              (pick-block v4 (modulo (+ w 2) 10))
+              "class"
+              "block"))
+  v5)
 
 
 (big-bang 0
           (initial-view index.html)
-          (on-tick tick 1/2)
+          (on-tick tick)
           (to-draw draw))

web-world/examples/attr-animation/style.css

@@ -1,20 +1,20 @@
 .block {
-    width : 100px;
+    width : 80px;
-    height : 100px;
+    height : 10px;
     background-color : blue;
     display: inline-block;
 }
 
 .selectedBlock {
-    width : 100px;
+    width : 80px;
-    height : 100px;
+    height : 10px;
     background-color: navy;
     display: inline-block;
 }
 
 .offsetBlock {
-    width : 100px;
+    width : 80px;
-    height : 100px;
+    height : 10px;
     background-color: teal;
     display: inline-block;
 }