Function Scene

docs/source/reference/_examples/character_movement/main.py:34–70

()

@component
def Scene():
    position, set_position = use_state(Position(100, 100, 0))

    return html.div(
        {"style": {"width": "225px"}},
        html.div(
            {
                "style": {
                    "width": "200px",
                    "height": "200px",
                    "background_color": "slategray",
                }
            },
            image(
                "png",
                CHARACTER_IMAGE,
                {
                    "style": {
                        "position": "relative",
                        "left": f"{position.x}px",
                        "top": f"{position.y}.px",
                        "transform": f"rotate({position.angle}deg) scale(2, 2)",
                    }
                },
            ),
        ),
        html.button(
            {"on_click": lambda e: set_position(translate(x=-10))}, "Move Left"
        ),
        html.button(
            {"on_click": lambda e: set_position(translate(x=10))}, "Move Right"
        ),
        html.button({"on_click": lambda e: set_position(translate(y=-10))}, "Move Up"),
        html.button({"on_click": lambda e: set_position(translate(y=10))}, "Move Down"),
        html.button({"on_click": lambda e: set_position(rotate(-30))}, "Rotate Left"),
        html.button({"on_click": lambda e: set_position(rotate(30))}, "Rotate Right"),
    )


run(Scene)