20266142/The-Full-Hue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working draft

Browse Source
This commit is contained in:
Samantha
2026-05-09 13:41:33 +09:00
parent 1535ed975a
commit 7c370ce507
27 changed files with 756 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/routes/GameOver.svelte
View File

@@ -1,30 +1,31 @@
<script>
import {push} from 'svelte-spa-router';
import {querystring} from 'svelte-spa-router';
import {resetLevel} from '../stores/colorStore.js';
import {getLevel} from '../game/levelData.js';
<script>
import { push, querystring } from 'svelte-spa-router';
import { resetLevel } from '../stores/colorStore.js';
import { getLevel } from '../game/levelData.js';
$: levelNum = parseInt(new URLSearchParams($querystring).get('level')) || 1;
$: levelNum = $querystring
? parseInt(new URLSearchParams($querystring).get('level')) || 1
: 1;
function retry(){
function retry() {
const level = getLevel(levelNum);
resetLevel(levelNum, level.color);
push(`/game/${levelNum}`);
push(`/game?level=${levelNum}`);
}
</script>
<div class="screen">
<h1>the light faded...</h1>
<p>the world stays gray a little longer</p>
<div class="buttons">
<button on:click={retry}>try again</button>
<button on:click={() => push('/levelselect')}>level select</button>
</div>
<h1>the light faded...</h1>
<p>the world stays gray a little longer</p>
<div class="buttons">
<button on:click={retry}>try again</button>
<button on:click={() => push('/levelselect')}>level select</button>
</div>
</div>
<style>
.screen{
width: 800px;
.screen {
width: 800px;
height: 450px;
margin: 0 auto;
background: #0a0a0a;
@@ -35,33 +36,31 @@
justify-content: center;
gap: 16px;
}
h1{
font-family:'Courier New', Courier, monospace;
font-size: 48px;
h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 48px;
font-weight: 400;
color: white;
}
p{
font-family:'Courier New', Courier, monospace;
font-size: 20px;
opacity: .9;
p {
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
opacity: 0.6;
}
.buttons{
.buttons {
display: flex;
gap: 16px;
margin-top: 8px
margin-top: 8px;
}
button{
button {
padding: 10px 32px;
border-radius: 24px;
cursor: pointer;
font-family:'Courier New', Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: white;
}
button:hover{
background: rgba(255,255,255,0.18);
}
button:hover { background: rgba(255,255,255,0.18); }
</style>

41
src/routes/LevelSelect.svelte
View File

@@ -48,18 +48,21 @@
justify-content: center;
gap: 24px;
}
h1{
font-family:'Courier New', Courier, monospace;
font-size: 42px;
h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 34px;
font-weight: 400;
}
.level-grid{
.level-grid {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 560px;
}
.level-card{
width: 120px;
height: 140px;
.level-card {
width: 100px;
height: 118px;
background: #222;
border: 1px solid #444;
border-radius: 12px;
@@ -68,24 +71,32 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
gap: 8px;
color: white;
transition: transform 0.15s, border-color 0.15s;
}
.level-card:hover:not(.locked){
.level-card:hover:not(.locked) {
transform: translateY(-4px);
border-color: var(--c);
}
.level-card.locked{
.level-card.locked {
opacity: 0.4;
cursor: not-allowed;
}
.level-card.locked .swatch{
.swatch {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c);
}
.level-card.locked .swatch {
background: #555;
}
.name{
font-family:'Courier New', Courier, monospace;
font-size: 18px;
.name {
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
text-align: center;
padding: 0 4px;
}
.back{
background: none;

77
src/routes/Win.svelte Normal file
View File

@@ -0,0 +1,77 @@
<script>
import { push } from 'svelte-spa-router';
</script>
<div class="screen">
<h1 class="title">color restored</h1>
<p class="line1">every fragment found. every hue returned to the world.</p>
<p class="line2">the little painter has done it.</p>
<button on:click={() => push('/')}>back to home</button>
</div>
<style>
.screen {
width: 800px;
height: 450px;
margin: 0 auto;
background: #0a0a0a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
}
.title {
font-family: 'Courier New', Courier, monospace;
font-size: 52px;
font-weight: 400;
background: linear-gradient(
90deg,
#FF4136, #FF851B, #FFDC00, #2ECC40,
#0074D9, #B10DC9, #FF69B4, #FF4136
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
from { background-position: 0% center; }
to { background-position: 200% center; }
}
.line1 {
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
color: #ccc;
text-align: center;
}
.line2 {
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
color: #666;
text-align: center;
margin-top: -4px;
}
button {
margin-top: 20px;
padding: 10px 36px;
border-radius: 24px;
cursor: pointer;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
transition: background 0.15s;
}
button:hover {
background: rgba(255, 255, 255, 0.14);
}
</style>