potd/layout.htm at master · lanaklein14/potd · 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
<html>
    <head id="head">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="layout.css">
        <title>Palace of the Dead</title>
    </head>
    <body>
        <div id="app">
            <fieldset>
                <input id="item-1" class="radio-inline__input" onclick="drawLayout(layout01_50_101_150)" type="radio" name="accessible-radio" value="item-1" checked="checked"/>
                <label class="radio-inline__label" for="item-1">
                    B1-B50(B101-B150)
                </label>
                <input id="item-2" class="radio-inline__input" onclick="drawLayout(layout51_80_151_180)" type="radio" name="accessible-radio" value="item-2"/>
                <label class="radio-inline__label" for="item-2">
                    B51-B80(B151-B180)
                </label>
                <input id="item-3" class="radio-inline__input" onclick="drawLayout(layout81_100_181_190)" type="radio" name="accessible-radio" value="item-3"/>
                <label class="radio-inline__label" for="item-3">
                    B81-B100(B181-B190)
                </label>
                <input id="item-4" class="radio-inline__input" onclick="drawLayout(layout191_200)" type="radio" name="accessible-radio" value="item-3"/>
                <label class="radio-inline__label" for="item-4">
                    B191-B200
                </label>
                <input id="item-5" class="radio-inline__input" onclick="drawLayout(layoutExit)" type="radio" name="accessible-radio" value="item-4"/>
                <label class="radio-inline__label" for="item-5">
                    出口エリア
                </label>
            </fieldset>
            <div id="canvasWrapper">
                <canvas id="canvas"></canvas>
            </div>
        </div>
    </body>
    <script src="modules/Room.js"></script>
    <script src="modules/Passage.js"></script>
    <script src="modules/Layout.js"></script>
    <script src="modules/DDUtility.js"></script>
    <script>
        function drawLayout(targetLayout) {
            const layout = targetLayout;
            layout.rooms.forEach(r=>r.isActive=true);

            let canvas = document.getElementById('canvas');
            canvas.width = document.querySelector("#canvasWrapper").offsetWidth;
            canvas.height = canvas.width;
            console.log(canvas.width)
            const scale = canvas.width / 1000;
            if (canvas.getContext) {
                const ctx = canvas.getContext('2d');

                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
                ctx.fillRect(0,0,canvas.width,canvas.height);

                ctx.save();
                ctx.translate(canvas.width/2, canvas.height/2);
                ctx.scale(scale, scale);

                layout.draw(ctx, {PosX:0, PosY:0}, scale);
                ctx.restore();
            }
        }
        drawLayout(layout01_50_101_150);
    </script>
</html>