Last active
August 12, 2020 04:07
-
-
Save OozoraHaruto/0079856e4a47965c851a5211a708e53d to your computer and use it in GitHub Desktop.
A simple crop tracker on when to water plants according to https://gamingph.com/2019/10/crops-guide-in-doraemon-story-of-seasons/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Doraemon Story of Seasons</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> | |
| <script> | |
| const SEASONS = [ | |
| 'Spring', | |
| "Summer", | |
| "Autumn", | |
| "Winter" | |
| ] | |
| const CROPS = { | |
| "Bell Pepper": { days: 10, price: 80, sell: 130, multi: true, season: "Summer" }, | |
| "Broccoli": { days: 8, price: 60, sell: 90, multi: true, season: "Winter" }, | |
| "Burdock": { days: 9, price: 50, sell: 240, multi: false, season: "Autumn" }, | |
| "Cabbage": { days: 13, price: 90, sell: 410, multi: false, season: "Spring" }, | |
| "Campanula": { days: 11, price: 70, sell: 320, multi: false, season: "Spring" }, | |
| "Carnation": { days: 12, price: 80, sell: 360, multi: false, season: "Spring" }, | |
| "Carrot": { days: 12, price: 80, sell: 360, multi: false, season: "Autumn" }, | |
| "Cauliflower": { days: 12, price: 80, sell: 360, multi: false, season: "Spring" }, | |
| "Corn": { days: 14, price: 140, sell: 220, multi: true, season: "Summer" }, | |
| "Cucumber": { days: 9, price: 80, sell: 120, multi: true, season: "Spring" }, | |
| "Daikon": { days: 4, price: 20, sell: 90, multi: false, season: "Winter" }, | |
| "Eggplant": { days: 11, price: 70, sell: 320, multi: false, season: "Autumn" }, | |
| "Gerbera": { days: 14, price: 90, sell: 450, multi: false, season: "Autumn" }, | |
| "Green Pepper": { days: 12, price: 90, sell: 140, multi: true, season: "Autumn" }, | |
| "Hibiscus": { days: 7, price: 40, sell: 170, multi: false, season: "Summer" }, | |
| "Lily": { days: 11, price: 70, sell: 320, multi: false, season: "Summer" }, | |
| "Melon": { days: 18, price: 140, sell: 660, multi: true, season: "Summer" }, | |
| "Morning Glory": { days: 7, price: 80, sell: 170, multi: false, season: "Summer" }, | |
| "Napa Cabbage": { days: 12, price: 80, sell: 360, multi: false, season: "Winter" }, | |
| "Onion": { days: 6, price: 30, sell: 140, multi: false, season: "Summer" }, | |
| "P. Daisy": { days: 8, price: 40, sell: 170, multi: false, season: "Spring" }, | |
| "Peas": { days: 10, price: 40, sell: 130, multi: true, season: "Spring" }, | |
| "Pineapple": { days: 13, price: 100, sell: 380, multi: true, season: "Summer" }, | |
| "Pink": { days: 8, price: 50, sell: 210, multi: false, season: "Autumn" }, | |
| "Potato": { days: 8, price: 50, sell: 210, multi: false, season: "Spring" }, | |
| "Pumpkin": { days: 4, price: 20, sell: 90, multi: false, season: "Summer" }, | |
| "S. Potato Slip": { days: 5, price: 40, sell: 60, multi: true, season: "Autumn" }, | |
| "Snowdrop": { days: 9, price: 50, sell: 240, multi: false, season: "Winter" }, | |
| "Spinach": { days: 5, price: 30, sell: 110, multi: false, season: "Autumn" }, | |
| "Strawberry": { days: 15, price: 150, sell: 240, multi: true, season: "Spring" }, | |
| "Sunflower": { days: 12, price: 80, sell: 360, multi: false, season: "Summer" }, | |
| "Tomato": { days: 12, price: 110, sell: 180, multi: true, season: "Summer" }, | |
| "Turnip": { days: 5, price: 30, sell: 110, multi: false, season: "Spring" }, | |
| "Watermelon": { days: 7, price: 40, sell: 170, multi: true, season: "Summer" }, | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| <h1 class="text-center font-weight-light">Doraemon Story of Seasons</h1> | |
| </div> | |
| </div> | |
| <div class="row align-items-center"> | |
| <div class="col"> | |
| <p class="lead m-0"><span id="day"></span></p> | |
| </div> | |
| <div class="col text-right"> | |
| <button type="button" class="btn btn-link" data-toggle="modal" data-target="#mdlDayChange"> Change day</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="card mb-2"> | |
| <div class="card-body"> | |
| <form class="form-inline"> | |
| <div class="form-group mr-3 mb-0"> | |
| <select id="selCrops" class="form-control"></select> | |
| </div> | |
| <button type="button" class="btn btn-success" onclick="addCropToPlot()">Add crop to plot</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <table class="table table-striped table-hover table-sm text-center"> | |
| <thead> | |
| <th>Crop</th> | |
| <th>Day</th> | |
| <th>What to do</th> | |
| <th></th> | |
| </thead> | |
| <tbody id="plotsData"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <button class="btn btn-primary btn-block" onclick="nextDay()">Next day</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="mdlDayChange" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <form> | |
| <div class="form-row"> | |
| <div class="form-group col-sm-8"> | |
| <label for="selSeason">Season</label> | |
| <select id="selSeason" class="form-control"> | |
| <option value="Spring">Spring</option> | |
| <option value="Summer">Summer</option> | |
| <option value="Autumn">Autumn</option> | |
| <option value="Winter">Winter</option> | |
| </select> | |
| </div> | |
| <div class="form-group col-sm-4"> | |
| <label for="txtDay">Day</label> | |
| <input type="number" class="form-control" id="txtDay" placeholder="1-30"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
| <button type="button" onclick="changeDay()" class="btn btn-danger">Change Day</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let season = localStorage.getItem("DORAEMON_STORY_OF_SEASONS_SEASON") || "Spring"; | |
| let day = Number(localStorage.getItem("DORAEMON_STORY_OF_SEASONS_DAY")) || 1; | |
| let waterCrop = 0; | |
| let currentPlots = JSON.parse(localStorage.getItem('DORAEMON_STORY_OF_SEASONS_PLOTS')) || []; | |
| const selCrops = document.getElementById('selCrops'); | |
| </script> | |
| <script> | |
| const setWhenToWaterCrop = () =>{ | |
| switch(season){ | |
| case 'Spring': waterCrop = 4; break; | |
| case 'Summer': waterCrop = 3; break; | |
| case 'Autumn': waterCrop = 4; break; | |
| case 'Winter': waterCrop = 4; break; | |
| } | |
| } | |
| const nextDay = () => { | |
| day += 1; | |
| if (day > 30) { // Change Season | |
| let seasonIndex = SEASONS.indexOf(season) | |
| seasonIndex = (seasonIndex == 3) ? 0 : seasonIndex + 1 | |
| resetData(SEASONS[seasonIndex]) | |
| } | |
| document.getElementById("day").innerText = `${season}, Day ${day}`; | |
| refreshTableData() | |
| } | |
| const checkTodo = dayNo => (dayNo % waterCrop == 1) ? "Fancy fertilizer, water" : "Fancy fertilizer"; | |
| const addCropToPlot = () => { | |
| let selCrops = document.getElementById("selCrops"); | |
| currentPlots.push({ | |
| crop: selCrops.value, | |
| start: day - 1 | |
| }) | |
| refreshTableData() | |
| } | |
| const refreshCropsSelector = () =>{ | |
| $('#selCrops').empty() | |
| let seasonCrops = Object.keys(CROPS).filter(crop => CROPS[crop].season == season) | |
| seasonCrops.forEach(crop => { | |
| let opt = document.createElement("option"); | |
| opt.appendChild(document.createTextNode(crop)); | |
| opt.value = crop; | |
| selCrops.appendChild(opt); | |
| }); | |
| } | |
| const refreshTableData = () => { | |
| let oldTBody = document.getElementById("plotsData") | |
| let newTbody = document.createElement("tbody"); | |
| let toDelete = [] | |
| newTbody.setAttribute("id", "plotsData") | |
| currentPlots.forEach((plot, i) => { | |
| let crop = CROPS[plot.crop] | |
| let dayNo = day - plot.start | |
| let row = newTbody.insertRow(); | |
| let cellCrop = row.insertCell() | |
| let cellDay = row.insertCell() | |
| let cellDoWhat = row.insertCell() | |
| let cellDelete = row.insertCell() | |
| cellCrop.innerHTML = plot.crop | |
| cellDay.innerHTML = dayNo | |
| cellDoWhat.innerHTML = checkTodo(dayNo) | |
| cellDelete.innerHTML = `<button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteCrop(${i})">Delete</button>` | |
| }) | |
| oldTBody.parentNode.replaceChild(newTbody, oldTBody) | |
| saveData(); | |
| } | |
| const deleteCrop = index =>{ | |
| var res = confirm(`Are you sure you want to delete "${currentPlots[index].crop}"?`) | |
| if(res === true){ | |
| currentPlots.splice(index, 1) | |
| refreshTableData(); | |
| } | |
| } | |
| const changeDay = () =>{ | |
| let newSeason = document.getElementById('selSeason').value | |
| let newDay = Number(document.getElementById('txtDay').value) | |
| if(isNaN(newDay)){ | |
| newDay = 1 | |
| }else{ | |
| if(newDay < 1 || newDay > 30){ | |
| newDay = 1 | |
| } | |
| } | |
| resetData(newSeason, newDay - 1) | |
| $('#mdlDayChange').modal('hide') | |
| } | |
| const saveData = () => { | |
| localStorage.setItem("DORAEMON_STORY_OF_SEASONS_SEASON", season) | |
| localStorage.setItem("DORAEMON_STORY_OF_SEASONS_DAY", day) | |
| localStorage.setItem("DORAEMON_STORY_OF_SEASONS_PLOTS", JSON.stringify(currentPlots)) | |
| } | |
| const resetData = (newSeason = "Spring", newDay = 0) => { | |
| localStorage.clear() | |
| if(season != newSeason){ | |
| refreshTableData() | |
| } | |
| season = newSeason | |
| day = newDay | |
| currentPlots = [] | |
| setWhenToWaterCrop(); | |
| refreshCropsSelector(); | |
| nextDay() | |
| } | |
| </script> | |
| <script> | |
| document.getElementById("day").innerText = `${season}, Day ${day}`; | |
| setWhenToWaterCrop(); | |
| refreshCropsSelector(); | |
| refreshTableData(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment