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.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*
yarn-error.log yarn-error.log
/.direnv/

View File

@ -1,5 +1,23 @@
{ {
"nodes": { "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": { "nixpkgs": {
"locked": { "locked": {
"lastModified": 1711163522, "lastModified": 1711163522,
@ -18,8 +36,24 @@
}, },
"root": { "root": {
"inputs": { "inputs": {
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs" "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", "root": "root",

View File

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

View File

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

View File

@ -6,7 +6,8 @@
"liv", "liv",
"nis", "nis",
"gremlin", "gremlin",
"ethan" "ethan",
"dino"
]; ];
</script> </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} {/each}
</p> </p>
</div> </div>
<CountDownTimer birthday={"Mar 25"} /> <CountDownTimer birthday={"Mar 30"} />
</div> </div>
</main> </main>