mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
510 lines
26 KiB
HTML
510 lines
26 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.19/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>
|
|
</div>
|
|
<div class="header-right header-menu">
|
|
<span class="header-item">
|
|
<a class="button" v-on:click="hideCompleted = !hideCompleted">
|
|
<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">
|
|
<a class="button" v-on:click="hideSpoilers = !hideSpoilers">
|
|
<span class="icon">
|
|
<i class="fa" v-bind:class="[hideSpoilers ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
|
</span>
|
|
<span>
|
|
Hide Spoilers
|
|
</span>
|
|
</a>
|
|
</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>
|
|
|
|
<!-- 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="panels">
|
|
<p class="panel-heading">
|
|
Bundles
|
|
</p>
|
|
<p class="panel-tabs">
|
|
<a href="#" v-for="room in static.rooms" id="panel-room-{{ room.id }}"
|
|
v-bind:class="[room.id == active_room ? 'is-active' : '']"
|
|
v-on:click.stop="change_room(room.id)">
|
|
{{ room.name }}
|
|
</a>
|
|
</p>
|
|
<a class="panel-block" href="#" v-for="bundle in static.bundles | filterBy active_room in 'room'"
|
|
id="panel-bundle-{{ bundle.id }}" v-bind:class="[bundle.id == active_bundle ? 'is-active' : '']"
|
|
v-on:click.stop="change_bundle(bundle.id)">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-archive"></i>
|
|
</span> {{ bundle.name }}
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<div class="column">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="title">{{ static.bundles[active_bundle].name }}</h3>
|
|
<h5 class="subtitle">{{ static.bundles[active_bundle].reward }}</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 }}</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">{{ 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' : '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">
|
|
<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">
|
|
<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">{{ 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' : '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">
|
|
<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">
|
|
<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="panels">
|
|
<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 | filterBy active_season in 'seasons'">
|
|
<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">{{ 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' : '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">
|
|
<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">
|
|
<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="panels">
|
|
<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'">
|
|
<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">{{ 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' : '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">
|
|
<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">
|
|
<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>
|
|
|
|
<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> © <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">
|
|
<i class="fa fa-reddit"></i>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Javascript -->
|
|
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
|
|
<script type="text/javascript" src="http://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>
|
|
</body>
|
|
</html>
|