Added game state to all components, renamed timeout to timeoutMilliseconds, removed score from savegame.

2026-01-18 03:50:24 +00:00 · 2020-12-21 15:48:20 +01:00
parent 639fcf8c6e
commit c4b914ccfd
11 changed files with 128 additions and 91 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,19 @@
 <template>
    <main>
        <Level :level="level" />
-        <Timer :time="time" />
-        <Buffer :slots="slots" :codes="codes" />
-        <Matrix :size="size" :matrix="matrix" />
+        <Timer />
+        <Buffer />
+        <Matrix />
    </main>
 </template>

 <script lang="ts">
-    import {defineComponent} from "vue";
+    import {defineComponent, provide, ref, readonly} from "vue";
    import Level from "./components/Level.vue";
    import Timer from "./components/Timer.vue";
    import Buffer from "./components/Buffer.vue";
    import Matrix from "./components/Matrix.vue";
+    import { Game } from "./game/Game";

    export default defineComponent({
        components: {
@@ -22,31 +23,36 @@
            Matrix
        },
        setup() {
-            const time = new Date();
-            time.setSeconds(time.getSeconds()+60);
+            const game = new Game({
+                matrix: [
+                    "AA", "BB", "CC",
+                    "DD", "AA", "BB",
+                    "CC", "DD", "AA",
+                ],
+                sequences: [
+                    ["AA", "CC", "DD"],
+                ],
+                maxBufferLength: 3,
+                timeoutMilliseconds: 60_000,
+            });
+            const level = ref(1);
+            const remainingMilliseconds = ref(game.remainingMilliseconds);
+            const timeoutMilliseconds = ref(game.timeoutMilliseconds);
+            const maxBufferLength = ref(game.maxBufferLength);
+            const buffer = ref(game.buffer);
+            const sequences = ref(game.sequences);
+            const size = ref(game.size);
+            const matrix = ref(game.matrix);
+            provide("remainingMilliseconds", readonly(remainingMilliseconds));
+            provide("timeoutMilliseconds", readonly(timeoutMilliseconds));
+            provide("maxBufferLength", readonly(maxBufferLength));
+            provide("buffer", readonly(buffer));
+            provide("sequences", readonly(sequences));
+            provide("size", readonly(size));
+            provide("matrix", readonly(matrix));

            return {
-                level: 5,
-                time,
-                slots: ["99", "E7", "AD", ""],
-                codes: [
-                    {
-                        code: ["", "E7", "AD", "BD"],
-                        points: 100
-                    },
-                    {
-                        code: ["99", "E7", "AD"],
-                        points: 50
-                    }
-                ],
-                size: 5,
-                matrix: [
-                    "99", "E7", "AD", "99", "BD",
-                    "99", "BD", "99", "E7", "AD",
-                    "AD", "E7", "BD", "AD", "99",
-                    "99", "99", "BD", "E7", "AD",
-                    "E7", "AD", "99", "BD", "99"
-                ]
+                level
            }
        }
    });
--- a/src/components/Buffer.vue
+++ b/src/components/Buffer.vue
@@ -2,31 +2,30 @@
    <div class="buffer">
        <h2>Buffer</h2>
        <div class="buffer-slots">
-            <div class="buffer-slots-slot buffer-slots-border" v-for="(slot, i) in slots" :key="i">
-                {{slot}}
-            </div>
-        </div>
-        <h2>Sequences</h2>
-        <div class="buffer-codes" v-for="(code, i) in codes" :key="i">
-            <div class="buffer-slots">
-                <div class="buffer-slots-slot" v-for="(digit, j) in code.code" :key="j">
-                    {{digit}}
-                </div>
-            </div>
-            <div class="buffer-points">
-                {{code.points}} Pts
+            <div class="buffer-slots-slot buffer-slots-border" v-for="(slot, i) in maxBufferLength" :key="i">
+                <span v-if="buffer.length > i">{{buffer[i]}}</span>
            </div>
        </div>
+        <Sequences />
    </div>
 </template>

 <script lang="ts">
-    import {defineComponent} from "vue";
+    import {defineComponent, inject} from "vue";
+    import Sequences from "./Sequences.vue";
    
    export default defineComponent({
-        props: {
-            slots: {type: Array, required: true},
-            codes: {type: Array, required: true}
+        components: {
+            Sequences
+        },
+        setup() {
+            const maxBufferLength = inject("maxBufferLength");
+            const buffer = inject("buffer");
+
+            return {
+                maxBufferLength,
+                buffer
+            }
        }
    });
 </script>
--- a/src/components/Matrix.vue
+++ b/src/components/Matrix.vue
@@ -3,19 +3,24 @@
        <h2>Code-Matrix</h2>
        <div class="matrix-row" v-for="i in size" :key="i">
            <div class="matrix-column" v-for="j in size" :key="j">
-                {{matrix[(i - 1)*5 + (j - 1)]}}
+                {{matrix[(i - 1)*size + (j - 1)]}}
            </div>
        </div>
    </div>
 </template>

 <script lang="ts">
-    import {defineComponent} from "vue";
+    import {defineComponent, inject} from "vue";
    
    export default defineComponent({
-        props: {
-            size: {type: Number, required: true},
-            matrix: {type: Array, required: true},
+        setup() {
+            const size = inject("size");
+            const matrix = inject("matrix");
+
+            return {
+                size,
+                matrix
+            }
        }
    });
 </script>
--- a/src/components/Sequences.vue
+++ b/src/components/Sequences.vue
@@ -0,0 +1,24 @@
+<template>
+    <h2>Sequences</h2>
+    <div class="buffer-codes" v-for="(sequence, i) in sequences" :key="i">
+        <div class="buffer-slots">
+            <div class="buffer-slots-slot" v-for="(digit, j) in sequence" :key="j">
+                {{digit}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent, inject} from "vue";
+    
+    export default defineComponent({
+        setup() {
+            const sequences = inject("sequences");
+
+            return {
+                sequences
+            }
+        }
+    });
+</script>
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -6,18 +6,16 @@
 </template>

 <script lang="ts">
-    import {defineComponent, ref, computed} from "vue";
+    import {defineComponent, computed, inject, Ref} from "vue";
    
    export default defineComponent({
-        props: {
-            time: {type: Object, required: true}
-        },
-        setup(props) {
-            const remainingTime = ref(60)
-            const progress = computed(() => remainingTime.value/60*100);
-            const countdown = computed(() => remainingTime.value.toFixed(2));
+        setup() {
+            const remainingTime = inject("remainingMilliseconds") as Ref<number>;
+            const timeoutMilliseconds = inject("timeoutMilliseconds") as Ref<number>;
+            const progress = computed(() => remainingTime.value/timeoutMilliseconds.value*100);
+            const countdown = computed(() => (remainingTime.value/1000).toFixed(2));

-            const updateTime = () => {
+            /*const updateTime = () => {
                remainingTime.value = Math.max(0, (props.time.getTime() - new Date().getTime()) / 1000);
                if (remainingTime.value > 0) {
                    requestAnimationFrame(() => {
@@ -28,7 +26,7 @@

            requestAnimationFrame(() => {
                updateTime();
-            });
+            });*/

            return {
                countdown,
--- a/src/game/Game.test.ts
+++ b/src/game/Game.test.ts
@@ -12,7 +12,7 @@ describe("GameState", () => {
    const unlimitedTime = 999 * 1000

    test("getting size works", () => {
-        expect((new Game({ matrix: ["00"], sequences: [["AA"]], maxBufferLength: unrestrictedBuffer, timeout: unlimitedTime })).size).toEqual(1)
+        expect((new Game({ matrix: ["00"], sequences: [["AA"]], maxBufferLength: unrestrictedBuffer, timeoutMilliseconds: unlimitedTime })).size).toEqual(1)
        expect((new Game({
            matrix: [
                "00", "01",
@@ -20,7 +20,7 @@ describe("GameState", () => {
            ],
            sequences: [],
            maxBufferLength: unrestrictedBuffer,
-            timeout: unlimitedTime,
+            timeoutMilliseconds: unlimitedTime,
        })).size).toEqual(2)
    });

@@ -29,14 +29,14 @@ describe("GameState", () => {
            matrix: threeByThreeMatrix,
            sequences: [["AA"]],
            maxBufferLength: unrestrictedBuffer,
-            timeout: unlimitedTime,
+            timeoutMilliseconds: unlimitedTime,
        });
        expect(game.getCell(0, 2)).toEqual({ value: "02", isUsed: false })
    });

    describe("picking", () => {
        test("starts with free pick", () => {
-            const game = new Game({ matrix: [], sequences: [["AA"]], maxBufferLength: 1, timeout: unlimitedTime });
+            const game = new Game({ matrix: [], sequences: [["AA"]], maxBufferLength: 1, timeoutMilliseconds: unlimitedTime });
            expect(game.state).toEqual({ selectionMode: SelectionMode.FreePick })
        });

@@ -45,7 +45,7 @@ describe("GameState", () => {
                matrix: threeByThreeMatrix,
                sequences: [["AA"]],
                maxBufferLength: unrestrictedBuffer,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            });
            game.pick(0, 0);
            expect(game.state).toEqual({ selectionMode: SelectionMode.RowPick, column: 0 });
@@ -60,7 +60,7 @@ describe("GameState", () => {
                matrix: threeByThreeMatrix,
                sequences: [["AA"]],
                maxBufferLength: unrestrictedBuffer,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            });
            game.pick(0, 0);
            expect(() => game.pick(0, 0)).toThrow();
@@ -71,7 +71,7 @@ describe("GameState", () => {
                matrix: threeByThreeMatrix,
                sequences: [],
                maxBufferLength: unrestrictedBuffer,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            });
            expect(() => game.pick(-1, 0)).toThrow();
            expect(() => game.pick(0, -1)).toThrow();
@@ -85,7 +85,7 @@ describe("GameState", () => {
                matrix: threeByThreeMatrix,
                sequences: [simpleSequence],
                maxBufferLength: unrestrictedBuffer,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            });
            expect(game.getSequences()).toEqual([{ sequence: simpleSequence, numberOfFulfilled: 0 }])
            game.pick(0, 0);
@@ -107,7 +107,7 @@ describe("GameState", () => {
                ],
                sequences: [sequence],
                maxBufferLength: unrestrictedBuffer,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            });
            expect(game.getSequences()).toEqual([{ sequence: sequence, numberOfFulfilled: 0 }])
            game.pick(0, 0);
@@ -133,7 +133,7 @@ describe("GameState", () => {
                ],
                sequences: [["AA", "BB", "CC"]],
                maxBufferLength: 3,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            })
            game.pick(0, 0)
            game.pick(2, 0)
@@ -151,7 +151,7 @@ describe("GameState", () => {
                ],
                sequences: [["AA", "BB", "CC"]],
                maxBufferLength: 3,
-                timeout: unlimitedTime,
+                timeoutMilliseconds: unlimitedTime,
            })
            game.pick(0, 0)
            game.pick(1, 0)
@@ -186,7 +186,7 @@ describe("GameState", () => {
                ],
                sequences: [["AA"]],
                maxBufferLength: 3,
-                timeout: 10_000,
+                timeoutMilliseconds: 10_000,
            })
            fakeTimeProgress(1_000)
            expect(game.remainingMilliseconds).toEqual(9_000)
@@ -208,7 +208,7 @@ describe("GameState", () => {
                ],
                sequences: [["AA"]],
                maxBufferLength: unrestrictedBuffer,
-                timeout: 10_000,
+                timeoutMilliseconds: 10_000,
            }
            )
            fakeTimeProgress(1_000)
--- a/src/game/Game.ts
+++ b/src/game/Game.ts
@@ -100,18 +100,17 @@ export class Game {
    constructor(private readonly config: GameConfiguration) {
        this.size = Math.sqrt(config.matrix.length)
        this.timeoutInterval = setTimeout(() => {
-                this.state = EndState.Lost
-                this.stopClock()
-            },
-            this.config.timeout)
+            this.state = EndState.Lost
+            this.stopClock()
+        }, this.config.timeoutMilliseconds)
        this.startTimeTimeStamp = Date.now()
    }

    get remainingMilliseconds(): number {
        if (this.endTimestamp) {
-            return this.config.timeout - (this.endTimestamp - this.startTimeTimeStamp)
+            return this.config.timeoutMilliseconds - (this.endTimestamp - this.startTimeTimeStamp)
        }
-        return this.config.timeout - (Date.now() - this.startTimeTimeStamp)
+        return this.config.timeoutMilliseconds - (Date.now() - this.startTimeTimeStamp)
    }

    getCell(row: number, column: number): Cell {
@@ -120,7 +119,7 @@ export class Game {
            isUsed: this.buffer.some(x =>
                x.positionInMatrixRow == row &&
                x.positionInMatrixColumn == column
-                ),
+            ),
        }
    }

@@ -218,4 +217,20 @@ export class Game {

        this.checkEndGame();
    }
+
+    get maxBufferLength(): number {
+        return this.config.maxBufferLength
+    }
+
+    get sequences(): string[][] {
+        return this.config.sequences
+    }
+
+    get matrix(): string[] {
+        return this.config.matrix
+    }
+
+    get timeoutMilliseconds(): number {
+        return this.config.timeoutMilliseconds
+    }
 }
--- a/src/game/GameConfiguration.ts
+++ b/src/game/GameConfiguration.ts
@@ -2,5 +2,5 @@ export default interface GameConfiguration {
    matrix: string[]
    sequences: string[][]
    maxBufferLength: number
-    timeout: number
+    timeoutMilliseconds: number
 }
--- a/src/game/SaveGame.test.ts
+++ b/src/game/SaveGame.test.ts
@@ -4,7 +4,6 @@ import { saveGameKey, saveGame, loadGame } from './SaveGame';
 describe("SaveGame", () => {
    const state = {
        level: 42,
-        score: 89,
    };

    beforeEach(() => {
--- a/src/game/SaveGame.ts
+++ b/src/game/SaveGame.ts
@@ -2,7 +2,6 @@ export const saveGameKey = "save_game";

 export interface SaveGame {
    level: number
-    score: number
 }

 export function saveGame(saveGame: SaveGame): void {
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -84,14 +84,6 @@ main {
            margin: 0 5px 0 0;
        }

-        &-points {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 64px;
-            height: 32px;
-        }
-
        &-border {
            border: 1px solid $yellow;
        }