Add dino + fix ethan

This commit is contained in:
Shav Kinderlehrer 2024-07-17 01:55:27 -04:00
parent a818e3d932
commit 0f4dcf53df
8 changed files with 189 additions and 25 deletions

1
.envrc Normal file
View File

@ -0,0 +1 @@
use flake

1
.gitignore vendored
View File

@ -9,3 +9,4 @@ node_modules
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
yarn-error.log
/.direnv/

View File

@ -1,5 +1,23 @@
{
"nodes": {
"flake-utils": {
"inputs": {
"systems": "systems"
},
"locked": {
"lastModified": 1710146030,
"narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1711163522,
@ -18,8 +36,24 @@
},
"root": {
"inputs": {
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs"
}
},
"systems": {
"locked": {
"lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems",
"repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github"
},
"original": {
"owner": "nix-systems",
"repo": "default",
"type": "github"
}
}
},
"root": "root",

View File

@ -1,27 +1,22 @@
{
description = "Cool people homepage";
description = "A very basic svelte flake";
inputs = {
nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
flake-utils.url = "github:numtide/flake-utils";
};
outputs = { self, nixpkgs }:
let
system = "aarch64-darwin";
pkgs = nixpkgs.legacyPackages.${system};
in {
devShells.${system}.default =
pkgs.mkShell {
buildInputs = with pkgs; [
yarn
nodePackages.svelte-language-server
nodePackages.typescript-language-server
nodePackages.vscode-css-languageserver-bin
tree
];
shellHook = ''
exec zsh
'';
};
};
outputs = { self, nixpkgs, flake-utils }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = nixpkgs.legacyPackages.${system};
in {
devShell = pkgs.mkShell {
buildInputs = with pkgs; [
yarn
nodePackages.svelte-language-server
vscode-langservers-extracted
];
};
});
}

View File

@ -25,7 +25,7 @@
}, 1);
</script>
<main>
<div>
<pre>{months} month{months == 1 ? "" : "s"} until {birthday}, {year}</pre>
<pre>{weeks} week{weeks == 1 ? "" : "s"} until {birthday}, {year}</pre>
<pre>{days} day{days == 1 ? "" : "s"} until {birthday}, {year}</pre>
@ -35,10 +35,10 @@
<pre>{milliseconds} millisecond{milliseconds == 1
? ""
: "s"} until {birthday}, {year}</pre>
</main>
</div>
<style>
main {
div {
margin: 10px 0;
}

View File

@ -6,7 +6,8 @@
"liv",
"nis",
"gremlin",
"ethan"
"ethan",
"dino"
];
</script>

View File

@ -0,0 +1,132 @@
<script>
import CountDownTimer from "$lib/elem/CountDownTimer.svelte";
const valueMap = {
32: ["Woah, my water is frozen.", "[ded]"],
40: ["Alright, I should get another sweater.", "[teeth chattering]"],
50: ["Ok, this is kinda chilly.", "Can I get frostbite from this?"],
60: ["I don't mind this at all.", "I think I need to get some more layers."],
70: ["This is pretty nice!", "Eh, could be warmer."],
80: ["I do not like this.", "Finally, some summer warmth."],
90: ["My face is MELTING OFF!", "I guess I should turn the fan on now."],
100: ["[dead]", "Wow, it's kinda hot."],
110: ["[literally ashes]", "Wow I actually sweated a bit."],
120: ["[..dead..]", "Now *this* is hot!"],
212: ["WHY MY WATER HAS BUBBLES?!", "It's boiling."]
}
let value = 70;
let closest = 70;
$: {
closest = Object.keys(valueMap).reduce((prev, curr) => {
return (Math.abs(Number(curr) - Number(value)) < Math.abs(Number(prev) - Number(value)) ? Number(curr) : Number(prev))
});
}
</script>
<main>
<div id="main">
<div id="message">
<h1>Hey</h1>
<p>So I was thinking about what the best way to design this page would be, and honestly it wasn't very difficult. <b>Hopefully you like it.</b></p>
<h2>I present to you..<h2>
</div>
<div id="game">
<h1 class="title">The Temperature Slider - {value}°F</h1>
<div class="slider-container">
<input bind:value={value} type="range" min="32" max="212" class="slider" id="range">
</div>
<div id="columns-wrap">
<div id="columns">
<div id="col-1">
<h3>I would say..</h3>
<p class="dialogue">{valueMap[closest][0]}</p>
</div>
<div id="col-2">
<h3>You would say..</h3>
<p class="dialogue">{valueMap[closest][1]}</p>
</div>
</div>
</div>
</div>
<p><b>Well, that's kinda fun.<b>
<br>
I hope you like it, but mostly I hope you have a great birthday. We only get them once a year, so here's my contribution towards making this the best one yet.
<br>
I hope it helps.
</p>
<CountDownTimer birthday={"Jul 17"} />
</div>
</main>
<style>
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
main {
font-family: "PT Serif", serif;
padding: 10px;
display: flex;
justify-content: center;
background: lavender;
color: black;
}
#main {
max-width: 80ch;
}
h1 {
margin-bottom: 0;
padding-bottom: 1em;
}
#game {
border-radius: 2em;
box-shadow: 5px 5px 50px #0000000f;
padding: 1em;
}
.title {
text-align: center;
}
.slider-container {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 1em;
border-radius: 999px;
background: linear-gradient(90deg, #0000ff, #ff0000);
}
#columns-wrap {
display: flex;
justify-content: center;
}
#columns {
display: grid;
grid-template-columns: auto auto;
}
#col-1, #col-2 {
margin: 1em;
max-width: 12em;
}
.dialogue {
font-style: italic;
}
.dialogue::before {
content: '"';
}
.dialogue::after {
content: '"';
}
</style>

View File

@ -133,7 +133,7 @@
{/each}
</p>
</div>
<CountDownTimer birthday={"Mar 25"} />
<CountDownTimer birthday={"Mar 30"} />
</div>
</main>