Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new Design

Browse Source
This commit is contained in:
silas 2021-04-24 12:40:19 +02:00
parent 7a092da1d2
commit d27f9e5683
12 changed files with 2236 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1974
orga/level_data.sql Normal file
View File

File diff suppressed because it is too large Load Diff

6
src/client/html/fragment/settings.html
View File

@ -15,8 +15,12 @@
<input type="checkbox" class="setting" id="play-music" name='play-music' value="1"
data-default="1">
<span class="slider"></span>
</span>
</span>
</label>
<div class='grid-x setting-row' id='tutorial-button'>
<span class='columns small-6 translation'>tutorial</span>
<span class='columns small-6 text-right translation'>&gt;</span>
</div>
<div class='grid-x setting-row' id='credits-button'>
<span class='columns small-6 translation' >credits</span>
<span class='columns small-6 text-right translation'>&gt;</span>

39
src/client/html/sites/tutorialSite.html Normal file
View File

@ -0,0 +1,39 @@
<article id=tutorial-site>
<section>
<div id='segment-leaf-template' class='segment segment-leaf'>
<div class='leaf-element'></div>
</div>
<div id='segment-parent-template' class='segment segment-parent'>
<div class='child-container'></div>
</div>
<div id='segment-row-template' class='segment segment-row'>
<div class='child-container'></div>
</div>
<div id='segment-column-template' class='segment segment-column'>
<div class='child-container'></div>
</div>
<div id='segment-triangle-template' class='segment segment-triangle'>
<div class='child-container'></div>
</div>
</section>
<section id="tutorial-1">
<div class="tutorial-text translation">tutorial-1</div>
<div class="level-container"></div>
</section>
<section id="tutorial-2">
<div class="tutorial-text translation">tutorial-2</div>
<div class="tutorial-wrapper">
<button class="help-action">
<img src="../../img/help.png" class="action-image">
</button>
<div class="level-container"></div>
</div>
</section>
<section id="tutorial-3">
<div class="tutorial-text translation">tutorial-3</div>
<div class="tutorial-wrapper">
<div id='tutorial-pointer'></div>
<div class="level-container"></div>
</div>
</section>
</article>

5
src/client/js/Fragment/WordRotatorSettingFragment.ts
View File

@ -1,3 +1,5 @@
import {TutorialSite} from "../Sites/TutorialSite";
const view = require("../../html/fragment/settings.html");
import {CreditsSite} from "../Sites/CreditsSite";
@ -65,6 +67,9 @@ export class WordRotatorSettingFragment extends AbstractFragment {
e.preventDefault();
});
this.findBy("#tutorial-button").addEventListener("click", () => {
this.getSite().startSite(TutorialSite);
});
this.findBy("#credits-button").addEventListener("click", () => {
this.getSite().startSite(CreditsSite);
});

4
src/client/js/Sites/LevelSite.ts
View File

@ -232,8 +232,8 @@ export class LevelSite extends MenuSite {
return this.nextLevel();
}
level.getWonPromise().then(() => {
this.levelWon(level);
level.getWonPromise().then(async () => {
await this.levelWon(level);
});
level.createSegments();

129
src/client/js/Sites/TutorialSite.ts
View File

@ -1,5 +1,132 @@
import {MenuSite} from "cordova-sites/dist/client";
import {Matomo, MenuSite, NativeStoragePromise, ScaleHelper, Toast} from "cordova-sites/dist/client";
import {App} from "cordova-sites/dist/client/js/App";
import {LevelPlayed} from "../model/LevelPlayed";
import {Helper} from "js-helper/dist/shared/Helper";
import {LevelHelper} from "../wordrotator/Level/LevelHelper";
import {ViewHelper} from "js-helper/dist/client/ViewHelper";
import {LevelData} from "../../../shared/model/LevelData";
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
import {LevelSite} from "./LevelSite";
import {SyncJob} from "cordova-sites-easy-sync/dist/client";
import {Level} from "../wordrotator/Level/Level";
const view = require("../../html/sites/tutorialSite.html");
export class TutorialSite extends MenuSite {
private templateContainer: TemplateContainer;
constructor(siteManager: any) {
super(siteManager, view);
}
async onConstruct(constructParameters: any): Promise<any[]> {
const res = super.onConstruct(constructParameters);
await Promise.race([new SyncJob().sync([LevelData]).catch(e => console.error(e)), new Promise<void>(async resolve => {
let levelData = await LevelData.findById(LevelSite.TUTORIAL.FIRST_LEVEL);
if (levelData !== null) {
resolve();
}
})]);
return res;
}
async onViewLoaded(): Promise<any[]> {
const res = super.onViewLoaded();
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
let parentSegmentTemplate = this.findBy("#segment-parent-template");
let rowSegmentTemplate = this.findBy("#segment-row-template");
let triangleTemplate = this.findBy("#segment-triangle-template");
let columnTemplate = this.findBy("#segment-column-template");
leafSegmentTemplate.removeAttribute("id");
parentSegmentTemplate.removeAttribute("id");
rowSegmentTemplate.removeAttribute("id");
triangleTemplate.removeAttribute("id");
columnTemplate.removeAttribute("id");
leafSegmentTemplate.remove();
parentSegmentTemplate.remove();
rowSegmentTemplate.remove();
triangleTemplate.remove();
columnTemplate.remove();
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate, columnTemplate);
const tutorial1Container = this.findBy("#tutorial-1 .level-container");
const tutorial2Container = this.findBy("#tutorial-2 .level-container");
const tutorial3Container = this.findBy("#tutorial-3 .level-container");
const level1 = await this.loadLevel(LevelSite.TUTORIAL.FIRST_LEVEL);
const level2 = await this.loadLevel(LevelSite.TUTORIAL.SECOND_LEVEL);
const level3 = await this.loadLevel(LevelSite.TUTORIAL.BIG_SEGMENT_LEVEL);
level1.setSaveAsCurrentAfterCheckWon(false);
level2.setSaveAsCurrentAfterCheckWon(false);
level3.setSaveAsCurrentAfterCheckWon(false);
tutorial1Container.appendChild(level1.getRootSegment().getElement());
tutorial2Container.appendChild(level2.getRootSegment().getElement());
tutorial3Container.appendChild(level3.getRootSegment().getElement());
let pointer = this.findBy("#tutorial-pointer");
pointer.remove();
let rotatableSegments = level3.getRotatableSegments();
let pointerSegment = rotatableSegments[2];
pointerSegment.element.appendChild(pointer);
this.find(".help-action").addEventListener("click", () => {
TutorialSite.help(level2);
})
return res;
}
static async help(level: Level) {
let rotatables = level.getRotatableSegments();
rotatables = rotatables.filter((segment) => {
return (!segment.isSolved(false));
});
if (rotatables.length === 0){
return;
}
let index = Math.floor(Math.random() * rotatables.length);
let segmentToHelp = rotatables[index];
while (segmentToHelp.rotation !== 0) {
segmentToHelp.rotate();
}
segmentToHelp.setIsRotatable(false);
}
async loadLevel(id) {
try {
let levelData = await LevelData.findById(id);
const level = LevelHelper.inflateLevel(levelData, this.templateContainer);
level.getWonPromise().then(() => {
console.log("level won!");
new Toast("you solved the tutorial level!").show();
//TODO
// this.levelWon(level);
});
level.createSegments();
level.getRootSegment()._updateElement();
return level;
} catch (e) {
console.log("Fehler!");
console.error(e);
// this.startEndSite();
return null;
}
}
}
App.addInitialization(app => {
app.addDeepLink("tutorial", TutorialSite);
})

4
src/client/js/model/LevelPlayed.ts
View File

@ -2,7 +2,7 @@ import {BaseModel} from "cordova-sites-database/dist/BaseModel";
import {BaseDatabase} from "cordova-sites-database/dist/cordova-sites-database";
import {LevelData} from "../../../shared/model/LevelData";
import {Helper} from "js-helper/dist/shared/Helper";
import {QueryBuilder, SelectQueryBuilder} from "typeorm";
import {SelectQueryBuilder} from "typeorm";
export class LevelPlayed extends BaseModel {
@ -21,7 +21,7 @@ export class LevelPlayed extends BaseModel {
target: LevelData.getSchemaName(),
type: "one-to-one",
joinColumn: true,
cascade: true,
// cascade: true,
};
return relations;
}

16
src/client/js/wordrotator/Level/Level.js
View File

@ -16,6 +16,8 @@ export class Level {
this.hasWon = false;
this.id = null;
this.saveAsCurrentAfterCheckWon = true;
this.wonResolver = null;
this.giveUpResolver = null;
@ -122,10 +124,16 @@ export class Level {
});
return true;
}
this.saveAsCurrentLevel();
if (this.saveAsCurrentAfterCheckWon) {
this.saveAsCurrentLevel();
}
return false;
}
setSaveAsCurrentAfterCheckWon(shouldSave){
this.saveAsCurrentAfterCheckWon = (shouldSave === true);
}
getWonPromise() {
return this.wonPromise;
}
@ -182,13 +190,13 @@ export class Level {
const leafs = this.getLeafSegments();
if (leafs.length > 0) {
const index = Random.getIntRandom(leafs.length-1);
const index = Random.getIntRandom(leafs.length - 1);
const leaf = leafs[index];
leaf.getElement().classList.add("shake");
setTimeout(() => {
leaf.getElement().classList.remove("shake");
}, Random.getIntRandom(350)+650);
}, Random.getIntRandom(350) + 650);
}
this._shakeLeafsTimeout = setTimeout(() => {
this.shakeLeafs();
@ -215,4 +223,4 @@ export class Level {
}
return leafs;
}
}
}

11
src/client/sass/_themeBlue.scss
View File

@ -85,4 +85,15 @@ body.theme-blue{
}
}
#site > :not(.won) .segment.locked {
//background-color: $accentColor;
//background-color: $secondaryColor;
background-color: #00000030;
//background-color: #81acb5;
}
#tutorial-pointer{
background: $accentColor;
}
}

47
src/client/sass/_tutorial.scss
View File

@ -23,11 +23,13 @@
.tutorial-blanket {
display: block;
}
.tutorial-text {
color: white;
font-size: 1.5rem;
display: flex;
transition: none !important;
* {
transition: none !important;
}
@ -38,10 +40,12 @@
.segment-row {
position: inherit;
}
.segment-parent:nth-child(3), .segment-parent:nth-child(3).rotating {
z-index: 9900 !important;
}
}
.tutorial-text .step-1 {
display: initial;
z-index: 9900 !important;
@ -53,6 +57,7 @@
#level {
z-index: 9900 !important;
}
.tutorial-text .step-2 {
display: initial;
z-index: 9900 !important;
@ -67,7 +72,7 @@
position: relative;
}
.top-bar{
.top-bar {
z-index: 9900 !important;
}
@ -82,6 +87,7 @@
box-shadow: 0 0 10px 5px #fff;
}
}
&.step-4 {
.tutorial-text .step-4 {
display: initial;
@ -92,9 +98,11 @@
#level {
.segment-row {
position: inherit;
> .child-container {
.segment-parent.layer-2, > .segment-parent.layer-2.rotating {
z-index: 9900 !important;
#tutorial-pointer {
width: 0.6em;
height: 0.6em;
@ -118,4 +126,39 @@
}
}
}
}
}
#tutorial-site {
display: flex;
justify-content: space-evenly;
flex-direction: column;
#tutorial-1, #tutorial-2, #tutorial-3{
text-align: center;
margin-top: 0.7rem;
margin-bottom: 0.5rem;
}
#tutorial-2 .help-action{
width: 100%;
margin-bottom: 0.3rem;
}
#tutorial-3 .tutorial-wrapper{
position: relative;
#tutorial-pointer {
width: 0.6em;
height: 0.6em;
border-radius: 50%;
left: 75%;
position: absolute;
top: 75%;
z-index: 1;
transform: translate(-50%, -50%);
animation: tutorialPointer 2s infinite;
pointer-events: none;
}
}
}

6
src/client/sass/index.scss
View File

@ -184,6 +184,12 @@ a.hidden-link {
overflow: auto;
width: 100%;
> .grid-x{
overflow: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#main-content {
padding-top: 0;
padding-bottom: 0;

8
src/client/translations/de.json
View File

@ -49,5 +49,11 @@
"message": "Nachricht",
"send": "Senden",
"the message was sent": "Die Nachricht wurde gesendet.",
"wr": "WR"
"wr": "WR",
"tutorial": "Spielregeln",
"tutorial-1": "Klicke auf ein Feld, um dieses rotieren zu lassen! Um zu gewinnen, drehe die Segmente so, dass du zwei Wörter lesen kannst.",
"tutorial-2": "Die Hilfe löst ein Segment, kostet aber 25 Münzen. Du erhältst 5 Münzen pro gewonnenes Level.",
"tutorial-3": "Große Segmente drehst du, indem du diese ziehst.",
"you solved the tutorial level!": "Du hast das Tutorial-Level gelöst!"
}