Artifact
d0f1aecb8939db49e77c68aff83693ae676e20d3c909f437140567a96b705605:
0000: 0a 3c 72 68 79 74 68 6d 72 6f 6c 6c 3e 0a 0a 20 .<rhythmroll>..
0010: 20 20 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 72 <div class="r
0020: 6f 77 20 6d 74 2d 33 22 3e 0a 20 20 20 20 20 20 ow mt-3">.
0030: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 <div class
0040: 3d 22 63 6f 6c 2d 6d 64 2d 33 22 3e 0a 20 20 20 ="col-md-3">.
0050: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 69 6e <in
0060: 70 75 74 20 74 79 70 65 3d 22 74 65 78 74 22 20 put type="text"
0070: 63 6c 61 73 73 3d 22 66 6f 72 6d 20 66 6f 72 6d class="form form
0080: 2d 63 6f 6e 74 72 6f 6c 20 6d 74 2d 31 22 20 69 -control mt-1" i
0090: 64 3d 22 70 61 74 74 65 72 6e 2d 7b 70 72 6f 70 d="pattern-{prop
00a0: 73 2e 74 69 7d 22 20 6f 6e 6b 65 79 75 70 3d 7b s.ti}" onkeyup={
00b0: 75 70 64 61 74 65 43 61 6c 6c 7d 20 76 61 6c 75 updateCall} valu
00c0: 65 3d 7b 70 72 6f 70 73 2e 76 7d 20 73 74 79 6c e={props.v} styl
00d0: 65 3d 22 77 69 64 74 68 3a 32 35 30 70 78 22 2f e="width:250px"/
00e0: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f >. </
00f0: 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 20 div>.
0100: 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 63 6f 6c <div class="col
0110: 2d 6d 64 2d 35 20 6d 74 2d 32 22 3e 0a 20 20 20 -md-5 mt-2">.
0120: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 69 <di
0130: 76 20 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 79 v style="display
0140: 3a 69 6e 6c 69 6e 65 3b 20 62 6f 72 64 65 72 3a :inline; border:
0150: 20 31 70 78 20 64 6f 74 74 65 64 20 62 6c 61 63 1px dotted blac
0160: 6b 3b 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 36 70 k;font-size: 16p
0170: 78 3b 20 70 61 64 64 69 6e 67 3a 20 32 70 78 22 x; padding: 2px"
0180: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
0190: 20 20 20 20 20 65 61 63 68 3d 7b 20 28 6b 65 79 each={ (key
01a0: 2c 20 69 6e 64 65 78 29 20 69 6e 20 70 61 74 74 , index) in patt
01b0: 65 72 6e 5f 63 6c 65 61 6e 28 24 28 22 23 70 61 ern_clean($("#pa
01c0: 74 74 65 72 6e 2d 22 20 2b 20 73 63 6f 70 65 2e ttern-" + scope.
01d0: 70 72 6f 70 73 2e 74 69 29 2e 76 61 6c 28 29 29 props.ti).val())
01e0: 2e 73 70 6c 69 74 28 27 27 29 7d 0a 20 20 20 20 .split('')}.
01f0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
0200: 63 6c 61 73 73 3d 22 72 6f 6c 6c 2d 7b 69 6e 64 class="roll-{ind
0210: 65 78 20 2b 20 31 7d 20 72 6f 6c 6c 22 3e 0a 20 ex + 1} roll">.
0220: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
0230: 20 20 20 7b 6b 65 79 7d 0a 20 20 20 20 20 20 20 {key}.
0240: 20 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a </div>.
0250: 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f 64 69 </di
0260: 76 3e 0a 20 20 20 20 3c 2f 64 69 76 3e 0a 0a 20 v>. </div>..
0270: 20 20 20 3c 73 63 72 69 70 74 3e 0a 0a 20 20 20 <script>..
0280: 20 20 20 20 20 65 78 70 6f 72 74 20 64 65 66 61 export defa
0290: 75 6c 74 20 7b 0a 20 20 20 20 20 20 20 20 20 20 ult {.
02a0: 20 20 75 70 64 61 74 65 43 61 6c 6c 28 29 20 7b updateCall() {
02b0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
02c0: 20 74 68 69 73 2e 75 70 64 61 74 65 28 29 3b 0a this.update();.
02d0: 20 20 20 20 20 20 20 20 20 20 20 20 7d 2c 0a 20 },.
02e0: 20 20 20 20 20 20 20 20 20 20 20 6f 6e 42 65 66 onBef
02f0: 6f 72 65 4d 6f 75 6e 74 28 70 72 6f 70 73 2c 20 oreMount(props,
0300: 73 74 61 74 65 29 20 7b 0a 20 20 20 20 20 20 20 state) {.
0310: 20 20 20 20 20 20 20 20 20 2f 2f 20 69 6e 69 74 // init
0320: 69 61 6c 20 73 74 61 74 65 0a 20 20 20 20 20 20 ial state.
0330: 20 20 20 20 20 7d 2c 0a 20 20 20 20 20 20 20 20 },.
0340: 20 20 20 70 61 74 74 65 72 6e 5f 63 6c 65 61 6e pattern_clean
0350: 28 70 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 (p) {.
0360: 20 20 20 20 20 20 72 65 74 75 72 6e 20 77 69 6e return win
0370: 64 6f 77 2e 70 61 74 74 65 72 6e 5f 63 6c 65 61 dow.pattern_clea
0380: 6e 28 70 29 0a 20 20 20 20 20 20 20 20 20 20 20 n(p).
0390: 7d 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 20 3c }. }. <
03a0: 2f 73 63 72 69 70 74 3e 0a 0a 3c 2f 72 68 79 74 /script>..</rhyt
03b0: 68 6d 72 6f 6c 6c 3e 0a 20 0a 0a hmroll>. ..