payne8/bedtime-checklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add brush hair

Browse Source
This commit is contained in:
Mason Payne
2021-05-28 14:06:28 -06:00
parent dbb4781a88
commit f4b7dafcee
4 changed files with 157 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -8,6 +8,8 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@types/canvas-confetti": "^1.4.0",
"canvas-confetti": "^1.4.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"vue": "^2.6.11", "vue": "^2.6.11",

108
public/svgs/comb.svg Normal file
View File

@ -0,0 +1,108 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 434.117 434.117" style="enable-background:new 0 0 434.117 434.117;" xml:space="preserve">
<g>
<g>
<path stroke="white" fill="white" d="M373.448,72.636l-10.102,9.185c17.22,18.942-3.024,66.58-44.209,104.025c-20.89,18.985-44.061,32.785-65.246,38.861
c-19.261,5.524-34.756,3.797-42.513-4.739l-10.105,9.182c7.482,8.235,18.517,12.428,32.108,12.428
c7.39,0,15.536-1.241,24.274-3.746c23.159-6.642,48.256-21.516,70.666-41.882C376.592,152.061,396.413,97.896,373.448,72.636z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M196.028,275.258c-25.366,22.74-45.573,49.186-65.114,74.762c-10.194,13.339-19.821,25.941-29.904,37.707
c-16.42,18.79-31.753,28.387-45.568,28.523c-10.115,0.068-19.951-5.026-29.232-15.235c-9.281-10.209-13.448-20.487-12.389-30.546
c1.447-13.742,12.46-28.093,32.678-42.619c12.72-8.953,26.175-17.338,40.421-26.214c27.32-17.024,55.569-34.627,80.623-57.719
l-9.254-10.039c-24.11,22.222-51.806,39.48-78.59,56.17c-14.413,8.981-28.025,17.464-41.112,26.675
c-23.569,16.934-36.47,34.534-38.344,52.314c-1.485,14.099,3.852,27.947,15.865,41.161c11.889,13.078,25.018,19.707,39.03,19.707
c0.145,0,0.292-0.002,0.437-0.002c17.877-0.176,36.623-11.343,55.758-33.242c10.377-12.105,20.117-24.854,30.43-38.352
c19.159-25.074,38.97-51.002,63.379-72.885L196.028,275.258z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M211.311,219.87l-60.105-66.113c-2.536-2.789-6.854-2.993-9.643-0.457c-2.789,2.538-2.993,6.854-0.457,9.644
l60.104,66.111c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.282-0.585,4.589-1.775
C213.641,226.978,213.847,222.661,211.311,219.87z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M265.175,224.855l-99.685-109.66c-2.534-2.79-6.852-2.997-9.643-0.461c-2.79,2.534-2.997,6.852-0.461,9.643
l99.685,109.662c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.282-0.585,4.591-1.775
C267.507,231.962,267.711,227.646,265.175,224.855z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M299.15,207.961L185.537,82.978c-2.536-2.789-6.852-2.995-9.643-0.459c-2.789,2.534-2.995,6.852-0.459,9.643
l113.613,124.983c1.347,1.481,3.197,2.234,5.053,2.234c1.637,0,3.282-0.585,4.589-1.773
C301.48,215.069,301.686,210.751,299.15,207.961z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M326.16,183.411L210.62,56.314c-2.536-2.79-6.852-2.995-9.643-0.459c-2.79,2.538-2.995,6.854-0.459,9.644l115.538,127.095
c1.347,1.483,3.197,2.236,5.053,2.236c1.637,0,3.282-0.585,4.591-1.777C328.489,190.517,328.696,186.201,326.16,183.411z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M353.159,158.865L240.191,34.591c-2.536-2.79-6.852-2.995-9.643-0.459c-2.79,2.536-2.995,6.852-0.459,9.643
l112.966,124.273c1.347,1.483,3.197,2.236,5.053,2.236c1.638,0,3.282-0.587,4.589-1.775
C355.489,165.974,355.695,161.656,353.159,158.865z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M372.48,125.841L274.724,18.303c-2.534-2.79-6.852-2.997-9.643-0.461c-2.79,2.534-2.997,6.852-0.461,9.643l97.758,107.54
c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.282-0.587,4.589-1.775C374.812,132.948,375.016,128.632,372.48,125.841z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M373.357,72.566l-60.104-66.12c-2.534-2.79-6.852-2.997-9.643-0.461c-2.789,2.536-2.995,6.854-0.459,9.644l60.104,66.12
c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.284-0.585,4.589-1.773C375.687,79.674,375.894,75.357,373.357,72.566z"/>
</g>
</g>
<g>
<g>
<path stroke="white" fill="white" d="M416.465,46.258c-19.111-21.021-50.575-27.808-88.596-19.111l3.045,13.31c33.005-7.549,59.8-2.227,75.45,14.986
c15.193,16.708,18.219,43.025,8.523,74.103c-10.09,32.343-32.596,65.56-63.37,93.534c-62.57,56.88-139.773,74.226-172.097,38.67
c-15.942-17.545-18.403-46.488-6.753-79.413l-12.872-4.553c-13.38,37.813-9.911,71.765,9.521,93.15
c13.817,15.201,34.246,22.47,57.962,22.468c40.456-0.003,90.464-21.166,133.422-60.22c32.544-29.582,56.417-64.944,67.22-99.57
C439.117,97.719,435.048,66.697,416.465,46.258z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

41
src/App.vue
View File

@ -4,25 +4,26 @@
<span v-show="checklist.items.every(item => item.done)"> <span v-show="checklist.items.every(item => item.done)">
<span class="checklist-winner fa fa-star"></span> <span class="checklist-winner fa fa-star"></span>
<span class="checklist-winner fa fa-star"></span> <span class="checklist-winner fa fa-star"></span>
<span class="checklist-winner fa fa-star"></span>
</span> </span>
<span class="checklist-name">{{checklist.name}}</span> <span class="checklist-name">{{checklist.name}}</span>
<span v-show="checklist.items.every(item => item.done)"> <span v-show="checklist.items.every(item => item.done)">
<span class="checklist-winner fa fa-star"></span> <span class="checklist-winner fa fa-star"></span>
<span class="checklist-winner fa fa-star"></span> <span class="checklist-winner fa fa-star"></span>
<span class="checklist-winner fa fa-star"></span>
</span> </span>
<div v-for="item in checklist.items" :key="item.name" class="item-container" :class="{'item-done': item.done}" @click="item.done = !item.done"> <div v-for="item in checklist.items" :key="item.name" class="item-container" :class="{'item-done': item.done}" @click="item.done = !item.done; completeATask()">
<!-- <span>{{item.done}}</span>--> <!-- <span>{{item.done}}</span>-->
<span class="item-icon" :class="'fa fa-' + item.icon"></span> <span v-if="!item.isSVG"><span class="item-icon" :class="'fa fa-' + item.icon"></span></span>
<span v-if="item.isSVG"><span class="item-icon svg-size"><img :src="svgs[item.icon]"/></span></span>
<span class="item-grow">{{item.name}}</span> <span class="item-grow">{{item.name}}</span>
</div> </div>
</div> </div>
<div class="attribution">Icons made by <a href="https://www.flaticon.com/authors/darius-dan" title="Darius Dan">Darius Dan</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import * as confetti from 'canvas-confetti';
@Component({ @Component({
components: { components: {
@ -39,6 +40,12 @@ export default class App extends Vue {
done: false, done: false,
icon: "tooth" icon: "tooth"
}, },
{
name: "Brush Hair",
done: false,
icon: "brush",
isSVG: true
},
{ {
name: "Floride", name: "Floride",
done: false, done: false,
@ -64,6 +71,12 @@ export default class App extends Vue {
done: false, done: false,
icon: "tooth" icon: "tooth"
}, },
{
name: "Brush Hair",
done: false,
icon: "brush",
isSVG: true
},
{ {
name: "Pajamas", name: "Pajamas",
done: false, done: false,
@ -82,6 +95,14 @@ export default class App extends Vue {
] ]
} }
]; ];
private svgs: {[key:string]: string} = {
'brush': '/svgs/comb.svg'
};
private completeATask() {
confetti.default()
}
} }
interface Checklist { interface Checklist {
@ -93,6 +114,7 @@ interface ToDoItem {
name: string; name: string;
done: boolean; done: boolean;
icon: string; icon: string;
isSVG?: boolean;
} }
</script> </script>
@ -155,6 +177,13 @@ interface ToDoItem {
.item-icon { .item-icon {
font-size: 48px; font-size: 48px;
&.svg-size {
img {
height: 48px;
width: 48px;
}
}
} }
.item-grow { .item-grow {
@ -162,4 +191,8 @@ interface ToDoItem {
} }
} }
.attribution {
display: none;
}
</style> </style>

10
yarn.lock
View File

@ -969,6 +969,11 @@
"@types/connect" "*" "@types/connect" "*"
"@types/node" "*" "@types/node" "*"
"@types/canvas-confetti@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.4.0.tgz#22127a1a9ed9d456e626d6e2b9a4d3b0a240e18b"
integrity sha512-Neq4mvVecrHmTdyo98EY5bnKCjkZGQ6Ma7VyOrxIcMHEZPmt4kfquccqfBMrpNrdryMHgk3oGQi7XtpZacltnw==
"@types/connect-history-api-fallback@*": "@types/connect-history-api-fallback@*":
version "1.3.4" version "1.3.4"
resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8" resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8"
@ -2464,6 +2469,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8"
integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og== integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og==
canvas-confetti@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.4.0.tgz#840f6db4a566f8f32abe28c00dcd82acf39c92bd"
integrity sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ==
case-sensitive-paths-webpack-plugin@^2.3.0: case-sensitive-paths-webpack-plugin@^2.3.0:
version "2.4.0" version "2.4.0"
resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"