Commit 86fa8c84 authored by Alexander Kotov's avatar Alexander Kotov

show moving disk

parent c145ed26
......@@ -5,4 +5,5 @@
.Board {
display: flex;
flex-wrap: wrap;
}
\ No newline at end of file
......@@ -2,6 +2,28 @@ import React, { Component } from 'react'
import './App.css'
import Tower from './components/Tower/Tower.jsx'
import Disk from './components/Disk/Disk.jsx';
const styles = {
air: {
width: '100%'
},
move: {
height: '2vw',
width: '33.333%',
boxSizing: 'border-box',
padding: '0 7vw'
}
}
const moveStyle = move => {
if (!move) return styles.move;
switch (move.to) {
case 'left': return styles.move
case 'center': return {...styles.move, margin: '0 auto'}
case 'right': return {...styles.move, marginLeft: 'auto'}
}
}
class App extends Component {
constructor() {
......@@ -59,10 +81,15 @@ class App extends Component {
}
render() {
const {left, center, right} = this.state
const {left, center, right, move} = this.state
return (
<div className="Board">
<div style={styles.air}>
<div style={moveStyle(move)}>
{move && <Disk disk={move.disk}></Disk>}
</div>
</div>
<Tower
disks={left}
onClick={this.performMove('left')}
......
.Disk {
height: 2vw;
border-radius: .3vw;
margin: 0 auto;
}
\ No newline at end of file
import React from 'react'
import './Disk.css'
const diskStyle = d => {
return {
backgroundColor: d.color,
width: d.width + '%'
}
}
const Disk = (props) => {
return (
<div className="Disk" style={diskStyle(props.disk)}></div>
)
}
export default Disk
\ No newline at end of file
......@@ -8,18 +8,14 @@
justify-content: flex-end;
align-items: center;
border-bottom: 2vw solid #663300;
cursor: pointer;
}
.Tower::before {
position: absolute;
content: "";
height: 100%;
height: 16vw;
width: 1vw;
background-color: #663300;
z-index: -1;
}
.Disk {
height: 2vw;
border-radius: .3vw;
}
\ No newline at end of file
import React, { Component } from 'react'
import './Tower.css'
const diskStyle = d => {
return {
backgroundColor: d.color,
width: d.width + '%'
}
}
import Disk from '../Disk/Disk.jsx';
export default class Tower extends Component {
......@@ -16,9 +10,7 @@ export default class Tower extends Component {
return (
<div className="Tower" onClick={onClick} onMouseEnter={onEnter}>
{disks.map(d => {
return <div className="Disk" style={diskStyle(d)}></div>
})}
{disks.map(d => <Disk disk={d}></Disk>)}
</div>
)
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment