diceRoller/rollWindow.html at master · asr1/diceRoller · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <title>New Roll</title>

    <style>
            .tooltip {
                position: relative;
                display: inline-block;
                border-bottom: 1px dotted black;
            }

            .tooltip .tooltiptext {
                visibility: hidden;
                width: 200px;
                background-color: black;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;

                /* Position the tooltip */
                position: absolute;
                z-index: 1;
            }

            .tooltip:hover .tooltiptext {
                visibility: visible;
            }
            </style>

            <script>
                var angular = require('angular');
                var app = angular.module('DiceRoller', []);
                app.controller('diceCtrl', function($scope, $http){
                    $scope.reRolls = []; //Converted to numbers
                    $scope.reRollText = ""; //The csv data from the textbox

                    $scope.numTrials = 100;
                    $scope.numDice = 1;
                    $scope.dieSize = 6;
                    $scope.addEach = 0;
                    $scope.addAll = 0;

                    $scope.$watchGroup(['numTrials', 'numDice', 'dieSize', 'addEach', 'addAll', 'reRolls'], () => {

                        //Determine theoretical min and max
                        let diePoss = []; //Possible die results
                        for(var i = 1; i <= $scope.dieSize; i++)
                        {
                            if(!$scope.reRolls.includes(i))
                            {
                                diePoss.push(i);
                            }
                        }
                        var minPoss = diePoss[0];
                        var maxPoss = diePoss[diePoss.length-1];

                        minPoss += $scope.addEach;
                        maxPoss += $scope.addEach;

                        $scope.therMin = minPoss * $scope.numDice + $scope.addAll;
                        $scope.therMax = maxPoss * $scope.numDice + $scope.addAll;

                        $scope.totalAdd = $scope.numDice * $scope.addEach + $scope.addAll;

                    });

                    $scope.$watch('reRollText', ()=>
                    {
                        $scope.reRolls=[];
                        let nums = $scope.reRollText.split(',');
                        for(var i = 0; i < nums.length; i++)
                        {
                            $scope.reRolls[i] = ~~nums[i];
                        }
                    });

                });
            </script>

</head>
<body ng-app="DiceRoller" ng-controller="diceCtrl">
    <div class="container">
        <form >
            <div>
                <label>Num trials</label>
                <input type="number" ng-model="numTrials" id="numtrials" value=100 autofocus>
            </div>
            <div>
                <label>Num dice to roll</label>
                <input type="number" ng-model="numDice" id="numdice" value=1 autofocus>
            </div>
            <div>
                <label># of sides per die</label>
                <input type="number" ng-model="dieSize" id="diesize" value=6 autofocus>
            </div>
            <div>
                <label>Add to each</label>
                <input type="number" ng-model="addEach" id="addeach" value=0 autofocus>
            </div>
            <div>
                <label>add to all</label>
                <input type="number" ng-model="addAll" id="addall" value=0 autofocus>
            </div>
            <div>
                <label>Rerolls</label>    <span class="tooltip">help
                        <span class="tooltiptext">Enter in a comma-separated list of numbers like 1,2,5</span>
                </span>

                <input type="text" ng-model="reRollText" id="reroll" autofocus>

            </div>

            <div>
                You are rolling {{numDice}}<span ng-if="addEach!= 0">[</span>d{{dieSize}}
                <!--NLP-->
                <span ng-if="addEach > 0">+</span>
                <span ng-if="addEach != 0">{{addEach}}</span><span ng-if="addEach != 0">]</span>
                <span ng-if="addAll > 0">+</span>
                <span ng-if="addAll != 0">{{addAll}}</span>
                {{numTrials}} times
                <span ng-if="reRolls.length > 1 || reRolls[0] != 0">and rerolling on {{reRollText}}</span>
                <div ng-if="addEach != 0">This is equivalent to {{numDice}}d{{dieSize}}<span ng-if="totalAdd > 0">+</span>{{totalAdd}}</div>
                <div></div>
                Resulting in a min of {{therMin}} a max of {{therMax}} and an average of {{(therMin + therMax) /2}}.
            </div>
            <button class='btn waves-effect waves-light' type="submit">Roll!</button>
            <button class='btn waves-effect waves-light' id="clear">Clear</button>

            <button id="test">test</button>
        </form>
    </div>
    <script>

        const electron = require('electron');
        const {ipcRenderer, globalShortcut} = electron;
        const Parameter = require('./RollParams');
        const RollCount = require('./RollCount');
        const form = document.querySelector('form');

        form.addEventListener('submit', submitForm);
        document.getElementById('clear').addEventListener('click', clear);
        document.getElementById('test').addEventListener('click', test);

        function test(e)
        {
            e.preventDefault();
            var scope = angular.element(document.querySelector('[ng-controller="diceCtrl"]')).scope();
            let dice = [];
            for(let i = 0; i < scope.numDice; i++)
            {
                dice.push(scope.dieSize);
            }
            amt = new RollCount(scope.therMax);
            console.log(sums(dice, 0, amt));
        }

        function clear(e)
        {
            e.preventDefault();
            ipcRenderer.send('clear');
        }

        function submitForm(e){
            e.preventDefault();
            var scope = angular.element(document.querySelector('[ng-controller="diceCtrl"]')).scope();

            const param = new Parameter(scope.numTrials, scope.numDice, scope.dieSize, scope.addEach, scope.addAll, scope.reRolls, scope.therMin, scope.therMax);
            ipcRenderer.send('roll', param);
        }

        function sums(dice, sum, ans) {
            if (dice.length === 0) ans.add(sum) // edge case, no more dice
            else {
                let d = dice[0]
                for (let i = 1; i <= d; i++) {
                sums(dice.slice(1), sum + i, ans) // recurse with remaining dice
                }
                    return ans;
                }
        }

    </script>
</body>
</html>