fix file access bugs

README.md

@@ -2,6 +2,9 @@
 This is a Settlers 4 (Siedler 4) Remake (it will be :-) ) written in JavaScript (Typescript) so 
   it can be run in your browser.
 
+<p style="text-align:center" align="center">
+<a href="https://settlers.hmilch.net/">[explore the game]</a>
+</p>
 
 
 # How to compile:

src/app.ts

@@ -2,16 +2,25 @@ import { Options, Vue } from 'vue-class-component';
 import { FileManager } from './utilities/file-manager';
 import { FileListProvider } from './utilities/file-list-provider';
 import { LibFileProvider } from './utilities/lib-file-provider';
+import { LogHandler } from './utilities/log-handler';
 
 @Options({
     name: 'App'
 })
 export default class App extends Vue {
-    protected fileManager: FileManager = new FileManager();
+    private static log = new LogHandler('App');
+    protected fileManager = new FileManager();
 
     public async mounted(): Promise<void> {
-        this.fileManager = new FileManager();
-        await this.fileManager.addSource(new FileListProvider(process.env.BASE_URL));
-        await this.fileManager.registerProxy(new LibFileProvider());
+        App.log.debug('Starting...');
+
+        const fileManager = new FileManager();
+
+        await fileManager.addSource(new FileListProvider(process.env.BASE_URL));
+        await fileManager.registerProxy(new LibFileProvider());
+
+        this.fileManager = fileManager;
+
+        App.log.debug('Read FileManager sources done!');
     }
 }

src/components/file-browser.vue

@@ -1,7 +1,7 @@
 <template>
   <select @change="selectFile" v-model="selectedFile">
-    <option v-for="file of files" :key="file.name" :value="file">
-      {{file.name}}
+    <option v-for="file of files" :key="file.path" :value="file">
+      {{file.path}}
     </option>
   </select>
 </template>

src/game/renderer/gh-texture.ts

@@ -21,7 +21,7 @@ export class GhTexture extends ShaderTexture {
     }
 
     public async load(gl: WebGLRenderingContext): Promise<void> {
-        const imgFile = await this.fileManager.readFile('gfx/2.gh6', false);
+        const imgFile = await this.fileManager.readFile('2.gh6', true);
         if (!imgFile) {
             GhTexture.log.error('Unable to load texture file "2.gh6"');
             return;

src/game/renderer/renderer-base.ts

@@ -1,11 +1,9 @@
 import { ShaderProgram } from './shader-program';
-import { TextureManager } from './texture-manager';
 
 export class RendererBase {
     protected shaderProgram: ShaderProgram = new ShaderProgram();
 
     public initShader(gl: WebGLRenderingContext, vertCode: string, fragCode: string): void {
-
         this.shaderProgram.init(gl);
 
         this.shaderProgram.attachShaders(vertCode, fragCode);

src/resources/lib/lib-file-header.ts

@@ -28,11 +28,11 @@ export class LibFileHeader {
         constructor(data: BinaryReader, offset: number) {
             this.reader = new BinaryReader(data);
 
-            if (!this.readHeader(this.reader, offset)) {
+            Object.seal(this);
 
+            if (!this.readHeader(this.reader, offset)) {
+                this.length = 0;
             }
-
-            Object.seal(this);
         }
 
         public getPathList(): PathList {

src/resources/lib/lib-file-reader.ts

@@ -6,102 +6,102 @@ import { PathList } from './path-list';
 
 /** provides access to a settlers 4 lib file */
 export class LibFileReader {
-                private log: LogHandler = new LogHandler('LibFileReader');
-                private fileInfos: LibFileItem[] = [];
-                private pathList?: PathList;
-                private reader: BinaryReader
-
-                constructor(data: BinaryReader) {
-                    this.reader = data;
-
-                    this.processFile(data);
-
-                    Object.seal(this);
-                }
-
-                public getFileCount() : number {
-                    return (this.fileInfos) ? this.fileInfos.length : 0;
-                }
-
-                /** return the checksum for a given file index */
-                public getChecksum(fileIndex: number): number {
-                    if ((fileIndex < 0) || (fileIndex >= this.fileInfos.length)) {
-                        return -1;
-                    }
-
-                    return this.fileInfos[fileIndex].checksum;
-                }
-
-                /** return the full path name for a given file index */
-                public getFullPathName(fileIndex: number): string {
-                    if ((fileIndex < 0) || (fileIndex >= this.fileInfos.length)) {
-                        return '';
-                    }
-                    if (!this.pathList) {
-                        return '';
-                    }
-
-                    const info = this.fileInfos[fileIndex];
-
-                    return this.pathList.getPath(info.pathIndex) + '/' + info.fileName;
-                }
-
-                /** return the data for a given file */
-                public getFileInfo(fileIndex:number): LibFileItem {
-                    return this.fileInfos[fileIndex];
-                }
-
-                /** return the data for a given file */
-                public getFileInfoByFileName(pathName: string, fileName: string, quiet:boolean): LibFileItem | null {
-                    const index = this.getFileIndexFromFileName(pathName, fileName);
-                    if (index < 0) {
-                        if (!quiet) {
-                            this.log.error('File not found: ' + pathName + ' / ' + fileName);
-                        }
-                        return null;
-                    }
-
-                    return this.getFileInfo(index);
-                }
-
-                /** find the index in this.fileInfos for a given path / file name */
-                private getFileIndexFromFileName(pathName: string, filename: string): number {
-                    if (!this.pathList) {
-                        return -1;
-                    }
-
-                    const pathIndex = this.pathList.findPathIndex(pathName);
-                    if (pathIndex < 0) {
-                        return -1;
-                    }
-
-                    const file = filename.toUpperCase();
-                    for (let i = 0; i < this.fileInfos.length; i++) {
-                        if ((this.fileInfos[i].pathIndex === pathIndex) && (this.fileInfos[i].fileName.toUpperCase() === file)) {
-                            return i;
-                        }
-                    }
-
-                    return -1;
-                }
-
-                /** read the meta data of the file */
-                private processFile(data: BinaryReader) {
-                    const offset = data.readIntBE(data.length - 4);
-
-                    const header = new LibFileHeader(data, offset);
-                    if (header.fileNameCount <= 0) {
-                        return;
-                    }
-
-                    this.log.debug('Header-Info: ' + header);
-
-                    this.pathList = header.getPathList();
-                    this.fileInfos = header.getFileInfo();
-                    /*
-                        for (let i = 0; i < this.fileInfos.length; i++) {
-                                console.log('' + this.fileInfos[i]);
-                        }
-                        */
-                }
+    private log: LogHandler = new LogHandler('LibFileReader');
+    private fileInfos: LibFileItem[] = [];
+    private pathList?: PathList;
+    private reader: BinaryReader
+
+    constructor(data: BinaryReader) {
+        this.reader = data;
+
+        this.processFile(data);
+
+        Object.seal(this);
+    }
+
+    public getFileCount() : number {
+        return (this.fileInfos) ? this.fileInfos.length : 0;
+    }
+
+    /** return the checksum for a given file index */
+    public getChecksum(fileIndex: number): number {
+        if ((fileIndex < 0) || (fileIndex >= this.fileInfos.length)) {
+            return -1;
+        }
+
+        return this.fileInfos[fileIndex].checksum;
+    }
+
+    /** return the full path name for a given file index */
+    public getFullPathName(fileIndex: number): string {
+        if ((fileIndex < 0) || (fileIndex >= this.fileInfos.length)) {
+            return '';
+        }
+        if (!this.pathList) {
+            return '';
+        }
+
+        const info = this.fileInfos[fileIndex];
+
+        return this.pathList.getPath(info.pathIndex) + '/' + info.fileName;
+    }
+
+    /** return the data for a given file */
+    public getFileInfo(fileIndex:number): LibFileItem {
+        return this.fileInfos[fileIndex];
+    }
+
+    /** return the data for a given file */
+    public getFileInfoByFileName(pathName: string, fileName: string, quiet:boolean): LibFileItem | null {
+        const index = this.getFileIndexFromFileName(pathName, fileName);
+        if (index < 0) {
+            if (!quiet) {
+                this.log.error('File not found: ' + pathName + ' / ' + fileName);
+            }
+            return null;
+        }
+
+        return this.getFileInfo(index);
+    }
+
+    /** find the index in this.fileInfos for a given path / file name */
+    private getFileIndexFromFileName(pathName: string, filename: string): number {
+        if (!this.pathList) {
+            return -1;
+        }
+
+        const pathIndex = this.pathList.findPathIndex(pathName);
+        if (pathIndex < 0) {
+            return -1;
+        }
+
+        const file = filename.toUpperCase();
+        for (let i = 0; i < this.fileInfos.length; i++) {
+            if ((this.fileInfos[i].pathIndex === pathIndex) && (this.fileInfos[i].fileName.toUpperCase() === file)) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    /** read the meta data of the file */
+    private processFile(data: BinaryReader) {
+        const offset = data.readIntBE(data.length - 4);
+
+        const header = new LibFileHeader(data, offset);
+        if (header.fileNameCount <= 0) {
+            return;
+        }
+
+        this.log.debug('Header-Info: ' + header);
+
+        this.pathList = header.getPathList();
+        this.fileInfos = header.getFileInfo();
+        /*
+            for (let i = 0; i < this.fileInfos.length; i++) {
+                    console.log('' + this.fileInfos[i]);
+            }
+            */
+    }
 }

src/utilities/file-list-provider.ts

@@ -5,18 +5,18 @@ import { Path } from './path';
 
 class FileListFile implements IFileSource {
     public name: string;
-    private baseUrl: string;
+    public path: string;
 
-    constructor(fileName: string, baseUrl: string) {
-        this.name = fileName;
-        this.baseUrl = baseUrl;
+    constructor(path: string) {
+        this.name = Path.getFileName(path);
+        this.path = path;
 
         Object.seal(this);
     }
 
     public readBinary(): Promise<BinaryReader> {
         const fileProvider = new RemoteFile();
-        return fileProvider.loadBinary(this.name);
+        return fileProvider.loadBinary(this.path);
     }
 }
 
@@ -30,7 +30,7 @@ export class FileListProvider implements IFileProvider {
     public async readFiles(): Promise<IFileSource[]> {
         const fileNames = await this.loadFileList();
 
-        return fileNames.map((f) => new FileListFile(f, this.baseUrl));
+        return fileNames.map((f) => new FileListFile(f));
     }
 
     private async loadFileList() {

src/utilities/file-manager.ts

@@ -3,6 +3,7 @@ import { BinaryReader } from '../resources/file/binary-reader';
 
 export interface IFileSource {
     name: string;
+    path: string;
     readBinary(): Promise<BinaryReader>;
 }
 
@@ -24,10 +25,10 @@ export class FileManager {
         Object.seal(this);
     }
 
-    public async registerProxy(proxy: IFileProxyProvider) {
+    public async registerProxy(proxy: IFileProxyProvider): Promise<void> {
         // send all previous added files to proxy
         for (const f of this.files) {
-            this.callProxyie(proxy, f);
+            await this.callProxyie(proxy, f);
         }
 
         // register proxy
@@ -123,7 +124,7 @@ export class FileManager {
     public filter(filterStr?: string): IFileSource[] {
         const filterArray = (filterStr ?? '')
             .split('|')
-            .map((f) => Path.fixPath(f).toUpperCase());
+            .map((f) => Path.fixPath(f));
 
         return this.files
             .filter((f) => filterArray

src/utilities/lib-file-provider.ts

@@ -10,6 +10,10 @@ class LibFileFile implements IFileSource {
     private baseLibPath: string;
 
     public get name(): string {
+        return this.libFileItem.fileName;
+    }
+
+    public get path(): string {
         return Path.combine(this.baseLibPath, this.libFileItem.getFullName());
     }
 

src/utilities/local-file-provider.ts

@@ -8,6 +8,10 @@ class LocalFileFile implements IFileSource {
         return this.file.name;
     }
 
+    public get path(): string {
+        return (this.file as any).webkitRelativePath ?? this.file.name;
+    }
+
     constructor(file: File) {
         this.file = file;
         Object.seal(this);

src/views/gfx-view.ts

@@ -49,7 +49,7 @@ export default class GfxView extends Vue {
             return;
         }
 
-        const fileId = Path.combine('gfx', Path.getFileNameWithoutExtension(file.name));
+        const fileId = Path.getFileNameWithoutExtension(file.name);
 
         this.doLoad(fileId);
     }
@@ -74,7 +74,7 @@ export default class GfxView extends Vue {
         fileNameList.dil = fileId + '.dil';
         fileNameList.jil = fileId + '.jil';
 
-        const files = await this.fileManager.readFiles(fileNameList, false);
+        const files = await this.fileManager.readFiles(fileNameList, true);
 
         const gfxIndexList = new GilFileReader(files.gil);
         const paletteIndexList = new PilFileReader(files.paletteIndex);

src/views/gh-view.vue

@@ -4,7 +4,7 @@
     <file-browser
       :fileManager="fileManager"
       @select="onFileSelect"
-      filter=".gh|.gl"
+      filter=".gh6|.gl6|.gh5|.gl5"
       class="browser"
     />