EndlessForms/index.html at master · than4213/EndlessForms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
  <link rel="stylesheet" href="./endless_forms_demo.css">

  <script type="module" src="./newtonian_gravity_element.js"></script>
  <script type="module" src="./two_slit_element.js"></script>
  <script type="module" src="./binomial_distribution_element.js"></script>

  <script>
    function onPause() {
        getSim().pause()
        document.getElementById('pause_btn').classList.add("page_hidden")
        document.getElementById('config').classList.remove("page_hidden")
    }
    function onPlay() {
        setConfig()
        getSim().play()
        document.getElementById('pause_btn').classList.remove("page_hidden")
        document.getElementById('config').classList.add("page_hidden")
    }
    function onReset() {
        setConfig()
        getSim().reset()
    }
    function onCopy() {
        navigator.clipboard.writeText(getSim().getData())
    }
    async function onPaste() {
        getSim().setData(await navigator.clipboard.readText())
    }

    let selected = 'two_slit'
    function selectSim(name) {
        const oldSelector = getSelector()
        oldSelector.classList.remove("menu_hidden")
        oldSelector.classList.add("menu_button")
        getSim().classList.add("page_hidden")
        getConfig().classList.add("menu_hidden")

        selected = name

        const newSelector = getSelector()
        newSelector.classList.remove("menu_button")
        newSelector.classList.add("menu_hidden")
        getConfig().classList.remove("menu_hidden")
        getSim().classList.remove("page_hidden")
    }
    function getSim() {
        return document.getElementById(selected)
    }
    function getSelector() {
        return document.getElementById("select_" + selected)
    }
    function getConfig() {
        return document.getElementById(selected + "_config")
    }

    function setConfig() {
        const config = selected == 'two_slit' ? twoSlitConfig()
          : selected == 'newtonian_gravity' ? newtonianGravityConfig()
          : selected == 'binomial_distribution' ? binomialDistributionConfig()
          : { }
        return getSim().setConfig(config)
    }
    function twoSlitConfig() {
        return {
            force: parseFloat(document.getElementById("two_slit_force").value),
            wavelength: parseInt(document.getElementById("two_slit_wavelength").value),
            amplitude: parseInt(document.getElementById("two_slit_amplitude").value),
        }
    }
    function newtonianGravityConfig() {
        return { quantity: parseInt(document.getElementById("newtonian_gravity_quantity").value) }
    }
    function binomialDistributionConfig() {
        return { p: parseFloat(document.getElementById("binomial_distribution_p").value) }
    }

    window.onload = function() {
        onPlay()
    }
  </script>
</head>
<body>
  <two-slit id="two_slit" class="page simulation"></two-slit>
  <newtonian-gravity id="newtonian_gravity" class="page simulation page_hidden">
  </newtonian-gravity>
  <binomial-distribution id="binomial_distribution" class="page simulation page_hidden">
  </binomial-distribution>
  <button id="pause_btn" class="page page_hidden" onclick="onPause()">Pause</button>
  <div id="config" class="page">
    <button onclick="onPlay()">Play</button>
    <div class="menu">
      <button class="menu_button" onclick="onReset()">Reset</button>
      <button class="menu_button" onclick="onCopy()">Copy to Clipboard</button>
      <button class="menu_button" onclick="onPaste()">Paste from Clipboard</button>
      <button id="select_two_slit" class="menu_hidden" onclick="selectSim('two_slit')">
        Two Slit
      </button>
      <button id="select_newtonian_gravity"
              class="menu_button"
              onclick="selectSim('newtonian_gravity')">
        Newtonian Gravity
      </button>
      <button id="select_binomial_distribution" class="menu_button" onclick="selectSim('binomial_distribution')">
        Binomial Distribution
      </button>
      <div id="two_slit_config">
        <div>Force: <input type="number" id="two_slit_force" min="0" value=".1"></div>
        <div>Wavelength: <input type="number" id="two_slit_wavelength" min="1" value="8"></div>
        <div>Amplitude: <input type="number" id="two_slit_amplitude" min="1" value="1"></div>
      </div>
      <div id="newtonian_gravity_config" class="menu_hidden">
        <div>
          Quantity:
          <input type="number" id="newtonian_gravity_quantity" min="1" value="1000">
        </div>
      </div>
      <div id="binomial_distribution_config">
        <div>
          P:
          <input type="number" id="binomial_distribution_p" min="0" max="1" value=".5"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>