Skip to content

Commit 0dbf90e

Browse files
hexium310hexium310
committed
First commit
0 parents  commit 0dbf90e

15 files changed

Lines changed: 5717 additions & 0 deletions

‎.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react"
5+
]
6+
}

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules/
2+
/dist/

‎package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "react-webpack",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"build": "webpack --mode production",
8+
"watch": "webpack-dev-server --mode development",
9+
"start": "yarn watch"
10+
},
11+
"devDependencies": {
12+
"@babel/core": "^7.2.2",
13+
"@babel/preset-env": "^7.3.1",
14+
"@babel/preset-react": "^7.0.0",
15+
"@babel/register": "^7.0.0",
16+
"@types/lodash": "^4.14.121",
17+
"@types/react": "^16.8.2",
18+
"@types/react-dom": "^16.8.0",
19+
"@types/styled-components": "^4.1.8",
20+
"awesome-typescript-loader": "^5.2.1",
21+
"babel-loader": "^8.0.5",
22+
"html-webpack-plugin": "^3.2.0",
23+
"lodash": "^4.17.11",
24+
"react": "^16.8.1",
25+
"react-dom": "^16.8.1",
26+
"source-map-loader": "^0.2.4",
27+
"styled-components": "^4.1.3",
28+
"typescript": "^3.3.3",
29+
"webpack": "^4.29.3",
30+
"webpack-cli": "^3.2.3",
31+
"webpack-dev-server": "^3.1.14"
32+
}
33+
}

‎src/components/App.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as React from 'react';
2+
import styled, { createGlobalStyle } from 'styled-components';
3+
import { shuffle } from 'lodash';
4+
5+
import { Header } from './Header';
6+
import { Bingo } from './Bingo';
7+
import { ChosenNumberList } from './ChosenNumberList';
8+
9+
const GlobalStyle = createGlobalStyle`
10+
*:focus {
11+
outline: none;
12+
}
13+
14+
* {
15+
box-sizing: border-box;
16+
}
17+
`;
18+
19+
const numberList = shuffle([...Array(75).keys()]);
20+
21+
export const App = () => {
22+
const [count, setCount] = React.useState(0);
23+
24+
return (
25+
<>
26+
<GlobalStyle />
27+
<Header />
28+
<Bingo setCount={setCount} count={count} currentNumber={numberList[count - 1]}/>
29+
<ChosenNumberList numberList={numberList} count={count}/>
30+
</>
31+
);
32+
}

‎src/components/Bingo.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import * as React from 'react';
2+
3+
import styled, { css } from 'styled-components';
4+
5+
export interface BingoProps {
6+
setCount: React.Dispatch<React.SetStateAction<number>>;
7+
count: number;
8+
currentNumber: number;
9+
};
10+
11+
const BingoWrapper = styled.div`
12+
display: flex;
13+
height: 70vh;
14+
/* background-color: papayawhip; */
15+
background-color: transparent;
16+
justify-content: center;
17+
padding: 10px;
18+
`;
19+
20+
const BingoButton = styled.div`
21+
position: relative;
22+
justify-content: center;
23+
align-items: center;
24+
height: calc(70vh - 20px);
25+
width: calc(70vh - 20px);
26+
border-style: none;
27+
border-radius: 50%;
28+
background-color: lightgreen;
29+
`;
30+
31+
const buttonText = css`
32+
display: inline;
33+
position: absolute;
34+
top: 50%;
35+
left: 50%;
36+
transform: translate(-50%, -50%);
37+
white-space: nowrap;
38+
`;
39+
40+
41+
const MouseOver = styled.div`
42+
${buttonText}
43+
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
width: 100%;
48+
height: 100%;
49+
z-index: 10;
50+
font-size: 20vw;
51+
cursor: pointer;
52+
53+
${BingoButton}:not(:hover) & {
54+
display: none;
55+
}
56+
`;
57+
58+
const FirstMouseOut = styled.div`
59+
${buttonText}
60+
61+
font-size: 20vw;
62+
`;
63+
64+
const MouseOut = styled.div`
65+
${buttonText}
66+
67+
font-size: 28vw;
68+
69+
${MouseOver}:hover + & {
70+
opacity: 0.2;
71+
}
72+
`;
73+
74+
export const Bingo: React.FunctionComponent<BingoProps> = ({ count, setCount, currentNumber }) => {
75+
const [clickable, setClickable] = React.useState(true);
76+
77+
return (
78+
<BingoWrapper>
79+
<BingoButton>
80+
{
81+
clickable && <MouseOver onClick={() => {
82+
setCount(count + 1);
83+
setClickable(false);
84+
setTimeout(() => {
85+
setClickable(true);
86+
}, 2000);
87+
}}>抽選</MouseOver>
88+
}
89+
{
90+
!currentNumber
91+
? <FirstMouseOut>抽選</FirstMouseOut>
92+
: <MouseOut>{currentNumber}</MouseOut>
93+
}
94+
</BingoButton>
95+
</BingoWrapper>
96+
);
97+
}

‎src/components/ChosenNumberList.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
import { shuffle } from 'lodash';
4+
5+
export interface ChosenNumberListProps {
6+
numberList: number[];
7+
count: number;
8+
}
9+
10+
export interface NumberContainerProps {
11+
isLatestTen: boolean;
12+
}
13+
14+
const Wrapper = styled.div`
15+
display: flex;
16+
flex-wrap: wrap-reverse;
17+
`;
18+
19+
const NumberContainer = styled.div`
20+
display: flex;
21+
position: relative;
22+
width: 8%;
23+
border: solid 1px black;
24+
margin: 1%;
25+
justify-content: center;
26+
align-items: center;
27+
color: ${(props: NumberContainerProps) => props.isLatestTen ? 'black' : 'silver'};
28+
border-color: ${(props: NumberContainerProps) => props.isLatestTen ? 'black' : 'silver'};
29+
30+
&:before {
31+
content: "";
32+
display: block;
33+
padding-top: 100%;
34+
}
35+
36+
&:last-child {
37+
border-color: red;
38+
color: red;
39+
}
40+
`;
41+
42+
const ChosenNumber = styled.div`
43+
font-size: 4vw;
44+
`
45+
46+
export const ChosenNumberList = (props: ChosenNumberListProps) => {
47+
const numberList = props.numberList.slice(0, props.count);
48+
49+
return (
50+
<Wrapper>
51+
{numberList.map((v, i) => {
52+
return (
53+
<NumberContainer
54+
key={i}
55+
isLatestTen={Math.floor(i / 10) >= Math.floor((numberList.length - 1) / 10)}
56+
>
57+
<ChosenNumber>{v}</ChosenNumber>
58+
</NumberContainer>
59+
)
60+
})}
61+
</Wrapper>
62+
);
63+
};

‎src/components/Header.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
4+
const Title = styled.h1`
5+
text-align: center;
6+
color: palevioletred;
7+
`;
8+
9+
export const Header = () => (
10+
<header>
11+
<Title>ビンゴ抽選機</Title>
12+
</header>
13+
)

‎src/components/Hello.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
4+
const Title = styled.h1`
5+
font-size: 1.5em;
6+
text-align: center;
7+
color: palevioletred;
8+
`;
9+
10+
const Wrapper = styled.section`
11+
padding: 4em;
12+
background: papayawhip;
13+
`
14+
15+
const Content = styled.div`
16+
text-align: center;
17+
`
18+
export interface HelloProps {
19+
compiler: string;
20+
framework: string;
21+
}
22+
23+
export const Hello = (props: HelloProps) => (
24+
<>
25+
<h1>Hello from {props.compiler} and {props.framework}!</h1>
26+
<Wrapper>
27+
<Title>App Component</Title>
28+
<Content>Pa&apos;s wijze lynx bezag vroom het fikse aquaduct.</Content>
29+
</Wrapper>
30+
</>
31+
);

‎src/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>React Test</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
</body>
10+
</html>

0 commit comments

Comments
 (0)