Skip to content

Commit 412b442

Browse files
FifthTundraGFifthTundraG
committed
Use SCSS variables, split buildings into seperate file
1 parent 3459eeb commit 412b442

4 files changed

Lines changed: 74 additions & 73 deletions

File tree

‎src/scss/buildings.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.building {
2+
width: 324px;
3+
height: 64px;
4+
border-style: solid;
5+
border-color: rgb(248, 255, 198);
6+
border-width: 3px;
7+
transition: 0.3s;
8+
background-color: rgb(217, 215, 165);
9+
cursor: pointer;
10+
margin-bottom: 4px;
11+
12+
img {
13+
width: 64px;
14+
height: 64px;
15+
float: left;
16+
}
17+
18+
.building-content {
19+
display: flex;
20+
justify-content: space-between;
21+
height: 64px;
22+
text-shadow: 0px 1px 4px black;
23+
padding-left: 4px;
24+
25+
/* in an unnamed div */
26+
.building-name {
27+
font-size: 22px;
28+
line-height: 1px;
29+
margin-bottom: 0px;
30+
}
31+
32+
.building-price {
33+
margin-top: 11px;
34+
margin-left: 0.6px;
35+
}
36+
37+
.buildings-bought-wrapper {
38+
display: flex;
39+
height: 100%;
40+
align-items: center;
41+
float: right;
42+
margin-right: 12px;
43+
44+
.buildings-bought {
45+
font-size: 35px;
46+
font-family: monospace;
47+
float: right;
48+
margin: 0px
49+
}
50+
}
51+
}
52+
}
53+
54+
.building:hover {
55+
border-style: solid;
56+
border-color: rgb(249, 255, 164);
57+
border-width: 3px;
58+
}

‎src/scss/main.scss‎

Lines changed: 14 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* variables (mainly for colors) */
2-
:root {
3-
--brown-border: rgb(121, 77, 46);
4-
--colored-container: rgb(255, 243, 209);
5-
--dialog-backdrop-opacity: 50%; /* default value for dialog opacity if something goes wrong (and for simple popups :D) */
6-
}
2+
$brown-border: rgb(121, 77, 46);
3+
$colored-container: rgb(255, 243, 209);
4+
$dialog-backdrop-opacity: 50%; /* default value for dialog opacity if something goes wrong (and for simple popups :D) */
5+
6+
@use "buildings.scss";
77

88
/* basic basis for most html elements */
99
body {
@@ -87,7 +87,7 @@ small {
8787
height: 100vh;
8888
border-style: solid;
8989
border-width: 0px 8px 0px 0px;
90-
border-color: var(--brown-border);
90+
border-color: $brown-border;
9191
display: flex;
9292
flex-direction: column;
9393
background-image: url(img/backgrounds/background-blue.png);
@@ -99,7 +99,7 @@ small {
9999
height: 100vh;
100100
border-style: solid;
101101
border-width: 0px 0px 0px 8px;
102-
border-color: var(--brown-border);
102+
border-color: $brown-border;
103103
display: flex;
104104
flex-direction: column;
105105
background-image: url(img/backgrounds/background-blue.png);
@@ -171,7 +171,7 @@ small {
171171
.middle-buttons {
172172
display: flex;
173173
height: 100px;
174-
border: 0px solid var(--brown-border);
174+
border: 0px solid $brown-border;
175175
border-bottom-width: 8px;
176176
background-image: url(img/backgrounds/background-blue.png);
177177
}
@@ -183,6 +183,7 @@ small {
183183
display: flex;
184184
flex-direction: column;
185185
align-items: center;
186+
row-gap: 4px;
186187
}
187188

188189
/* UPGRADES */
@@ -193,7 +194,7 @@ small {
193194
overflow: hidden;
194195
border: 6px solid;
195196
border-width: 6px 0px 6px 0px;
196-
border-color: var(--brown-border);
197+
border-color: $brown-border;
197198
}
198199
.upgrade {
199200
width: 59.6px;
@@ -279,64 +280,7 @@ small {
279280
border: 3px solid black;
280281
font-size: 10px;
281282
color: black;
282-
background-color: var(--colored-container);
283-
}
284-
285-
/* universal building css */
286-
.building {
287-
width: 324px;
288-
height: 64px;
289-
border-style: solid;
290-
border-color: rgb(248, 255, 198);
291-
border-width: 3px;
292-
transition: 0.3s;
293-
background-color: rgb(217, 215, 165);
294-
cursor: pointer;
295-
margin-bottom: 4px;
296-
}
297-
.building:hover {
298-
border-style: solid;
299-
border-color: rgb(249, 255, 164);
300-
border-width: 3px;
301-
}
302-
303-
.building-content {
304-
display: flex;
305-
justify-content: space-between;
306-
height: 64px;
307-
text-shadow: 0px 1px 4px black;
308-
padding-left: 4px;
309-
}
310-
311-
.buildings-bought-wrapper {
312-
display: flex;
313-
height: 100%;
314-
align-items: center;
315-
float: right;
316-
margin-right: 12px;
317-
}
318-
.buildings-bought {
319-
font-size: 35px;
320-
font-family: monospace;
321-
float: right;
322-
margin: 0px
323-
}
324-
325-
.building-name {
326-
font-size: 22px;
327-
line-height: 1px;
328-
margin-bottom: 0px;
329-
}
330-
331-
.building-price {
332-
margin-top: 11px;
333-
margin-left: 0.6px;
334-
}
335-
336-
.building-icon {
337-
width: 64px;
338-
height: 64px;
339-
float: left;
283+
background-color: $colored-container;
340284
}
341285

342286
/* Infobox when hovering over a building */
@@ -345,7 +289,7 @@ small {
345289
height: 125px;
346290
border: solid 3px black;
347291
border-right-width: 0px;
348-
background-color: var(--colored-container);
292+
background-color: $colored-container;
349293
pointer-events: none; /* if it's hovered over it won't do the flickering thing */
350294
right: 346px;
351295
z-index: 1; /* legit nothing has a higher-than-normal z-index, so this will show above EVERYTHING */
@@ -423,7 +367,7 @@ small {
423367
dialog::backdrop {
424368
background-color: black;
425369
opacity: 50%;
426-
opacity: var(--dialog-backdrop-opacity); /* for programmatic modification */
370+
opacity: $dialog-backdrop-opacity; /* for programmatic modification todo: fix */
427371
}
428372
.simple-popup-button-div {
429373
display: flex;
@@ -559,7 +503,7 @@ dialog::backdrop {
559503
height: 50px;
560504
border: 2px solid black;
561505
margin-left: auto;
562-
background-color: var(--colored-container);
506+
background-color: $colored-container;
563507
color: black; /* this wasn't nessesary until 6/3/23? idk why */
564508
}
565509
.info-button {

‎src/ts/buildings.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ export class Building implements SaveProvider<BuildingSave> {
7474
this.html.addEventListener("mouseover", () => {this.hovered()});
7575
this.html.addEventListener("mouseout",() => {hideTooltip()});
7676
const icon = document.createElement("img");
77-
icon.className = "building-icon";
7877
const BUILDING_ICON_IMG = (data.img) ? data.img : "img/unknown.png";
7978
//* Use unknown as a fallback if we can't get the defined image file (404 usually)
8079
icon.onerror = () => {

‎src/ts/popup.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ export class AdvancedPopup {
110110
};
111111

112112
this.html.style.padding = filledOptions.innerPadding+"px";
113-
this.html.style.setProperty("--dialog-backdrop-opacity", filledOptions.filterLevel+"%");
114-
113+
this.html.style.setProperty("--dialog-backdrop-opacity", filledOptions.filterLevel+"%"); // todo ASAP: fix
114+
115115
document.body.appendChild(this.html);
116116

117117
this.html.showModal(); // html must exist to show modal

0 commit comments

Comments
 (0)