brick-engine-js 1.0.37 → 1.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/css/game.bundle.css +41 -34
  2. package/package.json +1 -1
package/dist/css/game.bundle.css CHANGED
@@ -25,9 +25,11 @@
25
25
  flex-direction: column;
26
26
 
27
27
  box-shadow:
28
- calc(var(--width) * -0.03) calc(var(--width) * 0.03) var(--dispersion) black,
29
- calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,
30
- calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow) inset;
28
+ /* Sharp outer edge */
29
+ calc(var(--width) * -0.005) calc(var(--width) * 0.005) 0px rgba(0, 0, 0, 0.9),
30
+ /* Soft ambient shadow */ calc(var(--width) * -0.04) calc(var(--width) * 0.04) calc(var(--dispersion) * 2.5) rgba(0, 0, 0, 0.6),
31
+ /* Inner reflection (top-left) */ calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,
32
+ /* Inner depth (bottom-right) */ calc(var(--width) * 0.015) calc(var(--width) * -0.015) var(--dispersion) var(--color-shadow) inset;
31
33
  }
32
34
 
33
35
  #brick-game-canvas {
@@ -45,7 +47,7 @@
45
47
 
46
48
  position: relative;
47
49
 
48
- width: calc(var(--width) * 0.85);
50
+ width: calc(var(--width) * 0.83);
49
51
  height: auto;
50
52
  aspect-ratio: 9/10;
51
53
  margin: 7.5%;
@@ -95,41 +97,44 @@
95
97
 
96
98
  .sm-btn {
97
99
  box-shadow:
98
- calc(var(--width) * -0.0075) calc(var(--width) * 0.0075) var(--dispersion) var(--color-shadow),
99
- calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--button-color-reflexion) inset;
100
+ calc(var(--width) * -0.0075) calc(var(--width) * 0.0075) var(--dispersion) rgba(0, 0, 0, 0.6),
101
+ calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--button-color-reflexion) inset,
102
+ calc(var(--width) * 0.005) calc(var(--width) * -0.005) var(--dispersion) var(--button-color-shadow) inset;
100
103
  }
101
104
 
102
105
  .sm-btn:active {
103
106
  box-shadow:
104
- calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--color-shadow),
105
- calc(var(--width) * -0.003) calc(var(--width) * 0.003) var(--dispersion) var(--button-color-reflexion) inset;
106
- transform: translateX(calc(var(--width) * -0.0025)) translateY(calc(var(--width) * 0.0025));
107
+ calc(var(--width) * -0.002) calc(var(--width) * 0.002) var(--dispersion) rgba(0, 0, 0, 0.4),
108
+ calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) var(--button-color-reflexion) inset;
109
+ transform: translate(calc(var(--width) * -0.0025), calc(var(--width) * 0.0025));
107
110
  }
108
111
 
109
112
  .btn {
110
113
  box-shadow:
111
- calc(var(--width) * -0.015) calc(var(--width) * 0.015) var(--dispersion) var(--color-shadow),
112
- calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset;
114
+ calc(var(--width) * -0.015) calc(var(--width) * 0.015) calc(var(--dispersion) * 1.5) rgba(0, 0, 0, 0.7),
115
+ calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset,
116
+ calc(var(--width) * 0.008) calc(var(--width) * -0.008) var(--dispersion) var(--button-color-shadow) inset;
113
117
  }
114
118
 
115
119
  .btn:active {
116
120
  box-shadow:
117
- calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--color-shadow),
118
- calc(var(--width) * -0.003) calc(var(--width) * 0.003) var(--dispersion) var(--button-color-reflexion) inset;
119
- transform: translateX(calc(var(--width) * -0.005)) translateY(calc(var(--width) * 0.005));
121
+ calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) rgba(0, 0, 0, 0.5),
122
+ calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--button-color-reflexion) inset;
123
+ transform: translate(calc(var(--width) * -0.005), calc(var(--width) * 0.005));
120
124
  }
121
125
 
122
126
  .lg-btn {
123
127
  box-shadow:
124
- calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow),
125
- calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset;
128
+ calc(var(--width) * -0.02) calc(var(--width) * 0.02) calc(var(--dispersion) * 2) rgba(0, 0, 0, 0.8),
129
+ calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset,
130
+ calc(var(--width) * 0.012) calc(var(--width) * -0.012) var(--dispersion) var(--button-color-shadow) inset;
126
131
  }
127
132
 
128
133
  .lg-btn:active {
129
134
  box-shadow:
130
- calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) var(--color-shadow),
131
- calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--button-color-reflexion) inset;
132
- transform: translateX(calc(var(--width) * -0.0075)) translateY(calc(var(--width) * 0.0075));
135
+ calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) rgba(0, 0, 0, 0.5),
136
+ calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--button-color-reflexion) inset;
137
+ transform: translate(calc(var(--width) * -0.0075), calc(var(--width) * 0.0075));
133
138
  }
134
139
 
135
140
  .sm-btn-p,
@@ -414,7 +419,7 @@
414
419
  border: var(--border);
415
420
  border-radius: var(--border-radius);
416
421
  box-shadow:
417
- calc(var(--width) * -0.015) calc(var(--width) * 0.015) var(--dispersion) black,
422
+ calc(var(--width) * -0.015) calc(var(--width) * 0.015) calc(var(--dispersion) * 1.5) rgba(0, 0, 0, 0.7),
418
423
  calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--color-shadow-reflexion) inset,
419
424
  calc(var(--width) * 0.005) calc(var(--width) * -0.005) var(--dispersion) var(--color-shadow) inset;
420
425
  transition: all 0.2s;
@@ -425,6 +430,11 @@
425
430
  box-shadow: none;
426
431
  }
427
432
 
433
+ #debugger:not([open]):active {
434
+ transform: translate(-2px, 2px);
435
+ box-shadow: none;
436
+ }
437
+
428
438
  #debugger:not([open]) #debugger-summary {
429
439
  margin-bottom: 0;
430
440
  border-bottom: none;
@@ -721,9 +731,10 @@
721
731
  border: var(--border);
722
732
 
723
733
  box-shadow:
724
- calc(var(--width) * -0.03) calc(var(--width) * 0.03) var(--dispersion) black,
725
- calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,
726
- calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow) inset;
734
+ /* Soft ambient shadow */
735
+ calc(var(--width) * -0.05) calc(var(--width) * 0.05) calc(var(--dispersion) * 4) rgba(0, 0, 0, 0.6),
736
+ /* Inner reflection */ calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,
737
+ /* Inner shadow */ calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow) inset;
727
738
  }
728
739
 
729
740
  #shortcuts-modal-frame {
@@ -872,9 +883,10 @@
872
883
  z-index: 9998;
873
884
  border-radius: var(--border-radius);
874
885
  box-shadow:
875
- calc(var(--width) * -0.015) calc(var(--width) * 0.015) var(--dispersion) black,
876
- calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--color-shadow-reflexion) inset,
877
- calc(var(--width) * 0.005) calc(var(--width) * -0.005) var(--dispersion) var(--color-shadow) inset;
886
+ /* Outer edge shadow */
887
+ calc(var(--width) * -0.015) calc(var(--width) * 0.015) calc(var(--dispersion) * 1.5) rgba(0, 0, 0, 0.7),
888
+ /* Inner reflection */ calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--color-shadow-reflexion) inset,
889
+ /* Inner shadow */ calc(var(--width) * 0.005) calc(var(--width) * -0.005) var(--dispersion) var(--color-shadow) inset;
878
890
  transition: all 0.2s;
879
891
  text-shadow: 1px 1px var(--color-shadow);
880
892
  box-sizing: border-box;
@@ -942,19 +954,14 @@ body {
942
954
 
943
955
  @media only screen and (max-width: 600px) {
944
956
  #container {
945
- width: 99.5% !important;
946
- height: 99.5% !important;
947
-
948
- margin: 0.25% !important;
957
+ width: 99% !important;
958
+ height: calc(100% - 30px) !important;
959
+ margin: 0.5% !important;
949
960
 
950
961
  overflow-y: hidden !important;
951
962
  touch-action: none !important;
952
963
  }
953
964
 
954
- #frame {
955
- width: calc(var(--width) * 0.84) !important;
956
- }
957
-
958
965
  #session-modal-screen p {
959
966
  font-size: 1rem !important;
960
967
  line-height: 1.2rem !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "brick-engine-js",
3
- "version": "1.0.37",
3
+ "version": "1.0.38",
4
4
  "description": "A lightweight brick engine built with p5.js and TypeScript",
5
5
  "type": "commonjs",
6
6
  "main": "dist/brick-engine.js",