Blockchain code Metaverse VR

SmartContract×VR×Crypto(569)

スポンサーリンク

//tips

//smart contract

リストの方作成できましたので、そのリストとlocalStorageに格納しているTowhomのuseridと自身のuseridと照合して、該当の情報を引き出していく仕組みを作る。

この部分はrendering部分でできるか。

まずはmapを利用して必要な情報を引き出してみる。

{mixlist.map((item,index) => (
<div key={index} >

{item.userid==localStorage.getItem('authuserid')&&(
<div>
{item.username}
<img src={item.storagelink} alt="" width='100%'/>
</div>
)}

{item.userid==ninja[0].userid&&(
<div>
{item.username}
<img src={item.storagelink} alt="" width='100%'/>
</div>
)}

</div>
))

こちらを組み込み様子を見る。

若干表示までにタイムラグがあったがきちんと表示された。

<div style={{ flexGrow: 1 }} className={classes.aright}>

右端表示を行おうとしたがうまくいかず。

aright:{
//flexGrow:1//可能な限りの幅を取る
textAlign: "right",
},

{item.userid==ninja[0].userid&&(
<div className={classes.aright}>
{item.username}
<img src={item.storagelink} alt="" width="30" height="27"/>
</div>
)}

こちらにて無事に意図通りの左右端に分けての表示ができた。

ここでのアバター部分は丸抜きにしたい。

<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"/>

avatarshape :{
borderRadius: "50%",
}
参考:

https://qiita.com/cawauchi/items/6bb09b7e89695b7f891a

Cssの設定のみで簡単にできた。素晴らしすぎる。

吹き出しUIの表示方法も探す。

https://stackoverflow.com/questions/58161615/how-to-make-chat-like-ui-with-chat-bubbles-in-react-js

https://codesandbox.io/examples/package/react-chat-bubble

みているとわざわざ吹き出しの尖りは作らず、角を丸くすれば良いことに気づいた。

背景にもborderRadiusは使えるのだろうか。試してみる。

<Typography className={classes.titlebackshape}>Let's start chatting!</Typography>

角の四隅が大きく削れるため。うまくいかなかった。潰した円のようになってしまう。

どうしたものかと探していると、borderRadius: '10px’,という使い方を見つけた。

実際に試してみる。

titlebackshape:{
backgroundColor: "#f5f5f5",
border: '0.5px solid black',
borderRadius: '10px',
margin: '5px',
padding: '10px',
//display: 'inline-block'

},

こちらで角が丸くなった文言記載欄を作成できた。グッジョブすぎる。

この欄を利用して、データベースに記載された内容にここに吐き出せるようにしていく。

記載の順番なども必要なのでそちらの方法も考える。timestanpを利用すれば上から順番にきちんと並べられると思う。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

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