1
0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
stardew_community_checklist/index.html

634 lines
32 KiB
HTML

<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Stardew Valley Community Checklist</title>
<link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.20/css/bulma.min.css"/>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link type="text/css" rel="stylesheet" href="main.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body id="app">
<section class="hero is-info is-left is-bold">
<div class="hero-header">
<div class="header">
<div class="container">
<div class="header-left">
<div class="header-item">
<a href="./"><h1 class="title">Stardew Community Checklist</h1></a>
</div>
</div>
<div class="header-right">
<span class="header-item">
<a href="#" id="save-button" class="button is-info is-outlined is-inverted"
v-on:click.stop="enterSaveMode">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Export Data</span>
</a>
</span>
<span class="header-item">
<a href="#" id="load-button" class="button is-info is-outlined is-inverted"
v-on:click.stop="enterLoadMode">
<span class="icon">
<i class="fa fa-upload"></i>
</span>
<span>Import Data</span>
</a>
</span>
</div>
</div>
</div>
</div>
</section>
<nav class="header has-shadow">
<div class="container">
<div class="header-left">
<a id="bundles-nav" class="header-tab" href="#" v-on:click.stop="change_page('bundles')"
v-bind:class="['bundles' == active_page ? 'is-active' : '']">
Bundles
</a>
<a id="ab-nav" class="header-tab" href="#" v-on:click.stop="change_page('ab-list')"
v-bind:class="['ab-list' == active_page ? 'is-active' : '']">
Alphabetical
</a>
<a id="seasons-nav" class="header-tab" href="#" v-on:click.stop="change_page('seasons')"
v-bind:class="['seasons' == active_page ? 'is-active' : '']">
Seasons
</a>
<a id="skills-nav" class="header-tab" href="#" v-on:click.stop="change_page('skills')"
v-bind:class="['skills' == active_page ? 'is-active' : '']">
Skills
</a>
<a id="change-nav" class="header-tab" href="#" v-on:click.stop="change_page('changelog')"
v-bind:class="['changelog' == active_page ? 'is-active' : '']">
Change Log
</a>
</div>
<div class="header-right header-menu">
<span class="header-item">
<a class="button" v-on:click="toggleHideCompleted">
<span class="icon">
<i class="fa" v-bind:class="[hideCompleted ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>
Hide Completed
</span>
</a>
</span>
<span class="header-item">
<p class="control has-addons">
<a class="button" v-on:click="toggleHideSpoilers">
<span class="icon">
<i class="fa" v-bind:class="[hideSpoilers ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>
Hide Spoilers
</span>
</a>
<a class="button is-info is-marginless" v-on:click="enterSpoilerSettings">
<span class="icon">
<i class="fa fa-cogs"></i>
</span>
</a>
</p>
</span>
</div>
</div>
</nav>
<!-- Save Modal -->
<div id="save-model" class="modal" v-bind:class="[save_mode ? 'is-active' : '']">
<div class="modal-background" v-on:click="exitSaveMode"></div>
<div class="modal-container">
<div class="modal-content">
<div class="box">
<div class="notification is-success">
Your data has been saved locally. This data string is provided in case you want to make a backup or
take your data to another computer.
</div>
<p class="control has-addons">
<input id="user-data-serialized" disabled class="input" type="text" placeholder="Save Data"
value="{{ user_data_serialized }}">
<a class="button is-info copy" data-clipboard-target="#user-data-serialized">
<span class="icon">
<i class="fa fa-clipboard"></i>
</span>
</a>
</p>
</div>
</div>
</div>
<button class="modal-close" v-on:click="exitSaveMode"></button>
</div>
<!-- Load Modal -->
<div id="load-model" class="modal" v-bind:class="[load_mode ? 'is-active' : '']">
<div class="modal-background" v-on:click="exitLoadMode"></div>
<div class="modal-container">
<div class="modal-content">
<div class="box">
<div class="notification is-warning">
If you previously saved your data on this computer, it should already be loaded. This utility is
only for loading a data string from a backup or another computer.
</div>
<p class="control has-addons">
<input class="input" type="text" placeholder="Load Data" v-model="enteredData">
<a class="button is-info" v-on:click="loadData(enteredData)">
Load Data
</a>
</p>
</div>
</div>
</div>
<button class="modal-close" v-on:click="exitLoadMode"></button>
</div>
<!-- Spoilers Settings Modal -->
<div id="spoilers-modal" class="modal" v-bind:class="[pick_spoilers ? 'is-active' : '']">
<div class="modal-background" v-on:click="exitSpoilerSettings"></div>
<div class="modal-container">
<div class="modal-content">
<div class="box">
<div class="content">
<p class="notification is-info">
These settings control which elements are hidden when Hide Spoilers is enabled.
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" v-model="temp_spoilers.bundle_rewards">
Bundle Rewards
</label>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" v-model="temp_spoilers.item_source">
Item Source Information
</label>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" v-model="temp_spoilers.item_seasons">
Item Seasons
</label>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" v-model="temp_spoilers.item_skills">
Item Skills
</label>
</p>
<a class="button is-info is-pulled-right" v-on:click="saveSpoilerSettings">
<span class="icon">
<i class="fa fa-save"></i>
</span>
<span>
Save
</span>
</a>
<div class="is-clearfix"></div>
</div>
</div>
</div>
</div>
<button class="modal-close" v-on:click="exitSpoilerSettings"></button>
</div>
<!-- BUNDLE TAB -->
<section id="bundle-section" class="section" v-if="active_page == 'bundles'">
<div class="container is-fluid">
<div class="columns">
<div class="column is-2">
<nav class="panel">
<p class="panel-heading">
Bundles
</p>
<p class="panel-tabs">
<a href="#" v-for="room in static.rooms" id="panel-room-{{ room.id }}"
class="has-text-centered"
v-bind:class="[room.id == active_room ? 'is-active' : '']"
v-on:click.stop="change_room(room.id)">
{{ room.name }}
</a>
</p>
<template v-for="bundle in static.bundles | filterBy active_room in 'room'">
<a class="panel-block" href="#"
id="panel-bundle-{{ bundle.id }}" v-bind:class="[bundle.id == active_bundle ? 'is-active' : '']"
v-on:click.stop="change_bundle(bundle.id)" v-if="!(hideCompleted && isBundleComplete(bundle.id))">
<span class="panel-icon">
<i class="fa fa-archive"></i>
</span>
<span v-bind:class="[isBundleComplete(bundle.id) ? 'bundle-complete' : '']">{{ bundle.name }}</span>
</a>
</template>
</nav>
</div>
<div class="column">
<div class="columns">
<div class="column">
<h3 class="title">
{{ static.bundles[active_bundle].name }}
<span class="is-pulled-right">
{{ user_data[active_bundle].length }} / {{ static.bundles[active_bundle].items_required }}
</span>
</h3>
<h5 class="subtitle" v-if="!(hideSpoilers && spoilers.bundle_rewards)">{{ static.bundles[active_bundle].reward }}</h5>
<h5 class="subtitle" v-else>&nbsp;</h5>
<progress class="progress is-info"
value="{{ user_data[active_bundle].length }}"
max="{{ static.bundles[active_bundle].items_required }}"></progress>
</div>
<div class="column">
<h3 class="title">
{{ static.rooms[static.bundles[active_bundle].room].name }}
<span class="is-pulled-right">
{{ getRoomItemsChecked(static.bundles[active_bundle].room) }} / {{ getRoomItemsRequired(static.bundles[active_bundle].room) }}
</span>
</h3>
<h5 class="subtitle">{{ static.rooms[static.bundles[active_bundle].room].reward }}</h5>
<progress class="progress is-info"
value="{{ getRoomItemsChecked(static.bundles[active_bundle].room) }}"
max="{{ getRoomItemsRequired(static.bundles[active_bundle].room) }}"
>
</progress>
</div>
</div>
<div class="columns is-multiline">
<template v-for="item in static.items | inBundle active_bundle">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line">
<header class="card-header">
<p class="card-header-title">
{{ item.name }}
</p>
</header>
<div class="card-content eq-line is-flex">
<div class="content is-flex">
<div class="columns source">
<div class="column">
<div v-if="!(hideSpoilers && spoilers.item_source)">{{ item.source }}</div>
</div>
</div>
</div>
<div class="content">
<p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon">
<i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>{{ static.bundles[bundle_id].name }}</span>
</a>
</p>
</div>
</div>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered"
v-for="season in static.seasons | filterByArray item.seasons">
{{ season.name }}
</span>
</div>
</footer>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered"
v-for="skill in static.skills | filterByArray item.skills">
{{ skill.name }}
</span>
</div>
</footer>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</section>
<!-- AB TAB -->
<section id="ab-section" class="section" v-if="active_page == 'ab-list'">
<div class="container is-fluid">
<div class="columns">
<div class="column is-4">
<div class="control is-horizontal">
<div class="control-label">
<label class="label">Search: </label>
</div>
<div class="control">
<input class="input" type="text" placeholder="Search" v-model="search_term">
</div>
</div>
</div>
</div>
<div class="columns is-multiline">
<template v-for="item in static.items | filterBy search_term in 'name' | orderBy 'name'">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line">
<header class="card-header">
<p class="card-header-title">
{{ item.name }}
</p>
</header>
<div class="card-content eq-line is-flex">
<div class="content is-flex">
<div class="columns source">
<div class="column">
<div v-if="!(hideSpoilers && spoilers.item_source)">{{ item.source }}</div>
</div>
</div>
</div>
<div class="content">
<p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon">
<i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>{{ static.bundles[bundle_id].name }}</span>
</a>
</p>
</div>
</div>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered"
v-for="season in static.seasons | filterByArray item.seasons">
{{ season.name }}
</span>
</div>
</footer>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered"
v-for="skill in static.skills | filterByArray item.skills">
{{ skill.name }}
</span>
</div>
</footer>
</div>
</div>
</template>
</div>
</div>
</section>
<!-- Seasons Tab -->
<section id="seasons-tab" class="section" v-if="active_page == 'seasons'">
<div class="container is-fluid">
<div class="columns">
<div class="column is-2">
<nav class="panel">
<p class="panel-heading">
Seasons
</p>
<a class="panel-block" href="#" v-for="season in static.seasons" id="panel-season-{{ season.id }}"
v-bind:class="[season.id == active_season ? 'is-active' : '']"
v-on:click.stop="change_season(season.id)">
<span class="panel-icon">
<i class="fa fa-calendar"></i>
</span> {{ season.name }}
</a>
</nav>
</div>
<div class="column">
<h3 class="title">{{ getSeasonName(active_season) }}</h3>
<progress class="progress is-info" value="" max=""></progress>
<div class="columns is-multiline">
<template v-for="item in static.items | seasonFilter active_season | orderBy 'name'">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line">
<header class="card-header">
<p class="card-header-title">
{{ item.name }}
</p>
</header>
<div class="card-content eq-line is-flex">
<div class="content is-flex">
<div class="columns source">
<div class="column">
<div v-if="!(hideSpoilers && spoilers.item_source)">{{ item.source }}</div>
</div>
</div>
</div>
<div class="content">
<p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon">
<i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>{{ static.bundles[bundle_id].name }}</span>
</a>
</p>
</div>
</div>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered"
v-for="season in static.seasons | filterByArray item.seasons">
{{ season.name }}
</span>
</div>
</footer>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered"
v-for="skill in static.skills | filterByArray item.skills">
{{ skill.name }}
</span>
</div>
</footer>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Tab -->
<section id="skills-tab" class="section" v-if="active_page == 'skills'">
<div class="container is-fluid">
<div class="columns">
<div class="column is-2">
<nav class="panel">
<p class="panel-heading">
Skills
</p>
<a class="panel-block" href="#" v-for="skill in static.skills" id="panel-skill-{{ skill.id }}"
v-bind:class="[skill.id == active_skill ? 'is-active' : '']"
v-on:click.stop="change_skill(skill.id)">
<span class="panel-icon">
<i class="fa fa-tree"></i>
</span> {{ skill.name }}
</a>
</nav>
</div>
<div class="column">
<h3 class="title">{{ getSkillName(active_skill) }}</h3>
<progress class="progress is-info" value="" max=""></progress>
<div class="columns is-multiline">
<template v-for="item in static.items | filterBy active_skill in 'skills' | orderBy 'name'">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line">
<header class="card-header">
<p class="card-header-title">
{{ item.name }}
</p>
</header>
<div class="card-content eq-line is-flex">
<div class="content is-flex">
<div class="columns source">
<div class="column">
<div v-if="!(hideSpoilers && spoilers.item_source)">{{ item.source }}</div>
</div>
</div>
</div>
<div class="content">
<p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon">
<i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>{{ static.bundles[bundle_id].name }}</span>
</a>
</p>
</div>
</div>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered"
v-for="season in static.seasons | filterByArray item.seasons">
{{ season.name }}
</span>
</div>
</footer>
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered"
v-for="skill in static.skills | filterByArray item.skills">
{{ skill.name }}
</span>
</div>
</footer>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</section>
<section class="section" v-if="active_page == 'changelog'">
<div class="container">
<h1 class="title">Change Log</h1>
<div class="card is-fullwidth" v-for="version in changelog">
<header class="card-header">
<p class="card-header-title">
{{ version.id }}
</p>
</header>
<div class="card-content">
<div class="content">
<ul>
<li v-for="change in version.changes">{{ change }}</li>
</ul>
</div>
</div>
<div class="card-footer">
<p class="card-footer-item">
Release Date: {{ version.date }}
</p>
<a href="https://github.com/kihashi/stardew_community_checklist/releases/tag/{{ version.link }}" class="card-footer-item">
<span class="icon">
<i class="fa fa-github-square" aria-hidden="true"></i>
</span>
<span>
Github Release
</span>
</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content is-centered is-text-centered">
<p>
<strong>Stardew Community Checklist</strong> by <a href="http://johncleaver.com">John Cleaver</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
</p>
<p>
Bundle and Item information is from the <a href="http://stardewvalleywiki.com/Stardew_Valley_Wiki">Stardew Valley Wiki</a>
and is used under the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
</p>
<p>
<a href="http://stardewvalley.net/">Stardew Valley</a> &copy; <a href="">Chucklefish LTD</a>.
Developed by <a href="https://twitter.com/ConcernedApe">ConcernedApe</a>.
</p>
<p>
<a class="icon" href="https://github.com/kihashi/stardew_community_checklist">
<i class="fa fa-github"></i>
</a>
<a class="icon" href="https://www.reddit.com/r/StardewValley/comments/4ell1b/stardew_community_checklist_a_site_to_keep_track/">
<i class="fa fa-reddit"></i>
</a>
</p>
</div>
</div>
</footer>
<!-- Javascript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76473334-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>