70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import { useState } from 'react';
|
|
import { AppState } from "../store";
|
|
import { connect } from "react-redux";
|
|
import { levels } from "../game/levels";
|
|
import { Route, Link } from "react-router-dom";
|
|
import LevelPreview from "./LevelPreview"
|
|
|
|
|
|
const LevelItem = ({ level, idx, cb, active, unlocked }) => {
|
|
return (
|
|
<div style={{display:'flex', flexDirection:'row'}}>
|
|
<div className="levelItem"
|
|
onClick={unlocked ? cb : ()=>{} }
|
|
style={{background: active ? '#9bf': '#79d',
|
|
filter: !unlocked ? 'grayscale(70%)': 'none'}}>
|
|
<LevelPreview level={level} active={active} />
|
|
<p style={{fontSize:'1.5em'}}>{idx + 1+": "+level.name}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
const LevelSelectScreen = ({saveState}) =>{
|
|
const [activeIdx, setActiveIdx] = useState(0);
|
|
const unlockedState: Array<boolean> = [true, true];
|
|
// const levelSaveState = store.get
|
|
for(let i = 2; i < saveState.levels.length; ++i){
|
|
let {done} = saveState.levels[i];
|
|
unlockedState.push((!done && saveState.levels[i-1].done) || done)
|
|
}
|
|
|
|
return (
|
|
<div style={{padding:'1rem'}}>
|
|
<div className="levelItems">
|
|
<h1 className="levelSelectCaption">select level:</h1>
|
|
{levels.map((level, idx) => {
|
|
let active = (idx === activeIdx);
|
|
// let locked =
|
|
return <LevelItem level={level}
|
|
idx={idx}
|
|
cb={()=>setActiveIdx(idx)}
|
|
active={active}
|
|
key={idx}
|
|
unlocked={unlockedState[idx]}
|
|
/>
|
|
})}
|
|
<Link to={'/level/' + levels[activeIdx].name}>start</Link>
|
|
</div>
|
|
|
|
</div>)
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState, ownprops?) => {
|
|
|
|
return {
|
|
...ownprops,
|
|
saveState: state.saveState
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
// openModal: () => dispatch({ type: OPEN_MODAL })
|
|
}
|
|
}
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(LevelSelectScreen);
|
|
|