Still refactoring

svgmap/src/components/map/Map.tsx

@@ -3,7 +3,7 @@ import react, { useState } from 'react';
 
 import './Map.css';
 import MouseHandler from './MouseHandler';
-import Viewport from './Viewport';
+import ResizeableBoard from './ResizeableBoard';
 
 interface MapProperties {
   height: number;
@@ -41,7 +41,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
           addZoom={addZoom}
           boardSize={boardSize}
         />
-        <Viewport boardSize={boardSize} shift={shift} zoom={zoom} />
+        <ResizeableBoard boardSize={boardSize} shift={shift} zoom={zoom} />
       </div>
     </IonContent>
   );

svgmap/src/components/map/Viewport.tsx

@@ -1,26 +0,0 @@
-import react from 'react';
-import TiledLayer from './TiledLayer';
-
-interface ViewportProperties {
-  boardSize: number;
-  shift: { x: number; y: number };
-  zoom: number;
-}
-
-const Viewport: react.FC<ViewportProperties> = (props: ViewportProperties) => {
-  return (
-    <svg height={props.boardSize} width={props.boardSize}>
-      <defs>
-        <TiledLayer id='tl16' zoomLevel={16} />
-      </defs>
-      <g
-        transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
-      >
-        <circle cx='50' cy='50' r='50' />
-        <use x={0} y={0} href='#tl16' />
-      </g>
-    </svg>
-  );
-};
-
-export default Viewport;