-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
553 lines (528 loc) · 29.9 KB
/
index.html
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stardew Friendship</title>
<meta name="author" content="Kate Keefe">
<meta name="description" content="Good debt vs bad debt, credit cards website for economics class">
<link rel="icon" href="./media/stardrop.png">
<!-- Styles -->
<link href="./styles/page.css" rel="stylesheet"/>
<link href="./styles/sections.css" rel="stylesheet"/>
<link href="./styles/base.css" rel="stylesheet"/>
<link href="./styles/misc.css" rel="stylesheet"/>
<link href="./styles/flip-card.css" rel="stylesheet"/>
<!-- Scripts -->
<script src="https://www.desmos.com/api/v1.5/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<!-- PrismJS -->
<link href="prism/prism.css" rel="stylesheet"/>
<script src="prism/prism.js"></script>
</head>
<body>
<div id="pageBackground">
<div id="preHeader">
<div class="full">
<h1>Stardew Friendship</h1>
<h3>A website built to demonstrate the friendship mechanics in Stardew Valley</h3>
</div>
</div>
<div id="header">
<div id="navBtn"></div>
<h1 id="title">Stardew Friendship</h1>
</div>
<div id="pageW">
<div id="page">
<!----------------- What is friendship ----------------->
<div class="blurTitle full">
<div class="border">
<h2>What is friendship in <mark>Stardew Valley</mark>?</h2>
</div>
</div>
<div class="box full">
<p>Friendship in <mark>Stardew Valley</mark> is measured by <mark>points</mark>. The more points you have with villagers, the better your relationship with them is. Villagers with better relationships will send you gifts in the mail, talk friendlier to you, and even give you recipes.</p>
</div>
<div class="blurTitle full">
<div class="border">
<h3>What does this look like to the player?</h3>
</div>
</div>
<div class="blurTitle full">
<img src="media/friendshipMenu.jpg">
</div>
<div class="box full">
<p>Above is a screenshot of the friendship menu from the game. Instead of seeing points, the player sees hearts. Each heart represents <mark>250</mark> points. Any remaining points will not partially fill a heart, so it is hard to tell in-game how many points a relationship with a villager has. </p>
</div>
<div class="box full">
<p>It is also worth noting that number of maximum hearts vary depending on the villager.</p>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>If the villager is not romanceable, then they have <mark>10</mark> hearts (or <mark>2500</mark> points).</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>If the villager is romanceable, then they start with <mark>8</mark> hearts (or <mark>2000</mark> points). This expands to <mark>10</mark> (or <mark>2500</mark> points) and eventually to <mark>14</mark> (or <mark>3500</mark> points) hearts if the player chooses to romance that villager.</p>
</div>
<p>Regardless of the number maximum hearts, the method of increasing friendships is the same for all villagers.</p>
</div>
<!----------------- What changes friendship? ----------------->
<div class="blurTitle full">
<div class="border">
<h2>What changes friendship levels?</h2>
</div>
</div>
<div class="blurTitle halfL">
<div class="border">
<h3>Increases</h3>
</div>
</div>
<div class="blurTitle halfR">
<div class="border">
<h3>Decreases</h3>
</div>
</div>
<div class="box halfL">
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Talking to a villager (<mark>+20</mark> points, or <mark>+10</mark> points if the villager is in the middle of a special animation. Only once per day)</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Completing an item delivery quest (<mark>+150</mark> points)</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Giving loved/liked/neutral gifts (see <mark>Gift-Giving</mark>)</p>
</div>
</div>
<div class="box halfR">
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Decay over time (see <mark>Decay</mark>)</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Giving disliked/hated gifts (see <mark>Gift-Giving</mark>)</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Hitting the villager with a slingshot (<mark>-30</mark> points)</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Rummaging through a trashcan with a villager nearby (<mark>-25</mark> points)</p>
</div>
</div>
<div class="clear"></div>
<!----------------- Decay ----------------->
<div class="blurTitle full">
<div class="border">
<h2>Decay</h2>
</div>
</div>
<div class="box full">
<p>Everyday, friendship with villagers decays. This decay is determined by the level of friendship. Also depending on this level, friendship will stop decaying when all hearts are full.</p>
</div>
<div class="box full">
<table>
<tr>
<th>Relationship Type</th>
<th>Decay Rate</th>
<th>When Decay Stops</th>
</tr> <tr>
<td>Not romanceable</td>
<td><mark>-2</mark> points / day</td>
<td><mark>10</mark> hearts (or <mark>2500</mark> points)</td>
</tr> <tr>
<td>Romanceable, pre-bouquet</td>
<td><mark>-2</mark> points / day</td>
<td><mark>8</mark> hearts (or <mark>2000</mark> points)</td>
</tr> <tr>
<td>Romanceable, post-bouquet</td>
<td><mark>-10</mark> points / day</td>
<td><mark>10</mark> hearts (or <mark>2500</mark> points)</td>
</tr> <tr>
<td>Romanceable, married</td>
<td><mark>-20</mark> points / day</td>
<td>Never</td>
</tr>
</table>
</div>
<!----------------- Gift-Giving ----------------->
<div class="blurTitle full">
<div class="border">
<h2>Gift-Giving</h2>
</div>
</div>
<div class="box full">
<p>You can give gifts to villagers to increase or decrease friendship, how much so is determined by the gift type and the quality of the gift. The quality of the gift only affects liked and loved gifts, while neutral, disliked, and hated gifts are just their gift worth. Gifts can be given to villagers once per day and up to two gifts per week. Additionally, if maximum gifts were given in one week, then the friendship will receive a bonus of <mark>+10</mark> points at the end of the week. Each villager has their own set of loved, liked, neutral, disliked, and hated gifts, which the wiki lists out for each.</p>
</div>
<div class="box halfL">
<table>
<tr>
<th>Gift Type</th>
<th>Points</th>
</tr> <tr>
<td>Loved</td>
<td><mark>+80</mark></td>
</tr> <tr>
<td>Liked</td>
<td><mark>+45</mark></td>
</tr> <tr>
<td>Neutral</td>
<td><mark>+20</mark></td>
</tr> <tr>
<td>Disliked</td>
<td><mark>-20</mark></td>
</tr> <tr>
<td>Hated</td>
<td><mark>-40</mark></td>
</tr>
</table>
</div>
<div class="box halfR">
<table>
<tr>
<th>Quality</th>
<th>Multiplier</th>
</tr> <tr>
<td>Normal</td>
<td><mark>x1</mark></td>
</tr> <tr>
<td>Silver</td>
<td><mark>x1.1</mark></td>
</tr> <tr>
<td>Gold</td>
<td><mark>x1.25</mark></td>
</tr> <tr>
<td>Iridium</td>
<td><mark>x1.5</mark></td>
</tr>
</table>
</div>
<div class="clear"></div>
<div class="blurTitle full">
<div class="border">
<h3>Special Events</h3>
</div>
</div>
<div class="box full">
<p>There are two events that affect friendship levels: the <mark>Feast of the Winter Star</mark> and <mark>birthdays</mark>. A gift given on the <mark>Feast of the Winter Star</mark> has a multiplier of <mark>x5</mark>. A gift given on a villager's <mark>birthday</mark> has a multiplier of <mark>x8</mark>. These multipliers will enlarge the point value of the given gift, no matter if it is an increase or decrease in overall friendship.</p>
</div>
<!-- TODO: there are four events, forgot luau and flower dance and heart events and the first introductions quest -->
<!----------------- Models ----------------->
<div class="blurTitle full">
<div class="border">
<h2>Models</h2>
</div>
</div>
<!-- TODO: code and flow chart picture go here -->
<!-- Example codeblock for later -->
<!-- <pre data-label="toggleTimer()"><code class="language-javascript match-braces rainbow-braces line-numbers">var asdgh = -5;</code></pre>
<div class="blurTitle full">
<div class="border">
<h3>Graph Controls</h3>
</div>
</div> -->
<div class="box full">
<!-- Relationship Type -->
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Relationship type:
<select id="relationshipSelect">
<option value='0'>Not romanceable</option>
<option value='1'>Romanceable, no bouquet</option>
<option value='2'>Romanceable, give bouquet</option>
<option value='3'>Romanceable, marry</option>
</select> </p>
</div>
<!-- Talking -->
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Talk
<select id="talkSelect">
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5' selected>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
</select>
times per week</p>
</div>
<!-- Gifting -->
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Give
<select id="giftNumSelect">
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select> <select id="weeklyGiftQualitySelect">
<option>normal</option>
<option>silver</option>
<option>gold</option>
<option>iridium</option>
</select> quality <select id="weeklyGiftTypeSelect">
<option>loved</option>
<option>liked</option>
<option>neutral</option>
<option>disliked</option>
<option>hated</option>
</select>
gifts each week</p>
</div>
<!-- Birthday Checkbox -->
<div class="timeline">
<div class="timelineDot"><div></div></div>
<input type="checkbox" id="birthdayCheckbox">
<label>Give a
<select id="birthdayQualitySelect">
<option>normal</option>
<option>silver</option>
<option>gold</option>
<option>iridium</option>
</select> quality <select id="birthdayTypeSelect">
<option>loved</option>
<option>liked</option>
<option>neutral</option>
<option>disliked</option>
<option>hated</option>
</select>
birthday gift</label>
</div>
<!-- Winter Star Checkbox -->
<div class="timeline">
<div class="timelineDot"><div></div></div>
<input type="checkbox" id="winterCheckbox">
<label>Give a
<select id="winterQualitySelect">
<option>normal</option>
<option>silver</option>
<option>gold</option>
<option>iridium</option>
</select> quality <select id="winterTypeSelect">
<option>loved</option>
<option>liked</option>
<option>neutral</option>
<option>disliked</option>
<option>hated</option>
</select>
Winter Star gift</label>
</div>
<!-- Days Timeout -->
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p>Timeout after
<input id="daysTimeoutInput" type="number" min="1" step="1" value="560" max="1000">
days</p>
</div>
<!-- TODO: add checkbox for plain background -->
<button id="graphBtn">Graph</button>
<p id="graphTextOutput">No Graph Data</p>
</div>
<div class="blurTitle">
<canvas id="myCanvas" width="690px" height="500px">Canvas for models</canvas>
</div>
<!-- TODO:
-Use PrismJS to show the actual code
-Have a flowchart with a transparent background to explain the actual code algorithm
-->
<div class="box full">
<button id="showTableBtn">Show Points</button>
<div id="pointsDiv">
<table id="pointsTable">
<tr>
<th>Time (Days)</th>
<th>Points</th>
</tr>
</table>
</div>
<button id="sendToDesmosBtn">Send Data To Desmos</button>
</div>
<!----------------- Desmos Div ----------------->
<div id="calculator" style="width: 700px; height: 500px;"></div>
<div class="box full">
<button id="pointsEquationBtn">Show <mark>p(x)</mark> equation</button>
<button id="rateEquationBtn">Show <mark>r(x)</mark> equation</button>
<button id="accelEquationBtn">Show <mark>a(x)</mark> equation</button>
</div>
<!----------------- Chosen Situation ----------------->
<div class="blurTitle full">
<div class="border">
<h2>Chosen Situation</h2>
</div>
</div>
<div class="box full">
<p>I decided to pick a situation to model for this project after viewing several different graphs using the algorithm I created. I am modelling <mark>talking</mark> to a <mark>non-romanceable</mark> villager once a day for the first <mark>5</mark> days in each week. The goal is to get the villager up to <mark>10</mark> hearts (or <mark>2500</mark> points), so the friendship doesn't decay anymore. According to my calculations, this would take <mark>204</mark> in-game days, or <mark>1</mark> year and <mark>3.286</mark> seasons.</p>
</div>
<!----------------- Equations ----------------->
<div class="box full">
<p>After lots of adjusting, I reached this equation because:</p>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p><mark>sin(x)</mark></p>
<p>Knew it needed "stairs"</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p><mark>* (2<span class="pi"></span> / 7)</mark></p>
<p>Knew the period needed to be a week, so 7 days</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p><mark>+ 12.285x</mark></p>
<p>Knew it needed some linear growth</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p><mark>(x - 2.5)</mark></p>
<p>Knew it needed a horizontal shift</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p><mark>+ 15</mark></p>
<p>Knew it needed a vertical shift</p>
</div>
<div class="timeline">
<div class="timelineDot"><div></div></div>
<p><mark>18 *</mark></p>
<p>Knew <mark>sin(x)</mark> needed a multiplier <mark>a</mark> value</p>
</div>
</div>
<div class="blurTitle full">
<div class="border">
<h3>Points Equation: <mark>p(x)</mark></h3>
</div>
</div>
<div class="box full">
<h2><mark>p(x) = 18 * sin((x - 2.5) * (2<span class="pi"></span> / 7)) + 12.285x + 15</mark></h2>
<p><mark>p(x)</mark> calculates the total points in the relationship for the <mark>x</mark>th day since first talking to the villager.</p>
</div>
<div class="blurTitle full">
<div class="border">
<h3>Points Rate of Change Equation: <mark>r(x)</mark></h3>
</div>
</div>
<div class="box full">
<h2><mark>r(x) = (36<span class="pi"></span> / 7) * cos((x - 2.5) * (2<span class="pi"></span> / 7)) + 12.285 </mark></h2>
<p><mark>r(x)</mark> calculates the rate of change of the total points in the relationship for the <mark>x</mark>th day since first talking to the villager.</p>
</div>
<div class="blurTitle full">
<div class="border">
<h3>Points Acceleration Equation: <mark>a(x)</mark></h3>
</div>
</div>
<div class="box full">
<h2><mark>a(x) = (-72<span class="pi"></span><sup>2</sup> / 49) * sin((x - 2.5) * (2<span class="pi"></span> / 7))</mark></h2>
<p><mark>a(x)</mark> calculates the acceleration of the total points in the relationship for the <mark>x</mark>th day since first talking to the villager.</p>
</div>
<!----------------- Integral Equation ----------------->
<div class="blurTitle full">
<div class="border">
<h3>Integral</h3>
</div>
</div>
<div class="box full">
<h2><mark>P(x) = (-63 / <span class="pi"></span>) * cos((x - 2.5) * (2<span class="pi"></span> / 7)) + 6.1425x<sup>2</sup> + 15x + c</mark></h2>
<p>The integral, <mark>P(x)</mark> doesn't really mean anything in the context of this problem, as the total number of points given by <mark>p(x)</mark> is really the only thing needed to compute the friendship in-game.</p>
</div>
<!----------------- Crit Values ----------------->
<div class="blurTitle full">
<div class="border">
<h3>Critical Values</h3>
</div>
</div>
<div class="box full">
<p>On the interval <mark>[0, 7]</mark> the derivative of the continuous function <mark>p(x)</mark>, <mark>r(x)</mark>, equals 0 at the x-values of <mark>5.212</mark> and <mark>6.788</mark>. These correspond to the critical points <mark>(5.212, 90.726)</mark> and <mark>(6.788, 86.694)</mark>.</p>
</div>
<!----------------- Extrema ----------------->
<div class="blurTitle full">
<div class="border">
<h3>Extrema</h3>
</div>
</div>
<div class="box full">
<p>On the interval <mark>[0, 7]</mark> the relative maximum is <mark>(5.212, 90.726)</mark>. This maximum corresponds to the <mark>5th</mark> day in the week, which represents the last day in the given week that the player <mark>talks</mark> to the villager. The relative minimums are <mark>(6.788, 86.694)</mark> and <mark>(0, 0.927)</mark>. These minimums both represent the <mark>7th</mark> day of the week, which is the last day in the given week that the friendship is decaying from the player <mark>not talking</mark> to the villager. </p>
</div>
<!----------------- Inflection Points ----------------->
<div class="blurTitle full">
<div class="border">
<h3>Inflection Points</h3>
</div>
</div>
<div class="box full">
<p>On the interval <mark>[0, 7]</mark> the second derivative of the continuous function <mark>p(x)</mark>, <mark>a(x)</mark>, equals 0 at the x-values of <mark>2.5</mark> and <mark>6</mark>. This means that the inflection points are at <mark>(2.5, 45.712)</mark> and <mark>(6, 88.71)</mark>. </p>
</div>
<!----------------- Concavity ----------------->
<div class="blurTitle full">
<div class="border">
<h3>Concavity</h3>
</div>
</div>
<div class="box full">
<p>Looking at the interval <mark>[0, 7]</mark>, the inflection point x-values can be used to find the concavity of the function <mark>p(x)</mark>. </p>
<table>
<tr>
<th>Interval</th>
<td>[0, 2.5]</td>
<td>[2.5, 6]</td>
<td>[6, 7]</td>
</tr>
<tr>
<th>Sign of a(x)</th>
<td>+</td>
<td>-</td>
<td>+</td>
</tr>
<tr>
<th>Concavity of p(x)</th>
<td>up</td>
<td>down</td>
<td>up</td>
</tr>
</table>
</div>
<!----------------- Intercepts ----------------->
<div class="blurTitle full">
<div class="border">
<h3>X and Y Intercepts</h3>
</div>
</div>
<div class="box halfL">
<p>X-intercept at <mark>(-2.684, 0)</mark></p>
<p>This x-intercept is outside of the domain of the function <mark>p(x)</mark>, as you can't have negative time.</p>
</div>
<div class="box halfR">
<p>Y-intercept at <mark>(0, 0.927)</mark></p>
<p>This y-intercept is very close to the first collected data point, <mark>(0, 0)</mark>, only being about a point off. The first data point is at zero because no time has passed, so no actions were taken at that time, not even decay.</p>
</div>
<div class="clear"></div>
<!----------------- Change a Var ----------------->
<div class="blurTitle full">
<div class="border">
<h3>Changing A Parameter</h3>
</div>
</div>
<div class="box full">
<p>I choose to change the linear growth parameter, as in the <mark>12.285x</mark>. I changed this to <mark>20x</mark>.</p>
<button id="viewChangedParamBtn">View On Desmos</button>
<p>This made the graph increase faster than the original <mark>p(x)</mark>. This change represents giving a greater point value to talking. It is also worth noting that the friendship doesn't decay with this new parameter, which adds to the graph increasing faster than the original. This can also be seen in the first derivative of the new function, where now there is no negative rate of change to be found. This means that there are no minimum and maximum extrema, as the first derivative doesn't cross the x-axis. The second derivative is the same with or without the parameter change, as the parameter in question is absent from both. This also means that the inflection points are spread out across the same x-values as before. The y-intercept is the same as before. The x-intercept is <mark>(-0.0988, 0)</mark>, which is closer to <mark>(0, 0)</mark>, but still out of the domain.</p>
</div>
<!-- TODO -->
</div>
</div>
</div>
<div id="footer">
<span id="footerText">Website made by Kate Keefe</span>
<a href="https://github.com/Kmek/StardewFriendship" target="_blank"><button id="githubBtn" class="hoverBtn">View on GitHub</button></a>
</div>
<!-- Navigation Styles & Script -->
<link rel="stylesheet" type="text/css" href="./styles/navigation.css">
<!-- <script src="./scripts/navigation.js"></script> -->
<!-- Canvas Scripts -->
<script src="./scripts/script.js"></script>
<script src="./scripts/canvas.js"></script>
<script src="./scripts/stardew.js"></script>
</body>
</html>