The scoring is basically the same except for the so-called Scoring Catch and maximum score possible. There are
+ none. The game board is free form and trusts the player will follow the rules otherwise laid out.
+
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..dcf08b6
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,33 @@
+.App {
+ text-align: center;
+}
+
+.banner {
+ font-weight: bold;
+ text-decoration: underline;
+ padding: .25em;
+}
+
+.game-sheet {
+ display: flex;
+ flex-direction: column;
+ margin: 1em;
+}
+
+@media only screen and (min-width: 768px) {
+ .game-sheet {
+ flex-direction: column;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ align-items: center;
+ }
+
+ .game-sheet>* {
+ padding: 2em;
+ }
+}
+
+.total-score {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 0000000..2a68616
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+ render();
+ const linkElement = screen.getByText(/learn react/i);
+ expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..545ec43
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import './App.css';
+import ScoreBoard from './components/ScoreBoard';
+
+function App() {
+ const [totalScore, setTotalScore] = useState(0);
+
+ return (
+