Feat: interactivity (#4)

* feat: initial UI Bring in shoelace for a lightweight web component library. Build out first UI screen- gameplay HUD with links to "pause" menu. Hook up pause button to game pause. Add TimeManager to handle everything turn/scheduling/time related. Hook up current time to TimeControl component. * feat: tabbed gameplay UI Add a tabbed gameplay UI- select section with button at top, and clickable options are shown in list below. Add time control section with current date, pause button, and game speed scale. Hook up speed scale to timemanager. * fix: warn about backdropFilter * Move rendering to its own loop Have one loop for rendering and one for game logic. Run each loop at different intervals, the game loop at a slower interval. * test removing shoelace assets from dist
seifer8ff · Feb 21, 2024 · 448fb97 · 448fb97
1 parent 3659253
commit 448fb97
Show file tree

Hide file tree

Showing 18 changed files with 5,122 additions and 2,927 deletions.
diff --git a/.gitignore b/.gitignore
@@ -66,3 +66,4 @@ dist/
 /public/**
 !/public/.gitignore
 
+/shoelace
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "npm-scripts.showStartNotification": false
+    "npm-scripts.showStartNotification": false,
+    "html.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.html-custom-data.json"]
 }
diff --git a/dist/app.js b/dist/app.js
diff --git a/index.html b/index.html
@@ -1,18 +1,27 @@
 <!DOCTYPE html>
-<html>
+<html class="sl-theme-dark">
     <head>
         <title>Simulated World</title>
         <meta name="description" content="Test project using rotjs and pixijs to build a simulated world to settle.">
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <meta name="description" content="Your game description goes here.">
+        <!-- <link href="shoelace/themes/light.css" rel="stylesheet" /> -->
+        <link href="shoelace/themes/dark.css" rel="stylesheet" />
         <link href="/src/style.css" rel="stylesheet" id="style">
+
         <script defer src="dist/app.js"></script></head>
 
     </head>
     <body>
+        <!-- ADD CHANGES TO INDEX.HTML TO WEBPACK CONFIG !!!!!!!!  -->
+        <div id="uiContainer">
+            <time-control></time-control>
+            <menu-tabs></menu-tabs>
+        </div>
         <div id="gameContainer">
+            <test-component></test-component>
             <div id="canvasContainer"></div>
             <div id="textContainer"></div>
         </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -66,3 +66,4 @@ dist/
		/public/**
		!/public/.gitignore

		/shoelace