Skip to content

Commit e70173c

Browse files
FifthTundraGFifthTundraG
committed
style: Refactor middle styles
1 parent 463d82c commit e70173c

3 files changed

Lines changed: 93 additions & 109 deletions

File tree

‎public/index.html‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,16 @@ <h5 class="version-number-holder pointer" id="versionNumberHolder">Version: <spa
3434
<div class="middle" id="middle">
3535
<div class="middle-buttons" id="middleButtons">
3636
<div class="left-middle-buttons pointer">
37-
<div class="middle-button-base stats-button" id="statsButton">
38-
<p class="middle-button-name">Stats</p>
37+
<div class="middle-button stats-button" id="statsButton">
38+
<p>Stats</p>
3939
</div>
40-
<div class="middle-button-base options-button" id="optionsButton">
41-
<p class="middle-button-name">Options</p>
40+
<div class="middle-button options-button" id="optionsButton">
41+
<p>Options</p>
4242
</div>
4343
</div>
44-
<div class="right-middle-buttons pointer">
45-
<div class="middle-button-base info-button" id="infoButton">
46-
<p class="middle-button-name">Info</p>
44+
<div class="pointer">
45+
<div class="middle-button info-button" id="infoButton">
46+
<p>Info</p>
4747
</div>
4848
</div>
4949
</div>
@@ -52,7 +52,7 @@ <h5 class="version-number-holder pointer" id="versionNumberHolder">Version: <spa
5252
<div class="middle-x pointer">
5353
<img src="img/white-x.png" alt="x button" width="38" height="38" class="no-margin">
5454
</div>
55-
<h3 class="middle-title">Statistics</h3>
55+
<h1>Statistics</h1>
5656
<p class="middle-text-gray" id="cookiesStat">Cookies: 0</p> <!-- can statistics be cool and instead be registered programmatically? -->
5757
<p class="middle-text-gray" id="allTimeCookies">All Time Cookies: 0</p>
5858
<p class="middle-text-gray" id="buildingsOwnedStat">Buildings Owned: 0</p>
@@ -61,22 +61,22 @@ <h3 class="middle-title">Statistics</h3>
6161
<p class="middle-text-gray" id="cookiesPerClickStat">Cookies Per Click: 1</p>
6262
<p class="middle-text-gray no-display" id="ifCheatedStat" style="color:white;">You have cheated on this playthrough!</p>
6363
<p class="middle-text-gray no-display" id="ifModdedStat" style="color:white;">You have activated mods on this playthrough!</p>
64-
<h3 class="middle-subtitle">Upgrades:</h3>
64+
<h2>Upgrades:</h2>
6565
<p class="middle-text-gray">Bought: <span id="upgradesBoughtCounter">null</span>/<span id="totalUpgradesCounter">null</span></p> <!-- if we ever get more upgrades this needs to be changed -->
6666
<div class="upgrades-bought-stats-holder" id="upgradesBoughtStatsHolder">
6767

6868
</div>
6969
</div>
70-
<div id="infoMiddleText" class="middle-main">
70+
<div class="middle-main" id="infoMiddleText">
7171
<div class="middle-x pointer">
7272
<img src="img/white-x.png" alt="x button" width="38" height="38" class="no-margin">
7373
</div>
74-
<h3 class="middle-title">Infomation</h3>
75-
<h3 class="middle-subtitle">About:</h3>
76-
<p class="middle-text">Clicker Cookie is a totally original game about clicking a cookie. Made by <a href="https://github.com/FifthTundraG" target="_blank">FifthTundraG</a> in a few hours, this game went from a random clone of a decade old, actively developed clicker game to something that spiraled into a land of insanity.</p>
77-
<p class="middle-text">Original game made by Orteil and Opti. <small>we :heart: you!</small></p>
74+
<h1>Infomation</h1>
75+
<h2>About:</h2>
76+
<p>Clicker Cookie is a totally original game about clicking a cookie. Made by <a href="https://github.com/FifthTundraG" target="_blank">FifthTundraG</a> in a few hours, this game went from a random clone of a decade old, actively developed clicker game to something that spiraled into a land of insanity.</p>
77+
<p>Original game made by Orteil and Opti. <small>we :heart: you!</small></p>
7878
<button class="data-button pointer" id="creditsButton">Credits</button>
79-
<h3 class="middle-subtitle" style="margin-top:0px;">Changelog:</h3>
79+
<h2>Changelog:</h2>
8080
<div id="changelogWrapper">
8181

8282
</div>
@@ -85,43 +85,45 @@ <h3 class="middle-subtitle" style="margin-top:0px;">Changelog:</h3>
8585
<div class="middle-x pointer">
8686
<img src="img/white-x.png" alt="x button" width="38" height="38" class="no-margin">
8787
</div>
88-
<h3 class="middle-title">Options</h3>
89-
<h5 class="middle-subtitle">Customization:</h5>
88+
<h1>Options</h1>
89+
<h2>Customization:</h2>
9090
<form action="changed">
91-
<label for="backgroundSelect" class="middle-label">Background: </label>
91+
<label for="backgroundSelect">Background: </label>
9292
<select class="pointer" id="backgroundSelect">
9393
<!-- See personalization.ts -->
9494
</select>
9595
</form>
9696
<form>
97-
<label for="currentlyClickedSelect" class="middle-label">Currently Clicked: </label>
97+
<label for="currentlyClickedSelect">Currently Clicked: </label>
9898
<select class="pointer" id="currentlyClickedSelect">
9999
<!-- See personalization.ts -->
100100
</select>
101101
</form>
102-
<h5 class="middle-subtitle">Miscellaneous:</h5>
103-
<p class="middle-text">Save Management:</p>
104-
<div>
105-
<button class="data-button pointer" id="saveButton">Save</button>
106-
<button class="data-button pointer" id="loadButton">Load</button>
107-
</div>
108-
<div>
109-
<button class="data-button pointer red" id="resetSaveButton">Reset</button>
110-
</div>
111-
<div>
112-
<button id="exportDataButton" class="data-button pointer">Export Data</button>
113-
<button id="importDataButton" class="data-button pointer">Import Data</button>
114-
<input type="file" id="importDataInput" class="no-display" accept=".ccsave,.json"> <!-- this doesn't actually show up, the importDataButton just runs the click() method on this guy-->
102+
<h2>Miscellaneous:</h2>
103+
<p style="margin-bottom:0.5rem;">Save Management:</p> <!-- should this be h3? -->
104+
<div class="data-buttons">
105+
<div>
106+
<button class="pointer" id="saveButton">Save</button>
107+
<button class="pointer" id="loadButton">Load</button>
108+
</div>
109+
<div>
110+
<button class="reset" id="resetSaveButton">Reset</button>
111+
</div>
112+
<div>
113+
<button id="exportDataButton" class="data-button pointer">Export Data</button>
114+
<button id="importDataButton" class="data-button pointer">Import Data</button>
115+
<input type="file" id="importDataInput" class="no-display" accept=".ccsave,.json"> <!-- this doesn't actually show up, the importDataButton just runs the click() method on this guy-->
116+
</div>
115117
</div>
116118
<form id="autoSavingToggleForm">
117-
<label for="autoSavingToggleSelect" class="middle-label">Auto Saving: </label>
119+
<label for="autoSavingToggleSelect">Auto Saving: </label>
118120
<select class="pointer" id="autoSavingToggleSelect"> <!-- should this be a checkbox? -->
119121
<option value="on">On</option>
120122
<option value="off">Off</option>
121123
</select>
122124
</form>
123-
<p class="middle-text" style="margin-bottom:0px;">Modding:</p>
124-
<small class="middle-text">You have <span id="modsNumberLoaded">null</span> mods loaded!</small> <br>
125+
<p style="margin-bottom:0px;">Modding:</p> <!-- should this be h3? -->
126+
<small>You have <span id="modsNumberLoaded">null</span> mods loaded!</small> <br>
125127
<div>
126128
<button class="data-button pointer" id="addModButton" style="margin-top:3px;">Add Mod</button>
127129
<button class="data-button pointer" id="listModsButton" style="margin-top:3px; margin-left:0px;">List Mods</button>

‎src/scss/main.scss‎

Lines changed: 51 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -209,77 +209,69 @@ small {
209209
}
210210

211211
.middle {
212-
flex: auto;
212+
width: 100%; // takes up all remaining space between left and right sides
213213
height: 100vh;
214214
background: url(img/backgrounds/background-blue.png);
215215

216-
.middle-buttons { // todo 0.7.1: these are a disaster and should probably be completely reworked
216+
.middle-buttons {
217217
display: flex;
218+
justify-content: space-between; // puts left on left and right on right with gap in between
218219
height: 100px;
219220
border: 0px solid variables.$brown-border;
220221
border-bottom-width: 8px;
221222

222223
.left-middle-buttons {
223224
display: flex;
224-
flex-direction: column;
225-
}
226-
.right-middle-buttons {
227-
float: right;
228-
margin-left: auto;
229-
height: 50px;
230-
}
231-
.middle-button-name {
232-
margin: 0px;
233-
text-align: center;
234-
margin-top: 12px;
235-
font-size: 24px;
236-
font-family: "Lucida Console", "Courier New", monospace;
237-
color: white;
238-
text-shadow: variables.$shadow;
225+
flex-direction: column; // for whatever reason without this they stack in a row not on top of each other
239226
}
240227

241-
.middle-button-base {
228+
.middle-button {
229+
display: flex;
230+
align-items: center;
231+
justify-content: center;
242232
width: 110px;
243-
height: 50px;
233+
height: 50%;
244234
border: 2px solid black;
245235
margin-left: auto;
246236
background-color: variables.$colored-container;
247-
color: black; /* this wasn't nessesary until 6/3/23? idk why */
237+
238+
p {
239+
font-size: 24px;
240+
font-family: "Lucida Console", "Courier New", monospace;
241+
margin: 0;
242+
text-shadow: variables.$shadow;
243+
}
248244
}
249-
.info-button {
250-
border-right-width: 0px;
251-
height: 48px;
252-
float: right;
245+
.stats-button { //? just put these three directly in HTML?
246+
border-left-width: 0px;
253247
}
254248
.options-button {
255249
border-top-width: 0px;
256250
border-bottom-width: 0px;
257251
border-left-width: 0px;
258-
float: left;
259252
}
260-
.stats-button {
261-
border-left-width: 0px;
262-
float: left;
253+
.info-button {
254+
border-right-width: 0px;
263255
}
264256
}
265257

266258
/* Middle Text */
267259
.middle-main {
268260
display: none;
269-
position: relative; /* right now this is only used to make the X button not push the middle text to the left, i don't think it does anything else */
270-
color: white;
271-
overflow-y: auto;
272-
height: 86%;
261+
position: relative; // right now this is only used to make the X button not push the middle text to the left, i don't think it does anything else
262+
overflow-y: auto; // scrollbar
263+
height: 86%; // this should be set programmatically but we keep it here in case of catastrophic failure
264+
padding: 0 8px;
273265
background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 25%),
274266
linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent 25%),
275267
linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 25%),
276268
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 25%),
277269
radial-gradient(transparent 80%, rgba(4, 4, 4, 0.3)),
278270
url("img/dark-noise.png");
279271

280-
// todo: these classes can likely be removed and just replaced with their actual elements
281-
.middle-title {
282-
font-size: 35px;
272+
// todo: random margins?
273+
h1 {
274+
font-size: 2rem;
283275
font-family: monospace;
284276
margin-top: 12px;
285277
margin-bottom: 15px;
@@ -288,27 +280,30 @@ small {
288280
font-weight: bold;
289281
text-align: center;
290282
}
291-
.middle-subtitle {
292-
font-size: 26px;
283+
h2 {
284+
font-size: 1.5rem;
293285
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
294286
margin-top: 12px;
295287
margin-bottom: 15px;
296-
margin-left: 9px;
297288
font-weight: bold;
298289
text-align: left;
299290
}
300-
.middle-text {
301-
margin-left: 9px;
291+
h3 {
292+
font-size: 1.2rem;
293+
margin: 6px 0px 8px 0px;
294+
text-align: left;
295+
-webkit-user-select: none;
296+
user-select: none;
297+
}
298+
h4 {
299+
font-size: 1rem;
302300
margin-bottom: 6px;
303301
margin-top: 6px;
304-
font-family: Arial, Helvetica, sans-serif;
305302
}
306303
.middle-text-gray {
307-
margin-left: 7px;
308304
margin-bottom: 6px;
309305
margin-top: 6px;
310306
color: gray;
311-
font-family: Arial, Helvetica, sans-serif;
312307
letter-spacing: 1px;
313308
font-weight: bold;
314309
}
@@ -324,34 +319,28 @@ small {
324319
background-color: black;
325320
border: 2px solid white;
326321
}
327-
.middle-ul {
328-
font-size: 0.875em;
329-
}
330-
.middle-label {
331-
margin-left: 9px;
322+
.data-buttons {
323+
display: flex;
324+
flex-direction: column;
325+
gap: 4px;
326+
327+
.reset {
328+
color: red;
329+
}
332330
}
333-
.data-button {
334-
margin-left: 9px;
335-
margin-bottom: 4px;
331+
332+
form {
333+
margin: 0.25rem 0
336334
}
337335

338336
// only in Info
339337
.changelog {
340-
.version-heading {
341-
font-size: 1.25em;
342-
margin: 6px 0px 8px 9px;
343-
text-align: left;
344-
-webkit-user-select: none;
345-
user-select: none;
346-
}
347-
348-
/* notes also have middle-text class */
349338
.note {
350339
font-size: 0.875em;
351340
}
352341

353-
.subheading {
354-
font-size: 1em;
342+
ul { // for changelog entries so they're smaller than their headers
343+
font-size: 0.875rem;
355344
}
356345
}
357346
}

‎src/ts/changelogs.ts‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -276,8 +276,7 @@ export function createChangelogEntry(logs: Changelog) { // todo 0.7: try to make
276276
if (logs.type === "hotfix")
277277
newChangelogEntry.setAttribute("style", "font-size: 0.85em; color: #9f9f9f");
278278

279-
const versionHeader = document.createElement("h2");
280-
versionHeader.setAttribute("class", "version-heading");
279+
const versionHeader = document.createElement("h3");
281280

282281
const releaseDate = (logs.release === undefined) ? "???" : logs.release;
283282
if (logs.name === undefined)
@@ -294,13 +293,11 @@ export function createChangelogEntry(logs: Changelog) { // todo 0.7: try to make
294293
}
295294

296295
if (logs.added !== undefined) {
297-
const addedHeader = document.createElement("h3");
298-
addedHeader.setAttribute("class","middle-text subheading");
296+
const addedHeader = document.createElement("h4");
299297
addedHeader.innerText = "Added:";
300298
newChangelogEntry.appendChild(addedHeader);
301299

302300
const addedList = document.createElement("ul");
303-
addedList.setAttribute("class","middle-ul");
304301
newChangelogEntry.appendChild(addedList);
305302

306303
for (const item of logs.added) {
@@ -310,13 +307,11 @@ export function createChangelogEntry(logs: Changelog) { // todo 0.7: try to make
310307
}
311308
}
312309
if (logs.changed !== undefined) {
313-
const changedHeader = document.createElement("h3");
314-
changedHeader.setAttribute("class","middle-text subheading");
310+
const changedHeader = document.createElement("h4");
315311
changedHeader.innerText = "Changed:";
316312
newChangelogEntry.appendChild(changedHeader);
317313

318314
const changedList = document.createElement("ul");
319-
changedList.setAttribute("class","middle-ul");
320315
newChangelogEntry.appendChild(changedList);
321316

322317
for (const item of logs.changed) {
@@ -326,13 +321,12 @@ export function createChangelogEntry(logs: Changelog) { // todo 0.7: try to make
326321
}
327322
}
328323
if (logs.fixed !== undefined) {
329-
const fixedHeader = document.createElement("h3");
330-
fixedHeader.setAttribute("class","middle-text subheading");
324+
const fixedHeader = document.createElement("h4");
331325
fixedHeader.innerText = "Fixed:";
332326
newChangelogEntry.appendChild(fixedHeader);
333327

334328
const fixedList = document.createElement("ul");
335-
fixedList.setAttribute("class","middle-ul");
329+
fixedList.setAttribute("class","");
336330
newChangelogEntry.appendChild(fixedList);
337331

338332
for (const item of logs.fixed) {
@@ -349,7 +343,6 @@ export function createChangelogEntry(logs: Changelog) { // todo 0.7: try to make
349343
newChangelogEntry.appendChild(removedHeader);
350344

351345
const removedList = document.createElement("ul");
352-
removedList.setAttribute("class","middle-ul");
353346
newChangelogEntry.appendChild(removedList);
354347

355348
for (const item of logs.removed) {

0 commit comments

Comments
 (0)