-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
enhanced(ui): UI package extensions with components and calls in demo…
…-game (#47) * Adding dice as ui component * added logo component * Probability chart, tooltip missing, input could be extended * fix css and Logo component * generalize playerDisplay, Logo/Avatar * adding xp bar * Storage Overview adapting height size * adjusted some todos for timeline entry * timeline * Trading * adding price to trading form * adding navbar * sidebar structure * remove duplicate style imports * pin next peer dep in ui package * remove redundant type in formik * customize period and segment names in timeline entry * remove redundant key reference in object * add strings and booleans directly in components (here layout) * direct inference of booleans in timeline entry * some clean up * remove hard-coded number of segments in timeline * refining layout * storage overview fallback if no images are provided * rounded edges for avatar * timeline admin prep * change avatar to button * providing react nodes for icons in storage overview * trading form validation schema with yup * TimelineEntry entryStatus, past, current and future * adding segmentCount to periods in db and for fetching * avoid spread syntax on accumulators * providing types for achievements * cleaning up rest of todos and comments for segment count and filtering --------- Co-authored-by: Roland Schläfli <[email protected]>
- Loading branch information
1 parent
58fe5bf
commit c964a36
Showing
26 changed files
with
995 additions
and
682 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,203 @@ | ||
| // import { useQuery } from '@apollo/client' | ||
| import { faStar } from '@fortawesome/free-solid-svg-icons' | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import { | ||
| Layout, | ||
| PlayerDisplay, | ||
| ProbabilityChart, | ||
| StorageOverview, | ||
| Timeline, | ||
| TimelineAdmin, | ||
| TimelineEntry, | ||
| TradingForm, | ||
| } from '@gbl-uzh/ui' | ||
| // import { ResultDocument } from 'src/graphql/generated/ops' | ||
|
|
||
| import { useRouter } from 'next/router' | ||
|
|
||
| export default function Home() { | ||
| // const { data, loading, error } = useQuery(ResultDocument, { | ||
| // fetchPolicy: 'cache-first', | ||
| // }) | ||
|
|
||
| // if (loading) return <div>Loading...</div> | ||
| // if (error) return <div>Error {error.message}</div> | ||
| // console.log(data) | ||
|
|
||
| const router = useRouter() | ||
| const tabs = [ | ||
| { name: 'Welcome', href: '/play/welcome' }, | ||
| { name: 'Cockpit', href: '/play/cockpit' }, | ||
| ] | ||
| const playerInfo = { | ||
| name: 'playerName', | ||
| color: 'Red', | ||
| location: 'ZH', | ||
| level: 1, | ||
| xp: 20, | ||
| xpMax: 50, | ||
| achievements: [], | ||
| imgPathAvatar: '/avatars/avatar_placeholder.png', | ||
| imgPathLocation: '/locations/ZH.svg', | ||
| onClick: () => { | ||
| router.replace('/play/welcome') | ||
| }, | ||
| } | ||
| const storageInfo = { | ||
| storageTotal: 3, | ||
| storageUsed: 1, | ||
| icon: <FontAwesomeIcon icon={faStar} />, | ||
| // icon: <img src={'/cocoa_1.png'} />, | ||
| } | ||
| return ( | ||
| <div className="font-source-sans p-4"> | ||
| hello world | ||
| {/* <Button /> */} | ||
| {/* <Dice dice1={'dice1'} dice2={'dice2'} /> */} | ||
| {/* <Progress value={50} max={100} formatter={(val) => `${val}XP`} /> */} | ||
| <div className="flex w-1/3 flex-col"> | ||
| <PlayerDisplay | ||
| name={'playerName'} | ||
| avatar={'avatar_placeholder'} | ||
| color={'Red'} | ||
| achievements={[]} | ||
| location={'ZH'} | ||
| xp={20} | ||
| xpToNext={50} | ||
| level={1} | ||
| onClick={() => { | ||
| router.replace('/play/welcome') | ||
| <div> | ||
| <Layout tabs={tabs} playerInfo={playerInfo} storageInfo={storageInfo}> | ||
| <div className="w-full rounded bg-black"></div> | ||
| </Layout> | ||
| <div className="font-source-sans p-4"> | ||
| hello world | ||
| {/* <Dice dice1={6} dice2={6} /> */} | ||
| {/* <Progress value={50} max={100} formatter={(val) => `${val}XP`} /> */} | ||
| <div className="flex w-1/3 flex-col"> | ||
| <PlayerDisplay {...playerInfo} /> | ||
| <StorageOverview {...storageInfo} /> | ||
| </div> | ||
| <ProbabilityChart trendE={5} trendGap={8} totalEyes={'12'} /> | ||
| <TimelineEntry | ||
| periodIx={1} | ||
| segmentIx={1} | ||
| numSegments={2} | ||
| gameStatus="PERIOD_END" | ||
| entryStatus="CURRENT" | ||
| > | ||
| <div>Child</div> | ||
| </TimelineEntry> | ||
| <Timeline | ||
| // NOTE(JJ): Check the prisma schema what Period includes | ||
| periods={[ | ||
| { | ||
| segments: [ | ||
| { | ||
| index: 0, | ||
| facts: { | ||
| cashBalance: 3, | ||
| storageAmount: 6, | ||
| spotPrice: 1, | ||
| futuresPrice: 1, | ||
| }, | ||
| }, | ||
| { | ||
| index: 1, | ||
| facts: { | ||
| cashBalance: 3, | ||
| storageAmount: 6, | ||
| spotPrice: 2, | ||
| futuresPrice: 3, | ||
| }, | ||
| }, | ||
| ], | ||
| segmentCount: 2, | ||
| index: 0, | ||
| facts: { | ||
| cashBalance: 3, | ||
| storageAmount: 6, | ||
| spotPrice: 2, | ||
| futuresPrice: 2, | ||
| }, | ||
| }, | ||
| ]} | ||
| entries={[ | ||
| { | ||
| id: 0, | ||
| type: 'PERIOD_START', | ||
| period: { id: 0, index: 0 }, | ||
| segment: { id: 0, index: 0 }, | ||
| facts: { | ||
| finalSpotPrice: 9, | ||
| }, | ||
| }, | ||
| { | ||
| id: 1, | ||
| type: 'SEGMENT_START', | ||
| period: { id: 0, index: 0 }, | ||
| segment: { id: 0, index: 0 }, | ||
| facts: { | ||
| finalSpotPrice: 9, | ||
| }, | ||
| }, | ||
| { | ||
| id: 2, | ||
| type: 'SEGMENT_END', | ||
| period: { id: 0, index: 0 }, | ||
| segment: { id: 0, index: 0 }, | ||
| facts: { | ||
| finalSpotPrice: 9, | ||
| }, | ||
| }, | ||
| { | ||
| id: 3, | ||
| type: 'SEGMENT_START', | ||
| period: { id: 0, index: 0 }, | ||
| segment: { id: 1, index: 1 }, | ||
| facts: { | ||
| finalSpotPrice: 9, | ||
| }, | ||
| }, | ||
| { | ||
| id: 4, | ||
| type: 'SEGMENT_END', | ||
| period: { id: 0, index: 0 }, | ||
| segment: { id: 1, index: 1 }, | ||
| facts: { | ||
| finalSpotPrice: 9, | ||
| }, | ||
| }, | ||
| ]} | ||
| activePeriodIx={0} | ||
| activeSegmentIx={0} | ||
| formatter={(current, prev) => { | ||
| // Do computation here | ||
| const spotPrice = | ||
| current.segmentFlat?.facts.spotPrice ?? | ||
| current.facts.finalSpotPrice | ||
| const futuresPrice = | ||
| current.segmentFlat?.facts.futuresPrice ?? | ||
| current.facts.finalSpotPrice | ||
|
|
||
| const spotPriceDelta = | ||
| prev?.segmentFlat?.facts.spotPrice && | ||
| (spotPrice / prev.segmentFlat.facts.spotPrice - 1) * 100 | ||
|
|
||
| const futuresPriceDelta = | ||
| prev?.segmentFlat?.facts.futuresPrice && | ||
| (futuresPrice / prev.segmentFlat.facts.futuresPrice - 1) * 100 | ||
| return ( | ||
| <> | ||
| {spotPriceDelta && <div>S {spotPriceDelta}</div>} | ||
| {futuresPriceDelta && <div>F {futuresPriceDelta}</div>} | ||
| </> | ||
| ) | ||
| }} | ||
| /> | ||
| <StorageOverview | ||
| storageTotal={3} | ||
| storageUsed={1} | ||
| imgSrcTotal={'/avatars/cocoa_0.png'} | ||
| imgSrcUsed={'/avatars/cocoa_3.png'} | ||
| <TradingForm | ||
| price={10} | ||
| nameButtonBuy={'Buy'} | ||
| nameButtonSell={'Sell'} | ||
| onSubmit={async (values, helpers) => { | ||
| console.log(values) | ||
| // await performAction({ | ||
| // variables: { | ||
| // type: ActionTypes.SPOT_TRADE, | ||
| // payload: JSON.stringify({ | ||
| // volume: values.modifier * Number(values.volume), | ||
| // }), | ||
| // }, | ||
| // }) | ||
| helpers.resetForm() | ||
| }} | ||
| /> | ||
| <TimelineAdmin /> | ||
| </div> | ||
| <ProbabilityChart trendE={5} trendGap={8} totalEyes={'12'} /> | ||
| <TimelineEntry | ||
| periodIx={1} | ||
| segmentIx={1} | ||
| isCurrentEntry={true} | ||
| isPastEntry={false} | ||
| type={'PERIOD_END'} | ||
| cashBalance={1} | ||
| storageAmount={1} | ||
| /> | ||
| <Timeline | ||
| periods={[ | ||
| { | ||
| segments: [{ index: 0 }], | ||
| index: 0, | ||
| facts: { | ||
| cashBalance: 1, | ||
| storageAmount: 1, | ||
| finalSpotprice: 1, | ||
| }, | ||
| }, | ||
| ]} | ||
| entries={[{ type: 'PERIOD_START', period: { index: 0 }, segment: {} }]} | ||
| activePeriodIx={0} | ||
| activeSegmentIx={0} | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,6 +21,7 @@ query Result { | |
| status | ||
| periods { | ||
| ...PeriodData | ||
| segmentCount | ||
| } | ||
| activePeriod { | ||
| ...PeriodData | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.