Skip to content

Commit 720ffe5

Browse files
leomotorsleomotors
authored
Merge pull request #1 from Leomotors/checkpoint-2
Checkpoint 2
2 parents 18cac88 + 4dc8db0 commit 720ffe5

13 files changed

Lines changed: 99 additions & 31 deletions

‎assets/NOTE.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# NOTE about ./assets
2+
3+
This folder and its item will not be shipped along with deployment.
4+
5+
Instead, I'm using GitHub as Image Provider Service :trollface:
6+
7+
## Picture Sources (only the one I remembered)
8+
9+
[gochiusa1.jpg](https://www.zerochan.net/3182832#full)

‎assets/gochiusa1.jpg‎

1.31 MB
Loading

‎assets/gochiusa2.jpg‎

648 KB
Loading

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mini-vector-calculator",
3-
"version": "2.0.2",
3+
"version": "2.0.4",
44
"private": true,
55
"scripts": {
66
"build": "rollup -c",

‎public/global.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ html, body {
22
position: relative;
33
max-width: 100vw;
44
min-height: 100vh;
5+
overflow-x: hidden;
56
}
67

78
body {

‎src/App.svelte‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,24 @@
77
let Vectors: Vector[] = [];
88
99
// Initialize with preset Values
10-
Vectors.push(new Vector(1, 2, 3));
11-
Vectors.push(new Vector(4, 5, 6));
10+
let InitVectors: Vector[] = [new Vector(1, 2, 3), new Vector(4, 5, 6)];
11+
12+
function Initialize() {
13+
Vectors = [];
14+
InitVectors.map((v: Vector) => Vectors.push(v));
15+
}
1216
1317
let input_i: number, input_j: number, input_k: number;
1418
1519
function addVectorFromInput(): void {
16-
if (input_i == null || input_j == null || input_k == null) {
17-
console.log("ERROR addVectorFromInput(): Input Invalid");
18-
return;
19-
}
20-
21-
Vectors = [...Vectors, new Vector(input_i, input_j, input_k)];
20+
Vectors = [
21+
...Vectors,
22+
new Vector(input_i ?? 0, input_j ?? 0, input_k ?? 0),
23+
];
2224
[input_i, input_j, input_k] = [null, null, null];
2325
}
26+
27+
Initialize();
2428
</script>
2529

2630
<body id="MainBody">
@@ -36,7 +40,8 @@
3640
<input type="number" placeholder="i" bind:value={input_i} />
3741
<input type="number" placeholder="j" bind:value={input_j} />
3842
<input type="number" placeholder="k" bind:value={input_k} />
39-
<button on:click={addVectorFromInput}>Add</button>
43+
<button on:click={addVectorFromInput}>+</button>
44+
<button on:click={Initialize}>Reset</button>
4045
</div>
4146
</main>
4247

@@ -50,5 +55,5 @@
5055
</body>
5156

5257
<style lang="scss">
53-
@import "AppStyle";
58+
@import "App";
5459
</style>

src/_AppStyle.scss renamed to src/_App.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ $svelte-h1-color: #ff3e00;
44
$main-bg-color: rgba(225, 226, 244, 0.85);
55

66
#MainBody {
7-
/* bg img is temp */
8-
background-image: url("https://static.zerochan.net/Gochuumon.wa.Usagi.Desu.ka.full.3182832.jpg");
97
background-repeat: no-repeat;
108
background-position: center;
119
background-attachment: fixed;
@@ -48,7 +46,7 @@ footer {
4846

4947
#VectorsCard {
5048
display: flex;
51-
margin: 2em 3em;
49+
margin: 1.5em 2.5em;
5250
}
5351

5452
button {

‎src/components/FooterBar.svelte‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
<script lang="ts">
2-
import { projectInfo } from "../json/ProjectInfo.json";
2+
import { projectInfo } from "../data/ProjectInfo.json";
3+
import { backgrounds } from "../data/Background.json";
4+
import { onMount } from "svelte";
5+
6+
let selected_bg: string;
7+
8+
function setBackground() {
9+
let mainBody = document.getElementById("MainBody");
10+
mainBody.style.backgroundImage = `url("${backgrounds[selected_bg]}")`;
11+
}
12+
13+
onMount(setBackground);
314
</script>
415

516
<main>
6-
<span id="footer-msg">
17+
<span id="info-msg">
718
Made with Svelte by
819
<a href={projectInfo.AuthorGitHubUrl} target="_blank">
920
{projectInfo.AuthorName}
@@ -13,17 +24,21 @@
1324
|
1425
<a href={projectInfo.こころぴょんぴょん} target="_blank">Kofi</a>
1526
</span>
27+
28+
<span id="bg-section">
29+
Background:
30+
<select
31+
id="background-select"
32+
bind:value={selected_bg}
33+
on:change={setBackground}
34+
>
35+
{#each Object.entries(backgrounds) as [name, url]}
36+
<option>{name}</option>
37+
{/each}
38+
</select>
39+
</span>
1640
</main>
1741

1842
<style lang="scss">
19-
$footer-bg-color: lavender;
20-
$svelte-default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
21-
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
22-
23-
#footer-msg {
24-
background-color: $footer-bg-color;
25-
padding: 0.5em;
26-
border-radius: 0.69em;
27-
font-family: "Anakotmai", $svelte-default-font;
28-
}
43+
@import "FooterBar";
2944
</style>

‎src/components/VectorCard.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,16 @@
1313
</main>
1414

1515
<style lang="scss">
16+
$card-color: #ffe8da;
17+
$params-color: aquamarine;
18+
1619
p.params {
17-
background-color: aquamarine;
20+
background-color: $params-color;
1821
}
1922
2023
main {
21-
background-color: #ffe8da;
24+
background-color: $card-color;
2225
border-radius: 1em;
26+
margin: 0.5em;
2327
}
2428
</style>

0 commit comments

Comments
 (0)