API tools faq
paste
lyonlyke

PAIR-A-DICE 2.0

lyonlyke
Oct 7th, 2018
204
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <title>Welcome to Pair-A-Dice</title>
  5. <!-- for-mobile-apps -->
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8.  
  9. <!-- //for-mobile-apps -->
  10.  
  11. <!-- Proudly Authored by: Lionel Mertens on October 6, 2018 for all to enjoy -->
  12.  
  13. <style>
  14. body {
  15.  
  16. margin:0 calc(50% - 150px);
  17. background-color:#000;
  18. }
  19.  
  20.  
  21. #canvass {
  22. position:absolute;
  23. width:300px;
  24. height:100%;
  25.  
  26. background:#B22222;
  27. background:-moz-linear-gradient(top, #B22222 0%, #800000 100%);
  28. background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #B22222), color-stop(100%, #800000));
  29. background:-webkit-linear-gradient(top, #B22222 0%, #800000 100%);
  30. background:-o-linear-gradient(top,7 #B22222 0%, #800000 100%);
  31. background:-ms-linear-gradient(top, #B22222 0%, #800000 100%);
  32. background:linear-gradient(to bottom, #B22222 0%, #800000 100%);
  33. /*filter:progid:DXImageTransform.Mic.social_icrosoft.gradient(startColorstr='#B22222', endColorstr='#800000', GradientType=0);*/
  34.  
  35. margin:0;
  36. box-shadow:inset 0 0 15px rgba(0, 0, 0, 0.6);
  37. }
  38.  
  39.  
  40.  
  41.  
  42.  
  43. #cushion {
  44.  
  45. display:block;
  46. position:relative;
  47. margin:6px auto 0 auto;
  48. width:220px;
  49. height:482px;
  50. border:10px solid #A0522D;
  51. border-radius:70px;
  52.  
  53. box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.25);
  54. ;
  55.  
  56. }
  57.  
  58.  
  59. #crapsTable {
  60. display:block;
  61. position:relative;
  62. margin:0 auto;
  63. width:200px;
  64. height:462px;
  65. padding:0;
  66. top:0;
  67. background-color:green;
  68. border:10px solid #4C2715;
  69. border-radius:60px;
  70. z-index:1;
  71. }
  72.  
  73. #crapsTable svg#jewl {
  74. position:absolute;
  75. stroke: red;
  76. stroke-width:8;
  77. fill:blue;
  78. z-index:1;
  79. }
  80.  
  81. #felt {
  82. position:relative;
  83. margin:0;
  84. z-index:2;
  85. }
  86.  
  87. #tableEnd {
  88. width:220px;
  89. margin:0;
  90. }
  91.  
  92. #tableEnd p {
  93. font-family:serif;
  94. font-size:14px;
  95. font-weight:lighter;
  96. text:align:left;
  97. color:#EDC39E;
  98. letter-spacing:1px;
  99. }
  100.  
  101. #tableEnd p strong {color:#EB8;}
  102.  
  103.  
  104. #rake {
  105. display:none;
  106. position:absolute;
  107. margin:0 auto;
  108. width:100px;
  109. height:170px;
  110. margin:0;
  111. padding:0;
  112. left:50px;
  113. top:423px;
  114. }
  115.  
  116. #rake svg#raake {
  117. width:100px;
  118. height:170px;
  119. fill:none;
  120. stroke:#282828;
  121. stroke-width:5;
  122. }
  123.  
  124.  
  125. .pair {
  126.  
  127. position:relative;
  128. display:block;
  129. box-sizing:border-box;
  130. padding:0;
  131. width:30px;
  132. height:30px;
  133. border-radius:5px;
  134. z-index:2;
  135. background-color:#FFF;
  136. }
  137.  
  138. .pair svg {
  139.  
  140. position:relative;
  141. display:block;
  142. margin:0 auto;
  143. height:30px;
  144. width:30px;
  145. background-color:#FFF;
  146. border-radius:5px;
  147. fill:#ec7677;
  148.  
  149. }
  150.  
  151.  
  152. svg#A1,svg#A2,svg#A3,svg#A4,svg#A5,svg#A6,
  153. svg#B1,svg#B2,svg#B3,svg#B4,svg#B5,svg#B6 {display:none;fill:#ec7677;}
  154.  
  155.  
  156. #die1 {float:left;margin-left:50px;top:432px;}
  157. #die1 svg {fill:#ec7677;}
  158. #die2 {float:right;margin-right:50px;top:432px;}
  159. #die2 svg {fill:#ec7677;}
  160.  
  161.  
  162.  
  163.  
  164.  
  165. #btn {
  166. position:relative;
  167. display:block;
  168. margin:20px auto;
  169. width:60px;
  170. text-align:center;
  171. background-color:#008080;
  172. border:1px solid #008080;
  173. border-radius:3px;
  174. padding:4px 0;
  175. color:#FFF;
  176. font-family: 'Arial', Helvetica, Sans-Serif;
  177. font-size:14px;
  178. font-weight:300;
  179. text-decoration:none;
  180. top:0px;
  181. letter-spacing:2px;
  182. box-shadow:0px 0px 2px 2px cyan;
  183. top:10px;
  184. }
  185.  
  186. #btn:hover {color:cyan;}
  187. #btn:active {
  188. box-shadow:0px 0px 3px 3px cyan, 0px 0px 2px 2px lime;
  189. color:#FFF;}
  190.  
  191. </style>
  192.  
  193.  
  194. <script>
  195.  
  196. var letters = new Array('A','B');
  197. stopSpin = 'stopped';
  198.  
  199.  
  200. function loadDiceHaHa(){
  201.  
  202. var cubeData = new Array();
  203.  
  204. for(i = 0; i < 2; i++){
  205.  
  206. var letter = letters[i];
  207. var randNum = Math.floor((Math.random()*6)+1);
  208.  
  209. cubeData[i] = letter+randNum;
  210.  
  211. var cube = cubeData[i];
  212.  
  213. document.getElementById(cube).style.setProperty('display','block');
  214. }
  215. cube1 = cubeData[0];
  216. cube2 = cubeData[1];
  217.  
  218. }
  219.  
  220.  
  221.  
  222.  
  223. function tossDice(){
  224.  
  225. if(stopSpin == 'stopped'){
  226. toss = 0;
  227. xTravel = 0;
  228. oldDegree = 0;
  229. stopSpin = setInterval(rollDice,0010);
  230. }
  231. else {return;}
  232. }
  233.  
  234.  
  235.  
  236.  
  237. function resetDice(){
  238.  
  239. document.getElementById('rake').style.setProperty('display','block');
  240.  
  241. rakePath = 0;
  242. stopRake = setInterval(rakeDice,0020);
  243.  
  244. }
  245.  
  246. function rakeDice(){
  247.  
  248. if(rakePath > -430){
  249. var r = 'translateY('+rakePath+'px)';
  250. document.getElementById('raake').style.transform=r;
  251. rakePath = rakePath - 6;
  252. }
  253. else{
  254. clearInterval(stopRake);
  255. stopReset = setInterval(rollBack,0020);
  256.  
  257. }
  258. }
  259.  
  260.  
  261.  
  262.  
  263.  
  264. function rollBack() {
  265.  
  266. if(toss <= 0){
  267.  
  268. for(i = 1; i < 3;i++){
  269.  
  270. if(i < 2){var sideWays = xTravel;}
  271. else{
  272.  
  273. var sideWays = -xTravel;
  274. var r = 'translateY('+rakePath+'px)';
  275. document.getElementById('raake').style.transform=r;
  276. rakePath = rakePath + 6;
  277. }
  278.  
  279. var m = 'matrix(1,0,0,1,'+sideWays+','+toss+')';
  280.  
  281.  
  282.  
  283. var die = 'die'+ i;
  284.  
  285. document.getElementById(die).style.transform=m;
  286.  
  287. }
  288. toss = toss + 6;
  289. }
  290. else {
  291. clearInterval(stopReset);
  292. stopSpin='stopped';
  293. document.getElementById('rake').style.setProperty('display','none');
  294.  
  295. }
  296. }
  297.  
  298.  
  299. function rollDice(){
  300.  
  301. var oldCubes = new Array();
  302. oldCubes[0] = cube1;
  303. oldCubes[1] = cube2;
  304.  
  305. var cubeData = new Array();
  306. var degree = parseInt(+oldDegree + 5);
  307. toss = toss - 6;
  308. xTravel = xTravel + 1;
  309.  
  310. if(degree > 360){clearInterval(stopSpin);setTimeout(resetDice,0600);}
  311.  
  312. else{
  313.  
  314.  
  315. for(i = 0; i < 2; i++){
  316.  
  317.  
  318. if(i > 0){var sideWays = -xTravel;}
  319. else{var sideWays = xTravel;}
  320.  
  321. var rot = 'matrix(1,0,0,1,'+sideWays+','+toss+') rotate('+degree+'deg)';
  322.  
  323. var randNum = Math.floor((Math.random()*6)+1);
  324.  
  325. cubeData[i] = letters[i]+randNum;
  326.  
  327. var cube = cubeData[i];
  328. var oldCube = oldCubes[i];
  329. var die = 'die' + (i+1);
  330.  
  331. document.getElementById(oldCube).style.setProperty('display','none');
  332. document.getElementById(cube).style.setProperty('display','block');
  333. document.getElementById(die).style.transform=rot;
  334. }
  335.  
  336. cube1 = cubeData[0];
  337. cube2 = cubeData[1];
  338. oldDegree = degree;
  339.  
  340. }
  341. }
  342.  
  343. </script>
  344.  
  345.  
  346.  
  347. </head>
  348. <body onload="loadDiceHaHa()">
  349.  
  350. <div id="canvass">
  351.  
  352. <div id="cushion">
  353.  
  354. <div id="crapsTable">
  355.  
  356. <svg id="jewl" width="200px" height="462px" viewBox="0 0 200 462">
  357.  
  358. <defs>
  359. <pattern id="diamond" width="200px" height="462px" patternUnits="userSpaceOnUse">
  360.  
  361. <polyline points="100,20 180,231 100,442 20,231 100,20 180,231">
  362. </polyline>
  363. </pattern>
  364.  
  365. <pattern id="facet1" width="200px" height="462px" patternUnits="userSpaceOnUse">
  366.  
  367. <polyline style="fill:lime;stroke-width:0;" points="100,95 150,231 100,367 50,231 100,95 150,231">
  368. </polyline>
  369. </pattern>
  370.  
  371. <pattern id="outline" width="200px" height="462px" patternUnits="userSpaceOnUse">
  372. <polyline style="fill:transparent;stroke-width:3;stroke:#EB8;" points="100,145 130,231 100,317 70,231 100,145 130,231">
  373. </polyline>
  374. </pattern>
  375.  
  376. </defs>
  377.  
  378. <rect id="outlay" x="0" y="0" rx="5" ry="5" width="200" height="462" stroke-width="0" fill="url(#diamond)" />
  379.  
  380. <rect id="outlay" x="0" y="0" rx="5" ry="5" width="200" height="462" stroke-width="0" fill="url(#facet1)" />
  381.  
  382. <rect id="outlay" x="0" y="0" rx="5" ry="5" width="200" height="462" stroke-width="0" fill="url(#outline)" />
  383.  
  384.  
  385. </svg>
  386.  
  387. <div id="felt">
  388.  
  389.  
  390.  
  391. <div id="rake">
  392.  
  393. <svg id="raake" width="100" height="170" viewBox="0 0 100 170">
  394. <polyline points="0,0 100,0 50,0 50,170 52,170 52,150 48,150 48,170 52,170">
  395.  
  396. </polyline>
  397. </svg>
  398.  
  399. </div>
  400.  
  401.  
  402.  
  403.  
  404.  
  405. <div class="pair" id="die1">
  406.  
  407.  
  408. <svg id="A1">
  409. <defs>
  410. <pattern id="onedot" width="1" height="1" patternContentUnits="objectBoundingBox">
  411. <circle cx=".50" cy=".50" r=".1" fill="#ec7677" />
  412. </pattern>
  413. </defs>
  414. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#onedot)" />
  415. </svg>
  416.  
  417. <svg id="A2">
  418.  
  419. <defs>
  420. <pattern id="twodots" width="1" height="1" patternContentUnits="objectBoundingBox">
  421. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  422. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  423. </pattern>
  424. </defs>
  425. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#twodots)" />
  426. </svg>
  427.  
  428.  
  429.  
  430.  
  431. <svg id="A3">
  432. <defs>
  433. <pattern id="threedots" width="1" height=".33" patternContentUnits="objectBoundingBox">
  434. <circle cx=".50" cy=".165" r=".1" fill="#ec7677" />
  435. </pattern>
  436. </defs>
  437. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#33333" stroke-width="1" fill="url(#threedots)" />
  438. </svg>
  439.  
  440.  
  441.  
  442. <svg id="A4">
  443. <defs>
  444. <pattern id="fourdots" width=".50" height=".50" patternContentUnits="objectBoundingBox">
  445. <circle cx=".250" cy=".250" r=".1" fill="#ec7677" />
  446. </pattern>
  447. </defs>
  448. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#fourdots)" />
  449. </svg>
  450.  
  451. <svg id="A5">
  452. <defs>
  453. <pattern id="fivedots" width="1" height="1" patternContentUnits="objectBoundingBox">
  454. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  455. <circle cx=".75" cy=".25" r=".1" fill="#ec7677" />
  456. <circle cx=".5" cy=".5" r=".1" fill="#ec7677" />
  457. <circle cx=".25" cy=".75" r=".1" fill="#ec7677" />
  458. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  459. </pattern>
  460. </defs>
  461.  
  462. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#fivedots)" />
  463.  
  464. </svg>
  465.  
  466.  
  467.  
  468.  
  469. <svg id="A6">
  470. <defs>
  471. <pattern id="sixdots" width=".50" height=".33" patternContentUnits="objectBoundingBox">
  472. <circle cx=".250" cy=".165" r=".1" fill="#ec7677" />
  473. </pattern>
  474. </defs>
  475. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#sixdots)" />
  476. </svg>
  477.  
  478.  
  479. </div>
  480.  
  481.  
  482.  
  483.  
  484.  
  485.  
  486. <div class="pair" id="die2">
  487.  
  488. <svg id="B1">
  489. <defs>
  490. <pattern id="1dot" width="1" height="1" patternContentUnits="objectBoundingBox">
  491. <circle cx=".50" cy=".50" r=".1" fill="#ec7677" />
  492. </pattern>
  493. </defs>
  494. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#1dot)" />
  495. </svg>
  496.  
  497.  
  498.  
  499. <svg id="B2">
  500. <defs>
  501. <pattern id="2dots" width="1" height="1" patternContentUnits="objectBoundingBox">
  502. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  503. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  504. </pattern>
  505. </defs>
  506. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#2dots)" />
  507. </svg>
  508.  
  509. <svg id="B3">
  510. <defs>
  511. <pattern id="3dots" width="1" height=".33" patternContentUnits="objectBoundingBox">
  512. <circle cx=".50" cy=".165" r=".1" fill="#ec7677" />
  513. </pattern>
  514. </defs>
  515. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#33333" stroke-width="1" fill="url(#3dots)" />
  516. </svg>
  517.  
  518.  
  519.  
  520. <svg id="B4">
  521. <defs>
  522. <pattern id="4dots" width=".50" height=".50" patternContentUnits="objectBoundingBox">
  523. <circle cx=".250" cy=".250" r=".1" fill="#ec7677" />
  524. </pattern>
  525. </defs>
  526. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#4dots)" />
  527. </svg>
  528.  
  529. <svg id="B5">
  530. <defs>
  531. <pattern id="5dots" width="1" height="1" patternContentUnits="objectBoundingBox">
  532. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  533. <circle cx=".75" cy=".25" r=".1" fill="#ec7677" />
  534. <circle cx=".5" cy=".5" r=".1" fill="#ec7677" />
  535. <circle cx=".25" cy=".75" r=".1" fill="#ec7677" />
  536. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  537. </pattern>
  538. </defs>
  539.  
  540. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#5dots)" />
  541.  
  542. </svg>
  543.  
  544.  
  545.  
  546.  
  547. <svg id="B6">
  548. <defs>
  549. <pattern id="6dots" width=".50" height=".33" patternContentUnits="objectBoundingBox">
  550. <circle cx=".250" cy=".165" r=".1" fill="#ec7677" />
  551. </pattern>
  552. </defs>
  553. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#6dots)" />
  554. </svg>
  555.  
  556.  
  557. </div>
  558. </div>
  559.  
  560. </div>
  561. <div id="tableEnd">
  562. <button id="btn" onclick="tossDice()">TOSS</button>
  563. <p>To day shalt thou be with me in paradise. <strong>Lu 23:43</strong></p>
  564. </div>
  565. </div>
  566. </div>
  567.  
  568. </body>
  569. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!