chess/index.html at master · samsonjj/chess · 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
<html>
    <head></head>
    <body>
	    <!-- <canvas id="canvas" width="1000px" height="1000px"></canvas>-->
	<img style="max-height:90vh;max-width:90vw" id="chessImage" src="./images/temp.svg">
    <form id="user-input-form" action="http://localhost/move">
        <label for="move">User Input</label>
        <input type="text" id="move-input" name="move">
    </form>
    <script>
        urlPath = (path) => `http://localhost:5000${path}`;

        function reloadImage() {
            fetch(urlPath('/image'))
                .then(response => response.blob())
                .then((blob) => {
                    imageUrl = window.URL.createObjectURL(blob);
                    image.src = imageUrl
                })
            image.src = './images/temp.svg?rand=' + Date.now()
        }

        form = document.getElementById("user-input-form");
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            input = document.getElementById("move-input")
            moveText = input.value;
            input.value = '';
            fetch(urlPath('/move'), {
                headers: { "Content-Type": "application/json" },
                method: 'POST',
                body: JSON.stringify({
                    move: moveText
                })
            })
                .then(response => reloadImage());
        });

	    image = document.getElementById('chessImage');

        setInterval(reloadImage, 500);
	</script>
    </body>
</html>