# How can I create an interactive game with mutable states with Pluto

**URL:** https://discourse.julialang.org/t/how-can-i-create-an-interactive-game-with-mutable-states-with-pluto/73672
**Category:** Pluto
**Created:** [December 27, 2021, 8:01am UTC](https://discourse.julialang.org/t/how-can-i-create-an-interactive-game-with-mutable-states-with-pluto/73672 "2021-12-27T08:01:45Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![melonedo](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/melonedo/32/15503_2.png) [@melonedo](https://discourse.julialang.org/u/melonedo)
#### Post date: [December 27, 2021, 8:01am UTC](https://discourse.julialang.org/t/how-can-i-create-an-interactive-game-with-mutable-states-with-pluto/73672/1 "2021-12-27T08:01:45Z")

</div>

I would like to program an interactive game in a Pluto notebook by using elements from PlutoUI. The game consists of entering data in a `TextField` and then clicking the “confirm” button to proceed. The game also has a “reset” button, and a cell that displays the result.

For a simplification of the game, lets assume a counting game:

```julia
using PlutoUI

begin reset
	counter[] = 0
end

begin count
	counter[] += 1
end

begin
	counter = Ref(0)
	md"""
	$(@bind count Button("count"))
	$(@bind reset Button("reset"))
	"""
end

let count, reset
	counter[] # display the result
end

```

The interactivity of this notebook is very subtle:

- the display cell must be positioned below the control logic cells.
- control logic cells must not mutate any state observable by other control cells. As a result, I need to use a reference instead of direct assignment.

Are there better way to do this?

> **Full notebook**
>
> ```julia
> ### A Pluto.jl notebook ###
> # v0.17.2
> 
> using Markdown
> using InteractiveUtils
> 
> # This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
> macro bind(def, element)
> quote
> local iv = try Base.loaded_modules[Base.PkgId(Base.UUID("6e696c72-6542-2067-7265-42206c756150"), "AbstractPlutoDingetjes")].Bonds.initial_value catch; b -> missing; end
> local el = $(esc(element))
> global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el)
> el
> end
> end
> 
> # ╔═╡ e48fea3a-66e9-11ec-1da6-4113dbe9161d
> using PlutoUI
> 
> # ╔═╡ e9ffe671-df83-4d59-8de0-056401952fb5
> begin
> counter = Ref(0)
> md"""
> $(@bind count Button("count"))
> $(@bind reset Button("reset"))
> """
> end
> 
> # ╔═╡ 4573b2a0-1324-4ba4-ad37-9ea80acbc10b
> begin reset
> counter[] = 0
> end
> 
> # ╔═╡ 8cee9eae-6e6b-4fde-8686-2f32c8bbdeaf
> begin count
> counter[] += 1
> end
> 
> # ╔═╡ ad7a7827-b0a3-49b8-ae5c-ead07ee01c3f
> let count, reset
> counter[]
> end
> 
> # ╔═╡ 00000000-0000-0000-0000-000000000001
> PLUTO_PROJECT_TOML_CONTENTS = """
> [deps]
> PlutoUI = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
> 
> [compat]
> PlutoUI = "~0.7.21"
> """
> 
> # ╔═╡ 00000000-0000-0000-0000-000000000002
> PLUTO_MANIFEST_TOML_CONTENTS = """
> # This file is machine-generated - editing it directly is not advised
> 
> julia_version = "1.7.0"
> manifest_format = "2.0"
> 
> [[deps.AbstractPlutoDingetjes]]
> deps = ["Pkg"]
> git-tree-sha1 = "abb72771fd8895a7ebd83d5632dc4b989b022b5b"
> uuid = "6e696c72-6542-2067-7265-42206c756150"
> version = "1.1.2"
> 
> [[deps.ArgTools]]
> uuid = "0dad84c5-d112-42e6-8d28-ef12dabb789f"
> 
> [[deps.Artifacts]]
> uuid = "56f22d72-fd6d-98f1-02f0-08ddc0907c33"
> 
> [[deps.Base64]]
> uuid = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
> 
> [[deps.Dates]]
> deps = ["Printf"]
> uuid = "ade2ca70-3891-5945-98fb-dc099432e06a"
> 
> [[deps.Downloads]]
> deps = ["ArgTools", "LibCURL", "NetworkOptions"]
> uuid = "f43a241f-c20a-4ad4-852c-f6b1247861c6"
> 
> [[deps.Hyperscript]]
> deps = ["Test"]
> git-tree-sha1 = "8d511d5b81240fc8e6802386302675bdf47737b9"
> uuid = "47d2ed2b-36de-50cf-bf87-49c2cf4b8b91"
> version = "0.0.4"
> 
> [[deps.HypertextLiteral]]
> git-tree-sha1 = "2b078b5a615c6c0396c77810d92ee8c6f470d238"
> uuid = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
> version = "0.9.3"
> 
> [[deps.IOCapture]]
> deps = ["Logging", "Random"]
> git-tree-sha1 = "f7be53659ab06ddc986428d3a9dcc95f6fa6705a"
> uuid = "b5f81e59-6552-4d32-b1f0-c071b021bf89"
> version = "0.2.2"
> 
> [[deps.InteractiveUtils]]
> deps = ["Markdown"]
> uuid = "b77e0a4c-d291-57a0-90e8-8db25a27a240"
> 
> [[deps.JSON]]
> deps = ["Dates", "Mmap", "Parsers", "Unicode"]
> git-tree-sha1 = "8076680b162ada2a031f707ac7b4953e30667a37"
> uuid = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
> version = "0.21.2"
> 
> [[deps.LibCURL]]
> deps = ["LibCURL_jll", "MozillaCACerts_jll"]
> uuid = "b27032c2-a3e7-50c8-80cd-2d36dbcbfd21"
> 
> [[deps.LibCURL_jll]]
> deps = ["Artifacts", "LibSSH2_jll", "Libdl", "MbedTLS_jll", "Zlib_jll", "nghttp2_jll"]
> uuid = "deac9b47-8bc7-5906-a0fe-35ac56dc84c0"
> 
> [[deps.LibGit2]]
> deps = ["Base64", "NetworkOptions", "Printf", "SHA"]
> uuid = "76f85450-5226-5b5a-8eaa-529ad045b433"
> 
> [[deps.LibSSH2_jll]]
> deps = ["Artifacts", "Libdl", "MbedTLS_jll"]
> uuid = "29816b5a-b9ab-546f-933c-edad1886dfa8"
> 
> [[deps.Libdl]]
> uuid = "8f399da3-3557-5675-b5ff-fb832c97cbdb"
> 
> [[deps.Logging]]
> uuid = "56ddb016-857b-54e1-b83d-db4d58db5568"
> 
> [[deps.Markdown]]
> deps = ["Base64"]
> uuid = "d6f4376e-aef5-505a-96c1-9c027394607a"
> 
> [[deps.MbedTLS_jll]]
> deps = ["Artifacts", "Libdl"]
> uuid = "c8ffd9c3-330d-5841-b78e-0817d7145fa1"
> 
> [[deps.Mmap]]
> uuid = "a63ad114-7e13-5084-954f-fe012c677804"
> 
> [[deps.MozillaCACerts_jll]]
> uuid = "14a3606d-f60d-562e-9121-12d972cd8159"
> 
> [[deps.NetworkOptions]]
> uuid = "ca575930-c2e3-43a9-ace4-1e988b2c1908"
> 
> [[deps.Parsers]]
> deps = ["Dates"]
> git-tree-sha1 = "ae4bbcadb2906ccc085cf52ac286dc1377dceccc"
> uuid = "69de0a69-1ddd-5017-9359-2bf0b02dc9f0"
> version = "2.1.2"
> 
> [[deps.Pkg]]
> deps = ["Artifacts", "Dates", "Downloads", "LibGit2", "Libdl", "Logging", "Markdown", "Printf", "REPL", "Random", "SHA", "Serialization", "TOML", "Tar", "UUIDs", "p7zip_jll"]
> uuid = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
> 
> [[deps.PlutoUI]]
> deps = ["AbstractPlutoDingetjes", "Base64", "Dates", "Hyperscript", "HypertextLiteral", "IOCapture", "InteractiveUtils", "JSON", "Logging", "Markdown", "Random", "Reexport", "UUIDs"]
> git-tree-sha1 = "b68904528fd538f1cb6a3fbc44d2abdc498f9e8e"
> uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
> version = "0.7.21"
> 
> [[deps.Printf]]
> deps = ["Unicode"]
> uuid = "de0858da-6303-5e67-8744-51eddeeeb8d7"
> 
> [[deps.REPL]]
> deps = ["InteractiveUtils", "Markdown", "Sockets", "Unicode"]
> uuid = "3fa0cd96-eef1-5676-8a61-b3b8758bbffb"
> 
> [[deps.Random]]
> deps = ["SHA", "Serialization"]
> uuid = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
> 
> [[deps.Reexport]]
> git-tree-sha1 = "45e428421666073eab6f2da5c9d310d99bb12f9b"
> uuid = "189a3867-3050-52da-a836-e630ba90ab69"
> version = "1.2.2"
> 
> [[deps.SHA]]
> uuid = "ea8e919c-243c-51af-8825-aaa63cd721ce"
> 
> [[deps.Serialization]]
> uuid = "9e88b42a-f829-5b0c-bbe9-9e923198166b"
> 
> [[deps.Sockets]]
> uuid = "6462fe0b-24de-5631-8697-dd941f90decc"
> 
> [[deps.TOML]]
> deps = ["Dates"]
> uuid = "fa267f1f-6049-4f14-aa54-33bafae1ed76"
> 
> [[deps.Tar]]
> deps = ["ArgTools", "SHA"]
> uuid = "a4e569a6-e804-4fa4-b0f3-eef7a1d5b13e"
> 
> [[deps.Test]]
> deps = ["InteractiveUtils", "Logging", "Random", "Serialization"]
> uuid = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
> 
> [[deps.UUIDs]]
> deps = ["Random", "SHA"]
> uuid = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
> 
> [[deps.Unicode]]
> uuid = "4ec0a83e-493e-50e2-b9ac-8f72acf5a8f5"
> 
> [[deps.Zlib_jll]]
> deps = ["Libdl"]
> uuid = "83775a58-1f1d-513f-b197-d71354ab007a"
> 
> [[deps.nghttp2_jll]]
> deps = ["Artifacts", "Libdl"]
> uuid = "8e850ede-7688-5339-a07c-302acd2aaf8d"
> 
> [[deps.p7zip_jll]]
> deps = ["Artifacts", "Libdl"]
> uuid = "3f19e933-33d8-53b3-aaab-bd5110c3b7a0"
> """
> 
> # ╔═╡ Cell order:
> # ╠═e48fea3a-66e9-11ec-1da6-4113dbe9161d
> # ╠═4573b2a0-1324-4ba4-ad37-9ea80acbc10b
> # ╠═8cee9eae-6e6b-4fde-8686-2f32c8bbdeaf
> # ╠═e9ffe671-df83-4d59-8de0-056401952fb5
> # ╠═ad7a7827-b0a3-49b8-ae5c-ead07ee01c3f
> # ╟─00000000-0000-0000-0000-000000000001
> # ╟─00000000-0000-0000-0000-000000000002
> 
> ```