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
// This val creates a movie guessing game using the TMDB API.
// We'll fetch random movies from different years, present them to the user, and check their guesses.
// Tradeoffs: We're using a free API with authentication for better data variety.
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"
import { blob } from "https://esm.town/v/std/blob"
const TMDB_API_BASE = "https://api.themoviedb.org/3"
const TMDB_IMAGE_BASE = "https://image.tmdb.org/t/p/w200"
const headers = {
Authorization: `Bearer ${Deno.env.get("TMDB_API_KEY")}`,
}
async function fetchRandomMovies() {
const currentYear = new Date().getFullYear()
const movies = []
let chosen = new Set()
for (let i = 0; i < 5; i++) {
let year = Math.floor(Math.random() * (currentYear - 1940 + 1)) + 1940
while (chosen.has(year)) {
year = Math.floor(Math.random() * (currentYear - 1940 + 1)) + 1940
}
chosen.add(year)
const response = await fetch(
`${TMDB_API_BASE}/discover/movie?language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&primary_release_year=${year}`,
{ headers },
)
const data = await response.json()
if (data.results.length > 0) {
movies.push(data.results[0])
}
}
return movies
}
function generateQuizHTML(movies, uuid) {
const currentYear = new Date().getFullYear()
return `
<html>
<head>
<title>Movie Release Year Quiz</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
form { display: flex; flex-direction: column; gap: 20px; }
.movie-container { display: flex; align-items: center; gap: 20px; }
.movie-info { flex-grow: 1; }
.slider-container { display: flex; align-items: center; gap: 10px; }
input[type="range"] { width: 200px; }
input[type="number"] { width: 60px; }
.footer { margin-top: 20px; font-size: 0.8em; text-align: center; }
</style>
<script>
function updateInputs(index, value) {
document.getElementById('guess' + index).value = value;
document.getElementById('guessInput' + index).value = value;
}
</script>
</head>
<body>
<h1>Guess the Movie Release Years!</h1>
<form method="POST">
<input type="hidden" name="uuid" value="${uuid}">
${
movies.map((movie, index) => `
<div class="movie-container">
<img src="${TMDB_IMAGE_BASE}${movie.poster_path}" alt="${movie.title}" style="width: 100px;">
<div class="movie-info">
<h3>${movie.title}</h3>
<div class="slider-container">
<input type="range" id="guess${index}" name="guess${index}" min="1940" max="${currentYear}" value="2000" oninput="updateInputs(${index}, this.value)">
<input type="number" id="guessInput${index}" min="1940" max="${currentYear}" value="2000" oninput="updateInputs(${index}, this.value)">
</div>
</div>
</div>
`).join("")
}
<button type="submit">Submit Guesses</button>
</form>
<p><a href="/all-guesses">View All Guesses</a></p>
<div class="footer">
This product uses the TMDB API but is not endorsed or certified by TMDB.
<br>
<a href="https://www.themoviedb.org/" target="_blank">
<img src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_short-8e7b30f73a4020692ccca9c88bafe5dcb6f8a62a4c6bc55cd9ba82bb2cd95f6c.svg" alt="TMDB Logo" style="width: 100px; margin-top: 10px;">
</a>
</div>
</body>
</html>
`
}
function calculateScore(movies, guesses) {
return movies.reduce((score, movie, index) => {
const actualYear = new Date(movie.release_date).getFullYear()
const guessedYear = parseInt(guesses[index])
const difference = Math.abs(actualYear - guessedYear)
if (difference === 0) return score + 3
if (difference <= 10) return score + 1
return score