tiles-generator/index.html at master · jdhenckel/tiles-generator · 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
<!DOCTYPE html>
<html>

<head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="vecmath.js"></script>
    <script src="tile.js"></script>
    <script src="script.js"></script>
</head>

<body>
    This is to draw tiles. Use WASD, QEZX to change view.  Use 1,2 to add tile.
    <div ng-app="myApp" ng-controller="myCtrl">
        frame {{frame}}
        <br/>
        <svg id=mysvg width="100%" height="500" tabindex="0" ng-keydown="keyDown($event)" ng-keyup="keyUp($event)" ng-mousedown="mouseDown($event)" ng-mouseup="mouseUp($event)" ng-mousemove="mouseMove($event)">

            <defs>
                <g ng-repeat="tileType in tileSet.tileTypes" id="{{tileType.id}}">
                  <polygon ng-attr-points="{{tileType.points}}" class="tile" />
                </g>
            </defs>

            <g ng-attr-transform="{{viewTransform}}">
                <use ng-repeat="tile in tileList" xlink:href="{{tile.type.name}}" ng-attr-transform="{{tile.transform}}" />

                <!-- FOR DEBUGGING -->
                <line ng-repeat="a in edgeLines" ng-attr-x1="{{a[0].x}}" ng-attr-y1="{{a[0].y}}" ng-attr-x2="{{a[1].x}}" ng-attr-y2="{{a[1].y}}" style="stroke:yellow;stroke-width:.1" />
                <line ng-repeat="a in lines" ng-attr-x1="{{a[0].x}}" ng-attr-y1="{{a[0].y}}" ng-attr-x2="{{a[1].x}}" ng-attr-y2="{{a[1].y}}" style="stroke:red;stroke-width:.1" />
            </g>
        </svg>

        <!-- FOR DEBUGGING -->
        <div ng-repeat="tile in tileList">
            {{tile.type.name}} {{tile.points}} : {{tile.transform}}
        </div>
        MSG: {{msg}}
        <br>VIEW: {{viewTransform}}
    </div>
    <!-- FOR DEBUGGING -->
    <p id=res>__</p>
</body>

</html>