refine examples

Author: rmorshea

docs/source/custom_js/package-lock.json

@@ -26,11 +26,21 @@ def GameView():
     )
 
     if game_state == GameState.won:
-        return idom.html.div(idom.html.h1("You won!"), start_button)
+        menu = idom.html.div(idom.html.h3("You won!"), start_button)
     elif game_state == GameState.lost:
-        return idom.html.div(idom.html.h1("You lost"), start_button)
+        menu = idom.html.div(idom.html.h3("You lost"), start_button)
     else:
-        return idom.html.div(idom.html.h1("Click to play"), start_button)
+        menu = idom.html.div(idom.html.h3("Click to play"), start_button)
+
+    menu_style = idom.html.style(
+        """
+        .snake-game-menu h3 {
+            margin-top: 0px !important;
+        }
+        """
+    )
+
+    return idom.html.div({"className": "snake-game-menu"}, menu_style, menu)
 
 
 class Direction(enum.Enum):
@@ -52,6 +62,7 @@ def GameLoop(grid_size, block_scale, set_game_state):
 
     grid = create_grid(grid_size, block_scale)
 
+    @idom.event(prevent_default=True)
     def on_direction_change(event):
         if hasattr(Direction, event["key"]):
             maybe_new_direction = Direction[event["key"]].value

docs/source/examples/snake_game.py

@@ -23,7 +23,11 @@ async def remove_task(event, index=index):
     task_input = idom.html.input({"onKeyDown": add_new_task})
     task_table = idom.html.table(tasks)
 
-    return idom.html.div(task_input, task_table)
+    return idom.html.div(
+        idom.html.p("press enter to add a task:"),
+        task_input,
+        task_table,
+    )
 
 
 idom.run(Todo)

docs/source/examples/todo.py

@@ -65,10 +65,23 @@ A package for building responsive user interfaces in pure Python.
 
             .. grid-item-card::
 
-                .. interactive-widget:: matplotlib_plot
+                .. interactive-widget:: snake_game
+                    :no-activate-button:
+
+            .. grid-item-card::
+
+                .. interactive-widget:: slideshow
+                    :no-activate-button:
+
+            .. grid-item-card::
+
+                .. interactive-widget:: audio_player
                     :no-activate-button:
 
+            .. grid-item-card::
 
+                .. interactive-widget:: todo
+                    :no-activate-button:
 
     .. grid-item::
 
@@ -80,12 +93,14 @@ A package for building responsive user interfaces in pure Python.
                 .. interactive-widget:: simple_dashboard
                     :no-activate-button:
 
+
+
             .. grid-item-card::
 
-                .. interactive-widget:: slideshow
+                .. interactive-widget:: matplotlib_plot
                     :no-activate-button:
 
             .. grid-item-card::
 
-                .. interactive-widget:: audio_player
+                .. interactive-widget:: material_ui_button_on_click
                     :no-activate-button: