diff --git a/public/index.html b/public/index.html
index d3e294b..5d6d449 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,6 +27,22 @@
* {
user-select: none;
}
+ .instrTable td:first-child {
+ text-align: right;
+ padding-right: 1em;
+ }
+ .instrTable td:nth-child(2) {
+ font-family: sans-serif;
+ }
+ .keycap {
+ display: inline-block;
+ border: 1px solid #333;
+ border-radius: 5px;
+ padding: 0.25em 0.5em;
+ box-shadow: 1px 1px 2px #333;
+ font-family: monospace;
+ background-image: linear-gradient(white, #ddd);
+ }
diff --git a/src/app.tsx b/src/app.tsx
index d1d17f4..83d942b 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -51,13 +51,13 @@ export function App(props: {}): JSX.Element {
Wordlike
-
+
;
}
case 'game':
return ;
case 'instructions': {
- return ;
+ return ;
}
}
}
@@ -178,7 +178,7 @@ export function Game(props: GameProps): JSX.Element {
- ;
+
}
function render(ci: CanvasInfo, props: CanvasProps) {
diff --git a/src/core/state.ts b/src/core/state.ts
index 2a607f9..6154e5c 100644
--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -31,7 +31,7 @@ export type SceneState =
revision: number,
}
| { t: 'menu' }
- | { t: 'instructions' }
+ | { t: 'instructions', page: number }
;
export type State = {
diff --git a/src/ui/instructions.tsx b/src/ui/instructions.tsx
index 4b51444..56ad4cb 100644
--- a/src/ui/instructions.tsx
+++ b/src/ui/instructions.tsx
@@ -15,19 +15,25 @@ import { resizeView } from './ui-helpers';
import { CanvasInfo, useCanvas } from './use-canvas';
import { produce } from '../util/produce';
+export const NUM_PAGES = 2;
+
export type ForRenderState = GameState;
type CanvasProps = {
main: ForRenderState,
};
-export function Instructions(props: { dispatch: Dispatch }): JSX.Element {
- const { dispatch } = props;
+export function Instructions(props: { dispatch: Dispatch, page: number }): JSX.Element {
+ const { dispatch, page } = props;
function mouseDownListener(e: MouseEvent) {
if (DEBUG.instructions) {
console.log(relpos(e, mc.current!.c));
}
else {
- dispatch({ t: 'setSceneState', state: { t: 'menu' } });
+ const nextPage = page + 1;
+ if (nextPage >= NUM_PAGES)
+ dispatch({ t: 'setSceneState', state: { t: 'menu' } });
+ else
+ dispatch({ t: 'setSceneState', state: { t: 'instructions', page: nextPage } });
}
e.preventDefault();
e.stopPropagation();
@@ -47,11 +53,42 @@ export function Instructions(props: { dispatch: Dispatch }): JSX.Element {
dispatch({ t: 'resize', vd: resizeView(ci.c) });
});
- return
-
-
;
+ if (page == 0) {
+ return
+
+
;
+ }
+ else if (page == 1) {
+ const divStyle: React.CSSProperties = {
+ backgroundColor: 'white',
+ padding: '2em',
+ };
+ return Shortcuts
+
+
+ A | Drop first tile from hand where mouse is |
+ K | Delete tile (costs one point) |
+ Esc | Pointer Tool |
+ V | Draw Vowel (if bonus available) |
+ C | Draw Consonant (if bonus available) |
+ X | Copy Tool |
+ D | Dynamite Tool |
+ B | Bomb Tool |
+ Shift D | Debug |
+ ` or / | Flip orientation of dragged tile group |
+ space | Draw Tile |
+ mouse wheel | Zoom in/out |
+ Shift drag | Add to selection |
+ Ctrl drag | Subtract from selection |
+ Shift Ctrl drag | Intersect with selection |
+
+
;
+ }
+ else {
+ throw new Error(`undefined instructions page ${page}`);
+ }
}
function render(ci: CanvasInfo, props: CanvasProps) {