rubik-js/index.html at master · JavaJeremy/rubik-js · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>Rubik Cube</title>
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet">
</head>

<body>

<ul id="controls">
    <li><a href="#shuffle" id="button-shuffle">Shuffle</a></li>
    <li><a href="#solve" id="button-solve">Solve</a></li>
    <li><a href="#undo" id="button-undo">Undo</a></li>
    <li><a href="#reset" id="button-reset">Reset</a></li>
    <li>
        <label>Size: <span id="cubeSizeText"></span>
            <input type="range" min="1" max="5" value="3" class="slider" id="cube-size-input">
        </label>
    </li>
</ul>

<div id="scene"></div>

<p id="info">
    Built with <a href="http://threejs.org">Three.js</a>
</p>
<a href="https://github.com/JavaJeremy/rubik-js.git">
    <img class="github"
         alt="Fork me on GitHub">
</a>

<div class="loader"></div>

<script src="lib/jquery-2.0.3.js"></script>
<script src="lib/three.js"></script>
<script src="lib/OrbitControls.js"></script>
<script src='lib/threex.domevent.js'></script>
<script src='lib/threex.domevent.object3d.js'></script>

<script src="rubik.js"></script>
<script>

    $(function () {

        function init(dimensions) {
//            setLoadingStatus(true);
            dimensions = +(dimensions) || 3;

            const element = $("#scene").empty();
            if (rubiksCube)
                rubiksCube.remove();
            rubiksCube = new Rubik(element, dimensions, '#c9dbdf');

            const slider = $("#cube-size-input");
            const dimensionSpan = $('#cubeSizeText');
            slider.val(dimensions);
            dimensionSpan.text(slider.val());

            $("#button-shuffle").on('click', function (e) {
                e.preventDefault();
                rubiksCube.shuffle()
            });
            $("#button-solve").on('click', function (e) {
                e.preventDefault();
                rubiksCube.solve();
            });
            $("#button-undo").on('click', function (e) {
                e.preventDefault();
                rubiksCube.undo();
            });
            $("#button-reset").on('click', function (e) {
                e.preventDefault();
                init();
            });
            slider.on('change', function () {
                dimensionSpan.text(this.value);
                init($(this).val())
            });
            setLoadingStatus(false);
        }

        function setLoadingStatus(on) {
            $(".loader").css("display", (on ? "block" : "none"));
        }

        let rubiksCube;

        init();

    });

</script>

</body>

</html>