kihashi/stardew_community_checklist
1
0
Fork 0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
Code Issues Releases Activity

WIP: #66 update to the latest vuejs and bulma (#81)

Browse Source 
Update Vuejs to 2.5.13 and Bulma to 0.6.2.
This commit is contained in:
John Cleaver 2018-02-10 14:53:43 -05:00 committed by GitHub
parent 0e8014b326
commit d3429ce217
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 221 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
index.html
View File

@ -3,88 +3,84 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stardew Valley Community Checklist</title> <title>Stardew Valley Community Checklist</title>
<link type="text/css" rel="stylesheet" <link type="text/css" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.20/css/bulma.min.css"/> href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"/>
<link type="text/css" rel="stylesheet" <link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link type="text/css" rel="stylesheet" href="main.css"/> <link type="text/css" rel="stylesheet" href="main.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<body id="app"> <body>
<section class="hero is-info is-left is-bold"> <div id="app">
<div class="hero-header"> <section class="hero is-info">
<div class="header"> <div class="hero-head">
<nav class="navbar">
<div class="container"> <div class="container">
<div class="header-left"> <div class="navbar-brand">
<div class="header-item"> <a href="./" class="navbar-item"><h1 class="title">Stardew Community Checklist</h1></a>
<a href="./"><h1 class="title">Stardew Community Checklist</h1></a> </div>
<div class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a href="#" id="save-button" class="button is-light is-outlined" v-on:click.stop="enterSaveMode">
<span class="icon"><i class="fa fa-download"></i></span>
<span>Export Data</span>
</a>
</span>
<span class="navbar-item">
<a href="#" id="load-button" class="button is-light is-outlined" 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>
<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> </nav>
</div> </div>
</section> </section>
<nav class="header has-shadow"> <nav class="navbar has-shadow">
<div class="container"> <div class="container">
<div class="header-left"> <div class="navbar-tabs">
<a id="bundles-nav" class="header-tab" href="#" v-on:click.stop="change_page('bundles')" <a id="bundles-nav" class="navbar-item is-tab" href="#" v-on:click.stop="change_page('bundles')"
v-bind:class="['bundles' == active_page ? 'is-active' : '']"> v-bind:class="['bundles' == active_page ? 'is-active' : '']">
Bundles Bundles
</a> </a>
<a id="ab-nav" class="header-tab" href="#" v-on:click.stop="change_page('ab-list')" <a id="ab-nav" class="navbar-item is-tab" href="#" v-on:click.stop="change_page('ab-list')"
v-bind:class="['ab-list' == active_page ? 'is-active' : '']"> v-bind:class="['ab-list' == active_page ? 'is-active' : '']">
Alphabetical Alphabetical
</a> </a>
<a id="seasons-nav" class="header-tab" href="#" v-on:click.stop="change_page('seasons')" <a id="seasons-nav" class="navbar-item is-tab" href="#" v-on:click.stop="change_page('seasons')"
v-bind:class="['seasons' == active_page ? 'is-active' : '']"> v-bind:class="['seasons' == active_page ? 'is-active' : '']">
Seasons Seasons
</a> </a>
<a id="skills-nav" class="header-tab" href="#" v-on:click.stop="change_page('skills')" <a id="skills-nav" class="navbar-item is-tab" href="#" v-on:click.stop="change_page('skills')"
v-bind:class="['skills' == active_page ? 'is-active' : '']"> v-bind:class="['skills' == active_page ? 'is-active' : '']">
Skills Skills
</a> </a>
<a id="change-nav" class="header-tab" href="#" v-on:click.stop="change_page('changelog')" <a id="change-nav" class="navbar-item is-tab" href="#" v-on:click.stop="change_page('changelog')"
v-bind:class="['changelog' == active_page ? 'is-active' : '']"> v-bind:class="['changelog' == active_page ? 'is-active' : '']">
Change Log Change Log
</a> </a>
</div> </div>
<div class="header-right header-menu"> <div class="navbar-end">
<span class="header-item"> <span class="navbar-item">
<a class="button" v-on:click="toggleHideCompleted"> <a class="button" v-on:click="toggleHideCompleted">
<span class="icon"> <span class="icon">
<i class="fa" v-bind:class="[hideCompleted ? 'fa-check-square-o' : 'fa-square-o']"></i> <i class="fa" v-bind:class="[hideCompleted ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span>
<span>
Hide Completed
</span>
</a>
</span> </span>
<span class="header-item"> <span>
<p class="control has-addons"> Hide Completed
</span>
</a>
</span>
<span class="navbar-item">
<div class="buttons has-addons">
<a class="button" v-on:click="toggleHideSpoilers"> <a class="button" v-on:click="toggleHideSpoilers">
<span class="icon"> <span class="icon">
<i class="fa" v-bind:class="[hideSpoilers ? 'fa-check-square-o' : 'fa-square-o']"></i> <i class="fa" v-bind:class="[hideSpoilers ? 'fa-check-square-o' : 'fa-square-o']"></i>
@ -93,12 +89,12 @@
Hide Spoilers Hide Spoilers
</span> </span>
</a> </a>
<a class="button is-info is-marginless" v-on:click="enterSpoilerSettings"> <a class="button is-info" v-on:click="enterSpoilerSettings">
<span class="icon"> <span class="icon">
<i class="fa fa-cogs"></i> <i class="fa fa-cogs"></i>
</span> </span>
</a> </a>
</p> </div>
</span> </span>
</div> </div>
</div> </div>
@ -114,15 +110,19 @@
Your data has been saved locally. This data string is provided in case you want to make a backup or 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. take your data to another computer.
</div> </div>
<p class="control has-addons"> <div class="field has-addons">
<input id="user-data-serialized" readonly class="input" type="text" placeholder="Save Data" <div class="control is-expanded">
value="{{ user_data_serialized }}"> <input id="user-data-serialized" readonly class="input" type="text" placeholder="Save Data"
<a class="button is-info copy" data-clipboard-target="#user-data-serialized"> v-bind:value="user_data_serialized">
<span class="icon"> </div>
<i class="fa fa-clipboard"></i> <div class="control">
</span> <a class="button is-info copy" data-clipboard-target="#user-data-serialized">
</a> <span class="icon">
</p> <i class="fa fa-clipboard"></i>
</span>
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -139,12 +139,16 @@
If you previously saved your data on this computer, it should already be loaded. This utility is 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. only for loading a data string from a backup or another computer.
</div> </div>
<p class="control has-addons"> <div class="field has-addons">
<input class="input" type="text" placeholder="Load Data" v-model="enteredData"> <div class="control is-expanded">
<a class="button is-info" v-on:click="loadData(enteredData)"> <input class="input" type="text" placeholder="Load Data" v-model="enteredData">
Load Data </div>
</a> <div class="control">
</p> <a class="button is-info" v-on:click="loadData(enteredData)">
Load Data
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -202,25 +206,25 @@
</div> </div>
<!-- BUNDLE TAB --> <!-- BUNDLE TAB -->
<section id="bundle-section" class="section" v-if="active_page == 'bundles'"> <section id="bundle-section" class="section" v-if="active_page == 'bundles' && static !== null">
<div class="container is-fluid"> <div class="container is-fluid is-marginless">
<div class="columns"> <div class="columns">
<div class="column is-2"> <div class="column is-2 is-paddingless">
<nav class="panel"> <nav class="panel">
<p class="panel-heading"> <p class="panel-heading">
Bundles Bundles
</p> </p>
<p class="panel-tabs"> <p class="panel-tabs is-size-7">
<a href="#" v-for="room in static.rooms" id="panel-room-{{ room.id }}" <a href="#" v-for="room in static.rooms" v-bind:id="'panel-room-' + room.id"
class="has-text-centered" class="has-text-centered"
v-bind:class="[room.id == active_room ? 'is-active' : '']" v-bind:class="[room.id == active_room ? 'is-active' : '']"
v-on:click.stop="change_room(room.id)"> v-on:click.stop="change_room(room.id)">
{{ room.name }} {{ room.name }}
</a> </a>
</p> </p>
<template v-for="bundle in static.bundles | filterBy active_room in 'room'"> <template v-for="bundle in active_room_bundles">
<a class="panel-block" href="#" <a class="panel-block" href="#"
id="panel-bundle-{{ bundle.id }}" v-bind:class="[bundle.id == active_bundle ? 'is-active' : '']" v-bind: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))"> v-on:click.stop="change_bundle(bundle.id)" v-if="!(hideCompleted && isBundleComplete(bundle.id))">
<span class="panel-icon"> <span class="panel-icon">
@ -243,8 +247,8 @@
<h5 class="subtitle" v-if="!(hideSpoilers && spoilers.bundle_rewards)">{{ static.bundles[active_bundle].reward }}</h5> <h5 class="subtitle" v-if="!(hideSpoilers && spoilers.bundle_rewards)">{{ static.bundles[active_bundle].reward }}</h5>
<h5 class="subtitle" v-else>&nbsp;</h5> <h5 class="subtitle" v-else>&nbsp;</h5>
<progress class="progress is-info" <progress class="progress is-info"
value="{{ user_data[active_bundle].length }}" v-bind:value="user_data[active_bundle].length"
max="{{ static.bundles[active_bundle].items_required }}"></progress> v-bind:max="static.bundles[active_bundle].items_required"></progress>
</div> </div>
<div class="column"> <div class="column">
<h3 class="title"> <h3 class="title">
@ -255,15 +259,15 @@
</h3> </h3>
<h5 class="subtitle">{{ static.rooms[static.bundles[active_bundle].room].reward }}</h5> <h5 class="subtitle">{{ static.rooms[static.bundles[active_bundle].room].reward }}</h5>
<progress class="progress is-info" <progress class="progress is-info"
value="{{ getRoomItemsChecked(static.bundles[active_bundle].room) }}" v-bind:value="getRoomItemsChecked(static.bundles[active_bundle].room)"
max="{{ getRoomItemsRequired(static.bundles[active_bundle].room) }}" v-bind:max="getRoomItemsRequired(static.bundles[active_bundle].room)"
> >
</progress> </progress>
</div> </div>
</div> </div>
<div class="columns is-multiline"> <div class="columns is-multiline">
<template v-for="item in static.items | inBundle active_bundle"> <template v-for="item in active_bundle_items">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))"> <div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line"> <div class="card is-fullwidth is-flex eq-line">
<header class="card-header"> <header class="card-header">
@ -281,13 +285,13 @@
</div> </div>
<div class="content"> <div class="content">
<p class="control"> <p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles" <a class="button is-fullwidth" v-for="(bundle_id, index) in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)" v-on:click="toggleItemInBundle(bundle_id, item.id, index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '', v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]"> !isItemInBundle(bundle_id, item.id, index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon"> <span class="icon">
<i class="fa" <i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i> v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span> </span>
<span>{{ static.bundles[bundle_id].name }}</span> <span>{{ static.bundles[bundle_id].name }}</span>
</a> </a>
@ -297,8 +301,8 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span> <span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered" <span class="tag is-primary is-text-centered is-rounded"
v-for="season in static.seasons | filterByArray item.seasons"> v-for="season in getItemSeasons(item)">
{{ season.name }} {{ season.name }}
</span> </span>
</div> </div>
@ -306,8 +310,8 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span> <span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered" <span class="tag is-info is-text-centered is-rounded"
v-for="skill in static.skills | filterByArray item.skills"> v-for="skill in getItemSkills(item)">
{{ skill.name }} {{ skill.name }}
</span> </span>
</div> </div>
@ -322,15 +326,15 @@
</section> </section>
<!-- AB TAB --> <!-- AB TAB -->
<section id="ab-section" class="section" v-if="active_page == 'ab-list'"> <section id="ab-section" class="section" v-if="active_page == 'ab-list' && static !== null">
<div class="container is-fluid"> <div class="container is-fluid is-marginless">
<div class="columns"> <div class="columns">
<div class="column is-4"> <div class="column is-4">
<div class="control is-horizontal"> <div class="field is-horizontal">
<div class="control-label"> <div class="field-label is-normal">
<label class="label">Search: </label> <label class="label">Search</label>
</div> </div>
<div class="control"> <div class="field-body">
<input class="input" type="text" placeholder="Search" v-model="search_term"> <input class="input" type="text" placeholder="Search" v-model="search_term">
</div> </div>
</div> </div>
@ -339,7 +343,7 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
<template v-for="item in static.items | filterBy search_term in 'name' | orderBy 'name'"> <template v-for="item in filtered_items">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))"> <div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line"> <div class="card is-fullwidth is-flex eq-line">
<header class="card-header"> <header class="card-header">
@ -357,13 +361,13 @@
</div> </div>
<div class="content"> <div class="content">
<p class="control"> <p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles" <a class="button is-fullwidth" v-for="(bundle_id, index) in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)" v-on:click="toggleItemInBundle(bundle_id, item.id, index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '', v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]"> !isItemInBundle(bundle_id, item.id, index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon"> <span class="icon">
<i class="fa" <i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i> v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span> </span>
<span>{{ static.bundles[bundle_id].name }}</span> <span>{{ static.bundles[bundle_id].name }}</span>
</a> </a>
@ -373,8 +377,8 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span> <span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered" <span class="tag is-primary is-text-centered is-rounded"
v-for="season in static.seasons | filterByArray item.seasons"> v-for="season in getItemSeasons(item)">
{{ season.name }} {{ season.name }}
</span> </span>
</div> </div>
@ -382,8 +386,8 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span> <span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered" <span class="tag is-info is-text-centered is-rounded"
v-for="skill in static.skills | filterByArray item.skills"> v-for="skill in getItemSkills(item)">
{{ skill.name }} {{ skill.name }}
</span> </span>
</div> </div>
@ -397,14 +401,14 @@
<!-- Seasons Tab --> <!-- Seasons Tab -->
<section id="seasons-tab" class="section" v-if="active_page == 'seasons'"> <section id="seasons-tab" class="section" v-if="active_page == 'seasons'">
<div class="container is-fluid"> <div class="container is-fluid is-marginless">
<div class="columns"> <div class="columns">
<div class="column is-2"> <div class="column is-2">
<nav class="panel"> <nav class="panel">
<p class="panel-heading"> <p class="panel-heading">
Seasons Seasons
</p> </p>
<a class="panel-block" href="#" v-for="season in static.seasons" id="panel-season-{{ season.id }}" <a class="panel-block" href="#" v-for="season in static.seasons" v-bind:id="'panel-season-' + season.id"
v-bind:class="[season.id == active_season ? 'is-active' : '']" v-bind:class="[season.id == active_season ? 'is-active' : '']"
v-on:click.stop="change_season(season.id)"> v-on:click.stop="change_season(season.id)">
<span class="panel-icon"> <span class="panel-icon">
@ -417,7 +421,7 @@
<h3 class="title">{{ getSeasonName(active_season) }}</h3> <h3 class="title">{{ getSeasonName(active_season) }}</h3>
<progress class="progress is-info" value="" max=""></progress> <progress class="progress is-info" value="" max=""></progress>
<div class="columns is-multiline"> <div class="columns is-multiline">
<template v-for="item in static.items | seasonFilter active_season | orderBy 'name'"> <template v-for="item in active_season_items">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))"> <div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line"> <div class="card is-fullwidth is-flex eq-line">
<header class="card-header"> <header class="card-header">
@ -435,13 +439,13 @@
</div> </div>
<div class="content"> <div class="content">
<p class="control"> <p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles" <a class="button is-fullwidth" v-for="(bundle_id, index) in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)" v-on:click="toggleItemInBundle(bundle_id, item.id, index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '', v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]"> !isItemInBundle(bundle_id, item.id, index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon"> <span class="icon">
<i class="fa" <i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i> v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span> </span>
<span>{{ static.bundles[bundle_id].name }}</span> <span>{{ static.bundles[bundle_id].name }}</span>
</a> </a>
@ -451,8 +455,8 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span> <span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered" <span class="tag is-primary is-text-centered is-rounded"
v-for="season in static.seasons | filterByArray item.seasons"> v-for="season in getItemSeasons(item)">
{{ season.name }} {{ season.name }}
</span> </span>
</div> </div>
@ -460,10 +464,10 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span> <span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered" <span class="tag is-info is-text-centered is-rounded"
v-for="skill in static.skills | filterByArray item.skills"> v-for="skill in getItemSkills(item)">
{{ skill.name }} {{ skill.name }}
</span> </span>
</div> </div>
</footer> </footer>
</div> </div>
@ -477,14 +481,14 @@
<!-- Skills Tab --> <!-- Skills Tab -->
<section id="skills-tab" class="section" v-if="active_page == 'skills'"> <section id="skills-tab" class="section" v-if="active_page == 'skills'">
<div class="container is-fluid"> <div class="container is-fluid is-marginless">
<div class="columns"> <div class="columns">
<div class="column is-2"> <div class="column is-2">
<nav class="panel"> <nav class="panel">
<p class="panel-heading"> <p class="panel-heading">
Skills Skills
</p> </p>
<a class="panel-block" href="#" v-for="skill in static.skills" id="panel-skill-{{ skill.id }}" <a class="panel-block" href="#" v-for="skill in static.skills" v-bind:id="'panel-skill-' + skill.id"
v-bind:class="[skill.id == active_skill ? 'is-active' : '']" v-bind:class="[skill.id == active_skill ? 'is-active' : '']"
v-on:click.stop="change_skill(skill.id)"> v-on:click.stop="change_skill(skill.id)">
<span class="panel-icon"> <span class="panel-icon">
@ -497,7 +501,7 @@
<h3 class="title">{{ getSkillName(active_skill) }}</h3> <h3 class="title">{{ getSkillName(active_skill) }}</h3>
<progress class="progress is-info" value="" max=""></progress> <progress class="progress is-info" value="" max=""></progress>
<div class="columns is-multiline"> <div class="columns is-multiline">
<template v-for="item in static.items | filterBy active_skill in 'skills' | orderBy 'name'"> <template v-for="item in active_skill_items">
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))"> <div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
<div class="card is-fullwidth is-flex eq-line"> <div class="card is-fullwidth is-flex eq-line">
<header class="card-header"> <header class="card-header">
@ -515,13 +519,13 @@
</div> </div>
<div class="content"> <div class="content">
<p class="control"> <p class="control">
<a class="button is-fullwidth" v-for="bundle_id in item.bundles" <a class="button is-fullwidth" v-for="(bundle_id, index) in item.bundles"
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)" v-on:click="toggleItemInBundle(bundle_id, item.id, index)"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : '', v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'is-success' : '',
!isItemInBundle(bundle_id, item.id, $index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]"> !isItemInBundle(bundle_id, item.id, index) && !isBundleComplete(bundle_id) ? 'is-danger' : '' ]">
<span class="icon"> <span class="icon">
<i class="fa" <i class="fa"
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i> v-bind:class="[isItemInBundle(bundle_id, item.id, index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
</span> </span>
<span>{{ static.bundles[bundle_id].name }}</span> <span>{{ static.bundles[bundle_id].name }}</span>
</a> </a>
@ -531,8 +535,8 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_seasons)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span> <span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
<span class="tag is-primary is-text-centered" <span class="tag is-primary is-text-centered is-rounded"
v-for="season in static.seasons | filterByArray item.seasons"> v-for="season in getItemSeasons(item)">
{{ season.name }} {{ season.name }}
</span> </span>
</div> </div>
@ -540,10 +544,10 @@
<footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)"> <footer class="card-footer" v-if="!(hideSpoilers && spoilers.item_skills)">
<div class="card-footer-item"> <div class="card-footer-item">
<span class="icon is-small"><i class="fa fa-tree"></i></span> <span class="icon is-small"><i class="fa fa-tree"></i></span>
<span class="tag is-info is-text-centered" <span class="tag is-info is-text-centered is-rounded"
v-for="skill in static.skills | filterByArray item.skills"> v-for="skill in getItemSkills(item)">
{{ skill.name }} {{ skill.name }}
</span> </span>
</div> </div>
</footer> </footer>
</div> </div>
@ -575,7 +579,7 @@
<p class="card-footer-item"> <p class="card-footer-item">
Release Date: {{ version.date }} Release Date: {{ version.date }}
</p> </p>
<a href="https://github.com/kihashi/stardew_community_checklist/releases/tag/{{ version.link }}" class="card-footer-item"> <a v-bind:href="'https://github.com/kihashi/stardew_community_checklist/releases/tag/' + version.link" class="card-footer-item">
<span class="icon"> <span class="icon">
<i class="fa fa-github-square" aria-hidden="true"></i> <i class="fa fa-github-square" aria-hidden="true"></i>
</span> </span>
@ -614,11 +618,13 @@
</div> </div>
</div> </div>
</footer> </footer>
</div>
<!-- Javascript --> <!-- 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://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="main.js"></script>
</body> </body>
</html> </html>

3
main.css
View File

@ -1,6 +1,9 @@
.eq-line { .eq-line {
flex: 1; flex: 1;
} }
.column.is-flex {
display: flex;
} }
.card { .card {

98
main.js
View File

@ -4,6 +4,8 @@ var v = new Vue({
changelog: null, changelog: null,
static: null, static: null,
user_data: [], user_data: [],
search_term: "",
enteredData: "",
active_page: "bundles", active_page: "bundles",
active_room: 0, active_room: 0,
active_bundle: 0, active_bundle: 0,
@ -23,7 +25,7 @@ var v = new Vue({
temp_spoilers: {} temp_spoilers: {}
}, },
ready: function(){ beforeMount: function(){
this.fetchData(); this.fetchData();
this.fetchChangeLog(); this.fetchChangeLog();
new Clipboard('.copy'); new Clipboard('.copy');
@ -47,26 +49,74 @@ var v = new Vue({
computed: { computed: {
user_data_serialized: function(){ user_data_serialized: function(){
return btoa(JSON.stringify(this.user_data)); return btoa(JSON.stringify(this.user_data));
} },
active_room_bundles: function(){
var self = this;
return this.static.bundles.filter(function(bundle){ return bundle.room === self.active_room });
},
active_bundle_items: function(){
var self = this;
return this.static.items.filter(function(item){ return item.bundles.indexOf(self.active_bundle) > -1});
},
active_season_items: function() {
var self = this;
if (self.active_season === self.static.seasons[0].id){
return _.orderBy(
this.static.items.filter(
function(item){
return item.seasons.length === 4;
}
),
'name'
)
}
else {
return _.orderBy(
this.static.items.filter(
function (item) {
return item.seasons.indexOf(self.active_season) > -1
}
),
'name'
)
}
},
active_skill_items: function() {
var self = this;
return _.orderBy(
this.static.items.filter(
function(item){
return item.skills.indexOf(self.active_skill) > -1
}
),
'name'
)
},
filtered_items: function(){
var self = this;
return _.orderBy(self.static.items.filter(function(item){ return item.name.toLowerCase().indexOf(self.search_term.toLowerCase()) !== -1 }), 'name');
}
}, },
methods: { methods: {
fetchData: function(){ fetchData: function(){
this.$http.get('bundles.json', function(data, status, response){ this.$http.get('bundles.json').then(function(response) {
if(status == 200){ this.static = response.body;
this.static = data; if(this.user_data.length <= 0){
if(this.user_data.length <= 0){ for(i=0; i<this.static.bundles.length;i++){
for(i=0; i<this.static.bundles.length;i++){ this.user_data.push([]);
this.user_data.push([]);
}
} }
} };
}, function(response) {
console.log("error fetching bundle data");
}); });
}, },
fetchChangeLog: function() { fetchChangeLog: function() {
this.$http.get('changelog.json', function(data, status){ this.$http.get('changelog.json').then(function(response) {
if(status == 200){ this.changelog = response.body.versions;
this.changelog = data.versions }, function(response) {
} console.log("error fetching change log data");
}); });
}, },
enterLoadMode: function(){ enterLoadMode: function(){
@ -177,9 +227,10 @@ var v = new Vue({
}, 0) }, 0)
}, },
getRoomItemsChecked: function(roomId){ getRoomItemsChecked: function(roomId){
var self = this;
return this.static.bundles return this.static.bundles
.filter(function(b){ return b.room === roomId; }) .filter(function(b){ return b.room === roomId; })
.reduce(function(p, c){ return p + Math.min(v.user_data[c.id].length, c.items_required); }, 0); .reduce(function(p, c){ return p + Math.min(self.user_data[c.id].length, c.items_required); }, 0);
}, },
isCompleted: function (item) { isCompleted: function (item) {
for(i=0; i < item.bundles.length; i++){ for(i=0; i < item.bundles.length; i++){
@ -192,6 +243,12 @@ var v = new Vue({
}, },
isBundleComplete: function(bundle_id){ isBundleComplete: function(bundle_id){
return this.user_data[bundle_id].length >= this.static.bundles[bundle_id].items_required; return this.user_data[bundle_id].length >= this.static.bundles[bundle_id].items_required;
},
getItemSeasons: function(item){
return this.static.seasons.filter(function(season){ return item.seasons.indexOf(season.id) > -1 });
},
getItemSkills: function(item){
return this.static.skills.filter(function(skill){ return item.skills.indexOf(skill.id) > -1 });
} }
} }
}); });
@ -207,17 +264,6 @@ Vue.filter('inBundle', function(value, id){
}); });
}); });
Vue.filter('filterByArray', function(array1, array2){
return array1.filter(function(element){
if(array2.indexOf(element.id) > -1){
return true;
}
else{
return false;
}
});
});
Vue.filter('seasonFilter', function(items, season_id){ Vue.filter('seasonFilter', function(items, season_id){
return items.filter(function(element){ return items.filter(function(element){
if(season_id == "allseasons" && element.seasons.length > 3){ if(season_id == "allseasons" && element.seasons.length > 3){