improved page layout, added vite config for './' base path

index.html

@@ -11,7 +11,23 @@
     <div class="container">
       <div class="row">
         <div class="col pt-3 pt-lg-5">
-          <h1>Tripeaks Solver</h1>
+          <h1 class="mb-3">Tripeaks Solver</h1>
+
+          <div x-data="{show: false}" class="accordion mb-3" id="readMeAccordion">
+            <div class="accordion-item">
+              <h2 id="readMeHeader" class="accordion-header" >
+                <button
+                  class="accordion-button"
+                  :class="{'collapsed': !show}"
+                  type="button"
+                  :aria-expanded="show ? 'true' : 'false'"
+                  aria-controls="collapseOne"
+                  @click="show = !show">
+                  Read Me / How To
+                </button>
+              </h2>
+              <div id="collapseOne" class="accordion-collapse collapse" :class="{'show': show}" aria-labelledby="headingOne">
+                <div class="accordion-body">
 
                   <p>
                     Enter cards representing a Tripeaks game below. Enter each card as 2
@@ -46,6 +62,15 @@
                     </li>
                   </ul>
                   
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <div class="row">
+
+            <div class="col-12 col-lg-9 col-xl-8">
               <!-- User input of game cards -->
               <form
                 id="cardsInputForm"
@@ -154,7 +179,10 @@
                   </template>
                 </div>
               </div>
+            </div>
 
+
+            <div class="col-12 col-lg-3 col-xl-4">
               <!-- Display of solvingprogress or solution -->
               <div id="gameSolving" x-data="gameSolving" x-init="onInit()">
                 <div class="d-flex justify-content-start">
@@ -181,6 +209,10 @@
                 </ol>
               </div>
             </div>
+
+          </div>
+
+        </div>
       </div>
     </div>
 

main.js

@@ -1,5 +1,6 @@
 import "./style.scss";
 //import 'bootstrap';
+import './node_modules/bootstrap/js/src/collapse';
 import Alpine from "alpinejs";
 import cardSvgs from "./cardSvgs";
 import SolverWorker from "./solverWorker?worker";
@@ -225,7 +226,7 @@ const encouragements = [
 Alpine.data("gameSolving", () => ({
   encouragements,
   solverWorker: null,
-  headerText: "",
+  headerText: "Solution will go here:",
   moveCount: 23,
   statusMessages: [],
   solutionMoves: [],

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  // ...
+  base: './'
+})