mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
commit
096e457e08
640
index.html
640
index.html
@ -1,283 +1,435 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype HTML>
|
||||||
<html lang="en">
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Stardew Valley Community Checklist</title>
|
<title>Stardew Valley Community Checklist</title>
|
||||||
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
|
<link type="text/css" rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.17/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 type="text/css" rel="stylesheet" href="main.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body id="app">
|
||||||
|
<section class="hero is-info is-left is-bold">
|
||||||
|
<div class="hero-header">
|
||||||
|
<div class="header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Stardew Valley Community Center Checklist</h1>
|
<div class="header-left">
|
||||||
<ul class="nav nav-tabs" role="tablist">
|
<div class="header-item">
|
||||||
<li role="presentation" class="active"><a href="#bundles" aria-controls="bundles" role="tab" data-toggle="tab">By Bundle</a></li>
|
<a href="/"><h1 class="title">Stardew Community Checklist</h1></a>
|
||||||
<li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical List</a></li>
|
</div>
|
||||||
<li role="presentation"><a href="#season-list" aria-controls="season-list" role="tab" data-toggle="tab">By Season</a></li>
|
</div>
|
||||||
<li role="presentation"><a href="#skill-list" aria-controls="skill-list" role="tab" data-toggle="tab">By Skill</a></li>
|
<div class="header-right">
|
||||||
<li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
|
<span class="header-item">
|
||||||
</ul>
|
<a href="#" id="save-button" class="button is-info is-outlined is-inverted"
|
||||||
<div id="app">
|
v-on:click.stop="enterSaveMode">
|
||||||
<div class="just-padding tab-content">
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
<div role="tabpanel" class="tab-pane active" id="bundles">
|
</span>
|
||||||
<div class="list-group list-group-root well">
|
<span>Save</span>
|
||||||
|
|
||||||
<template v-for="room in static.rooms">
|
|
||||||
<a href="#room-{{ room.id }}" class="list-group-item" data-toggle="collapse">
|
|
||||||
<div class="checkbox"><i class="glyphicon glyphicon-chevron-right"></i><label><input
|
|
||||||
type="checkbox"/>{{ room.name }}</label></div>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="list-group collapse" id="room-{{ room.id }}">
|
</span>
|
||||||
|
<span class="header-item">
|
||||||
<template v-for="bundle in static.bundles | filterBy room.id in 'room'">
|
<a href="#" id="load-button" class="button is-info is-outlined is-inverted"
|
||||||
<a href="#bundle-{{ bundle.id }}" class="list-group-item" data-toggle="collapse">
|
v-on:click.stop="enterLoadMode">
|
||||||
<div class="checkbox">
|
<span class="icon">
|
||||||
<i class="glyphicon glyphicon-chevron-right"></i>
|
<i class="fa fa-upload"></i>
|
||||||
<label>
|
</span>
|
||||||
<input type="checkbox"/>
|
<span>Load</span>
|
||||||
{{ bundle.name }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="list-group collapse" id="bundle-{{ bundle.id }}">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row row-eq-height">
|
|
||||||
<template v-for="item in static.items | filterBy bundle.id in 'bundles'">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
<h3 class="panel-title">{{ item.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<p>{{ item.source }}</p>
|
|
||||||
<div class="button-area">
|
|
||||||
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer">
|
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-calendar"></span>
|
|
||||||
<span class="footer-text-area">
|
|
||||||
<template v-for="season_id in item.seasons">
|
|
||||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
||||||
<span class="footer-text">{{ season.name }}</span>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-grain"></span>
|
|
||||||
<div class="footer-text-area">
|
|
||||||
<template v-for="skill_id in item.skills">
|
|
||||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
||||||
<div class="footer-text">{{ skill.name }}</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
<nav class="header has-shadow">
|
||||||
</template>
|
<div class="container">
|
||||||
</div>
|
<div class="header-left">
|
||||||
</div>
|
<a id="bundles-nav" class="header-tab" href="#" v-on:click.stop="change_page('bundles')"
|
||||||
</div>
|
v-bind:class="['bundles' == active_page ? 'is-active' : '']">
|
||||||
|
Bundles
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div role="tabpanel" class="tab-pane" id="ab-list">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<form class="form-inline">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="search">Filter</label>
|
|
||||||
<input type="text" class="form-control" id="search" v-model="search_name" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-eq-height">
|
|
||||||
<template v-for="item in static.items | orderBy 'name' | filterBy search_name in 'name'">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
<h3 class="panel-title">{{ item.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<p>{{ item.source }}</p>
|
|
||||||
<div class="button-area">
|
|
||||||
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer">
|
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-calendar"></span>
|
|
||||||
<span class="footer-text-area">
|
|
||||||
<template v-for="season_id in item.seasons">
|
|
||||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
||||||
<span class="footer-text">{{ season.name }}</span>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-grain"></span>
|
|
||||||
<div class="footer-text-area">
|
|
||||||
<template v-for="skill_id in item.skills">
|
|
||||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
||||||
<div class="footer-text">{{ skill.name }}</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div role="tabpanel" class="tab-pane" id="season-list">
|
|
||||||
<div class="list-group list-group-root well">
|
|
||||||
|
|
||||||
<template v-for="season in static.seasons">
|
|
||||||
<a href="#season-{{ season.id }}" class="list-group-item" data-toggle="collapse">
|
|
||||||
<div class="checkbox">
|
|
||||||
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
||||||
<label><input type="checkbox"/>{{ season.name }}</label>
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="list-group collapse" id="season-{{ season.id }}">
|
<a id="ab-nav" class="header-tab" href="#" v-on:click.stop="change_page('ab-list')"
|
||||||
<div class="container-fluid">
|
v-bind:class="['ab-list' == active_page ? 'is-active' : '']">
|
||||||
<div class="row row-eq-height">
|
Alphabetical
|
||||||
<template v-for="item in static.items | filterBy season.id in 'seasons'">
|
</a>
|
||||||
<div class="col-md-3">
|
<a id="seasons-nav" class="header-tab" href="#" v-on:click.stop="change_page('seasons')"
|
||||||
<div class="panel panel-default">
|
v-bind:class="['seasons' == active_page ? 'is-active' : '']">
|
||||||
<div class="panel-heading">
|
Seasons
|
||||||
<h3 class="panel-title">{{ item.name }}</h3>
|
</a>
|
||||||
</div>
|
<a id="skills-nav" class="header-tab" href="#" v-on:click.stop="change_page('skills')"
|
||||||
<div class="panel-body">
|
v-bind:class="['skills' == active_page ? 'is-active' : '']">
|
||||||
<p>{{ item.source }}</p>
|
Skills
|
||||||
<div class="button-area">
|
|
||||||
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer">
|
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-calendar"></span>
|
|
||||||
<span class="footer-text-area">
|
|
||||||
<template v-for="season_id in item.seasons">
|
|
||||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
||||||
<span class="footer-text">{{ season.name }}</span>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-grain"></span>
|
|
||||||
<div class="footer-text-area">
|
|
||||||
<template v-for="skill_id in item.skills">
|
|
||||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
||||||
<div class="footer-text">{{ skill.name }}</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div role="tabpanel" class="tab-pane" id="skill-list">
|
|
||||||
<div class="list-group list-group-root well">
|
|
||||||
|
|
||||||
<template v-for="skill in static.skills">
|
|
||||||
<a href="#skill-{{ skill.id }}" class="list-group-item" data-toggle="collapse">
|
|
||||||
<div class="checkbox">
|
|
||||||
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
||||||
<label><input type="checkbox"/>{{ skill.name }}</label>
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="list-group collapse" id="skill-{{ skill.id }}">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row row-eq-height">
|
|
||||||
<template v-for="item in static.items | filterBy skill.id in 'skills'">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
<h3 class="panel-title">{{ item.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<p>{{ item.source }}</p>
|
|
||||||
<div class="button-area">
|
|
||||||
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer">
|
</nav>
|
||||||
<div class="panel-footer-area">
|
|
||||||
<span class="glyphicon glyphicon-calendar"></span>
|
<!-- Save Modal -->
|
||||||
<span class="footer-text-area">
|
<div id="save-model" class="modal" v-bind:class="[save_mode ? 'is-active' : '']">
|
||||||
<template v-for="season_id in item.seasons">
|
<div class="modal-background" v-on:click="exitSaveMode"></div>
|
||||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
<div class="modal-container">
|
||||||
<span class="footer-text">{{ season.name }}</span>
|
<div class="modal-content">
|
||||||
</template>
|
<div class="box">
|
||||||
</template>
|
<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">
|
||||||
|
<h3 class="title">{{ static.bundles[active_bundle].name }}</h3>
|
||||||
|
<progress class="progress is-info" value="{{ user_data[active_bundle].length }}"
|
||||||
|
max="{{ static.bundles[active_bundle].items_required }}"></progress>
|
||||||
|
<div class="columns is-multiline">
|
||||||
|
<div class="column is-3 is-flex" v-for="item in static.items | inBundle active_bundle">
|
||||||
|
<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 class="">{{ 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)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<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-fullwidth is-text-centered"
|
||||||
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
|
{{ season.name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer-area">
|
</footer>
|
||||||
<span class="glyphicon glyphicon-grain"></span>
|
<footer class="card-footer">
|
||||||
<div class="footer-text-area">
|
<div class="card-footer-item">
|
||||||
<template v-for="skill_id in item.skills">
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
<span class="tag is-info is-fullwidth is-text-centered"
|
||||||
<div class="footer-text">{{ skill.name }}</div>
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
</template>
|
{{ skill.name }}
|
||||||
</template>
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" placeholder="Search" v-model="search_term">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div role="tabpanel" class="tab-pane" id="about">
|
|
||||||
<div class="well">
|
|
||||||
<p>I wanted to have an easy way to keep track of my community center bundles since it is a pain to
|
|
||||||
do it in game. Here it is. This will be a better explanation when I actually write it.</p>
|
|
||||||
<p>{{ user_data | json }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="columns is-multiline">
|
||||||
|
<div class="column is-3 is-flex"
|
||||||
|
v-for="item in static.items | filterBy search_term in 'name' | orderBy 'name'">
|
||||||
|
<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 class="">{{ item.source }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-danger is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<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-fullwidth is-text-centered"
|
||||||
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
|
{{ season.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<div class="card-footer-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
|
<span class="tag is-info is-fullwidth is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<div class="column is-3 is-flex" v-for="item in static.items | filterBy active_season in 'seasons'">
|
||||||
|
<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 class="">{{ item.source }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-danger is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<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-fullwidth is-text-centered"
|
||||||
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
|
{{ season.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<div class="card-footer-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
|
<span class="tag is-info is-fullwidth is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<div class="column is-3 is-flex" v-for="item in static.items | filterBy active_skill in 'skills'">
|
||||||
|
<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 class="">{{ item.source }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-danger is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<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-fullwidth is-text-centered"
|
||||||
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
|
{{ season.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<div class="card-footer-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
|
<span class="tag is-info is-fullwidth is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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/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 type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
|
||||||
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
||||||
<script type="text/javascript" src="main.js"></script>
|
<script type="text/javascript" src="main.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
97
main.css
97
main.css
@ -1,101 +1,12 @@
|
|||||||
.just-padding {
|
.eq-line {
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group.list-group-root {
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group.list-group-root .list-group {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group.list-group-root .list-group-item {
|
|
||||||
border-radius: 0;
|
|
||||||
border-width: 1px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group.list-group-root > .list-group-item:first-child {
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group.list-group-root > .list-group > .list-group-item {
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
|
|
||||||
padding-left: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item .glyphicon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-eq-height, .row-eq-height > div[class*='col-']{
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.card {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content:stretch;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-body{
|
.card-content{
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
justify-content: space-between;
|
||||||
}
|
|
||||||
|
|
||||||
.panel-body > p{
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-body > .button-area{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-area > .btn{
|
|
||||||
flex: 1 0 auto;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-footer{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-footer-area{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-text-area{
|
|
||||||
margin-left: 1rem;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-text{
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
form{
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|||||||
130
main.js
130
main.js
@ -4,34 +4,132 @@ var v = new Vue({
|
|||||||
debug: true,
|
debug: true,
|
||||||
static: null,
|
static: null,
|
||||||
user_data: [],
|
user_data: [],
|
||||||
btnChecked: 'btn-success',
|
active_page: "bundles",
|
||||||
btnUnchecked: 'btn-warning',
|
active_room: 0,
|
||||||
boxChecked: 'glyphicon-check',
|
active_bundle: 0,
|
||||||
boxUnchecked: 'glyphicon-unchecked'
|
active_season: "spring",
|
||||||
},
|
active_skill: "farming",
|
||||||
created: function(){
|
save_mode: false,
|
||||||
this.fetchData();
|
load_mode: false
|
||||||
},
|
},
|
||||||
ready: function(){
|
ready: function(){
|
||||||
$('.list-group-item').on('click', function() {
|
this.fetchData();
|
||||||
$('.glyphicon', this)
|
new Clipboard('.copy');
|
||||||
.toggleClass('glyphicon-chevron-right')
|
storedUserData = localStorage.getItem('user_data');
|
||||||
.toggleClass('glyphicon-chevron-down');
|
if(storedUserData !== null){
|
||||||
});
|
this.loadData(storedUserData);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
user_data_serialized: function(){
|
||||||
|
return JSON.stringify(this.user_data);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchData: function(){
|
fetchData: function(){
|
||||||
this.$http.get('bundles.json', function(data, status, response){
|
this.$http.get('bundles.json', function(data, status, response){
|
||||||
if(status == 200){
|
if(status == 200){
|
||||||
this.static = data;
|
this.static = data;
|
||||||
for(var i = 0; i < this.static.items.length; i++){
|
if(this.user_data.length <= 0){
|
||||||
this.user_data.push(false);
|
for(i=0; i<this.static.bundles.length;i++){
|
||||||
|
this.user_data.push([]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
completeItem: function(itemId){
|
enterLoadMode: function(){
|
||||||
this.user_data.$set(itemId, !this.user_data[itemId]);
|
this.load_mode = true;
|
||||||
|
},
|
||||||
|
exitLoadMode: function(){
|
||||||
|
this.load_mode = false;
|
||||||
|
},
|
||||||
|
loadData: function(data){
|
||||||
|
this.user_data = JSON.parse(data);
|
||||||
|
this.exitLoadMode();
|
||||||
|
},
|
||||||
|
enterSaveMode: function(){
|
||||||
|
this.save_mode = true;
|
||||||
|
localStorage.setItem('user_data', this.user_data_serialized);
|
||||||
|
},
|
||||||
|
exitSaveMode: function(){
|
||||||
|
this.save_mode = false;
|
||||||
|
},
|
||||||
|
change_page: function(new_page){
|
||||||
|
this.active_page = new_page;
|
||||||
|
},
|
||||||
|
change_bundle: function(new_bundle){
|
||||||
|
this.active_bundle = new_bundle;
|
||||||
|
},
|
||||||
|
change_room: function(new_room){
|
||||||
|
this.active_room = new_room;
|
||||||
|
},
|
||||||
|
change_season: function(new_season){
|
||||||
|
this.active_season = new_season;
|
||||||
|
},
|
||||||
|
change_skill: function(new_skill){
|
||||||
|
this.active_skill = new_skill;
|
||||||
|
},
|
||||||
|
addItemToBundle: function(bundleId, itemId){
|
||||||
|
this.user_data[bundleId].push(itemId);
|
||||||
|
},
|
||||||
|
removeItemFromBundle: function(bundleId, itemId){
|
||||||
|
i = this.user_data[bundleId].indexOf(itemId);
|
||||||
|
this.user_data[bundleId].splice(i, 1);
|
||||||
|
},
|
||||||
|
toggleItemInBundle: function(bundleId, itemId){
|
||||||
|
if(this.isItemInBundle(bundleId, itemId)){
|
||||||
|
this.removeItemFromBundle(bundleId, itemId);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.addItemToBundle(bundleId, itemId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isItemInBundle: function(bundleId, itemId){
|
||||||
|
if(this.user_data[bundleId].indexOf(itemId) > -1){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSeasonName: function(seasonId){
|
||||||
|
for(i = 0; i < this.static.seasons.length; i++){
|
||||||
|
if(this.static.seasons[i].id === seasonId){
|
||||||
|
return this.static.seasons[i].name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
getSkillName: function(skillId){
|
||||||
|
for(i = 0; i < this.static.skills.length; i++){
|
||||||
|
if(this.static.skills[i].id === skillId){
|
||||||
|
return this.static.skills[i].name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Vue.filter('inBundle', function(value, id){
|
||||||
|
return value.filter(function(element){
|
||||||
|
if(element.bundles.indexOf(id) > -1){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
Vue.filter('filterByArray', function(array1, array2){
|
||||||
|
return array1.filter(function(element){
|
||||||
|
if(array2.indexOf(element.id) > -1){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user