-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from marmelab/features/show-board-state
fix: change populate with db push in github deploy action file.
- Loading branch information
Showing
15 changed files
with
466 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,120 @@ | ||
| <!DOCTYPE html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" | ||
| /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <link rel="manifest" href="./manifest.json" /> | ||
| <link rel="shortcut icon" href="./favicon.ico" /> | ||
| <title>connect-four-reboot-admin</title> | ||
| <style> | ||
| .loader-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| background-color: #fafafa; | ||
| } | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" | ||
| /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <link rel="manifest" href="./manifest.json" /> | ||
| <link rel="shortcut icon" href="./favicon.ico" /> | ||
| <title>connect-four-reboot-admin</title> | ||
| <link rel="stylesheet" href="./connect4.css" /> | ||
| <style> | ||
| .loader-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| background-color: #fafafa; | ||
| } | ||
|
|
||
| /* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */ | ||
| /* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */ | ||
|
|
||
| .loader, | ||
| .loader:before, | ||
| .loader:after { | ||
| border-radius: 50%; | ||
| } | ||
| .loader, | ||
| .loader:before, | ||
| .loader:after { | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .loader { | ||
| color: #283593; | ||
| font-size: 11px; | ||
| text-indent: -99999em; | ||
| margin: 55px auto; | ||
| position: relative; | ||
| width: 10em; | ||
| height: 10em; | ||
| box-shadow: inset 0 0 0 1em; | ||
| -webkit-transform: translateZ(0); | ||
| -ms-transform: translateZ(0); | ||
| transform: translateZ(0); | ||
| } | ||
| .loader { | ||
| color: #283593; | ||
| font-size: 11px; | ||
| text-indent: -99999em; | ||
| margin: 55px auto; | ||
| position: relative; | ||
| width: 10em; | ||
| height: 10em; | ||
| box-shadow: inset 0 0 0 1em; | ||
| -webkit-transform: translateZ(0); | ||
| -ms-transform: translateZ(0); | ||
| transform: translateZ(0); | ||
| } | ||
|
|
||
| .loader:before, | ||
| .loader:after { | ||
| position: absolute; | ||
| content: ''; | ||
| } | ||
| .loader:before, | ||
| .loader:after { | ||
| position: absolute; | ||
| content: ""; | ||
| } | ||
|
|
||
| .loader:before { | ||
| width: 5.2em; | ||
| height: 10.2em; | ||
| background: #fafafa; | ||
| border-radius: 10.2em 0 0 10.2em; | ||
| top: -0.1em; | ||
| left: -0.1em; | ||
| -webkit-transform-origin: 5.2em 5.1em; | ||
| transform-origin: 5.2em 5.1em; | ||
| -webkit-animation: load2 2s infinite ease 1.5s; | ||
| animation: load2 2s infinite ease 1.5s; | ||
| } | ||
| .loader:before { | ||
| width: 5.2em; | ||
| height: 10.2em; | ||
| background: #fafafa; | ||
| border-radius: 10.2em 0 0 10.2em; | ||
| top: -0.1em; | ||
| left: -0.1em; | ||
| -webkit-transform-origin: 5.2em 5.1em; | ||
| transform-origin: 5.2em 5.1em; | ||
| -webkit-animation: load2 2s infinite ease 1.5s; | ||
| animation: load2 2s infinite ease 1.5s; | ||
| } | ||
|
|
||
| .loader:after { | ||
| width: 5.2em; | ||
| height: 10.2em; | ||
| background: #fafafa; | ||
| border-radius: 0 10.2em 10.2em 0; | ||
| top: -0.1em; | ||
| left: 5.1em; | ||
| -webkit-transform-origin: 0px 5.1em; | ||
| transform-origin: 0px 5.1em; | ||
| -webkit-animation: load2 2s infinite ease; | ||
| animation: load2 2s infinite ease; | ||
| } | ||
| .loader:after { | ||
| width: 5.2em; | ||
| height: 10.2em; | ||
| background: #fafafa; | ||
| border-radius: 0 10.2em 10.2em 0; | ||
| top: -0.1em; | ||
| left: 5.1em; | ||
| -webkit-transform-origin: 0px 5.1em; | ||
| transform-origin: 0px 5.1em; | ||
| -webkit-animation: load2 2s infinite ease; | ||
| animation: load2 2s infinite ease; | ||
| } | ||
|
|
||
| @-webkit-keyframes load2 { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| @-webkit-keyframes load2 { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes load2 { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| </style> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| </head> | ||
| @keyframes load2 { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| </style> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <noscript> You need to enable JavaScript to run this app. </noscript> | ||
| <div id="root"> | ||
| <div class="loader-container"> | ||
| <div class="loader">Loading...</div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <script type="module" src="/src/index.tsx"></script> | ||
| <body> | ||
| <noscript> You need to enable JavaScript to run this app. </noscript> | ||
| <div id="root"> | ||
| <div class="loader-container"> | ||
| <div class="loader">Loading...</div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <script type="module" src="/src/index.tsx"></script> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| #game-grid { | ||
| max-height: 530px; | ||
| max-width: 660px; | ||
| width: 850px; | ||
| height: 1000px; | ||
| background-image: url("../assets/board.png"); | ||
| background-size: cover; | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| #grid-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(7, 77px); | ||
| grid-template-rows: repeat(6, 100px); | ||
| padding: 5px 0 0 55px; | ||
| background-color: transparent; | ||
| max-height: 200px; | ||
| } | ||
|
|
||
| .column { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 1000px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 373px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .column:hover { | ||
| background-color: #4146b5; | ||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| .column.disabled { | ||
| pointer-events: none; | ||
| opacity: 0.8; | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| .column.disabled:hover { | ||
| background-color: inherit; | ||
| box-shadow: none; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .grid-item { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 98px; | ||
| height: 100px; | ||
| background-color: transparent; | ||
| font-size: 14px; | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| .square { | ||
| background-color: transparent; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 0px 5px 4px 0; | ||
| } | ||
|
|
||
| .circle { | ||
| width: 58px; | ||
| height: 58px; | ||
| border-radius: 50%; | ||
| text-align: center; | ||
| justify-content: center; | ||
| box-shadow: inset 4px 4px 2px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .game-infos { | ||
| font-size: 2em; | ||
| } | ||
|
|
||
| .red { | ||
| background-color: #ed2901; | ||
| color: white; | ||
| } | ||
|
|
||
| .yellow { | ||
| background-color: #f5bd59; | ||
| color: black; | ||
| } | ||
|
|
||
| .empty { | ||
| background-color: white; | ||
| box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.603); | ||
| } | ||
|
|
||
| .circle.highlight { | ||
| animation: | ||
| pulse 0.75s infinite alternate, | ||
| borderBlink 1s infinite; | ||
| } | ||
|
|
||
| @keyframes borderBlink { | ||
| 0% { | ||
| outline: 3px solid #f5bd59; | ||
| } | ||
| 50% { | ||
| outline: 2px solid gray; | ||
| } | ||
| 100% { | ||
| outline: 3px solid #ed2901; | ||
| } | ||
| } | ||
|
|
||
| .circle.small { | ||
| width: 30px; | ||
| height: 30px; | ||
| box-shadow: inset 4px 4px 2px rgba(0, 0, 0, 0.3); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.