tiresias/tool.html at develop · cwschilly/tiresias · 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
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
  <title>Tiresias — Rate & Predict</title>
  <meta name="description" content="Rate the Christopher Nolan films you've seen and Tiresias fits your personal Nolan curve, predicts your rating for The Odyssey (2026), and prophesies its Oscar haul."/>
  <link rel="canonical" href="https://willtheodysseybegood.com/tool.html"/>

  <!-- Social cards -->
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="Tiresias"/>
  <meta property="og:title" content="Rate Nolan's Films, Predict The Odyssey (2026)"/>
  <meta property="og:description" content="Tiresias fits your personal Nolan curve and predicts your rating for The Odyssey (2026)."/>
  <meta property="og:url" content="https://willtheodysseybegood.com/tool.html"/>
  <meta property="og:image" content="https://willtheodysseybegood.com/assets/og-image.png"/>
  <meta property="og:image:width" content="1200"/>
  <meta property="og:image:height" content="630"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="Rate Nolan's Films, Predict The Odyssey (2026)"/>
  <meta name="twitter:description" content="Tiresias fits your personal Nolan curve and predicts your rating for The Odyssey (2026)."/>
  <meta name="twitter:image" content="https://willtheodysseybegood.com/assets/og-image.png"/>

  <link rel="icon" type="image/svg+xml" href="assets/favicon.svg"/>
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png"/>
  <link rel="apple-touch-icon" href="assets/apple-touch-icon.png"/>
  <link rel="stylesheet" href="css/theme.css"/>
  <link rel="stylesheet" href="css/tool.css"/>
</head>
<body class="tool-page">

<div class="load-error" id="loadError"></div>

<main class="steps" id="steps">

  <!-- Step 1: rate the films -->
  <section class="step" id="stepRate">
    <div class="step-inner">
      <h1>Rate the films</h1>
      <p class="step-lede">
        Tap the stars for any Nolan film you've seen (left half = half star).
        Skip the rest. The more you rate, the better the prophecy.
        At least <strong>3 ratings</strong> are required.
      </p>
      <div class="film-grid" id="filmGrid"></div>
      <div class="min-notice" id="minNotice">
        Rate <span id="remaining">3</span> more film(s) before consulting the blind seer.
      </div>
      <button class="primary-btn" id="askBtn" disabled>Ask Tiresias</button>
    </div>
  </section>

  <!-- Step 2: alpha / beta reveal -->
  <section class="step" id="stepAlpha">
    <div class="step-inner">
      <h1>Your wackiness tolerance</h1>
      <p class="step-lede">
        Tiresias reads two things in your entrails: how much the
        <em>events</em> of a movie drive your taste (<strong>fabula, α</strong>) and how
        much the <em>telling</em> does (<strong>syuzhet, β</strong>).
      </p>
      <p class="blog-nudge">
        If you have no idea what these words mean, you
        <a href="https://open.substack.com/pub/calebschilly/p/will-the-odyssey-be-any-good?r=ey3c2&utm_campaign=post-expanded-share&utm_medium=web"
           target="_blank" rel="noopener">haven't read the blog</a>.
      </p>
      <div class="alpha-figures">
        <div class="alpha-figure">
          <div class="alpha-value" id="alphaValue"></div>
          <div class="alpha-name">α · fabula</div>
        </div>
        <div class="alpha-figure">
          <div class="alpha-value" id="betaValue"></div>
          <div class="alpha-name">β · syuzhet</div>
        </div>
      </div>
      <div class="alpha-bar"><div class="alpha-bar-fill" id="alphaBarFill"></div></div>
      <p class="wit-line" id="alphaWit"></p>
      <div class="step-nav">
        <button class="ghost-btn" data-nav="back">Back</button>
        <button class="primary-btn" data-nav="next">See the augeries</button>
      </div>
    </div>
  </section>

  <!-- Step 3: scatter -->
  <section class="step" id="stepScatter">
    <div class="step-inner">
      <h1>Your Nolan curve</h1>
      <p class="step-lede">
        Every film you rated plotted against its <strong>wackiness</strong>
        (fabula and syuzhet aggregated according to your weights).
      </p>
      <svg class="chart" id="scatterChart" role="img"
           aria-label="Your ratings plotted against personal wackiness"></svg>
      <div class="step-nav">
        <button class="ghost-btn" data-nav="back">Back</button>
        <button class="primary-btn" data-nav="next">Fit the data</button>
      </div>
    </div>
  </section>

  <!-- Step 4: fit -->
  <section class="step" id="stepFit">
    <div class="step-inner">
      <h1>The vision emerges</h1>
      <p class="step-lede" id="fitSummary"></p>
      <svg class="chart" id="fitChart" role="img"
           aria-label="Your ratings with the fitted curve"></svg>
      <p class="wit-line" id="fitWit"></p>
      <div class="step-nav">
        <button class="ghost-btn" data-nav="back">Back</button>
        <button class="primary-btn" data-nav="next">Will I like The Odyssey?</button>
      </div>
    </div>
  </section>

  <!-- Step 5: The Odyssey -->
  <section class="step" id="stepOdyssey">
    <div class="step-inner">
      <h1>The Odyssey <span class="year">(2026)</span></h1>
      <p class="step-lede">
        The sliders start at your ideal scores for fabula and syuzhet.
        Drag them around to see how you'll like The Odyssey at different
        degrees of insanity.
      </p>

      <div class="slider-block">
        <label for="fabulaSlider">
          fabula craziness (the events) <span class="slider-value" id="fabulaValue"></span>
        </label>
        <input type="range" id="fabulaSlider" min="0" max="10" step="0.1"/>
        <label for="syuzhetSlider">
          syuzhet craziness (the telling) <span class="slider-value" id="syuzhetValue"></span>
        </label>
        <input type="range" id="syuzhetSlider" min="0" max="10" step="0.1"/>
      </div>

      <div class="verdict">
        <div class="big-rating" id="bigRating"></div>
        <div class="stars-display" id="starsDisplay"></div>
        <div class="prophecy" id="prophecy"></div>
        <div class="oscar-prophecy" id="oscarProphecy"></div>
      </div>

      <div class="step-nav">
        <button class="ghost-btn" data-nav="back">Back</button>
        <button class="ghost-btn" id="startOverBtn">Start over</button>
        <button class="primary-btn" id="shareBtn">Share my results</button>
      </div>
    </div>
  </section>

</main>

<!-- Share modal: preview of the story card + whichever share paths this browser supports -->
<div class="share-modal" id="shareModal" hidden>
  <div class="share-backdrop" data-share-close></div>
  <div class="share-panel">
    <button class="share-close" data-share-close aria-label="Close">&times;</button>
    <img class="share-preview" id="sharePreview" alt="Your Tiresias prophecy card"/>
    <div class="share-actions">
      <button class="primary-btn" id="shareNativeBtn" hidden>Share</button>
      <button class="ghost-btn" id="shareCopyBtn" hidden>Copy image</button>
      <button class="ghost-btn" id="shareDownloadBtn">Download</button>
    </div>
    <p class="share-status" id="shareStatus"></p>
  </div>
</div>

<script type="module" src="js/tool.js"></script>
</body>
</html>