Merge pull request #45 from chiachun2491/feature/enhancement

feat(frontend): enhancement
chiachunho · May 28, 2021 · 251b9fd · 251b9fd
2 parents 9bb3dd1 + 6d8a654
commit 251b9fd
Show file tree

Hide file tree

Showing 39 changed files with 861 additions and 923 deletions.
diff --git a/mysite/frontend/public/index.html b/mysite/frontend/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="2021 NTNU OOAD Project"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -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>矮人礦坑</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/mysite/frontend/src/App.js b/mysite/frontend/src/App.js
diff --git a/mysite/frontend/src/App.test.js b/mysite/frontend/src/App.test.js
diff --git a/mysite/frontend/src/Api.js → mysite/frontend/src/api/Api.js b/mysite/frontend/src/Api.js → mysite/frontend/src/api/Api.js
diff --git a/mysite/frontend/src/components/GameEnd.js b/mysite/frontend/src/components/GameEnd.js
diff --git a/mysite/frontend/src/components/GameRoomError.js b/mysite/frontend/src/components/GameRoomError.js
diff --git a/mysite/frontend/src/components/GameRoomNotFound.js b/mysite/frontend/src/components/GameRoomNotFound.js
diff --git a/mysite/frontend/src/components/Hello.js b/mysite/frontend/src/components/Hello.js
diff --git a/mysite/frontend/src/components/Loading.js b/mysite/frontend/src/components/Loading.js
@@ -0,0 +1,9 @@
+import { Spinner } from 'react-bootstrap';
+
+const Loading = () => (
+    <div className='d-flex align-items-center justify-content-center'>
+        <Spinner animation='border' variant='brown' size={'sm'} className={'mr-2'} /> 載入中...
+    </div>
+);
+
+export { Loading };
diff --git a/mysite/frontend/src/components/Logout.js b/mysite/frontend/src/components/Logout.js
@@ -1,4 +1,4 @@
-import axiosInstance from '../Api';
+import axiosInstance from '../api/Api';
 
 function handleLogout() {
     try {

diff --git a/mysite/frontend/src/components/PageNotFound.js b/mysite/frontend/src/components/PageNotFound.js
diff --git a/mysite/frontend/src/components/Room.js → mysite/frontend/src/components/RoomItem.js b/mysite/frontend/src/components/Room.js → mysite/frontend/src/components/RoomItem.js
diff --git a/mysite/frontend/src/components/TutorialOverlay.js b/mysite/frontend/src/components/TutorialOverlay.js
@@ -23,15 +23,13 @@ function TutorialPopover(title = null, content = null, button = null, handleEven
     );
 }
 
-function TutorialOverlayTrigger(props) {
-    return (
-        <OverlayTrigger
-            placement={props.placement ? props.placement : 'top'}
-            overlay={props.overlay}
-            show={props.show ? props.show : false}>
-            {props.children}
-        </OverlayTrigger>
-    );
-}
+const TutorialOverlayTrigger = (props) => (
+    <OverlayTrigger
+        placement={props.placement ? props.placement : 'top'}
+        overlay={props.overlay}
+        show={props.show ? props.show : false}>
+        {props.children}
+    </OverlayTrigger>
+);
 
 export { TutorialPopover, TutorialOverlayTrigger };
diff --git a/mysite/frontend/src/components/errors/GameRoomError.js b/mysite/frontend/src/components/errors/GameRoomError.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Row, Col, Button } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDoorOpen, faUsersSlash } from '@fortawesome/free-solid-svg-icons';
+import { Helmet } from 'react-helmet';
+
+const GameRoomError = () => (
+    <>
+        <Helmet>
+            <title>{'500：房間壞掉了！'}</title>
+        </Helmet>
+        <Row className={'d-flex align-items-center'}>
+            <Col xs={'12'} md={'6'} className={'p-5 d-flex justify-content-center'}>
+                <FontAwesomeIcon icon={faUsersSlash} className={'icon-fluid tool'} />
+            </Col>
+            <Col xs={'12'} md={'6'} className={'p-5'}>
+                <h1>500</h1>
+                <h3>房間壞掉了！</h3>
+                <p>你現在進入的房間發生了問題，試著重新整理或是按下方按鈕可以導引你回到遊戲大廳開始新遊戲。</p>
+                <Button variant={'brown'} href={'/games/'}>
+                    <FontAwesomeIcon icon={faDoorOpen} /> 回到大廳
+                </Button>
+            </Col>
+        </Row>
+    </>
+);
+
+export default GameRoomError;
diff --git a/mysite/frontend/src/components/errors/GameRoomNotFound.js b/mysite/frontend/src/components/errors/GameRoomNotFound.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Row, Col, Button } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDoorOpen, faUsersSlash } from '@fortawesome/free-solid-svg-icons';
+import { Helmet } from 'react-helmet';
+
+const GameRoomNotFound = () => (
+    <>
+        <Helmet>
+            <title>{'404：你走錯房間囉！'}</title>
+        </Helmet>
+        <Row className={'d-flex align-items-center'}>
+            <Col xs={'12'} md={'6'} className={'p-5 d-flex justify-content-center'}>
+                <FontAwesomeIcon icon={faUsersSlash} className={'icon-fluid tool'} />
+            </Col>
+            <Col xs={'12'} md={'6'} className={'p-5'}>
+                <h1>404</h1>
+                <h3>你走錯房間囉！</h3>
+                <p>你現在進入的房間並不存在，按下方按鈕可以導引你回到遊戲大廳。</p>
+                <Button variant={'brown'} href={'/games/'}>
+                    <FontAwesomeIcon icon={faDoorOpen} /> 回到大廳
+                </Button>
+            </Col>
+        </Row>
+    </>
+);
+
+export default GameRoomNotFound;