瀏覽代碼

Add basic frontend (jQuery+Bootstrap) stub

tags/v0.1.3
bertieb 3 年之前
父節點
當前提交
498412fca0
共有 3 個文件被更改,包括 50 次插入11 次删除
  1. +6
    -9
      src/html/index.html
  2. +42
    -0
      src/ts/frontend.ts
  3. +2
    -2
      tsconfig.json

+ 6
- 9
src/html/index.html 查看文件

@@ -7,16 +7,14 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/asphotheme.css">
<link rel="stylesheet" href="css/dashboard.css">
<script src="rollstats.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="bundle.js" type="text/javascript"></script>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Dice Roller</a>
</header>
<div class="container">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<h1>Asphodice Roller</h1>
<p>This lets you roll an arbitrary number of Asphodice!</p>
<h1 class="mt-3">Asphodice Roller</h1>
<p>This lets you roll an arbitrary number of Asphodice. Results will be shown below. Please be patient as the rolls take place in the browser.</p>

<form>
<label for="numRolls">Number of Rolls</label><br />
@@ -25,10 +23,9 @@
<input type="number" class="form-control" id="numRolls" placeholder="100000" aria-describedby="basic-addon3">
<span class="input-group-text">times</span>
</div>
<label for="numDice" class="form-label">Number of Dice</label>
<input type="range" class="form-range" id="numDice" min="1" max="20">
<button class="btn btn-primary">Roll!</button>
</form>
<button class="btn btn-primary" id="mainRoll">Roll!</button>
</div>
<div class="container" id="results"></div>
</body>
</html>

+ 42
- 0
src/ts/frontend.ts 查看文件

@@ -0,0 +1,42 @@
import { RollStats } from "./rollstats"
import { Outcomes } from "./asphodice"

let rollstats = new RollStats();

function getResults():void {
console.log("getting results");
$("#results").empty();
rollstats.doRolls();
$("#results").append(`<div class="card my-4">`);
$("#results").append(`<div class="card-body">`);
$("#results").append(`<p>
<strong>Rerolled:</strong> ${rollstats.rerollCounts.true} <br/>
<strong>Not rerolled:</strong> ${rollstats.rerollCounts.false}
</p>`);
$("#results").append(`<table class="table" id="balanceTable">
<thead><td>Balance</td> <td>Count</td> <td>Percentage</td></thead>
<tbody></tbody>
</table>`);
//
let bc = rollstats.balanceCounts;
let keys = Object.keys(bc);
keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
//for (let balance in rollstats.balanceCounts) {
for (var i = 0; i < keys.length; i++) {
let tb = $("#balanceTable").find("tbody");
tb.append(`<tr> <td>${keys[i]}</td>
<td>${rollstats.balanceCounts[keys[i]]}</td>
<td>${(rollstats.balanceCounts[keys[i]] / rollstats.numRolls * 100).toFixed(2)}</td>
</tr>`);
}
$("#results").append(`</div>`);
$("#results").append(`</div>`);
}


function setupHandlers(): void {
console.log("adding event handler");
$("#mainRoll").click(getResults);
}

document.addEventListener("DOMContentLoaded", setupHandlers);

+ 2
- 2
tsconfig.json 查看文件

@@ -47,7 +47,7 @@
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
"types": [ "node" ], /* Type declaration files to be included in compilation. */
"types": [ "node", "jquery" ], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
@@ -67,5 +67,5 @@
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"include": [ "./src/ts/dice.ts", "./src/ts/rollstats.ts" ]
"include": [ "./src/ts/asphodice.ts", "./src/ts/dice.ts", "./src/ts/rollstats.ts" ]
}

Loading…
取消
儲存