jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed theme

Browse Source
This commit is contained in:
jhalitaksoy 2021-06-30 16:11:22 +03:00
parent 9946ca62d8
commit c4c0044985
3 changed files with 76 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Home.tsx
View File

@ -76,13 +76,30 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
return <div style={{
display: "flex",
flexDirection: "column",
alignItems: "center"
alignItems: "center",
background: "#EEEEEE",
flex: "1",
}}>
<h2>Mancala</h2>
{!game && <button onClick={newGameClick}>New Game</button>}
<div style={{
padding: "0px 50px",
background : "rgb(228, 228, 228)",
display: 'flex',
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
alignSelf: "stretch"
}}>
<h1>Mancala</h1>
{game && <button onClick={leaveGame}>Leave</button>}
{game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
{game && <h5>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h5>}
</div>
{!game && <button onClick={newGameClick}>New Game</button>}
{game && (
<>
<h4>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h4>
<BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
</>
)}
</div>
}

56
src/components/BoardView.tsx
View File

@ -2,14 +2,30 @@ import * as React from 'react';
import { FunctionComponent, useState } from 'react';
import { Hole, Store, Game } from '../mancala';
const BallView: FunctionComponent = () => {
type Theme = {
background : string,
boardColor: string
storeColor: string
holeColor: string
ballColor: string
}
const theme: Theme = {
background : "#EEEEEE",
boardColor: "#4D606E",
storeColor: "#3FBAC2",
holeColor: "#D3D4D8",
ballColor: "#393E46",
}
const BallView: FunctionComponent<{color : string}> = ({color}) => {
return (<div style={{
background: "yellow",
background: color,
margin: "1px",
width: "20px",
height: "20px",
borderRadius: "50px"
width: "1vw",
height: "1vw",
borderRadius: "10vw"
}} >
</div>)
}
@ -23,7 +39,7 @@ function range(size: number) {
}
const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
const balls = [...range(hole.ballCount)].map((i) => <BallView />)
const balls = [...range(hole.ballCount)].map((i) => <BallView color={theme.ballColor}/>)
return (<div
onClick={onClick}
@ -31,7 +47,7 @@ const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => vo
background: color,
margin: "5px",
padding: "5px",
borderRadius: "100px",
borderRadius: "10vw",
display: 'flex',
alignItems: 'center',
alignContent: 'center',
@ -45,13 +61,13 @@ const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => vo
const StoreView: FunctionComponent<
{ store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
const balls = [...range(store.ballCount)].map((i) => <BallView />)
const balls = [...range(store.ballCount)].map((i) => <BallView color={theme.ballColor}/>)
return (<div style={{
gridColumn: gridColumn,
gridRow: gridRow,
background: color,
margin: "1px",
borderRadius: "100px",
margin: "5px",
borderRadius: "10vw",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -66,13 +82,13 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
game, userKey, onHoleSelect }) => {
const player1Holes = game?.board.player1Holes.map((hole) => (
<HoleView hole={hole} color="red" onClick={() => {
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
}} />
))
const player2Holes = game!!.board.player2Holes.map((hole) => (
<HoleView hole={hole} color="blue" onClick={() => {
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
if (game.turn == "player2") onHoleSelect(game.board.player2Holes.indexOf(hole), hole)
}} />
))
@ -82,23 +98,23 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
margin: '10px',
padding: '10px',
display: 'grid',
gridTemplateColumns: 'repeat(8, 150px)',
gridTemplateRows: '150px 150px',
border: "2px solid black",
borderRadius: "30px",
gridTemplateColumns: 'repeat(8, 11vw)',
gridTemplateRows: 'repeat(2, 11vw)',
borderRadius: "3vw",
background: theme.boardColor
}}>
{
game.getPlayerNameByKey(userKey) == "player2" ? (
<>
<StoreView store={game!!.board.player1Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player1Holes.reverse()}
{player2Holes}
</>
) : (
<>
<StoreView store={game!!.board.player2Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player2Holes.reverse()}
{player1Holes}
</>

19
src/index.html
View File

@ -6,8 +6,23 @@
<title>Mancala</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main"></div>
<body style="margin: 0px;">
<div id="main" style="display: flex;"></div>
<script src="./App.tsx"></script>
</body>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#main{
height: 100%;
}
</style>
</html>