Rpgchart/interlock.html at master · sam-sepi/Rpgchart · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/general.css">
    </head>
    <body>
        <div id="Character">

            <p id="rpg"></p>

            <input type="submit" value="Rules" id="show_rules" class="click" onclick="showRules()">
                <p id="rules" class="text"></p>

            <p id="form" class="text">Stat and Skill: </p>
                <input type="text" id="stat" value="5" class="num">
                <input type="text" id="skill" value="6" class="num">

            <input type="submit" value="Roll" id="update" onclick="drawData()" class="click">
        </div>
        <br>

        <h3 id="error"></h3>

        <div class="chart-container">
            <canvas id="chart"></canvas>
        </div>

        <script>

        drawData();

        async function drawData()
        {
            if(window.chartObject != undefined)
                window.chartObject.destroy();

            document.getElementById('error').innerHTML = '';

            let req = await fetch('api.php?interlock',
            {
                method: "post",
                headers: new Headers({
                    "Content-Type": "application/json"
                }),
                body: JSON.stringify({
                    stat: document.getElementById('stat').value,
                    skill: document.getElementById('skill').value
                })
            });

            json_data = await req.json();

            if(json_data.error)
            {
                document.getElementById('error').innerHTML = json_data.error;
            }
            else
            {
                document.getElementById('rpg').innerHTML = json_data.rpg;
                document.getElementById('rules').innerHTML = json_data.rules;
                document.getElementById('rules').style.display = 'none';

                var result = [];

                for(var i in json_data.roll)
                    result.push(json_data.roll[i]);

                let test = [];
                for(var i in json_data.test)
                    test.push(json_data.test[i]);

                var ctx = document.getElementById('chart').getContext('2d');

                window.chartObject = new Chart(ctx, {

                    type: 'line',
                    data: {
                        labels: test,
                        datasets: [
                        {
                            label: 'Interlock - d10 + Stat + Skill: ',
                            borderColor: 'rgb(100, 0, 0)',
                            data: result,
                            backgroundColor: 'rgba(255, 0, 0, 0)'
                        }],
                    },

                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    suggestedMin: 0,
                                    suggestedMax: json_data.yaxes,
                                },
                                gridLines: {
                                    display: false
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false
                                },
                                ticks: {
                                     display: false
                                }
                            }]
                        },
                        legend: {
                            display: false
                        }
                    }
                });

            }
        }

        function showRules()
        {
            if(document.getElementById('rules').style.display === 'none')
            {
                document.getElementById('rules').style.display = 'block';
            }
            else
            {
                document.getElementById('rules').style.display = 'none';
            }
        }
        </script>
</html>