📦 beta build v0.3.1

grousewood-games · Jul 3, 2023 · 380a61c · 380a61c
1 parent 2afbae0
commit 380a61c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 25 deletions.
diff --git a/play/dist/solforge.js b/play/dist/solforge.js
diff --git a/play/index.html b/play/index.html
@@ -36,35 +36,69 @@
             }
 
             #solforge {
+                flex-basis: auto;              
+            }
+
+            .gameSize100 {
                 width: 1024px;
                 height: 768px;
-                flex-basis: auto;
                 min-width: 1024px;
             }
 
-            canvas, img { position: absolute; }
-            #card { z-index: 8; }
-            #decklist { z-index: 7; }
-            #effects { z-index: 6; }
-            #hand { z-index: 5; }
-            #player { z-index: 4; }
-            #field { z-index: 3; }
-            #game-ui { z-index: 2; }
-            #playmat { z-index: 1; }
+            .gameSize90 {
+                width: 928px;
+                height: 696px;
+                min-width: 928px;
+            }
 
             #log {
                 border: 1px blue;
                 flex-grow: 1;
                 color: azure;
-                height: 768px;
                 overflow-y: scroll;
                 font-family: 'cinzel';
                 font-size: larger;
             }
+
+            .logSize100 {
+                height: 768px;
+            }
+
+            .logSize90 {
+                height: 696px;
+            }
+
+            .uiSize100 {
+                width: 1024px;
+                height: 768px;
+            }
+
+            .uiSize90 {
+                width: 928px;
+                height: 696px;
+            }
+
+            ul {
+                padding-left: 8px;
+                padding-right: 8px;
+            }
+
             li {
                 list-style: none;
             }
 
+            canvas, img { position: absolute}
+            #card { z-index: 8; }
+            #decklist { z-index: 7; }
+            #effects { z-index: 6; }
+            #hand { z-index: 5; }
+            #player { z-index: 4; }
+            #field { z-index: 3; }
+            #game-ui { z-index: 2; }
+            #playmat { z-index: 1; }
+
+
+
             .green {
                 color:lime
             }
@@ -88,20 +122,21 @@
     </head>
     <body>
         <div id="flex">
-            <div id="solforge">
-                <!-- See z-index css above for ordering  -->
-                <canvas id="card" width="1024" height="768"></canvas>
-                <canvas id="decklist" width="1024" height="768"></canvas>
-                <canvas id="effects" width="1024" height="768"></canvas>
-                <canvas id="hand" width="1024" height="768"></canvas>
-                <canvas id="player" width="1024" height="768"></canvas>
-                <canvas id="field" width="1024" height="768"></canvas>
-                <canvas id="game-ui" width="1024" height="768"></canvas>
-                <img id="playmat" src="img/background/playfield-uterra.jpg" class="hide"></img>
-                <img id="mainmenu" src="img/background/leash.jpg"></img>
-                <img id="blueface" src="img/background/blueface.jpg"  class="hide"></img>
+            <div id="solforge" class="gameSize100">
+                <!-- See z-index css above for ordering -->
+                <!-- For canvases, width and height represent the rendering surface size. CSS size changes will scale that surface -->
+                <canvas id="card" width="1024" height="768" class="uiSize100"></canvas>
+                <canvas id="decklist" width="1024" height="768" class="uiSize100"></canvas>
+                <canvas id="effects" width="1024" height="768" class="uiSize100"></canvas>
+                <canvas id="hand" width="1024" height="768" class="uiSize100"></canvas>
+                <canvas id="player" width="1024" height="768" class="uiSize100"></canvas>
+                <canvas id="field" width="1024" height="768" class="uiSize100"></canvas>
+                <canvas id="game-ui" width="1024" height="768" class="uiSize100"></canvas>
+                <img id="playmat" src="img/background/playfield-uterra.jpg" class="hide uiSize100"></img>
+                <img id="mainmenu" src="img/background/leash.jpg" class="uiSize100"></img>
+                <img id="blueface" src="img/background/blueface.jpg"  class="hide uiSize100"></img>
             </div>
-            <div id="log">
+            <div id="log" class="logSize100">
                 <ul id="loglist">
                 </ul>
             </div>