polycubes/edit.html at master · Akodiat/polycubes · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Polycubes</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            position: fixed;
            height: 100%;
        }

        #info {
            position: fixed;
            margin: 10px;
            z-index: 1;
            background-color: white;
            overflow-y: auto;
            opacity: 0.6;
            max-height: 100%;
            width: 180px;
            font-family: Monospace;
            font-size: 12px;
            text-align: center;
        }
        .rot0 {transform: rotate(0deg);}
        .rot1 {transform: rotate(90deg);}
        .rot2 {transform: rotate(180deg);}
        .rot3 {transform: rotate(270deg);}

        fieldset {
            padding: 0px;
            margin: 3px;
            border-width: thick;
            border-style: solid;
            border-radius: 5px;
        }

        a {
            color: #20ccf0;
        }

        span {
           display: inline-block;
        }

        input[type=number] {
            width: 30px;
            height: 30px;
            text-align: center;
            border-width:0px;
            border:none;
            background: transparent;
            vertical-align: middle;
        }
        button {
            width: 100%;
            border: 0;
            margin: 3px;
        }

        .primary {
            background-color: #d6eed6;
            padding: 5px;
        }
    </style>
    <link rel="manifest" href="/manifest.json">
</head>

<body>
    <div id="info">
        Polycubes, by Joakim Bohlin. A 3D version of <a href="http://chaoticsymmetry.co.uk/polyominoes/index-old.php">Polyominoes</a><br>
        <fieldset>
        <legend>Rule set:</legend>
        <div id="ruleset" style="overflow: hidden"></div>
        <input type="checkbox" id="autoUpdate" checked="True", onchange="regenerate()">Auto update
        <button id="hideToggle" onclick="toggleRuleSet()">Hide</button>
        <!--https://stackoverflow.com/a/19965480 location.search-->
        </fieldset>
    </div>
    <canvas id="threeCanvas"></canvas>

    <script src="js/libs/three.min.js"></script>
    <script src="js/libs/randomColor.min.js"></script> <!--from: https://github.com/davidmerfield/randomColor-->
    <script src="js/libs/WebGL.js"></script>
    <script src="js/libs/GLTFExporter.js"></script>
    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/system.js"></script>
    <script src="js/view.js"></script>
    <script src="js/edit.js"></script>

</body>

</html>