Netlify cloudflare pages migration (#40)

* add warning modal when using netlify url, link to cloudflare pages

* remove netlify from readme

README.md

@@ -1,15 +1,15 @@
 # Spelling Bee
 
 [![Build Status](https://github.com/ConorSheehan1/spelling-bee/workflows/ci/badge.svg)](https://github.com/ConorSheehan1/spelling-bee/actions/)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/7a6eaef1-46b9-4e37-8761-5efcafb5df47/deploy-status)](https://app.netlify.com/sites/spelling-b/deploys)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 An open source game inspired by the New York Times Spelling Bee Puzzle.
 New challenge every day. Create words using letters from the hive.
 
 ## Links
 
-https://spelling-b.netlify.app
+https://spelling-bee-free.pages.dev  
+~~https://spelling-b.netlify.app~~
 
 |                                              |                                                  |
 | -------------------------------------------- | ------------------------------------------------ |

dev.md

@@ -8,7 +8,7 @@
 
 npm install -g yarn
 
-# install dependencies 
+# install dependencies
 yarn install
 
 # dev server

src/App.vue

@@ -6,6 +6,7 @@ import Progress from "./components/Progress.vue";
 import YesterdaysAnswers from "./components/YesterdaysAnswers.vue";
 import Info from "./components/Info.vue";
 import GameWon from "./components/GameWon.vue";
+import MigrationModal from "./components/MigrationModal.vue";
 import allAnswers from "../data/allAnswers.json";
 import { useMainStore } from "./store";
 import { InfoFilled, Calendar, Sunny, Moon } from "@element-plus/icons-vue";
@@ -33,6 +34,13 @@ const showGameWonModal = computed(
   () => store.getProgressPercentage === 100 && gameWonModalShown.value === false
 );
 
+let showMigrationModal = ref(false);
+const checkUrl = () => {
+  showMigrationModal.value = window.location.href.includes(
+    "spelling-b.netlify.app"
+  );
+};
+
 const onOpenCorrectGuesses = () => {
   // without clearing timer, if user toggles correct guesses quickly, it will fade to background after timeout
   clearTimeout(timer);
@@ -45,7 +53,10 @@ const onCloseCorrectGuesses = () => {
   }, 2000);
 };
 
-onMounted(onToggleDarkMode);
+onMounted(() => {
+  onToggleDarkMode();
+  checkUrl();
+});
 
 store.startGame({ allAnswers });
 // TODO: remove i18n
@@ -56,6 +67,9 @@ store.startGame({ allAnswers });
 </script>
 
 <template>
+  <el-dialog v-model="showMigrationModal" title="URL Migration">
+    <MigrationModal />
+  </el-dialog>
   <el-dialog
     v-model="showGameWonModal"
     @closed="gameWonModalShown = true"

src/components/MigrationModal.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <p>
+      The
+      <a href="https://spelling-b.netlify.app"
+        >https://spelling-b.netlify.app</a
+      >
+      URL will stop working soon.
+    </p>
+    <p>
+      Please use
+      <a href="https://spelling-bee-free.pages.dev"
+        >https://spelling-bee-free.pages.dev</a
+      >
+      instead. Sorry for the short notice!
+    </p>
+  </div>
+</template>