Blockchain code Metaverse VR

SmartContract×VR×Crypto(591)

スポンサーリンク

//tips

//smart contract

ドキュメントごとのBoard表示方法の模索。現状全てのメッセージ内容を抜き出して表示させることはできたのでindexに応じて表示を替えるように設計する。

Indexを格納し、その数値が異なった場合に分岐するようにできるか考える。

問題なのはblocks.map((item,index) => ( と item.map((i,index)=>(の間にタグを入れられないこと。これにより切り替えが難しい。

return (
<div >
{blocks.map((item,index) => (
item.map((i,index)=>(
<div key={index} >
<Card>
{i}
</Card>
</div>
))
))}
</div>
)
};

この段階まで分割できているのでindex0の時の[0][1]…などととれれば良い。

0: (2) ['naki:ららら', 'nak:あああ']
1: (2) ['naki:hi', 'nak:great']

returnの外で対応するか。

returnで返したいoutputは

<div>
<div><card></card></div>
<div><card></card></div>
</div>

の形。

なので下記の形にできるようにblocksの方を加工してあげる必要がある。

return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<Card>
{item}
</Card>
</div>
))}
</div>
)

{item} の中に入れたい塊は
<div>naki:ららら</div>
<div>nak:あああ</div>
などとされたセット。

items.pushを元のitems.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)に戻す。

こちらにて無事に分割対応できた。

var rap = () => {

const items = [];
//const blocks = [];

for (let i = 0; i <item.length; i++) {
console.log('item[i]')
console.log(item[i])
console.log(item.length)

for (let s = 0; s <item[i].text.length; s++) {
console.log('item[i].text[s]')
console.log(item[i].text[s])

items.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)
//items.push(item[i].text[s].username+":"+item[i].text[s].chat)
}

console.log("items0")
console.log(items)
blocks.push(items)
items = []
console.log("items")
console.log(items)
console.log(blocks)

}
//vroop(blocks)

//return <div >{ items }</div>;
return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<Card>
{item}
</Card>
</div>
))}
</div>
)
};

Cardの表示を加工し、cardごとに別の形に見せられるように変更を加えていく。

Boardedit({item}) {のなかにmakestyleを組み込んでいく。

まずはCardに枠線をつけたい。

<Card sx={{ border: 1 }}> にて適応できた。

次に表示範囲を左右一杯ではなく、三等分づつで横にバラけるようにしたい。

return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<div className={classes.balancer}>
<Grid item xs={12} md={6} lg={4} key={index} >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>
</div>
</div>
))}
</div>

const useStyles=makeStyles({で下記を導入。

balancer:{
display:'flex',
},

Gridを導入。なかなか横に並ばない。どうしたもんか

return (
<div >
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>

{blocks.map((item,index) => (
<div key={index} >
<Grid item xs={12} md={6} lg={4} >

<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>

</div>
))}
</Grid>

</div>
)
};

横に並べることはできても表示がおかしいのは却下なので、ブラウザの検証からコンパイル済みのコードを読みどうなっているのかを確認。

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12 MuiExample_Component-balancer css-1idn90j-MuiGrid-root">

ここまでは横幅マックスで取れている。

<div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-4 css-1e6jbaj-MuiGrid-root">

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-i8d1a0-MuiPaper-root-MuiCard-root">

<div>naki:ららら</div>
<div>nak:あああ</div>
</div></div></div><div>

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-4 css-1e6jbaj-MuiGrid-root">

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-i8d1a0-MuiPaper-root-MuiCard-root">

<div>naki:hi</div><div>nak:great</div></div></div></div></div>

Gridの分割割合のしては逆効果のようなので外す。

<div >
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>

{blocks.map((item,index) => (
<div key={index} >
<Grid >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>

</div>

こうするとCardがそのそも保有している横幅に合わせて表示された。

ついに下記の形でスッキリと表示させることができた。<div>が邪魔になっていたよう。

<div >
<Grid className={classes.balancer}>

{blocks.map((item,index) => (
// <div key={index} >
<Grid item xs={12} md={6} lg={3} key={index}>
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>

// </div>
))}
</Grid>

</div>

このBordの情報にtitle情報も組み込めるようにする。

Indexがドキュメントブロック単位に分かれているので 大元の引数itemをxitemに入れたものから抽出した。

{blocks.map((item,index) => (
<Grid item xs={12} md={6} lg={3} key={index}>
<Card sx={{ border: 1 }}>
{xitem[index].title}

作成タイミングのitemスタンプの追加とボードのタイトルとタイトル内容の記述を表示させ、それをクリックしたら各メッセージ内容に飛ぶようにする。

5ちゃんねるの構成がシンプルで良い。見本にする。誰に対するreplyなのかも指定できるようにしてあげる必要がありそう。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.