Skip to content

Implement more features #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhouser wants to merge 5 commits into
base: fake-master
Choose a base branch
from
Open

Implement more features #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
30c4301
added 2. button to buy 10 x Dim
mturich Jun 20, 2022
c38af15
tickspeed buy and cost increase implemented, factor bump prep
mturich Jun 20, 2022
ad46de5
localdata save prep
mturich Jun 21, 2022
2ceaec5
dimension shift and galaxy added, data is save to local but not loade…
mturich Jun 23, 2022
d4490e1
buy max button works
mturich Jun 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 59 additions & 28 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,73 @@
* {
/* border: 1px solid black; */
}

.App {
text-align: center;
margin: 1rem;
Copy link
Owner Author

@bhouser bhouser Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not really typical to use rem's or em's for spacing. Recommend to just use pixels.

}
.heading {
display: flex;
padding: 2rem;
margin: auto;
width: 100%;
}
Comment on lines +8 to +13
Copy link
Owner Author

@bhouser bhouser Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice usage of flex to center the antimatter counter!

You don't need margin or width here. Maybe some of the why's behind that are better to discuss on a call.

width: 100% is actually causing the element to be wider than the page, because width doesn't yet include the margin, so the width ends up being 100% of page with plus the margin = too wide. This is also why you have a horizontal scrollbar at the bottom of the page.

Copy link

@mturich mturich Jul 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't it be that I forgot box-sizing: border-box; ?


.highlight {
padding: 0.5rem 2rem;
font-size: 1.3rem;
border: 1px black solid;
background-color: beige;
Comment on lines +16 to +19
Copy link
Owner Author

@bhouser bhouser Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be the realm of opinion: some people might complain that a CSS class named highlight should not apply padding to the element. They would probably say it should only do things that affect the appearance but not the size, so of the four rules you applied here the only one that's ok under .highlight is background-color.

Of course this is semantics. If you were to rename it "score-style-rules" there'd be nothing to complain about. But why does something named "highlight" do non-highlight stuff?

}

.App-logo {
height: 40vmin;
pointer-events: none;
.gridContainer4Cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-auto-rows: minmax(40px, auto);
Comment on lines +23 to +26
Copy link
Owner Author

@bhouser bhouser Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've never learned how to use grid. Good luck 😛! (it's probably super reasonable though). Your resulting layout looks good, so it can't be that bad!

As far as I've heard grid is a really good thing. But when I was doing frontend development, it was not supported on enough browsers to actually use it in real code.

}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
.gridContainer3Rows {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 4px;
grid-auto-rows: minmax(40px, auto);
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.centered {
display: flex;
justify-content: center;
margin: auto;
align-items: center;
text-align: center;
Comment on lines +36 to +41
Copy link
Owner Author

@bhouser bhouser Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

display: flex does nothing here. This is the child element of .heading, which is the "flex parent". The parent causes the flex-child to orient and resize based on the flexbox rules.

This is the visualization I always refer to when I want to check which flex properties are applied on the parent and which one's on the child:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

justify-content and align-items do nothing because they would have to be applied on the flex-parent.

The reason this element is actually floating center is because you specified margin: auto. This is the old way to do it, before flexbox. Try removing margin: auto, and then in .heading (which is the flex-parent), add justify-content: center`

}

.App-link {
color: #61dafb;
.cols-2{
grid-template-columns: repeat(3, 1fr);
margin: auto 5rem;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.btn {
font-size: calc(10px + 1vmin);
padding: 0.2em 1em 0.2em 1em;
margin: 0 0.5rem;
border: 1px black solid;
border-radius: 6px;
background-color: rgb(240, 238, 238);
}
.btn:hover {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
Comment on lines +58 to +59
Copy link
Owner Author

@bhouser bhouser Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love your hover effects!!

}
.btn:disabled{
background: initial;
box-shadow: initial;
}
.sm{
font-size: calc(10px + 0.5vmin);
}

button {
font-size: calc(10px + 2vmin);
.btn:disabled{
background-color: rgb(255, 254, 254);
border: 1px rgb(240, 238, 238) solid;
color: rgb(180, 177, 177);
}
Loading