git.iko.soy/bridge
on master help sign in
- Added new censor style (using unicode blocks instead of divs)
a63853fChris Johnson
src/bridge/components/Passport.js+28−16
compare with master
unifiedsplit
@@ -30,24 +30,36 @@ class Passport extends React.Component {
30 }
30 }
31
31
32 generateCensor() {
32 generateCensor() {
33+ let censor = "";
33− let blocks = [];
34+ const blocks = ['▖','▗','▘','▙','▚','▛','▜','▝','▞','▟'];
34
35
35− for (var i = 0; i < 86; i++) {
36+ for (var i = 0; i < 12; i++) {
36− let rand = Math.round(Math.random())
37+ let index = Math.floor(Math.random() * blocks.length)
37− let filled = (rand || i === 0 || i === 43)
38+ censor += blocks[index];
38−
39− let className = filled ? "passport-block bg-gray-30" : "passport-block"
40−
41− blocks.push(<div key={i} data-key={i}className={className}></div>)
42 }
39 }
43
40
44− return (
41+ return censor
45− <div className="flex flex-wrap passport-censor">
46− {blocks}
47− </div>
48− )
49 }
42 }
50
43
44+ // generateCensor() {
45+ // let blocks = [];
46+ //
47+ // for (var i = 0; i < 86; i++) {
48+ // let rand = Math.round(Math.random())
49+ // let filled = (rand || i === 0 || i === 43)
50+ //
51+ // let className = filled ? "passport-block bg-gray-30" : "passport-block"
52+ //
53+ // blocks.push(<div key={i} data-key={i}className={className}></div>)
54+ // }
55+ //
56+ // return (
57+ // <div className="flex flex-wrap passport-censor">
58+ // {blocks}
59+ // </div>
60+ // )
61+ // }
62+
51 getCurrentDate() {
63 getCurrentDate() {
52 let date = new Date()
64 let date = new Date()
53 const fil = n => n >= 10 ? n : `0${n}`
65 const fil = n => n >= 10 ? n : `0${n}`
@@ -177,10 +189,10 @@ class Passport extends React.Component {
177 <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
189 <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
178
190
179 <div className="passport-label gray-50 mt-3">Master Ticket</div>
191 <div className="passport-label gray-50 mt-3">Master Ticket</div>
180− <div className="passport-value overflow-hidden">{this.masterCensor}</div>
192+ <div className="passport-value passport-censor overflow-hidden">{this.masterCensor}</div>
181
193
182− <div className="passport-label gray-50 mt-5">Managment Seed</div>
194+ <div className="passport-label gray-50 mt-5">Management Seed</div>
183− <div className="passport-value overflow-hidden">{this.managementCensor}</div>
195+ <div className="passport-value passport-censor overflow-hidden">{this.managementCensor}</div>
184 </div>
196 </div>
185
197
186 {wallet &&
198 {wallet &&
src/bridge/style/extend.css+2−1
@@ -548,7 +548,8 @@ code {
548}
548}
549
549
550.passport-censor {
550.passport-censor {
551− min-width: 350px;
551+ /* min-width: 350px; */
552+ font-size: 48px;
552}
553}
553
554
554.passport-metadata .passport-label {
555.passport-metadata .passport-label {