modal and support for dice/rea tracking added

index.html

@@ -10,6 +10,8 @@
 		<!-- Style sheets -->
 		<link href="css/bootstrap.min.css" rel="stylesheet">
 <!--		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">-->
+		<link href="css/custom.css" rel="stylesheet">
+
 
 		<!-- javascript files -->
 		<script src="js/bootstrap.min.js" type="text/javascript"></script>
@@ -24,35 +26,70 @@
 		<br/>
 		<div class="container">
 		  <div class="table-responsive">
-			<table class="table table-sm table-hover " id="combatants">
+			<table class="table table-sm table-borderless" id="combatants">
 				<thead>
 					<tr id="combatants-headrow">
-						<th class="col-5" title="Initiative">Initiative</th>
+						<th class="col-sm-5" id="combNameHeader" title="Name">Name</th>
-						<th class="col-6" title="Name">Name</th>
+						<th class="col-sm-2" id="combIniHeader" title="Initiative">Initiative</th>
-						<th class="col-1"></th>
+						<th class="col-sm-3" id="combDiceReaHeader" title="Initiative Dice and Reaction">Ini Dice & REA</th>
+						<th class="col-sm-2" id="combActionsHeader" title="Available Actions">Actions</th>
 					</tr>
 				</thead>
 
 				<tbody class="align-middle" id="sortable">
-					<tr class="table-active" id="formRow">
+					<tr class="table-primary combRow" id="newCombRow">
-						<form name="combForm" id="combForm" onsubmit="return false;">
+						<form name="newCombForm" class="combForm was-validated" onsubmit="return false;">
 							<td>
- 								<input type="number" min="0" max="99" class="form-control" id="combIni" placeholder="new combatant's ini" required />
+								<input type="text" maxlength="40" class="form-control combName" form="newComForm" placeholder="Name" required />
 							</td>
-							<td>
+							<td class="col-sm-2">
-								<input type="text" maxlength="40" class="form-control" id="combName" placeholder="new combatant's name" required />
+								<input type="number" min="0" max="50" class="form-control combIni" form="newComForm" placeholder="Ini" />
+							</td>
+							<td class="col-sm-3">
+								<div class="input-group">
+									<input type="number" min="1" max="5" class="form-control combDice" form="newComForm" placeholder="Dice" />
+									<span class="input-group-text">D+</span>
+									<input type="number" min="1" max="20" class="form-control combRea" form="newComForm" placeholder="REA" />
+								</div>
 							</td>
 							<td>
 								<div class="btn-group d-flex">
-									<button type="button" class="btn btn-secondary" id="combAddButton" title="Add combatant to fight">Add</button>
+									<button type="button" class="btn btn-primary" id="newCombAddButton" title="Add combatant to fight" form="newComForm">Add</button>
 								</div>
 							</td>
 						</form>
 					</tr>
+					<tr id="newRoundRow">
+						<td colspan="3" />
+						<td>
+							<div class="btn-group d-flex">
+								<button type="button" class="btn btn-secondary" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="begin new round">New Round</button>
+							</div>
+						</td>
+					</tr>
 				</tbody>
 
 			</table>
 		  </div>
 		</div>
+
+		<div class="modal fade" id="newRoundModal" tabindex="-1">
+			<div class="modal-dialog">
+				<div class="modal-content modal-sm">
+					<div class="modal-header">
+						<h5 class="modal-title">Start New Round</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						<p>Are you sure?</p>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-primary" id="newRoundOkButton" data-bs-dismiss="modal">OK</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 	</body>
 </html>