Twitter Winner Picker

69 |

73 | {chunk.map((item, index) => ( 74 |

75 |

76 |

77 |

78 | {item.username} 79 |

80 |

@{item.handle}

81 |

82 |

86 |

87 |

88 | ))} 89 |

94 |

95 |

96 | )); 97 | }; 98 | 99 | return <>{renderWheels()}; 100 | }; 101 | 102 | export default Wheel; 103 | -------------------------------------------------------------------------------- /src/components/wheel/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --wheel-font: 'Lato', 'Quicksand', sans-serif; 3 | --wheel-size: 800px; 4 | --wheel-slice-spacing: 50px; 5 | --wheel-border-size: 5px; 6 | --wheel-color: #3a3a3a; 7 | --neutral-color: white; 8 | --PI: 3.14159265358979; 9 | --nb-item: 0; 10 | --item-nb: 0; 11 | --selected-item: 0; 12 | --nb-turn: 2; 13 | --spinning-duration: 20s; 14 | --reset-duration: 0.25s; 15 | } 16 | 17 | .wheel-container { 18 | display: block; 19 | position: absolute; 20 | box-sizing: content-box; 21 | width: calc(var(--wheel-size) + 2 * var(--wheel-border-size)); 22 | height: calc(var(--wheel-size) + 2 * var(--wheel-border-size)); 23 | padding: 3px; 24 | margin: auto; 25 | border-radius: 50%; 26 | user-select: none; 27 | transition: opacity 0.3s; 28 | } 29 | 30 | .wheel-container::before, 31 | .wheel-container::after { 32 | content: ''; 33 | display: block; 34 | position: absolute; 35 | height: 0; 36 | width: 0; 37 | top: 50%; 38 | transform: translateY(-50%); 39 | z-index: 2; 40 | border: solid transparent 20px; 41 | border-left-width: 0; 42 | } 43 | 44 | .wheel-container::before { 45 | right: 0px; 46 | border-right-color: inherit; 47 | } 48 | 49 | .wheel-container::after { 50 | right: -5px; 51 | border-right-color: var(--neutral-color); 52 | } 53 | 54 | .wheel { 55 | display: block; 56 | position: relative; 57 | box-sizing: content-box; 58 | margin: auto; 59 | width: var(--wheel-size); 60 | height: var(--wheel-size); 61 | overflow: hidden; 62 | border-radius: 50%; 63 | background-color: var(--wheel-color); 64 | transition: transform var(--reset-duration); 65 | transform: rotate(0deg); 66 | } 67 | 68 | .wheel.spinning { 69 | transition: transform var(--spinning-duration); 70 | transform: rotate( 71 | calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))) 72 | ); 73 | } 74 | 75 | .wheel-middle { 76 | width: 100px; 77 | height: 100px; 78 | border-radius: 50%; 79 | position: absolute; 80 | left: 50%; 81 | top: 50%; 82 | z-index: 10; 83 | border: 10px solid var(--wheel-color); 84 | cursor: pointer; 85 | margin-left: -60px; 86 | margin-top: -60px; 87 | background-color: white; 88 | } 89 | 90 | .wheel::after { 91 | display: block; 92 | position: absolute; 93 | content: ''; 94 | background-color: var(--neutral-color); 95 | width: 25px; 96 | height: 25px; 97 | z-index: 2; 98 | top: 50%; 99 | left: 50%; 100 | transform: translate(-50%, -50%); 101 | border-radius: 50%; 102 | } 103 | 104 | .wheel-item { 105 | display: block; 106 | position: absolute; 107 | box-sizing: border-box; 108 | top: 50%; 109 | left: 50%; 110 | width: 50%; 111 | transform-origin: center left; 112 | transform: translateY(-50%) rotate(calc(var(--item-nb) * (360deg / var(--nb-item, 1)))); 113 | color: var(--neutral-color); 114 | text-align: right; 115 | padding: 0 25px 0 50px; 116 | font-family: var(--wheel-font); 117 | } 118 | 119 | .wheel-item:before { 120 | content: ' '; 121 | display: block; 122 | position: absolute; 123 | box-sizing: border-box; 124 | z-index: -1; 125 | width: 0; 126 | height: 0; 127 | top: 50%; 128 | left: 50%; 129 | transform: translate(-50%, -50%); 130 | padding-left: 0px; 131 | opacity: 0.25; 132 | 133 | --slice-max-width: calc(var(--PI) * var(--wheel-size) + var(--wheel-size) / 2); 134 | --slice-width: calc((var(--slice-max-width) / var(--nb-item)) - var(--wheel-slice-spacing)); 135 | border: solid transparent calc(var(--slice-width) / 2); 136 | border-left: solid transparent 0; 137 | 138 | border-right: solid var(--neutral-color) calc(var(--wheel-size) / 2); 139 | } 140 | 141 | .wheel-item-container { 142 | width: 70%; 143 | margin-left: 30%; 144 | display: flex; 145 | align-items: center; 146 | } 147 | 148 | .wheel-item-image { 149 | width: 30%; 150 | padding-bottom: 30%; 151 | border-radius: 50%; 152 | background-size: cover; 153 | background-position: center; 154 | } 155 | 156 | .wheel-item-text { 157 | width: 60%; 158 | margin-right: 25px; 159 | } 160 | 161 | .wheel-item-text div { 162 | width: 100%; 163 | } 164 | -------------------------------------------------------------------------------- /node/fetchParticipants.ts: -------------------------------------------------------------------------------- 1 | import TwitterClient from 'twitter-api-client'; 2 | import fs from 'fs'; 3 | import { resolve } from 'path'; 4 | import { promisify } from 'util'; 5 | 6 | const TWEET_ID = ''; 7 | const API_KEY = ''; 8 | const API_SECRET = ''; 9 | const ACCESS_TOKEN = ''; 10 | const ACCESS_TOKEN_SECRET = ''; 11 | 12 | const twitterClient = new TwitterClient({ 13 | apiKey: API_KEY, 14 | apiSecret: API_SECRET, 15 | accessToken: ACCESS_TOKEN, 16 | accessTokenSecret: ACCESS_TOKEN_SECRET, 17 | }); 18 | 19 | const writeFile = promisify(fs.writeFile); 20 | 21 | async function init() { 22 | await writeFile(resolve(__dirname, '../src/data/users.json'), '[]'); 23 | const followers = await getFollowers(); 24 | 25 | // We loop through all the users. 26 | // To avoid hitting the rate limit, we need to go through each one-by-one. 27 | for (const follower of followers) { 28 | console.log('Evaluation:', follower); 29 | 30 | const evaluate = async () => { 31 | const liked = await didLike(follower); 32 | const retweeted = await didRetweet(follower); 33 | 34 | if (liked && retweeted) { 35 | const [user] = await twitterClient.accountsAndUsers.usersLookup({ user_id: follower }); 36 | 37 | const smallUser = { 38 | username: user.name, 39 | handle: user.screen_name, 40 | profileImage: user.profile_image_url.replace('normal', '400x400'), 41 | }; 42 | 43 | const list = require('../src/data/users.json'); 44 | list.push(smallUser); 45 | 46 | await writeFile( 47 | resolve(__dirname, '../src/data/users.json'), 48 | JSON.stringify(list, null, 2), 49 | ); 50 | } 51 | 52 | console.log('Evaluation finished. Qualified: ', liked && retweeted); 53 | }; 54 | 55 | try { 56 | await evaluate(); 57 | } catch (error) { 58 | // If we hit a rate limit, we pause for 15 minutes and continue 59 | if (error.statusCode === 429) { 60 | console.log('Rate limit exceeded. Pausing for 15 minutes.'); 61 | await new Promise((r) => setTimeout(r, 5 * 60 * 1000)); 62 | console.log('10 minutes to go...'); 63 | await new Promise((r) => setTimeout(r, 5 * 60 * 1000)); 64 | console.log('5 minutes to go...'); 65 | await new Promise((r) => setTimeout(r, 5.5 * 60 * 1000)); 66 | console.log('Continuing...'); 67 | 68 | try { 69 | await evaluate(); 70 | } catch (error) { 71 | console.log('Evalution failed. Continuing...'); 72 | } 73 | } else { 74 | console.log('Evalution failed. Continuing...'); 75 | } 76 | } 77 | 78 | console.log('----------'); 79 | 80 | await new Promise((r) => setTimeout(r, 3000)); 81 | } 82 | } 83 | 84 | /** 85 | * Get all followers 86 | * @param cursor 87 | */ 88 | async function getFollowers(cursor?: string) { 89 | const params = cursor ? { cursor } : {}; 90 | 91 | const followerRequest = await twitterClient.accountsAndUsers.followersIds({ 92 | stringify_ids: true, 93 | ...params, 94 | }); 95 | 96 | if (!followerRequest) { 97 | return []; 98 | } 99 | 100 | let followers = (followerRequest.ids as any) as string[]; 101 | 102 | if (followerRequest.next_cursor_str !== '0') { 103 | const nextFollowers = await getFollowers(followerRequest.next_cursor_str); 104 | 105 | if (nextFollowers) { 106 | followers = [...followers, ...nextFollowers]; 107 | } 108 | } 109 | 110 | return followers; 111 | } 112 | 113 | /** 114 | * Returns true if the user liked the tweet 115 | * @param userID 116 | */ 117 | async function didLike(userID: string) { 118 | const likes = await twitterClient.tweets.favoritesList({ 119 | user_id: userID, 120 | max_id: TWEET_ID, 121 | count: 1, 122 | }); 123 | 124 | const [like] = likes; 125 | 126 | return like?.id_str === TWEET_ID; 127 | } 128 | 129 | /** 130 | * Return true if the user retweetet the tweet 131 | * @param userID 132 | */ 133 | async function didRetweet(userID: string) { 134 | const retweets = await twitterClient.tweets.statusesUserTimeline({ 135 | user_id: userID, 136 | count: 200, 137 | include_rts: true, 138 | exclude_replies: true, 139 | }); 140 | 141 | const isQuoted = retweets.some((rt) => rt.quoted_status?.id_str === TWEET_ID); 142 | const isRetweeted = retweets.some((rt) => rt.retweeted_status?.id_str === TWEET_ID); 143 | 144 | return isQuoted || isRetweeted; 145 | } 146 | 147 | init(); 148 | -------------------------------------------------------------------------------- /public/confetti.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | window.addEventListener('load', function () { 4 | var canvas = document.getElementById('canvas'); 5 | 6 | if (!canvas || !canvas.getContext) { 7 | return false; 8 | } 9 | 10 | /******************** 11 | Random Number 12 | ********************/ 13 | 14 | function rand(min, max) { 15 | return Math.floor(Math.random() * (max - min + 1) + min); 16 | } 17 | 18 | /******************** 19 | Var 20 | ********************/ 21 | 22 | var ctx = canvas.getContext('2d'); 23 | var X = (canvas.width = window.innerWidth); 24 | var Y = (canvas.height = window.innerHeight); 25 | var mouseX = X / 2; 26 | var mouseY = Y / 2; 27 | var shapes = []; 28 | var shapeNum = 1000; 29 | var xNum = 2; 30 | var yNum = 5; 31 | 32 | if (X < 768) { 33 | shapeNum = 500; 34 | xNum = 1; 35 | yNum = 4; 36 | } 37 | 38 | /******************** 39 | Animation 40 | ********************/ 41 | 42 | window.requestAnimationFrame = 43 | window.requestAnimationFrame || 44 | window.mozRequestAnimationFrame || 45 | window.webkitRequestAnimationFrame || 46 | window.msRequestAnimationFrame || 47 | function (cb) { 48 | setTimeout(cb, 17); 49 | }; 50 | 51 | /******************** 52 | Shape 53 | ********************/ 54 | 55 | function Shape(ctx, x, y) { 56 | this.ctx = ctx; 57 | this.init(x, y); 58 | } 59 | 60 | Shape.prototype.init = function (x, y) { 61 | this.x = x; 62 | this.y = y; 63 | this.r = 1; 64 | this.c = rand(0, 360); 65 | this.a = rand(0, 360); 66 | this.rad = (this.a * Math.PI) / 180; 67 | this.inA = Math.random(); 68 | this.inR = Math.random() * Math.random() * Math.random(); 69 | this.v = { 70 | x: Math.sin(this.rad) * xNum, 71 | y: Math.cos(this.rad) * yNum, 72 | }; 73 | this.ga = Math.random(); 74 | }; 75 | 76 | Shape.prototype.draw = function () { 77 | var ctx = this.ctx; 78 | ctx.save(); 79 | ctx.fillStyle = 'hsl(' + this.c + ', ' + '80%, 80%)'; 80 | ctx.globalCompositeOperation = 'xor'; 81 | ctx.globalAlpha = this.ga; 82 | ctx.translate(this.x + this.r / 2, this.y + this.r / 2); 83 | ctx.rotate(this.rad * 1.5); 84 | ctx.scale(Math.sin(this.rad), Math.cos(this.rad)); 85 | ctx.translate(-this.x - this.r / 2, -this.y - this.r / 2); 86 | ctx.beginPath(); 87 | ctx.rect(this.x, this.y, this.r, this.r); 88 | ctx.fill(); 89 | ctx.restore(); 90 | }; 91 | 92 | Shape.prototype.resize = function () { 93 | this.x = X / 2; 94 | this.y = Y / 2; 95 | }; 96 | 97 | Shape.prototype.updatePosition = function () { 98 | this.v.y += 0.01; 99 | this.x += this.v.x; 100 | this.y += this.v.y; 101 | }; 102 | 103 | Shape.prototype.wrapPosition = function () { 104 | if (this.y - this.r > Y) { 105 | this.init(X / 2, Y / 2); 106 | } 107 | }; 108 | 109 | Shape.prototype.updateParams = function (i) { 110 | if (i % 2 === 0) { 111 | this.a += this.inA; 112 | } else { 113 | this.a -= this.inA; 114 | } 115 | this.rad = (this.a * Math.PI) / 180; 116 | this.r += this.inR; 117 | }; 118 | 119 | Shape.prototype.render = function (i) { 120 | this.updateParams(i); 121 | this.updatePosition(); 122 | this.wrapPosition(); 123 | this.draw(); 124 | }; 125 | 126 | for (var i = 0; i < 1; i++) { 127 | var s = new Shape(ctx, X / 2, Y / 2); 128 | shapes.push(s); 129 | } 130 | 131 | var clearId = setInterval(function () { 132 | var s = new Shape(ctx, X / 2, Y / 2); 133 | shapes.push(s); 134 | if (shapes.length > 1000) { 135 | clearInterval(clearId); 136 | } 137 | }, 60); 138 | 139 | /******************** 140 | Render 141 | ********************/ 142 | 143 | function render() { 144 | ctx.clearRect(0, 0, X, Y); 145 | for (var i = 0; i < shapes.length; i++) { 146 | shapes[i].render(i); 147 | } 148 | requestAnimationFrame(render); 149 | } 150 | 151 | render(); 152 | 153 | /******************** 154 | Event 155 | ********************/ 156 | 157 | function onResize() { 158 | X = canvas.width = window.innerWidth; 159 | Y = canvas.height = window.innerHeight; 160 | if (X < 768) { 161 | shapeNum = 500; 162 | xNum = 1; 163 | yNum = 4; 164 | } else { 165 | shapeNum = 1000; 166 | xNum = 2; 167 | yNum = 5; 168 | } 169 | for (var i = 0; i < shapes.length; i++) { 170 | shapes[i].resize(); 171 | } 172 | } 173 | 174 | window.addEventListener('resize', function () { 175 | onResize(); 176 | }); 177 | 178 | canvas.addEventListener( 179 | 'wheel', 180 | function (e) { 181 | for (var i = 0; i < shapes.length; i++) {} 182 | }, 183 | false, 184 | ); 185 | }); 186 | // Author 187 | console.log( 188 | 'File Name / confetti.js\nCreated Date / July 08, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo', 189 | ); 190 | })(); --------------------------------------------------------------------------------