vulbyteDotCom/\ at main · vulbyte/vulbyteDotCom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="module" src="/client_management.js"></script>
</head>

<body>
	<h2>WARNING: this site works but the meme behind it broke when converting the site, remind me about it lol</h2>
	<style>
		.gridContainer {
			aspect-ratio: 1/1;
			border: 1px solid yellow;
			font-size: 70%;
			margin: auto;
			width: 100%;
			max-width: 80%;
		}


		.gridContainer>* {
			/*max-width: 5em;*/
		}

		.checkerGrid {
			display: grid;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
			/*minmax(8em,1fr)*/
			);
			padding: 1em;
			word-break: unset;
			word-spacing: 4px;
		}

		.checkerGrid>div {
			max-width: auto;
		}

		.checkerGrid>div:nth-child(2n+1) {
			background-color: #333;
		}
	</style>

	<div>
		<p style="width:80%; margin:auto;">
			this is a joke thing that i made in like 15 minutes when talking to a friend. it's a quick little bingo card
			that was meant to joking poke fun at he dispicable me 4 trailer. tho sadly this can probably be applied to a lot
			more then just the minions lol
		</p>
		<div style="width:80%; margin:auto;">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/qQlr9-rF32A?si=cT6_IpMzdKDUBZno"
				title="YouTube video player" frameBorder="0" allow="accelerometer;
        autoplay;
        clipboard-write;
        encrypted-media; gyroscope;
        picture-in-picture; web-share"></iframe>
			<br />
			<p>
				the grid is also randomly refreshed every page reload, try it out!
			</p>
		</div>
		<div id="gridContainer"><!-- THIS IS WHERE THE GRID GO --></div>
		<p style="margin:auto; width:80%;">
			please note, the grid matching the colors of gru's scarf was dumb luck, but it works so i'm keeping it anyways.
		</p>
		<br />
	</div>
	<script>
		// TODO: fix scaling when fullscreened
		//import Navbar from "@/components/navbar";
		//import "./checkerGrid.css";


		console.log('GENERATING BINGO');

		const guesses = [
			"free space (rng is intentional)",
			"popular / cliche music",
			"there's a new character because sequal",
			"all was good until...",
			"minions are ~30% of the ad",
			"is hiding being bad from wifu",
			"repeating a previously done plotline",
			"hahaha fart joke (tldr potty humor)",
			"character thought to be dead is back",
			"pandering to meme culture",
			"big actor is x",
			"ends with TITLE like it's a surprise dispite being the 4th part",
			"main character is slightly different to show they have aged (but not in a way like hair or wrinkles, just a new scarf (or some shit) ",
			"love / attention triangle",
			"joke characters ruin any tnerHTML",
			"rapid cut away from a moment for a joke",
			"nostolgia pandering (bringing something back and showing it off for hype",
			"previous events are mostly / completely ignored minus characters being around",
			"minions screaming / slapstick at studio advertisement / banner",
			"no notiable changes to the enviornment because reasons",
			"clear toy bait (buy my marketable plushie)",
			"some previous big characters (like a lost brother) are now just missing again",
			"annoying pop culture reference (omg is that talletless hack simon coward from the x factor!!?!?!)",
			"fladerization of characters",
			"young character being obsessed with social media / self image",
		];

		function shuffle(array) {
			let currentIndex = array.length,
				randomIndex;

			// While there remain elements to shuffle.
			while (currentIndex > 0) {
				// Pick a remaining element.
				randomIndex = Math.floor(Math.random() * currentIndex);
				currentIndex--;

				// And swap it with the current element.
				[array[currentIndex], array[randomIndex]] = [
					array[randomIndex],
					array[currentIndex],
				];
			}

			return array;
		}

		shuffle(guesses);

		console.log('guesses:', guesses);

		const bingo_html = document.createElement('div');
		bingo_html.className = 'checkerGrid';

		function Generate_Tiles(guesses) {
			for (let i = 0; i < guesses.length; ++i) {
				console.log('creating tile');
				let container = document.createElement('div');
				container.id = `bingo_tile${i}`
				container.className = 'bingo_tile';
				container.innerText = guesses[i];

				container.addEventListener('click', (e) => {
					console.log('click event happend');
					if (document.getElementById(`bingo_tile${i}`) == tranparent) {
						document.getElementById(`bingo_tile${i}`).style.background = 'white';
						document.getElementById(`bingo_tile${i}`).style.color = 'black';
					}
					else {
						document.getElementById(`bingo_tile${i}`).style.background = 'transparent';
						document.getElementById(`bingo_tile${i}`).style.color = 'white';
					}
				});

				bingo_html.appendChild(container);
			}
		}

		Generate_Tiles(guesses);


		console.log('BINGO HTML', bingo_html);

		document.getElementById("gridContainer").appendChild(bingo_html);
	</script>
</body>

</html>