Skip to content

Commit

Permalink
Add falling block animation with <FallingBlock/> (#52)
Browse files Browse the repository at this point in the history
- This issue adds a falling animation to board blocks that float above
the ground, and to the player block when it the 'instant drop` action is
performed.
Note: Although slight non-deterministic behavior existed before this PR,
it is more apparent now during the fall animations. This should be
addressed in #51
  • Loading branch information
bytewife authored Sep 9, 2022
2 parents 0a32dac + 64fcc98 commit 1229504
Show file tree
Hide file tree
Showing 21 changed files with 701 additions and 231 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ jobs:
- name: Setup Node.js environment
uses: actions/[email protected]

- name: Install react-scripts
run: npm add react-scripts

- name: Install packages with NPM
run: npm install

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-spring": "^9.5.2",
"web-vitals": "^2.1.4",
"xstate": "^4.32.1"
},
Expand Down
Binary file modified public/favicon.ico
Binary file not shown.
12 changes: 6 additions & 6 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
name="Wordtris"
content="A game of Tetris + words!"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand All @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Wordtris</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file modified public/logo192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/logo512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Wordtris",
"name": "Wordtris",
"icons": [
{
"src": "favicon.ico",
Expand Down
47 changes: 17 additions & 30 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
.App {
.cell {
display: flex;
border-radius: 0.4vmin;
justify-content: center;
justify-items: center;
align-content: center;
align-items: center;
text-align: center;
line-height: normal;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.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;
.cell.with-margin {
margin: 0.4vmin;
}

.App-link {
color: #61dafb;
.with-text-style {
font-family: "Arial", "Courier New", "Lucida Console", monospace;
font-weight: bold;
text-transform: uppercase;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@font-face {
font-family: 'Press Start 2P';
src: local('Press Start 2P'), url(./fonts/PressStart2P-Regular.ttf) format('truetype');
}
Loading

0 comments on commit 1229504

Please sign in to comment.