c2lc-exploratory/index.html at master · codelearncreate/c2lc-exploratory · 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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>C2LC Prototype</title>

        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href="c2lc.css" rel="stylesheet">

        <link rel="manifest" href="manifest.json">

        <script src="node_modules/infusion/dist/infusion-all.js"></script>
        <script src="src/FeatureDetection.js"></script>
        <script src="src/Interpreter.js"></script>
        <script src="src/Math.js"></script>
        <script src="src/TurtleGraphics.js"></script>
        <script src="src/InterpreterControls.js"></script>
        <script src="src/ProgramUtils.js"></script>
        <script src="src/TextSyntax.js"></script>
        <script src="src/ProgramTextEditor.js"></script>
        <script src="src/ProgramBlockEditor.js"></script>
        <script src="src/BluetoothDevice.js"></script>
        <script src="src/BluetoothDeviceActionHandler.js"></script>
        <script src="src/DashDriver.js"></script>
        <script src="src/SpheroPacketBuilder.js"></script>
        <script src="src/SpheroDriver.js"></script>
        <script src="src/SpheroTurtle.js"></script>
        <script src="src/DeviceConnectControl.js"></script>
        <script src="src/App.js"></script>
    </head>
    <body>
        <h1>Coding to Learn and Create Prototype</h1>
        <div class="c2lc-container">
            <div>
                <div class="c2lc-blockEditor"></div>
                <div class="c2lc-textEditor"></div>
                <div class="c2lc-instructions">
                    Available actions: forward, left, right.<br>
                    Write your program actions in the box above and separate them by spaces. For example, to draw a square, use: <a class="c2lc-example" href="#">forward left forward left forward left forward left</a>
                </div>
            </div>
            <div>
                <div class="c2lc-graphics"></div>
                <div class="c2lc-interpreterControls"></div>
                <div class="c2lc-dashConnectControl"></div>
                <div class="c2lc-spheroConnectControl"></div>
            </div>
        </div>
        <div class="c2lc-examples">
            <h2>Examples</h2>
            <p>Square: <a class="c2lc-example" href="#">forward left forward left forward left forward left</a></p>
        </div>
        <script>
            if ("serviceWorker" in navigator) {
                window.addEventListener("load", function () {
                    navigator.serviceWorker.register("ServiceWorker.js");
                });
            }

            $(document).ready(function () {
                fluid.contextAware.makeChecks({
                    "c2lc.bluetoothApiIsAvailable": "c2lc.bluetoothApiIsAvailable"
                });
                var app = c2lc.app({
                    graphicsContainer: ".c2lc-graphics",
                    interpreterControlsContainer: ".c2lc-interpreterControls",
                    blockEditorContainer: ".c2lc-blockEditor",
                    textEditorContainer: ".c2lc-textEditor",
                    dashConnectControlContainer: ".c2lc-dashConnectControl",
                    spheroConnectControlContainer: ".c2lc-spheroConnectControl"
                });
                var syntax = c2lc.textSyntax();
                $(".c2lc-example").click(function (event) {
                    event.preventDefault();
                    app.applier.change("program", syntax.read($(event.target).text()));
                });
            });
        </script>
    </body>
</html>