Skip to content

Commit a103e11

Browse files
armsnyderarmsnyder
committed
Web app: Enter nickname and terminal-looking styling
Also organized the web files a bit
1 parent 766f354 commit a103e11

23 files changed

+627
-104
lines changed

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@rollup/plugin-typescript": "^8.1.0",
1414
"@tsconfig/svelte": "^1.0.0",
1515
"husky": "^4.3.6",
16+
"less": "^4.1.0",
1617
"prettier": "^2.2.1",
1718
"prettier-plugin-svelte": "^1.4.2",
1819
"pretty-quick": "^3.1.0",

‎web/public/global.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* Global variables */
2+
:root {
3+
--bg-color: #170f2b;
4+
--fg-color: rgb(146, 146, 146);
5+
--accent-color: gainsboro;
6+
--default-margin: 1em;
7+
}
8+
9+
/* Styles common to all elements */
10+
* {
11+
cursor: default;
12+
user-select: none;
13+
}
14+
15+
/* Styles for elements outside of the Svelete app */
16+
html,
17+
body {
18+
margin: 0;
19+
height: 100%;
20+
}

‎web/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
<title>Othelgo</title>
88

9+
<link rel='stylesheet' href='/global.css'>
910
<link rel='stylesheet' href='/build/bundle.css'>
1011

1112
<script defer src='/build/bundle.js'></script>

‎web/src/Alert.svelte‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎web/src/App.svelte‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,40 @@
11
<script lang="ts">
2+
import type { Error } from "./types/messageTypes";
23
import { onMount } from "svelte";
3-
import Board from "./Board.svelte";
4-
import Alert from "./Alert.svelte";
5-
import type { Decorate, Error } from "./messageTypes";
6-
import { createMessageReceiver, sendMessage } from "./websocket";
4+
import { createMessageReceiver, sendMessage } from "./stores/websocket";
5+
import Title from "./lib/Title.svelte";
6+
import Text from "./lib/Text.svelte";
7+
import CenterLayout from "./lib/CenterLayout.svelte";
8+
import SceneRouter from "./SceneRouter.svelte";
79
810
onMount(() => sendMessage({ action: "hello", version: "0.0.0" }));
911
10-
const decorate = createMessageReceiver<Decorate>({
11-
action: "decorate",
12-
decoration: "",
13-
});
14-
1512
const error = createMessageReceiver<Error>({ action: "error", error: "" });
1613
</script>
1714

18-
<style>
19-
:root {
20-
font-family: Arial, sans-serif;
15+
<style lang="less">
16+
.app {
17+
display: flex;
18+
justify-content: center;
19+
height: 100%;
20+
font-size: 14pt;
21+
background: var(--bg-color);
22+
color: var(--fg-color);
23+
font-family: "Source Code Pro", monospace;
2124
}
2225
</style>
2326

24-
{#if $error.error}
25-
<Alert>Error from server: {$error.error}</Alert>
26-
{/if}
27+
<div class="app">
28+
<CenterLayout>
29+
<Title />
2730

28-
<p>{$decorate.decoration || 'Waiting to be decorated...'}</p>
31+
{#if $error.error}
32+
<Text color="palevioletred" bold>
33+
Error from server:
34+
{$error.error}
35+
</Text>
36+
{/if}
2937

30-
<Board />
38+
<SceneRouter />
39+
</CenterLayout>
40+
</div>

‎web/src/Board.svelte‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎web/src/Cell.svelte‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎web/src/SceneRouter.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { createStore } from "./stores/localStorage";
3+
import Game from "./scenes/game/Game.svelte";
4+
import Nickname from "./scenes/nickname/Nickname.svelte";
5+
6+
const nickname = createStore("nickname");
7+
let pickingNickname = $nickname === "";
8+
9+
function changeNickname() {
10+
pickingNickname = true;
11+
}
12+
13+
function saveNickname(e: CustomEvent<string>) {
14+
nickname.set(e.detail);
15+
pickingNickname = false;
16+
}
17+
</script>
18+
19+
{#if pickingNickname}
20+
<Nickname value={$nickname} on:submit={saveNickname} />
21+
{:else}
22+
<Game nickname={$nickname} on:changeNickname={changeNickname} />
23+
{/if}

‎web/src/lib/Button.svelte‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script lang="ts">
2+
export let alignStart = false;
3+
export let alignEnd = false;
4+
</script>
5+
6+
<style lang="less">
7+
button {
8+
&:not(:first-child) {
9+
margin-block-start: var(--default-margin);
10+
}
11+
padding: 0;
12+
border: 0;
13+
outline: 0;
14+
font-family: inherit;
15+
font-size: inherit;
16+
cursor: pointer;
17+
color: inherit;
18+
background-color: inherit;
19+
20+
&:hover {
21+
background-color: var(--accent-color);
22+
color: var(--bg-color);
23+
}
24+
25+
&:active {
26+
background-color: var(--fg-color);
27+
}
28+
}
29+
30+
.alignEnd {
31+
align-self: flex-end;
32+
}
33+
34+
.alignStart {
35+
align-self: flex-start;
36+
}
37+
</style>
38+
39+
<button class:alignStart class:alignEnd on:click>[
40+
<slot />
41+
]</button>

‎web/src/lib/CenterLayout.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<style lang="less">
2+
.wrapper {
3+
display: flex;
4+
flex: 1;
5+
flex-direction: column;
6+
max-width: 1000px;
7+
margin-inline: var(--default-margin);
8+
}
9+
10+
.main {
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: center;
14+
align-items: center;
15+
flex: 4;
16+
}
17+
18+
.footer {
19+
flex: 1 0;
20+
}
21+
</style>
22+
23+
<div class="wrapper">
24+
<div class="main">
25+
<slot />
26+
</div>
27+
<div class="footer" />
28+
</div>

0 commit comments

Comments
 (0)